/* ==========================================================================
   Header & Navigation
   Site header layout, primary nav, "Toiminta" megamenu, language switch, CTAs.
   Sticky positioning + stuck-state shadow live in style.css @layer header.
   ========================================================================== */

@layer header {

	/* ----- Header shell: translucent, blurred, full-bleed ----- */

	.site-header {
		background: var(--color-base-alpha-80, rgb(255 255 255 / 0.9));
		border-block-end: 1px solid var(--color-border, rgb(1 30 68 / 0.1));
		padding-block: var(--wp--preset--spacing--30, 0.75rem);
		padding-inline: var(--wp--preset--spacing--40, 1rem);

		@supports (backdrop-filter: blur(10px)) {
			background: var(--color-base-alpha-50, rgb(255 255 255 / 0.7));
			backdrop-filter: blur(10px);
		}
	}

	.en-header__inner {
		display: flex;
		align-items: center;
		gap: var(--wp--preset--spacing--50, 1.5rem);
		inline-size: 100%;
		max-inline-size: var(--wp--style--global--wide-size, 1200px);
		margin-inline: auto;
	}

	/* ----- Logo ----- */

	.en-logo {
		display: inline-flex;
		align-items: center;
		flex: none;

		img {
			block-size: 2.5rem;
			inline-size: auto;
		}
	}

	/* ----- Primary nav ----- */

	.en-nav {
		display: flex;
		align-items: center;
		gap: var(--wp--preset--spacing--50, 1.5rem);
		flex: 1;
	}

	.en-nav__list {
		display: flex;
		align-items: center;
		gap: var(--wp--preset--spacing--20, 0.25rem);
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.en-nav__item {
		position: relative;
	}

	.en-nav__link {
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
		padding-block: 0.55rem;
		padding-inline: 0.9rem;
		border-radius: var(--wp--preset--border--radius--small, 0.25rem);
		font-weight: 600;
		color: var(--wp--preset--color--contrast, #011e44);
		text-decoration: none;
		transition:
			background var(--wp--custom--timing--fast, 150ms) var(--wp--custom--easing--standard, ease),
			color var(--wp--custom--timing--fast, 150ms) var(--wp--custom--easing--standard, ease);

		@media (prefers-reduced-motion: reduce) {
			transition: none;
		}

		&:hover,
		&:focus-visible {
			background: color-mix(in oklch, var(--wp--preset--color--primary, #0a4ba0) 10%, white);
			color: var(--wp--preset--color--primary, #0a4ba0);
		}

		&:focus-visible {
			outline: var(--focus-ring, 2px solid #0a4ba0);
			outline-offset: 2px;
		}
	}

	.en-caret {
		transition: transform var(--wp--custom--timing--normal, 300ms) var(--wp--custom--easing--standard, ease);

		@media (prefers-reduced-motion: reduce) {
			transition: none;
		}
	}

	.en-nav__item--mega:hover .en-caret,
	.en-nav__item--mega:focus-within .en-caret {
		transform: rotate(180deg);
	}

	/* ----- Megamenu (opens on hover + keyboard focus-within — no JS required) ----- */

	.en-megamenu {
		position: absolute;
		inset-block-start: calc(100% + 0.75rem);
		inset-inline-start: 0;
		transform: translateY(0.5rem);
		inline-size: min(20rem, 90vw);
		display: grid;
		grid-template-columns: 1fr;
		gap: 0.5rem 1.5rem;
		padding: var(--wp--preset--spacing--50, 1.5rem);
		background: var(--wp--preset--color--base, #fff);
		border: 1px solid var(--color-border, rgb(1 30 68 / 0.1));
		border-radius: var(--wp--preset--border--radius--large, 1rem);
		box-shadow: var(--wp--preset--shadow--xl);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		z-index: var(--wp--custom--z-index--dropdown, 300);
		transition:
			opacity var(--wp--custom--timing--normal, 300ms) var(--wp--custom--easing--standard, ease),
			transform var(--wp--custom--timing--normal, 300ms) var(--wp--custom--easing--standard, ease);

		@media (prefers-reduced-motion: reduce) {
			transition: none;
		}
	}

	/* Invisible bridge across the trigger→panel gap so the dropdown stays open
	   while the pointer travels down into it (inherits pointer-events, so it is
	   only active while the panel is open). */
	.en-megamenu::before {
		content: "";
		position: absolute;
		inset-block-end: 100%;
		inset-inline: 0;
		block-size: 0.85rem;
	}

	.en-nav__item--mega:hover .en-megamenu,
	.en-nav__item--mega:focus-within .en-megamenu {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(0);
	}

	.en-megamenu__heading {
		grid-column: auto;
		margin: 0 0 0.35rem;
		padding-inline: 0.6rem;
		font-size: var(--wp--preset--font-size--small, 0.875rem);
		font-weight: 700;
		letter-spacing: var(--wp--custom--letter-spacing--caps, 0.1em);
		text-transform: uppercase;
		color: var(--wp--preset--color--secondary, #3a4f6e);
	}

	.en-megamenu__link {
		display: flex;
		align-items: center;
		gap: 0.4rem;
		padding-block: 0.55rem;
		padding-inline: 0.6rem;
		border-radius: var(--wp--preset--border--radius--small, 0.25rem);
		font-weight: 600;
		color: var(--wp--preset--color--contrast, #011e44);
		text-decoration: none;
		transition:
			background var(--wp--custom--timing--fast, 150ms) var(--wp--custom--easing--standard, ease),
			color var(--wp--custom--timing--fast, 150ms) var(--wp--custom--easing--standard, ease);

		@media (prefers-reduced-motion: reduce) {
			transition: none;
		}

		&:hover,
		&:focus-visible {
			background: color-mix(in oklch, var(--wp--preset--color--primary, #0a4ba0) 10%, white);
			color: var(--wp--custom--brand--pink-text, #c12a55);
		}

		&:focus-visible {
			outline: var(--focus-ring, 2px solid #0a4ba0);
			outline-offset: 1px;
		}
	}

	.en-megamenu__ext {
		color: var(--wp--preset--color--secondary, #3a4f6e);
		font-weight: 700;
	}

	/* ----- Header right: language switch + CTAs ----- */

	.en-header__right {
		display: flex;
		align-items: center;
		gap: var(--wp--preset--spacing--40, 1rem);
		margin-inline-start: auto;
	}

	.en-lang {
		display: inline-flex;
		align-items: center;
		gap: 0.15rem;
		font-weight: 700;
		font-size: var(--wp--preset--font-size--small, 0.875rem);
	}

	.en-lang__opt {
		padding: 0.25rem;
		border-radius: 4px;
		color: var(--wp--preset--color--secondary, #3a4f6e);
		text-decoration: none;

		&.is-active {
			color: var(--wp--preset--color--contrast, #011e44);
		}

		&:hover,
		&:focus-visible {
			color: var(--wp--preset--color--primary, #0a4ba0);
		}

		&:focus-visible {
			outline: var(--focus-ring, 2px solid #0a4ba0);
			outline-offset: 2px;
		}
	}

	.en-lang__sep {
		color: var(--color-border-strong, rgb(1 30 68 / 0.2));
	}

	.en-header__ctas {
		display: flex;
		align-items: center;
		gap: 0.6rem;
	}

	/* ----- Chrome buttons (header + footer, hand-authored markup) ----- */

	.en-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		padding-block: 0.7rem;
		padding-inline: 1.25rem;
		border: 2px solid transparent;
		border-radius: var(--wp--preset--border--radius--full, 999px);
		font-weight: 700;
		font-size: var(--wp--preset--font-size--small, 0.9375rem);
		line-height: 1;
		text-decoration: none;
		white-space: nowrap;
		transition:
			background var(--wp--custom--timing--fast, 150ms) var(--wp--custom--easing--standard, ease),
			border-color var(--wp--custom--timing--fast, 150ms) var(--wp--custom--easing--standard, ease),
			color var(--wp--custom--timing--fast, 150ms) var(--wp--custom--easing--standard, ease);

		@media (prefers-reduced-motion: reduce) {
			transition: none;
		}

		&:focus-visible {
			outline: var(--focus-ring, 2px solid #0a4ba0);
			outline-offset: 2px;
		}
	}

	.en-btn--primary {
		background: var(--wp--preset--color--accent, #d5456b);
		color: var(--wp--preset--color--base, #fff);

		&:hover {
			background: var(--color-accent-active, #bd2f57);
		}
	}

	.en-btn--outline {
		background: transparent;
		color: var(--wp--preset--color--contrast, #011e44);
		border-color: var(--color-border-strong, rgb(1 30 68 / 0.2));

		&:hover {
			background: var(--wp--preset--color--subtle, #eef2f9);
			border-color: var(--wp--preset--color--contrast, #011e44);
		}
	}

	.en-btn--orange {
		background: var(--wp--custom--brand--orange, #ffa21e);
		color: var(--wp--preset--color--contrast, #011e44);

		&:hover {
			background: color-mix(in oklch, var(--wp--custom--brand--orange, #ffa21e) 82%, white);
		}
	}

	/* ----- Mobile toggle (hidden on desktop) ----- */

	.en-nav-toggle {
		display: none;
		align-items: center;
		justify-content: center;
		inline-size: 2.75rem;
		block-size: 2.75rem;
		margin-inline-start: auto;
		padding: 0;
		background: transparent;
		border: 1px solid var(--color-border, rgb(1 30 68 / 0.1));
		border-radius: var(--wp--preset--border--radius--small, 0.25rem);
		cursor: pointer;

		&:focus-visible {
			outline: var(--focus-ring, 2px solid #0a4ba0);
			outline-offset: 2px;
		}
	}

	.en-nav-toggle__bars,
	.en-nav-toggle__bars::before,
	.en-nav-toggle__bars::after {
		content: "";
		display: block;
		inline-size: 1.35rem;
		block-size: 2px;
		background: var(--wp--preset--color--contrast, #011e44);
		border-radius: 2px;
		transition: transform var(--wp--custom--timing--fast, 150ms) var(--wp--custom--easing--standard, ease);

		@media (prefers-reduced-motion: reduce) {
			transition: none;
		}
	}

	.en-nav-toggle__bars {
		position: relative;

		&::before {
			position: absolute;
			inset-block-start: -0.4rem;
			inset-inline-start: 0;
		}

		&::after {
			position: absolute;
			inset-block-start: 0.4rem;
			inset-inline-start: 0;
		}
	}

	.en-nav-toggle[aria-expanded="true"] .en-nav-toggle__bars {
		background: transparent;

		&::before {
			transform: translateY(0.4rem) rotate(45deg);
		}

		&::after {
			transform: translateY(-0.4rem) rotate(-45deg);
		}
	}

	/* ----- Responsive: collapse nav into a toggled panel ----- */

	@media (max-width: 900px) {

		.en-nav-toggle {
			display: inline-flex;
		}

		.en-nav {
			position: absolute;
			inset-block-start: 100%;
			inset-inline: 0;
			flex-direction: column;
			align-items: stretch;
			gap: var(--wp--preset--spacing--40, 1rem);
			max-block-size: calc(100vh - 100%);
			overflow-y: auto;
			padding: var(--wp--preset--spacing--50, 1.5rem);
			background: var(--wp--preset--color--base, #fff);
			border-block-start: 1px solid var(--color-border, rgb(1 30 68 / 0.1));
			box-shadow: var(--wp--preset--shadow--lg);

			/* Hidden until toggled; JS flips .is-open. */
			display: none;
		}

		.en-nav.is-open {
			display: flex;
		}

		.en-nav__list {
			flex-direction: column;
			align-items: stretch;
			gap: 0.25rem;
		}

		.en-nav__link {
			font-size: var(--wp--preset--font-size--large, 1.125rem);
		}

		/* Megamenu becomes a static, always-visible sub-list inside the panel. */
		.en-megamenu {
			position: static;
			transform: none;
			inline-size: 100%;
			grid-template-columns: 1fr;
			gap: 0.75rem;
			margin-block-start: 0.5rem;
			padding: 0 0 0 var(--wp--preset--spacing--40, 1rem);
			border: 0;
			border-inline-start: 2px solid var(--color-border, rgb(1 30 68 / 0.1));
			border-radius: 0;
			box-shadow: none;
			opacity: 1;
			visibility: visible;
			pointer-events: auto;
		}

		.en-header__right {
			flex-direction: column;
			align-items: stretch;
			gap: var(--wp--preset--spacing--40, 1rem);
			margin-inline-start: 0;
			padding-block-start: var(--wp--preset--spacing--40, 1rem);
			border-block-start: 1px solid var(--color-border, rgb(1 30 68 / 0.1));
		}

		.en-header__ctas {
			flex-direction: column;
			align-items: stretch;
		}

		.en-btn {
			justify-content: center;
		}
	}
}