/**
 * Delotek header polish.
 *
 * The header (parts/header.html) is built from real WordPress blocks —
 * site-logo + navigation (ref menu) + a phone CTA button. Styling comes from
 * theme.json; these rules only cover what block attributes can't express.
 */

/*
 * No default gap between top-level template blocks (header/main/footer):
 * sections carry their own spacing. WP 7.0 emits a 24px root block gap as
 * :where(.wp-site-blocks) > * { margin-block-start: 24px } — the class
 * selector here outweighs :where()'s zero specificity. Lives in this file
 * because it's the only stylesheet loaded on every page.
 */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* Keep the phone CTA pill on one line so it never wraps in the bar. */
header .wp-block-buttons .wp-block-button__link {
	white-space: nowrap;
}

/* Don't let the phone CTA or the burger shrink/wrap against the logo. */
header .wp-block-navigation__responsive-container-open,
header .wp-block-buttons {
	flex-shrink: 0;
}

/*
 * Collapse the menu to the hamburger overlay below 1024px (the design's
 * breakpoint). Core's "mobile" overlay only collapses below 600px, which
 * leaves the full menu overflowing on tablet. The `header` prefix raises
 * specificity above core's min-width:600px rules so this wins in 600–1023px.
 */
@media (max-width: 1023.98px) {
	header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	/*
	 * Mobile bar order: logo (left) · phone (middle) · menu/hamburger (right).
	 * Dissolve the actions group so the logo, phone and burger all become
	 * direct flex items of the space-between bar, then order phone before the
	 * burger. Desktop keeps the actions grouped on the right (this only applies
	 * below 1024px).
	 */
	header .wp-block-group.dt-header-actions {
		display: contents;
	}

	header .dt-header-actions .wp-block-buttons {
		order: 1;
	}

	header .dt-header-actions .wp-block-navigation {
		order: 2;
	}
}

/*
 * Mobile overlay menu, styled after the reference design: white panel,
 * left-aligned 17px items with hairline separators, submenus rendered
 * expanded (indented, muted), phone CTA as a navy pill at the end.
 * Scoped to .is-menu-open so the desktop bar is untouched; the repeated
 * .wp-block-navigation__responsive-container class outweighs core's
 * overlay rules, the padding needs !important against core's reset.
 */
header .wp-block-navigation__responsive-container.is-menu-open {
	background: #fff;
	padding: 8px clamp(20px, 5vw, 56px) 40px !important;
}

/* Close button: large tap target, top-right, mirrors the burger position */
header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	position: absolute;
	top: 8px;
	right: clamp(20px, 5vw, 56px);
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	color: var(--wp--preset--color--contrast);
}

header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
	width: 26px;
	height: 26px;
}

header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 56px !important; /* clear the absolute close button */
	width: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: thin;
}

/* Top-level items: stacked full-width, left-aligned, hairline separators */
header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
	width: 100%;
	align-items: stretch;
	gap: 0;
}

header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container > li {
	width: 100%;
	margin: 0;
	border-bottom: 1px solid #1e1b181a;
}

header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container > li > .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 17px 0;
	font-size: 17px;
	font-weight: 500;
	text-align: left;
	color: var(--wp--preset--color--contrast);
}

/* Submenus render expanded — drop the hover carets */
header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
	display: none;
}

/* Brand-green focus ring instead of the UA default full-width box */
header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: -2px;
}

/* Children: indented, smaller, muted, no separators of their own.
   Core indents BOTH the parent item and the submenu list by 32px in the
   overlay (longhand rules) — flatten that to one 16px level. */
header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container > li.wp-block-navigation-submenu {
	padding: 0 !important;
	/* the bar's center justification leaks in as align-items:center */
	align-items: stretch;
}

header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
	width: 100%;
	align-items: stretch;
	gap: 0;
	padding: 0 0 14px 16px !important;
}

header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container li {
	width: 100%;
	margin: 0;
	border: 0;
}

header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 8px 0;
	font-size: 15.5px;
	text-align: left;
	color: var(--wp--preset--color--muted);
}

/*
 * Footer newsletter form (Gravity Forms, [delotek_form type="newsletter"]):
 * restyles GF's stock markup into the design's white pill (e-mail input +
 * navy submit side by side) with the consent line underneath. Lives here
 * because the footer — and therefore this form — renders on every page.
 */
.delotek-newsletter .gform_wrapper form {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.delotek-newsletter .gform_fields {
	display: flex;
	flex-direction: column;
	gap: 10px;
	grid-row-gap: 10px;
}

/* E-mail row = the white pill; right padding leaves room for the button. */
.delotek-newsletter .gfield--type-email {
	background: #ffffff;
	border: 1px solid #1e1b181a;
	border-radius: 999px;
	padding: 4px;
}

/* Fixed control heights keep the pill (54px) and the button in sync —
   the Orbital theme's own line-height/height vars vary per context. */
.delotek-newsletter .gfield--type-email input {
	appearance: none;
	width: 100%;
	background: transparent;
	border: none;
	outline: none;
	height: 46px !important;
	line-height: normal !important;
	padding: 0 150px 0 18px;
	font-size: 14px;
	color: #1d1b18;
	min-width: 0;
}

.delotek-newsletter .gfield--type-email input:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	border-radius: 999px;
}

/* Submit sits inside the pill, right-aligned, same 46px as the input.
   top 5px = the pill's 4px padding + 1px border, so the button is
   vertically centered in the 56px pill. */
.delotek-newsletter .gform_footer {
	position: absolute;
	top: 5px;
	right: 5px;
	margin: 0;
	padding: 0;
}

/* The visually-hidden e-mail label still adds a 1px flex row — drop it. */
.delotek-newsletter .gfield--type-email .gfield_label {
	display: none !important;
}

/* !important: the GF Orbital theme forces its own button colors. */
.delotek-newsletter .gform_footer .gform_button {
	cursor: pointer;
	white-space: nowrap;
	padding: 0 20px !important;
	/* !important: on pages with another GF form (Kontakt/Karriere) the
	   Orbital CSS loads after this sheet and re-applies its 3px radius. */
	border-radius: 999px !important;
	background: var(--wp--preset--color--secondary, #202a4f) !important;
	color: #faf8f4 !important;
	border: none;
	font-size: 14px;
	font-weight: 600;
	height: 46px !important;
	line-height: 46px;
}

.delotek-newsletter .gform_footer .gform_button:hover {
	background: var(--wp--preset--color--primary, #52c034) !important;
}

/* Consent line: small, muted, green checkbox. */
.delotek-newsletter .gfield--type-consent .gfield_consent_label {
	font-size: 12px;
	color: #6b6660;
	line-height: 1.55;
}

.delotek-newsletter .gfield--type-consent .gfield_consent_label a {
	color: #1d1b18;
	text-decoration: underline;
}

.delotek-newsletter .gfield--type-consent input[type="checkbox"] {
	width: 14px;
	height: 14px;
	margin-top: 2px;
	accent-color: var(--wp--preset--color--primary, #52c034);
}

/* Quieter validation + confirmation states for the small footer context. */
.delotek-newsletter .gform_validation_errors {
	display: none;
}

.delotek-newsletter .gfield_validation_message {
	font-size: 12px;
	color: #b32d2e;
	background: none;
	border: none;
	padding: 4px 0 0 18px;
	margin: 0;
}

.delotek-newsletter .gform_confirmation_message {
	font-size: 13px;
	color: var(--wp--preset--color--contrast, #1d1b18);
	line-height: 1.55;
}

/* Hide GF extras that don't fit the compact footer design (the Orbital
   theme re-asserts these with high-specificity rules, hence !important). */
.delotek-newsletter .gfield_required,
.delotek-newsletter .gform_required_legend {
	display: none !important;
}

/* Phone CTA item (.delotek-nav-phone on the menu entry): only in the overlay */
header .wp-block-navigation li.delotek-nav-phone {
	display: none;
}

header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container > li.delotek-nav-phone {
	display: block;
	border-bottom: 0;
	margin-top: 28px;
}

header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container > li.delotek-nav-phone > .wp-block-navigation-item__content {
	display: block;
	box-sizing: border-box; /* the shared item rule sets width:100% — keep the 20px side padding inside it */
	padding: 14px 20px;
	border-radius: 999px;
	background: var(--wp--preset--color--secondary);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	text-align: center;
}