/*
 * CSS Token Aliases – jw-conova
 *
 * Mappt semantische Legacy-Tokens (primary, secondary, dark, light, medium) aus
 * jw-base auf die neue Markenpalette. Diese Tokens sind NICHT in theme.json,
 * damit keine doppelten Farben im WP-Editor erscheinen. Sie stellen sicher,
 * dass jw-base CSS (global.css, Block-Styles, Focus-Ring) korrekt funktioniert.
 */
:root {
	--wp--preset--color--primary:   var(--wp--preset--color--datacenter);
	--wp--preset--color--secondary: var(--wp--preset--color--public-cloud);
	--wp--preset--color--dark:      var(--wp--preset--color--primary-dark);
	--wp--preset--color--light:     var(--wp--preset--color--gray-950);
	--wp--preset--color--medium:    var(--wp--preset--color--gray-600);
}


/* ==========================================================================
   Skip Link – gray-100 + weiß; dark mappt in jw-conova auf primary-dark (blau)
   ========================================================================== */

.skip-link {
	background-color: var(--wp--preset--color--gray-100);
}

.skip-link:hover {
	background-color: var(--wp--preset--color--datacenter);
}


/* ==========================================================================
   Header & Footer – Deep Primary Blue (#002431) + weiß
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. CSS Custom Properties – Secondary Top-Bar immer solid dunkel
   -------------------------------------------------------------------------- */

:root {
	--sec-nav-bg:    var(--wp--preset--color--primary-dark);
	--sec-nav-color: var(--wp--preset--color--white);
}


/* --------------------------------------------------------------------------
   2. Primary Bar – Glasmorphismus (Standard = oben)
   Nur .header__primary bekommt den Glas-Effekt, nicht #site-header selbst,
   damit Nav-Panels + Secondary-Bar unberührt bleiben.
   -------------------------------------------------------------------------- */

.header__primary, .header__secondary {
	background-color: oklch(from var(--wp--preset--color--primary-dark) l c h / 0.0);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* jw-base setzt Glasmorphismus auf #site-header[data-scrolled] → deaktivieren */
#site-header[data-scrolled] {
	background-color: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	box-shadow: none;
}

/* Gescrollt: Primary Bar wird solid dunkel */
#site-header[data-scrolled] .header__primary, #site-header[data-scrolled] .header__secondary {
	background-color: var(--wp--preset--color--primary-dark);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	box-shadow: none;	
}


/* --------------------------------------------------------------------------
   3. Logo – SVG nutzt fill="currentColor"
   -------------------------------------------------------------------------- */

:root {
	--brand-logo-width: 12.3125rem; /* 12rem + 5px */
}

.header__logo {
	color: var(--wp--preset--color--white);
}

.header__logo svg {
	display: block;
	inline-size: var(--brand-logo-width);
	block-size: auto;
}

/* Header-Zeile an Unterkante ausrichten (überschreibt align-items: center aus jw-base) */
.header__inner {
	align-items: flex-end;
}


/* --------------------------------------------------------------------------
   4. Navigation – Text weiß
   Scoped auf .header__primary, damit Nav-Panel-Inhalte unberührt bleiben.
   -------------------------------------------------------------------------- */

.header__primary .nav-item__link,
.header__primary .nav-item__trigger,
#nav-toggle,
.menu-item--search button {
	color: var(--wp--preset--color--white);
}

/* Hover/Focus: helles Primary für Kontrast auf dunklem HG */
.header__primary .nav-item__link:hover,
.header__primary .nav-item__link:focus-visible,
.header__primary .nav-item__trigger:hover,
.menu-item--search button:hover {
	color: var(--wp--preset--color--security-services);
}

.menu-item--search button:hover {
	background-color: oklch(from var(--wp--preset--color--white) l c h / 0.08);
}

/* Sekundär-Menü: gleiche Hover-Farbe wie Primär-Menü (Base nutzt sonst nur opacity) */
.header__secondary .sec-item__link:hover,
.header__secondary .sec-item__link:focus-visible,
.header__secondary .sec-item__trigger:hover,
.header__secondary .sec-item__trigger[aria-expanded="true"] {
	color: var(--wp--preset--color--security-services);
	opacity: 1;
}

/* Aktiver Top-Level-Trigger: weiße Tab-Optik, verbindet visuell mit dem Panel.
   Nur Desktop – #site-navigation liegt ebenfalls in .header__primary, ungescoped
   würde die weiße Tab-Optik mit dem erzwungenen weißen Mobile-Text kollidieren (weiß auf weiß). */
@media (min-width: 64rem) {

	.header__primary .nav-item__trigger[aria-expanded="true"],
	.header__primary .nav-item--active .nav-item__trigger {
		background-color: var(--wp--preset--color--white);
		color: var(--wp--preset--color--primary-dark);
		border-radius: 3px 3px 0 0;
	}

	/* Aktiver Top-Level-Link ohne Kinder: kein Tab-Panel, daher Unterstreichung statt Hintergrund */
	.header__primary .nav-item--active .nav-item__link {
		box-shadow: inset 0 -2px 0 var(--wp--preset--color--security-services);
	}
}


/* --------------------------------------------------------------------------
   5. Mobile Drawer – solid dunkel (kein Glasmorphismus im Drawer)
   -------------------------------------------------------------------------- */

@media (max-width: 63.9375rem) {
	
	#site-navigation {
		background-color: var(--wp--preset--color--primary-dark);
	}

	/* Nav-Items im Drawer sitzen zwar in .header__primary, brauchen aber wegen des
	   dunklen Drawer-Hintergrunds trotzdem explizit hellen Text statt des Erbwerts */
	#site-navigation .nav-item__link,
	#site-navigation .nav-item__trigger {
		color: var(--wp--preset--color--white);
	}

	#site-navigation .nav-item__link:hover,
	#site-navigation .nav-item__link:focus-visible,
	#site-navigation .nav-item__trigger:hover,
	#site-navigation .nav-item__trigger[aria-expanded="true"] {
		color: var(--wp--preset--color--security-services);
	}

	/* Aktive Seite: eigene Farbe nötig, die weiße Tab-Optik (siehe @media min-width 64rem) greift hier nicht */
	#site-navigation .nav-item--active .nav-item__link,
	#site-navigation .nav-item--active .nav-item__trigger {
		color: var(--wp--preset--color--security-services);
	}

	/* Trennlinie Secondary im Drawer */
	.nav-secondary-mobile {
		border-block-start-color: oklch(from var(--wp--preset--color--white) l c h / 0.15);
	}

	/* Links sitzen zwar in .header__primary, brauchen aber wegen des dunklen
	   Drawer-Hintergrunds trotzdem explizit gedämpften Text statt des Erbwerts */
	.nav-secondary-mobile .sec-item__link,
	.nav-secondary-mobile .sec-item__trigger,
	.nav-secondary-mobile .sec-panel__link {
		color: var(--wp--preset--color--gray-700);
	}

	.nav-secondary-mobile .sec-item--active > .sec-item__link,
	.nav-secondary-mobile .sec-item--active > .sec-item__trigger,
	.nav-secondary-mobile .sec-item--active > .sec-panel__link {
		color: var(--wp--preset--color--security-services);
	}
}


/* --------------------------------------------------------------------------
   6. MegaMenu-Panel + Simple-Dropdown – weiß / #111111
   --surface und --on-surface hier überschreiben → alle jw-base-Selektoren
   (.nav-panel__link, .nav-panel__trigger, .nav-panel__close …) erben automatisch.
   -------------------------------------------------------------------------- */

.nav-panel,
.nav-item .nav-panel--simple {
	--wp--preset--color--surface:    var(--wp--preset--color--white);
	--wp--preset--color--on-surface: var(--wp--preset--color--gray-100);
	background-color: var(--wp--preset--color--white);
}

/* Linke Spalte: leicht abgesetzter HG */


/* Rechte Spalte explizit weiß (nutzt --surface, zur Sicherheit) */
.nav-panel__right {
	background-color: var(--wp--preset--color--white);
}

/* Ausnahme: page-link bleibt datacenter */
.nav-panel__page-link {
	color: var(--wp--preset--color--datacenter);
}

/* Ausnahme: Chevron heller als globales --medium (gray-600) */
.nav-panel__trigger .nav-icon--chevron {
	color: var(--wp--preset--color--gray-800);
}

/* Secondary Dropdown-Panel */
:root {
	--sec-panel-bg:    var(--wp--preset--color--white);
	--sec-panel-color: var(--wp--preset--color--gray-100);
}


/* --------------------------------------------------------------------------
   7. Footer – Deep Primary Blue + weiß
   -------------------------------------------------------------------------- */

.site-footer {
	background-color: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--white);
	border-top: none;
	padding: 0;
	font-size: var(--wp--preset--font-size--medium);
}

/* --- 7a. Top-Grid: Firmendaten + 3 Nav-Spalten --- */

.footer__top {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: var(--jw-space-16);
	padding-block: var(--wp--preset--spacing--m);
}

.footer__company {
	color: var(--wp--preset--color--gray-700);
}

.footer__company-logo {
	margin-block-end: var(--jw-space-16);
}

.footer__company-logo svg {
	display: block;
	inline-size: var(--brand-logo-width);
	block-size: auto;
	/* .footer__company vererbt gray-700 an currentColor → Logo explizit weiß */
	fill: var(--wp--preset--color--white);
}

.footer__company-name {
	color: var(--wp--preset--color--white);
	font-weight: 700;
	margin-block: 0 var(--jw-space-16);
}

.footer__address {
	font-style: normal;
	margin-block: 0 var(--jw-space-16);
}

.footer__address a {
	display: inline-flex;
	align-items: flex-start;
	gap: 0.5em;
	color: inherit;
	text-decoration: underline;
}

.footer__address svg {
	flex-shrink: 0;
	inline-size: 1em;
	block-size: 1em;
	margin-block-start: 0.15em;
}

.footer__address a:hover,
.footer__address a:focus-visible,
.footer__contact a:hover,
.footer__contact a:focus-visible {
	color: var(--wp--preset--color--white);
}

.footer__address a:hover svg,
.footer__address a:focus-visible svg,
.footer__contact a:hover svg,
.footer__contact a:focus-visible svg {
	color: var(--wp--preset--color--security-services);
}

.footer__contact p,
.footer__contact a {
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
	margin-block: 0;
	color: inherit;
}

.footer__contact svg {
	flex-shrink: 0;
	inline-size: 1em;
	block-size: 1em;
}

.footer__contact a {
	text-decoration: underline;
}



/* Nav-Spalten: Gruppen-Headings (depth 0) weiß + fett, Sub-Links (depth 1) muted */

.footer__nav-list--col {
	list-style: none;
	padding: 0;
	margin: 0;
	width: 100%;
}

.footer__nav-list--col .menu-item {
	width: 100%;
}

.footer__nav-list--col > li {
	margin-block-end: var(--jw-space-16);
}

.footer__nav-list--col > li:last-child {
	margin-block-end: 0;
}

.footer__nav-list--col > li > a,
.footer__nav-list--col > li > span {
	color: var(--wp--preset--color--white);
	font-weight: 700;
	text-decoration: none;
	display: block;
	margin-block-end: var(--jw-space-16);
}

.footer__nav-list--col > li > a:hover,
.footer__nav-list--col > li > a:focus-visible {
	color: var(--wp--preset--color--gray-700);
}

.footer__nav-list--col .sub-menu {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--jw-space-8);
}

.footer__nav-list--col .sub-menu a {
	display: block;
	color: var(--wp--preset--color--gray-700);
	text-decoration: none;
}

.footer__nav-list--col .sub-menu a:hover,
.footer__nav-list--col .sub-menu a:focus-visible {
	color: var(--wp--preset--color--white);
}

/* --- 7b. Divider --- */

.footer__divider {
	border: none;
	border-block-start: 1px solid var(--wp--preset--color--infrastructure-services);
	margin: 0;
}

/* --- 7c. Brand: Logo + CTA --- */

.footer__brand {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--jw-space-16);
	align-items: start;
	width: 100%;
	padding-block: var(--wp--preset--spacing--s);
}

.footer__brand-right {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--s);
}

.footer__cta {
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.footer__cta p {
	margin: 0;
}

.footer__cta a,
.footer__cta p {
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.footer__cta a:hover,
.footer__cta a:focus-visible {
	color: var(--wp--preset--color--security-services);
}

/* --- 7d. Legal-Nav --- */

.footer__legal {
	text-align: right;
}

.footer__legal-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--jw-space-16);
}

.footer__legal-list a {
	color: var(--wp--preset--color--gray-700);
	text-decoration: none;
}

.footer__legal-list a:hover,
.footer__legal-list a:focus-visible {
	color: var(--wp--preset--color--white);
}

/* --- 7e. Bottom: Social + Copyright --- */

.footer__bottom {
	width:100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--jw-space-8);
	align-items: center;
	padding-block-start: 1rem;
	padding-block-end: var(--wp--preset--spacing--s);
}

.footer__social {
	display: flex;
	gap: var(--jw-space-16);
}

.footer__social-link {
	color: var(--wp--preset--color--gray-700);
	text-decoration: none;
}

.footer__social-link:hover,
.footer__social-link:focus-visible {
	color: var(--wp--preset--color--white);
}

.footer__copyright {
	color: var(--wp--preset--color--gray-700);
	margin: 0;
	justify-self:flex-end;
}

/* --- 7f. Responsive --- */

@media (max-width: 47.9375rem) {
	.footer__top {
		grid-template-columns: 1fr;
	}

	.footer__brand {
		grid-template-columns: 1fr;
	}

	.footer__cta {
		font-size: var(--wp--preset--font-size--large);
	}

	.footer__legal-list {
		flex-direction: column;
		gap: var(--jw-space-8);
	}

	.footer__bottom {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 48rem) and (max-width: 63.9375rem) {
	.footer__top {
		grid-template-columns: 1fr 1fr;
	}
}


/* ==========================================================================
   Block Background: Icon Overlay
   Setzt --icon-overlay-color je Hintergrund (eine Stufe heller/dunkler).
   ========================================================================== */

.has-bg--white             { --icon-overlay-color: var(--wp--preset--color--gray-950); }
.has-bg--gray-950          { --icon-overlay-color: var(--wp--preset--color--gray-900); }
.has-bg--gray-900          { --icon-overlay-color: var(--wp--preset--color--gray-800); }
.has-bg--gray-100          { --icon-overlay-color: var(--wp--preset--color--gray-200); }
.has-bg--primary-dark  { --icon-overlay-color: var(--wp--preset--color--infrastructure-services); }
.has-bg--gradient-tl,
.has-bg--gradient-tr,
.has-bg--gradient-bl,
.has-bg--gradient-br,
.has-bg--gradient-dark-tl,
.has-bg--gradient-dark-tr,
.has-bg--gradient-dark-bl,
.has-bg--gradient-dark-br  { --icon-overlay-color: var(--wp--preset--color--gray-950); }

.has-icon-overlay {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.has-icon-overlay::after {
	content: '';
	position: absolute;
	top: calc(-1 * var(--wp--preset--spacing--s));
	right: var(--wp--preset--spacing--s);
	width: min(960px, calc(100% - 2 * var(--wp--preset--spacing--s)));
	aspect-ratio: 1;
	background-image: linear-gradient(
		to right,
		color-mix(in srgb, var(--icon-overlay-color, var(--wp--preset--color--gray-950)) 20%, transparent),
		color-mix(in srgb, var(--icon-overlay-color, var(--wp--preset--color--gray-950)) 60%, transparent)
	);
	mix-blend-mode: multiply;
	mask-image: var(--block-icon, var(--block-icon-light));
	-webkit-mask-image: var(--block-icon, var(--block-icon-light));
	mask-size: 100% 100%;
	-webkit-mask-size: 100% 100%;
	pointer-events: none;
	z-index: -1;
}


/* ==========================================================================
   Block Background: Radiale Verläufe
   Basis: white + on-surface (gray-100). Gradient 1: datacenter 30%→0%,
   75% Breite × 100% Höhe. Gradient 2: primary-dark 20%→0%, 100% × 75%.
   ========================================================================== */

.has-bg--gradient-tl,
.has-bg--gradient-tr,
.has-bg--gradient-bl,
.has-bg--gradient-br {
	--block-bg:   var(--wp--preset--color--white);
	--block-text: var(--wp--preset--color--gray-100);
}

.has-bg--gradient-tl {
	background-image:
		radial-gradient(ellipse 75% 100% at top left,     color-mix(in srgb, var(--wp--preset--color--datacenter) 30%, transparent), transparent),
		radial-gradient(ellipse 100% 75% at bottom right, color-mix(in srgb, var(--wp--preset--color--primary-dark)  20%, transparent), transparent);
}

.has-bg--gradient-tr {
	background-image:
		radial-gradient(ellipse 75% 100% at top right,   color-mix(in srgb, var(--wp--preset--color--datacenter) 30%, transparent), transparent),
		radial-gradient(ellipse 100% 75% at bottom left, color-mix(in srgb, var(--wp--preset--color--primary-dark)  20%, transparent), transparent);
}

.has-bg--gradient-bl {
	background-image:
		radial-gradient(ellipse 75% 100% at bottom left, color-mix(in srgb, var(--wp--preset--color--datacenter) 30%, transparent), transparent),
		radial-gradient(ellipse 100% 75% at top right,   color-mix(in srgb, var(--wp--preset--color--primary-dark)  20%, transparent), transparent);
}

.has-bg--gradient-br {
	background-image:
		radial-gradient(ellipse 75% 100% at bottom right, color-mix(in srgb, var(--wp--preset--color--datacenter) 30%, transparent), transparent),
		radial-gradient(ellipse 100% 75% at top left,     color-mix(in srgb, var(--wp--preset--color--primary-dark)  20%, transparent), transparent);
}

/* Hellgrau: ein Verlauf aus der Ecke, primary-dark 10% → transparent */
.has-bg--gradient-dark-tl,
.has-bg--gradient-dark-tr,
.has-bg--gradient-dark-bl,
.has-bg--gradient-dark-br {
	--block-bg:   var(--wp--preset--color--white);
	--block-text: var(--wp--preset--color--gray-100);
}

.has-bg--gradient-dark-tl {
	background-image: radial-gradient(ellipse 75% 100% at top left,     color-mix(in srgb, var(--wp--preset--color--primary-dark) 10%, transparent), transparent);
}

.has-bg--gradient-dark-tr {
	background-image: radial-gradient(ellipse 75% 100% at top right,    color-mix(in srgb, var(--wp--preset--color--primary-dark) 10%, transparent), transparent);
}

.has-bg--gradient-dark-bl {
	background-image: radial-gradient(ellipse 75% 100% at bottom left,  color-mix(in srgb, var(--wp--preset--color--primary-dark) 10%, transparent), transparent);
}

.has-bg--gradient-dark-br {
	background-image: radial-gradient(ellipse 75% 100% at bottom right, color-mix(in srgb, var(--wp--preset--color--primary-dark) 10%, transparent), transparent);
}

/* Bild-Hintergrund Overlay (jw-base) auf Markenfarbe setzen */
.block-bg__overlay {
	--block-overlay-color: var(--wp--preset--color--primary-dark);
}


/* ==========================================================================
   Conova-Icon ([conova_icon] Shortcode, WYSIWYG-Editor, Kundenstimme-Block)
   Maske statt <img>/inline SVG, da wp_kses_post() SVG-Markup entfernt.
   Standard-Icon zeigt die "Sonne" als Negativraum (passend auf hellem BG),
   die _white-Variante malt sie aktiv weiß (passend auf dunklem BG) – daher
   Datei-Wechsel, nicht nur Farb-Wechsel. --block-icon kommt von jw-base
   (has-bg--{slug}), Fallback = Standard-Icon für unklassifizierten BG.
   ========================================================================== */

:root {
	--block-icon-light: url('../img/logo/conova_logo_icon.svg');
	--block-icon-dark:  url('../img/logo/conova_logo_icon_white.svg');
}

.conova-icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-top: 1em;
	vertical-align: -0.125em;
	background-color: var(--block-icon-color, #000);
	mask-image: var(--block-icon, var(--block-icon-light));
	-webkit-mask-image: var(--block-icon, var(--block-icon-light));
	mask-size: contain;
	-webkit-mask-size: contain;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
}


/* ==========================================================================
   Breadcrumbs-Block (jw-base) – conova-Optik
   Hintergrund kommt bereits über den --dark-Alias (primary-dark), nur
   Mono-Font + Textfarbe abweichend vom generischen jw-base-Styling.
   ========================================================================== */

.block-breadcrumbs__inner {
	font-family: var(--wp--preset--font-family--mono);
	color: var(--wp--preset--color--it-consulting);
}


/* ==========================================================================
   Forminator (jw-base) – Success-Meldung in Markenfarbe statt Grün
   ========================================================================== */

.forminator-custom-form {
	--forminator-success: var(--wp--preset--color--primary);
}