/* ---------------- -----------------------------------------------
 * OVAstudio – Site header
 * Desktop: hover-revealed sub-menus.
 * Mobile (< 900px): hamburger toggles a panel; sub-menus accordion.
 * ------------------------------------------------------------- */


/* ---------------- Europa font (self-hosted) ----------------
 * Files live in /wp-content/themes/ovastudio/assets/fonts/
 * - EuropaLight.woff2   / EuropaLight.woff   (300)
 * - EuropaRegular.woff2 / EuropaRegular.woff (400)
 * - EuropaBold.woff2    / EuropaBold.woff    (700)
 * ------------------------------------------------------------- */

@font-face {
	font-family: 'Europa';
	src: url('../fonts/EuropaLight.woff2') format('woff2'),
	     url('../fonts/EuropaLight.woff')  format('woff');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Europa';
	src: url('../fonts/EuropaRegular.woff2') format('woff2'),
	     url('../fonts/EuropaRegular.woff')  format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Europa';
	src: url('../fonts/EuropaBold.woff2') format('woff2'),
	     url('../fonts/EuropaBold.woff')  format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}


:root {
	--ova-bg:        #ffffff;
	--ova-fg:        #000000;
	--ova-black:     #2b2b2b;
	--ova-grey:      #888888;
	--ova-header-h:  4rem;
	--ova-logo-h:    1.75rem;
	--ova-gap:       clamp(1.5rem, 4vw, 3.5rem);
	--ova-side:      clamp(1rem, 4vw, 3rem);
	--ova-fz:        1rem;
	--ova-fz-sub:    0.875rem;
	--ova-fw:        400;
	--ova-fw-bold:   700;
	--ova-trans:     200ms ease;
	--ova-font:      'Europa', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Reset just for header descendants — non-invasive. */
.site-header,
.site-header *,
.site-header *::before,
.site-header *::after {
	box-sizing: border-box;
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--ova-bg);
	font-family: var(--ova-font);
	width: 100%; /* Force header container full-width */
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--ova-gap);
	padding-inline: 0rem; /* Reduced fixed padding so contents go edge-to-edge */
	height: var(--ova-header-h);
	width: 100%;
	max-width: 100%; /* Prevents layout restrictions */
}

/* ---------------- Logo ---------------- */
.site-header__logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.site-header__logo .custom-logo-link {
	display: inline-flex;
	align-items: center;
	line-height: 0;
	margin-top: -2px;
}

.site-header__logo .custom-logo {
	display: block;
	height: var(--ova-logo-h);
	width: 100px !important;
	max-width: 100%;
}

.site-header__logo-fallback {
	color: var(--ova-fg);
	font-family: var(--ova-font);
	font-size: var(--ova-fz);
	font-weight: var(--ova-fw-bold);
	text-decoration: none;
	white-space: nowrap;
}

/* ---------------- Nav ---------------- */
.site-header__nav {
	flex: 1;
	display: flex;
	justify-content: center;
}

.primary-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: clamp(1.5rem, 5vw, 4.5rem);
}

.primary-menu > li {
	position: relative;
}

/* Extra gap before Über uns (3rd item) — only relevant for the single,
   un-split menu (i.e. below the 1200px grid breakpoint). With the menu split
   into two groups, this band instead spaces the two groups apart so they read
   as the original centred menu. */
/* (901–1200px is now handled by the grid below, which is extended down to
   901px so the left group stays at column 2 and the right group right-aligns.) */


/* ----------------------------------------------------------------
 * Desktop (≥ 901px): align the header to the SAME 3-column grid
 * as the project triptych so the menu lines up with the image columns.
 *   - col 1 : logo
 *   - col 2 : first menu group  (starts where the 2nd triptych image starts)
 *   - col 3 : second menu group (right-aligned to the right edge)
 * The grid uses `1fr 1fr 1fr` tracks, the same --gutter gap, and the header's
 * --gutter side padding, so the column lines match pixel-for-pixel. Extended
 * down to 901px so the right group (… Kontakt) stays pinned to the right edge
 * and the left group keeps its column-2 position at narrower desktop widths.
 * ---------------------------------------------------------------- */
@media (min-width: 901px) {
	/* Higher-specificity selectors (.site-header …) so these win over the base
	   rules in both header.css and main.css regardless of stylesheet order. */
	.site-header .site-header__inner {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: var(--gutter, clamp(1rem, 4vw, 3rem));
		align-items: center;
		width: 100%;
		max-width: none;       /* undo any container-max cap → full-bleed */
		margin-inline: 0;      /* undo centring */
		padding-inline: 0;
	}

	.site-header .site-header__logo {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
	}

	/* The nav spans columns 2 and 3 and is itself a 2-track grid whose tracks
	   line up exactly with triptych columns 2 and 3 (same width + same gap). */
	.site-header .site-header__nav {
		grid-column: 2 / 4;
		grid-row: 1;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--gutter, clamp(1rem, 4vw, 3rem));
		flex: none;            /* cancel base flex:1 */
		justify-content: stretch;
	}

	.site-header .primary-menu--left  { grid-column: 1; } /* = triptych col 2 */
	.site-header .primary-menu--right { grid-column: 2; } /* = triptych col 3 */

	.site-header .primary-menu--left,
	.site-header .primary-menu--right {
		display: flex;
		gap: clamp(1.25rem, 2.5vw, 2.5rem);
		justify-content: flex-start;
		align-items: center;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/* The language switcher used to occupy the right edge of column 3; now that
	   it lives in the footer, push the right menu group to that edge so the bar
	   stays balanced edge-to-edge and ends flush right with "Kontakt". */
	.site-header .primary-menu--right {
		justify-content: flex-end;
	}

	.site-header .site-header__lang {
		grid-column: 3;
		grid-row: 1;           /* keep inline with the menu, not on a 2nd row */
		justify-self: end;
	}
}

/* MAIN MENU ITEMS — Europa Bold, black, stays black on hover */
.primary-menu > li > a {
	display: inline-block;
	padding: 0.5rem 0;
	color: var(--ova-black);
	font-family: var(--ova-font);
	font-size: var(--ova-fz);
	font-weight: var(--ova-fw-bold);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--ova-trans);
	position: relative;
}

.primary-menu > li > a:hover,
.primary-menu > li.current-menu-item > a,
.primary-menu > li.current-menu-parent > a {
	color: var(--ova-black);
}

/* Sub-menu (desktop) */
.primary-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, -4px);
	list-style: none;
	margin: 0;
	padding: 1rem 1.5rem 1.25rem;
	min-width: 12rem;
	background: var(--ova-bg);
	text-align: center;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity    var(--ova-trans),
		transform  var(--ova-trans),
		visibility var(--ova-trans);
	z-index: 10;
}

.primary-menu .menu-item-has-children:hover > .sub-menu,
.primary-menu .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

/* Hover bridge so the sub-menu doesn't flicker */
.primary-menu .menu-item-has-children::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: 0.75rem;
}

.primary-menu .sub-menu li {
	margin: 0;
}

/* SUBMENU ITEMS — Europa Regular, grey, hover black */
.primary-menu .sub-menu a {
	display: block;
	padding: 0.25rem 0;
	color: var(--ova-grey);
	font-family: var(--ova-font);
	font-size: var(--ova-fz-sub);
	font-weight: var(--ova-fw);
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--ova-trans);
}

.primary-menu .sub-menu a:hover {
	color: var(--ova-black);
}

/* ---------------- Language switcher ---------------- */
.lang-switcher {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--ova-font);
	font-size: var(--ova-fz);
	font-weight: var(--ova-fw);
	white-space: nowrap;
}

.lang-switcher__item {
	color: var(--ova-grey);
	text-decoration: none;
	transition: color var(--ova-trans);
}

.lang-switcher__item.is-active {
	color: var(--ova-black);
	font-weight: var(--ova-fw-bold);
}

.lang-switcher__item:hover {
	color: var(--ova-black);
}

.lang-switcher__sep {
	color: var(--ova-grey);
	opacity: 0.5;
}

/* ---------------- Hamburger ---------------- */
.site-header__toggle {
	display: none;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0.5rem;
	margin-left: auto;
	background: transparent;
	border: 0;
	cursor: pointer;
}

.site-header__toggle-bar {
	display: block;
	width: 100%;
	height: 1px;
	margin: 0.375rem 0;
	background: var(--ova-fg);
	transition:
		transform var(--ova-trans),
		opacity   var(--ova-trans);
}

/* ---------------- Accessibility ---------------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link:focus {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 1000;
	width: auto;
	height: auto;
	padding: 0.5rem 1rem;
	background: #000;
	color: #fff;
	clip: auto;
}

/* ---------------- Mobile ---------------- */
@media (max-width: 900px) {

	.site-header__inner {
		flex-wrap: wrap;
		height: auto;
		min-height: var(--ova-header-h);
		padding-inline: 0rem; /* Safe screen margins so items don't touch mobile screen borders */
		padding-block: 0.75rem;
		gap: 1rem;
	}

	.site-header__logo   { order: 1; }
	.site-header__lang   { order: 2; margin-left: auto; }
	.site-header__toggle { order: 3; display: block; margin: 0; }
	.site-header__nav    { order: 4; flex-basis: 100%; flex-direction: column; }

	.site-header__nav {
		max-height: 0;
		overflow: hidden;
		transition: max-height 320ms ease;
	}

	.site-header.is-open .site-header__nav {
		max-height: 80vh;
		overflow-y: auto;
	}

	.primary-menu {
		flex-direction: column;
		gap: 0;
		width: 100%;
	}

	.primary-menu > li {
		border-top: 1px solid rgba(0, 0, 0, 0.08);
	}

	.primary-menu > li > a {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0.875rem 0;
	}

	/* No + / − indicators */
	.primary-menu .menu-item-has-children > a::after {
		display: none;
	}

	/* Disable desktop hover bridge */
	.primary-menu .menu-item-has-children::after {
		display: none;
	}

	/* Sub-menu accordion — animate max-height, never toggle display.
	   Keeping it rendered (collapsed) avoids the repaint glitch and gives
	   a smooth open/close. */
	.primary-menu .sub-menu {
		position: static;
		display: block;
		overflow: hidden;
		max-height: 0;
		opacity: 0;
		visibility: visible;
		min-width: 0;
		padding: 0 0 0 1rem;
		text-align: left;
		/* Promote to its own layer so iOS/WebKit repaints reliably. */
		transform: translateZ(0);
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		will-change: max-height;
		transition: max-height 320ms ease, opacity 240ms ease, padding 320ms ease;
	}

	/* Show when parent is open */
	.primary-menu .menu-item-has-children.is-open > .sub-menu {
		max-height: 400px;
		opacity: 1;
		padding: 0.25rem 0 0.75rem 1rem;
	}

	/* Neutralise the desktop hover/focus transform on mobile — otherwise
	   :focus-within (fired when you tap the parent) shifts the now-static
	   sub-menu 50% to the left and out of view. */
	.primary-menu .menu-item-has-children:hover > .sub-menu,
	.primary-menu .menu-item-has-children:focus-within > .sub-menu {
		transform: translateZ(0);
	}

	.primary-menu .sub-menu a {
		padding: 0.7rem 0;
		color: var(--ova-black);
		opacity: 1;
		visibility: visible;
	}

	.primary-menu .sub-menu a:hover {
		color: var(--ova-grey);
	}

	/* Hamburger → X */
	.site-header.is-open .site-header__toggle-bar:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}
	.site-header.is-open .site-header__toggle-bar:nth-child(2) {
		opacity: 0;
	}
	.site-header.is-open .site-header__toggle-bar:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}
}

/* ---------------- Reduce motion ---------------- */
@media (prefers-reduced-motion: reduce) {
	.site-header *,
	.site-header *::before,
	.site-header *::after {
		transition: none !important;
	}
}