/*
Theme Name: exPEERt
Theme URI: https://expeert.de
Author: exPEERt GmbH
Author URI: https://expeert.de
Description: Custom WordPress theme for exPEERt - Jugendhilfe & Familienunterstützung
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: expeert
Tags: full-site-editing, block-patterns, wide-blocks
*/

/* ==========================================================================
   GLOBAL MOBILE OVERFLOW FIX
   ========================================================================== */

*, *::before, *::after {
	box-sizing: border-box;
}

html {
	overflow-x: hidden;
}

body {
	overflow-x: hidden;
	width: 100%;
	max-width: 100vw;
}

img, video, iframe {
	max-width: 100%;
	height: auto;
}

/* ==========================================================================
   ROOT CONTAINER RESETS
   ========================================================================== */

.wp-site-blocks {
	padding: 0 !important;
	margin: 0 !important;
	max-width: 100% !important;
	overflow-x: hidden;
}

.wp-site-blocks > * {
	margin-block-start: 0 !important;
}

.wp-site-blocks > .wp-block-template-part {
	max-width: 100% !important;
}

/* WordPress block overflow fix */
.wp-block-group,
.wp-block-columns,
.wp-block-column,
.wp-block-cover {
	max-width: 100%;
}

/* ==========================================================================
   TOP CONTACT BAR - Matches React exactly
   ========================================================================== */

.top-bar {
	border-bottom: 1px solid #e5e7eb; /* border-gray-200 */
	padding: 6px 0; /* py-1.5 */
	background-color: #f8f8f8; /* bg-secondary-50 - same as body */
}

.top-bar-inner {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	padding: 0 16px; /* px-4 */
	display: flex;
	align-items: center;
	justify-content: center; /* justify-center on mobile */
	gap: 12px; /* smaller gap on mobile */
	flex-wrap: wrap;
}

/* Tailwind container responsive widths */
@media (min-width: 640px) {
	.top-bar-inner {
		max-width: 640px;
		gap: 16px;
		flex-wrap: nowrap;
	}
}

@media (min-width: 768px) {
	.top-bar-inner {
		max-width: 768px;
		justify-content: flex-end; /* md:justify-end */
		gap: 24px; /* md:gap-6 */
	}
}

@media (min-width: 1024px) {
	.top-bar-inner {
		max-width: 1024px;
	}
}

@media (min-width: 1280px) {
	.top-bar-inner {
		max-width: 1280px;
	}
}

@media (min-width: 1536px) {
	.top-bar-inner {
		max-width: 1536px;
	}
}

.top-bar a {
	display: flex;
	align-items: center;
	gap: 6px; /* gap-1.5 */
	color: #83838b; /* text-secondary-400 */
	font-size: 14px; /* increased from 12px */
	text-decoration: none;
	transition: color 0.2s; /* transition-colors */
	white-space: nowrap;
}

.top-bar a:hover {
	color: #4c4c55; /* hover:text-secondary-600 */
}

.top-bar svg {
	width: 14px; /* w-3.5 */
	height: 14px; /* h-3.5 */
	flex-shrink: 0;
}

.top-bar-sep {
	color: #d1d5db; /* text-gray-300 */
	font-size: 14px;
	display: none; /* hidden on mobile */
}

@media (min-width: 768px) {
	.top-bar-sep {
		display: inline; /* md:inline */
	}
}

/* ==========================================================================
   MAIN HEADER - Matches React exactly
   ========================================================================== */

.main-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(249, 249, 249, 0.95); /* bg-[#f9f9f9]/95 */
	backdrop-filter: blur(4px); /* backdrop-blur-sm */
	-webkit-backdrop-filter: blur(4px);
	border-bottom: 1px solid #f3f4f6; /* border-gray-100 */
	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); /* shadow-sm */
	/* NO overflow:hidden - it breaks mobile menu */
}

.header-inner {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	padding: 0 16px; /* px-4 */
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 80px; /* h-20 */
}

/* Tailwind container responsive widths */
@media (min-width: 640px) {
	.header-inner {
		max-width: 640px;
	}
}

@media (min-width: 768px) {
	.header-inner {
		max-width: 768px;
	}
}

@media (min-width: 1024px) {
	.header-inner {
		max-width: 1024px;
	}
}

@media (min-width: 1280px) {
	.header-inner {
		max-width: 1280px;
	}
}

@media (min-width: 1536px) {
	.header-inner {
		max-width: 1536px;
	}
}

.header-logo {
	display: flex;
	align-items: center;
	gap: 8px; /* gap-2 */
	flex-shrink: 0;
}

.header-logo img {
	height: 64px; /* increased from 56px */
	width: auto;
	object-fit: contain;
}

/* ==========================================================================
   DESKTOP NAV - Matches React exactly
   ========================================================================== */

.desktop-nav {
	display: none; /* hidden by default */
	align-items: center;
	gap: 2px; /* reduced gap */
}

@media (min-width: 1024px) {
	.desktop-nav {
		display: flex; /* lg:flex */
	}
}

.desktop-nav a {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* consistent Inter font */
	font-size: 16px; /* text-base */
	letter-spacing: 0.01em; /* tighter tracking */
	padding: 8px 8px; /* reduced horizontal padding */
	color: #4c4c55; /* text-secondary-600 */
	text-decoration: none;
	transition: all 0.2s; /* transition-all duration-200 */
}

.desktop-nav a:hover {
	color: #879e74; /* hover:text-primary-600 */
}

.desktop-nav a.active {
	color: #788c67; /* text-primary-700 */
	border-bottom: 2px solid #96af81; /* border-b-2 border-primary-500 */
}

/* ==========================================================================
   MOBILE MENU BUTTON - Matches React exactly
   ========================================================================== */

.mobile-menu-btn {
	display: flex;
	padding: 8px; /* p-2 */
	color: #4c4c55; /* text-secondary-600 */
	background: none;
	border: none;
	cursor: pointer;
	flex-shrink: 0;
}

@media (min-width: 1024px) {
	.mobile-menu-btn {
		display: none; /* lg:hidden */
	}
}

.mobile-menu-btn svg {
	width: 24px; /* w-6 */
	height: 24px; /* h-6 */
}

/* Hamburger icon toggle */
.mobile-menu-btn .menu-icon-close {
	display: none;
}

.mobile-menu-btn.is-open .menu-icon-open {
	display: none;
}

.mobile-menu-btn.is-open .menu-icon-close {
	display: block;
}

/* ==========================================================================
   MOBILE MENU - Matches React exactly
   ========================================================================== */

.mobile-menu {
	display: none;
	position: absolute;
	top: 80px; /* top-20 */
	left: 0;
	right: 0;
	width: 100%; /* w-full */
	max-width: 100vw;
	background: #f9f9f9; /* bg-[#f9f9f9] */
	border-bottom: 1px solid #e5e7eb; /* border-b */
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); /* shadow-lg */
	padding: 16px; /* p-4 */
	z-index: 40;
}

.mobile-menu.open {
	display: flex;
	flex-direction: column; /* flex-col */
	gap: 16px; /* gap-4 */
}

@media (min-width: 1024px) {
	.mobile-menu {
		display: none !important; /* lg:hidden */
	}
}

.mobile-menu nav {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.mobile-menu nav a {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* consistent Inter font */
	font-size: 16px; /* text-base */
	letter-spacing: 0.025em; /* tracking-wide */
	padding: 8px 16px; /* py-2 px-4 */
	color: #374151; /* text-secondary-700 */
	text-decoration: none;
	border-radius: 8px; /* rounded-lg */
	transition: background 0.2s;
}

.mobile-menu nav a:hover {
	background: #f9fafb; /* hover:bg-gray-50 */
}

.mobile-contact {
	border-top: 1px solid #f3f4f6; /* border-gray-100 */
	padding-top: 16px; /* pt-4 */
	margin-top: 8px; /* mt-2 */
	padding-left: 16px; /* px-4 */
	padding-right: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px; /* space-y-3 */
}

.mobile-contact a {
	display: flex;
	align-items: center;
	gap: 12px; /* gap-3 */
	color: #4c4c55; /* text-secondary-600 */
	padding: 0;
	font-size: 14px;
	text-decoration: none;
}

.mobile-contact a:hover {
	background: transparent;
}

.mobile-contact-icon {
	width: 32px; /* w-8 */
	height: 32px; /* h-8 */
	border-radius: 50%; /* rounded-full */
	background: #f1f9eb; /* bg-primary-50 */
	display: flex;
	align-items: center;
	justify-content: center;
	color: #879e74; /* text-primary-600 */
	font-size: 16px;
	flex-shrink: 0;
}

/* ==========================================================================
   HERO SECTION - Matches React exactly
   ========================================================================== */

.hero-section {
	position: relative;
	width: 100%;
	overflow: hidden;
	background-color: #ffffff;
}

.hero-image-wrapper {
	width: 100%;
}

.hero-image {
	width: 100%;
	height: auto;
	display: block;
}

.hero-content {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: 24px;
}

@media (min-width: 640px) {
	.hero-content {
		padding-top: 32px;
	}
}

@media (min-width: 768px) {
	.hero-content {
		padding-top: 48px;
	}
}

@media (min-width: 1024px) {
	.hero-content {
		padding-top: 64px;
	}
}

.hero-inner {
	max-width: 896px;
	margin: 0 auto;
	padding: 0 16px;
	text-align: center;
}

.hero-headline {
	font-size: 1.5rem;
	font-weight: 700;
	color: #2e3042;
	margin-bottom: 16px;
	line-height: 1.2;
}

@media (min-width: 640px) {
	.hero-headline {
		font-size: 1.875rem;
	}
}

@media (min-width: 768px) {
	.hero-headline {
		font-size: 2.25rem;
	}
}

.hero-text {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

@media (min-width: 768px) {
	.hero-text {
		gap: 16px;
	}
}

.hero-text p {
	font-size: 0.875rem;
	color: #2e3042;
	font-weight: 500;
	line-height: 1.625;
	max-width: 768px;
	margin: 0 auto;
}

@media (min-width: 768px) {
	.hero-text p {
		font-size: 1rem;
	}
}

@media (min-width: 1024px) {
	.hero-text p {
		font-size: 1.125rem;
	}
}

/* ==========================================================================
   FOOTER STYLES - Matches React exactly
   ========================================================================== */

/* Footer outer wrapper - full width bg */
.footer-wrapper {
	background-color: #f9f9f9; /* bg-[#f9f9f9] */
	padding: 48px 16px; /* smaller padding on mobile */
	overflow: hidden;
}

@media (min-width: 768px) {
	.footer-wrapper {
		padding: 64px 16px; /* py-16 px-4 */
	}
}

/* Footer inner container - responsive widths like Tailwind */
.footer-inner {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
}

@media (min-width: 640px) {
	.footer-inner {
		max-width: 640px;
	}
}

@media (min-width: 768px) {
	.footer-inner {
		max-width: 768px;
	}
}

@media (min-width: 1024px) {
	.footer-inner {
		max-width: 1024px;
	}
}

@media (min-width: 1280px) {
	.footer-inner {
		max-width: 1280px;
	}
}

@media (min-width: 1536px) {
	.footer-inner {
		max-width: 1536px;
	}
}

/* Footer columns - stack on mobile */
.footer-inner .wp-block-columns {
	flex-direction: column;
	gap: 32px !important;
}

@media (min-width: 782px) {
	.footer-inner .wp-block-columns {
		flex-direction: row;
		gap: 48px !important;
	}
}

.footer-nav-list a {
	color: var(--wp--preset--color--secondary-600);
	text-decoration: none;
	transition: color 0.2s ease;
}

.footer-nav-list a:hover {
	color: var(--wp--preset--color--primary-600);
}

.footer-map-card {
	background-color: #ffffff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	border: 1px solid #f3f4f6;
	width: 100%;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	flex-direction: column;
}

@media (min-width: 782px) {
	.footer-map-card {
		width: 66.666667%;
	}
}

.footer-map-wrapper {
	background-color: #f9fafb !important;
	overflow: hidden;
	height: auto;
	position: relative;
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
}

.footer-map-card,
.footer-map-card *,
.footer-map-card > *,
.footer-map-card .wp-block-group,
.footer-map-card .wp-block-image,
.footer-map-card.is-layout-constrained > *,
.footer-map-wrapper,
.footer-map-wrapper > *,
.footer-map-wrapper .wp-block-image,
.footer-map-image,
.is-layout-constrained .footer-map-image,
.is-layout-constrained > .footer-map-image {
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.footer-map-image {
	margin: 0 !important;
	padding: 0 !important;
	height: 100% !important;
	width: 100% !important;
	max-width: 100% !important;
}

.footer-map-image img {
	width: 100% !important;
	height: auto !important;
	min-height: 200px !important;
	max-height: none !important;
	object-fit: cover !important;
	object-position: center !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
}

@media (min-width: 782px) {
	.footer-map-image img {
		min-height: 240px !important;
	}
}

.footer-addresses {
	padding: 20px !important;
	background-color: #ffffff;
	border-top: 1px solid #f9fafb;
	gap: 16px !important;
	align-items: flex-start !important;
}

.footer-address-item {
	flex: 1;
	gap: 0 !important;
}

.footer-address-title {
	font-weight: 700 !important;
	color: #2e3042 !important;
	margin-bottom: 4px !important;
	margin-top: 0 !important;
	font-size: 0.875rem !important;
	line-height: 1.5 !important;
}

.footer-address-text {
	color: #4c4c55 !important;
	font-size: 0.875rem !important;
	margin: 0 !important;
	line-height: 1.5 !important;
}

.footer-address-divider {
	padding-left: 8px !important;
	padding-right: 8px !important;
	align-items: center !important;
	justify-content: center !important;
	align-self: stretch !important;
}

.footer-divider-line {
	width: 1px !important;
	height: 100% !important;
	min-height: 40px;
	background-color: #f3f4f6 !important;
	border: none !important;
	margin: 0 !important;
}

.footer-bottom {
	border-top: 1px solid #e5e7eb;
	padding-top: 32px;
}

.footer-copyright {
	font-size: 0.875rem !important;
	color: #4c4c55 !important;
	margin: 0 !important;
}

@media (max-width: 781px) {
	.footer-addresses {
		flex-direction: column !important;
	}
	
	.footer-address-divider {
		display: none !important;
	}
}

/* ==========================================================================
   CONTACT PAGE STYLES
   ========================================================================== */

.contact-card {
	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	transition: box-shadow 0.3s ease;
}

.contact-card:hover {
	box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.map-section {
	position: relative;
	overflow: hidden;
	box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
}

.map-section .wp-block-cover {
	border-radius: 24px;
}

.map-section .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
	padding: 32px;
}

.map-overlay-card {
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.cta-dark-card {
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* Contact page responsive adjustments */
@media (max-width: 781px) {
	.contact-card {
		padding: 32px !important;
	}

	.map-section .wp-block-cover__inner-container {
		padding: 24px;
	}

	.cta-dark-card {
		padding: 32px !important;
	}
}

/* ==========================================================================
   SUBPAGE LAYOUT STYLES
   ========================================================================== */

/* Page header accent bar */
.wp-block-separator.is-style-wide[style*="width:96px"] {
	width: 96px !important;
	height: 6px !important;
	border-radius: 9999px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Screen reader only */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* ==========================================================================
   ÜBER UNS PAGE - CONCEPT CARDS HOVER EFFECT
   ========================================================================== */

/* Concept cards - hover effect like React */
.concept-card {
	transition: box-shadow 0.3s ease;
	height: 100%;
}

.concept-card:hover {
	box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
}

/* Equal height cards grid - makes all cards in the grid same height */
.cards-grid-equal {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem;
}

.cards-grid-equal > .wp-block-columns {
	display: contents;
}

.cards-grid-equal > .wp-block-columns > .wp-block-column {
	display: flex;
}

@media (max-width: 781px) {
	.cards-grid-equal {
		grid-template-columns: 1fr;
	}
}

/* Glass card - glassmorphism effect with backdrop blur */
.glass-card {
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

/* Brand dark card - shadow-2xl like React */
.brand-card-dark {
	box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
	position: relative;
	overflow: hidden;
}

/* Decorative blur circles for brand card */
.brand-card-dark::before,
.brand-card-dark::after {
	content: '';
	position: absolute;
	width: 256px;
	height: 256px;
	border-radius: 50%;
	filter: blur(48px);
	pointer-events: none;
}

.brand-card-dark::before {
	top: -40px;
	right: -40px;
	background: var(--wp--preset--color--primary-600);
	opacity: 0.2;
}

.brand-card-dark::after {
	bottom: -40px;
	left: -40px;
	background: var(--wp--preset--color--primary-400);
	opacity: 0.1;
}

/* Opacity 90 for paragraphs */
.opacity-90 {
	opacity: 0.9;
}

/* exPEERt logo text - styled "PEER" */
.expeert-title .peer-highlight,
.peer-highlight {
	color: #a1b095; /* text-primary-400 */
}

/* Icon square - 48x48 box for icons in concept cards */
.icon-square {
	width: 48px !important;
	height: 48px !important;
	min-height: 48px !important;
	min-width: 48px !important;
}

/* Contact page map cover - grayscale with hover effect and inner shadow */
.contact-map-cover {
	box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
	background-color: #e5e7eb; /* bg-secondary-200 */
}

.contact-map-cover .wp-block-cover__image-background {
	filter: grayscale(100%);
	opacity: 0.6;
	transition: all 0.7s ease;
}

.contact-map-cover:hover .wp-block-cover__image-background {
	filter: grayscale(0%);
}

/* Contact map gradient overlay - from-black/50 to-transparent */
.contact-map-cover::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, transparent 100%);
	z-index: 1;
	pointer-events: none;
	border-radius: 24px;
}

/* Contact map info box - positioned at bottom */
.contact-map-cover .wp-block-cover__inner-container {
	position: absolute;
	bottom: 2rem;
	left: 2rem;
	right: 2rem;
	top: auto;
	width: auto;
	max-width: none;
	padding: 0;
	z-index: 2;
}

/* Ensure child group respects parent width */
.contact-map-cover .wp-block-cover__inner-container > .wp-block-group {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* Contact page accent bar height fix */
.contact-accent-bar {
	height: 6px !important;
	min-height: 6px !important;
}

/* ==========================================================================
   OUTLINE BUTTON STYLE - Matches React exactly
   ========================================================================== */

/* Outline button - border-2 border-primary-600 text-primary-700 */
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent !important;
	border-color: var(--wp--preset--color--primary-600) !important;
	color: var(--wp--preset--color--primary-700) !important;
}

/* Outline button hover - hover:bg-primary-50 */
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--primary-50) !important;
	border-color: var(--wp--preset--color--primary-600) !important;
	color: var(--wp--preset--color--primary-700) !important;
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

/* Overflow hidden - clips child content to border-radius */
.overflow-hidden {
	overflow: hidden;
}

/* Accent bar 6px height - matches React h-1.5 */
.accent-bar-6px {
	height: 6px !important;
	min-height: 6px !important;
}

/* External link button with arrow icon */
.external-link-btn .wp-block-button__link::after {
	content: '';
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-left: 6px;
	vertical-align: middle;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7'/%3E%3Cpath d='M7 7h10v10'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}

/* Card with blur decoration at top-right */
.card-blur-light {
	position: relative;
	overflow: hidden;
}

.card-blur-light::before {
	content: '';
	position: absolute;
	top: -6rem;
	right: -6rem;
	width: 12rem;
	height: 12rem;
	background-color: var(--wp--preset--color--primary-50);
	border-radius: 9999px;
	filter: blur(48px);
	opacity: 0.6;
	pointer-events: none;
}

/* Responsive card padding - matches React Card padding="md" (p-8 md:p-10) */
.card-padding-md {
	padding: 2rem !important; /* 32px on mobile */
}

@media (min-width: 768px) {
	.card-padding-md {
		padding: 2.5rem !important; /* 40px on desktop */
	}
}

/* Badge inline - matches React Badge (inline-flex, fit-content width) */
.badge-inline {
	width: fit-content !important;
	display: inline-flex !important;
}

/* ==========================================================================
   LEITBILD PAGE STYLES
   ========================================================================== */

/* Thick separator - 6px height like React h-1.5 */
.separator-thick {
	height: 6px !important;
	min-height: 6px !important;
	border: none !important;
}

/* Quote block with decorative blur circles and shadow */
.quote-block-decorated {
	position: relative;
	overflow: hidden;
	box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); /* shadow-2xl */
}

.quote-block-decorated::before,
.quote-block-decorated::after {
	content: '';
	position: absolute;
	width: 256px; /* w-64 */
	height: 256px; /* h-64 */
	border-radius: 50%;
	filter: blur(48px); /* blur-3xl */
	mix-blend-mode: multiply;
	pointer-events: none;
}

.quote-block-decorated::before {
	top: 0;
	right: 0;
	transform: translate(50%, -50%);
	background-color: #879e74; /* primary-600 */
	opacity: 0.2;
}

.quote-block-decorated::after {
	bottom: 0;
	left: 0;
	transform: translate(-50%, 50%);
	background-color: #a1b095; /* primary-400 */
	opacity: 0.2;
}

/* Citation badge - bg-white/5 backdrop-blur */
.citation-badge {
	background-color: rgba(255, 255, 255, 0.05); /* bg-white/5 */
	backdrop-filter: blur(4px); /* backdrop-blur-sm */
	-webkit-backdrop-filter: blur(4px);
}

/* Card with shadow - shadow-sm + hover:shadow-md */
.card-with-shadow {
	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); /* shadow-sm */
	transition: box-shadow 0.3s ease;
}

.card-with-shadow:hover {
	box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* shadow-md */
}

/* ==========================================================================
   GLOBAL PAGE TITLE - always bold
   ========================================================================== */

h1,
h1.wp-block-heading {
	font-weight: 700 !important;
}

/* ==========================================================================
   STANDORTE PAGE - constrain image height
   ========================================================================== */

.page-id-53 .wp-block-group.overflow-hidden > .wp-block-image,
.page-id-53 .wp-block-group.overflow-hidden > figure.wp-block-image {
	width: 100%;
	max-height: 280px;
	overflow: hidden;
	margin: 0;
}

.page-id-53 .wp-block-group.overflow-hidden > .wp-block-image img,
.page-id-53 .wp-block-group.overflow-hidden > figure.wp-block-image img {
	width: 100% !important;
	height: 280px !important;
	object-fit: cover !important;
	object-position: center !important;
	display: block;
}

@media (max-width: 781px) {
	.page-id-53 .wp-block-group.overflow-hidden > .wp-block-image,
	.page-id-53 .wp-block-group.overflow-hidden > figure.wp-block-image {
		max-height: 220px;
	}
	.page-id-53 .wp-block-group.overflow-hidden > .wp-block-image img,
	.page-id-53 .wp-block-group.overflow-hidden > figure.wp-block-image img {
		height: 220px !important;
	}
}

/* ==========================================================================
   HOMEPAGE HERO - mobile fix (stack content above image)
   ========================================================================== */

@media (max-width: 781px) {
	.home .wp-block-cover.alignfull,
	.page-id-39 .wp-block-cover.alignfull {
		aspect-ratio: auto !important;
		min-height: auto !important;
		display: flex !important;
		flex-direction: column !important;
		padding-top: 2rem !important;
		padding-bottom: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.home .wp-block-cover.alignfull .wp-block-cover__background,
	.page-id-39 .wp-block-cover.alignfull .wp-block-cover__background {
		display: none !important;
	}

	.home .wp-block-cover.alignfull .wp-block-cover__image-background,
	.page-id-39 .wp-block-cover.alignfull .wp-block-cover__image-background {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		bottom: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		max-height: none !important;
		object-fit: cover !important;
		object-position: center !important;
		order: 2;
		margin-top: 1.5rem;
	}

	.home .wp-block-cover.alignfull .wp-block-cover__inner-container,
	.page-id-39 .wp-block-cover.alignfull .wp-block-cover__inner-container {
		position: relative !important;
		order: 1;
		width: 100%;
		max-width: 100%;
		padding-left: 1rem;
		padding-right: 1rem;
	}
}