@layer components {
	.tf-header {
		background-color: var(--tf-surface);
	}

	.tf-header__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--tf-space-l);
		padding-block: var(--tf-space-m);
	}

	.tf-header__logo {
		flex: 0 0 auto;
		line-height: 0;
	}

	.tf-header__logo img {
		block-size: var(--tf-space-xl);
		inline-size: auto;
	}

	.tf-header__site-name {
		font-size: var(--tf-font-size-l);
		font-weight: 700;
		color: var(--tf-text);
		text-decoration: none;
	}

	.tf-header__actions {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		gap: var(--tf-space-m);
	}

	/* Primary navigation.
	 * min-width: 0 overrides the flex item's default content-based
	 * minimum, which otherwise forces the whole header to overflow
	 * instead of letting this element shrink or scroll — the actual
	 * cause of a real bug caught in tablet verification (CTA pushed
	 * off-screen at 768px). overflow-x here is the safety net: if
	 * available space is ever tighter than the nav's content even
	 * after the tablet size reductions below, the nav scrolls within
	 * itself rather than ever displacing the always-visible CTA. */
	.tf-nav {
		flex: 1 1 auto;
		min-width: 0;
		display: flex;
		/* "safe" falls back to start-alignment instead of centering
		 * when content overflows — plain "center" on an overflowing
		 * flex container clips equally from both ends, hiding the
		 * first and last nav items with no way to scroll to them.
		 * Caught live at the 768px tablet boundary. */
		justify-content: safe center;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.tf-nav::-webkit-scrollbar {
		display: none;
	}

	.tf-nav__list {
		display: flex;
		align-items: center;
		gap: var(--tf-space-m);
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.tf-nav__list a {
		display: inline-block;
		padding-block: var(--tf-space-3xs);
		color: var(--tf-text-muted);
		font-size: var(--tf-font-size-s);
		font-weight: 500;
		text-decoration: none;
		white-space: nowrap;
	}

	.tf-nav__list a:hover {
		color: var(--tf-accent);
	}

	/* Mobile nav toggle — revealed only once JS confirms it can run the
	 * interaction (progressive enhancement). Without JS, the toggle
	 * never appears and the nav list wraps inline instead of hiding —
	 * see the mobile media query below and navigation.js. */
	.tf-nav__toggle {
		display: none;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 5px;
		inline-size: 2.5rem;
		block-size: 2.5rem;
		padding: 0;
		background: none;
		border: none;
		cursor: pointer;
	}

	.tf-nav__toggle-bar {
		display: block;
		inline-size: 1.5rem;
		block-size: 2px;
		background-color: var(--tf-text);
		transition: transform 150ms ease, opacity 150ms ease;
	}

	.tf-nav__toggle[aria-expanded="true"] .tf-nav__toggle-bar:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}

	.tf-nav__toggle[aria-expanded="true"] .tf-nav__toggle-bar:nth-child(2) {
		opacity: 0;
	}

	.tf-nav__toggle[aria-expanded="true"] .tf-nav__toggle-bar:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}

	/* Language switcher, in header context */
	.tf-header__actions .tf-lang-switcher__list {
		display: flex;
		align-items: center;
		gap: var(--tf-space-2xs);
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.tf-header__actions .tf-lang-switcher a {
		color: var(--tf-text-muted);
		font-size: var(--tf-font-size-s);
		text-decoration: none;
	}

	.tf-header__actions .tf-lang-switcher a[aria-current="true"] {
		color: var(--tf-text);
		font-weight: 700;
	}

	.tf-header__actions .tf-lang-switcher a:hover {
		color: var(--tf-accent);
	}

	/* Tablet: same layout as desktop, sizes tightened using the
	 * existing scale — no structural change (per the approved plan). */
	@media (max-width: 1024px) {
		.tf-header__inner {
			gap: var(--tf-space-m);
		}

		.tf-header__logo img {
			block-size: var(--tf-space-l);
		}

		.tf-nav__list {
			gap: var(--tf-space-s);
		}
	}

	@media (max-width: 767px) {
		/* Real bug caught in mobile verification: logo + toggle +
		 * switcher + CTA together exceed a 375px viewport, and
		 * .tf-header__actions never shrinks (flex: 0 0 auto), so it
		 * was overflowing off-screen instead of wrapping. Letting the
		 * row wrap keeps every element visible (logo+toggle on one
		 * line, switcher+CTA on the next) with no hidden content and
		 * no horizontal scroll — CTA visibility is the design's own
		 * priority, so it must never be the thing that gets clipped. */
		.tf-header__inner {
			flex-wrap: wrap;
			align-items: center;
			row-gap: var(--tf-space-s);
			padding-block: var(--tf-space-l);
		}

		/* Standard convention, reverted from the previous swap: logo
		 * stays first in markup (flex-start) and the toggle stays
		 * last (flex-end) — no `order` override. `.tf-header__inner`'s
		 * `justify-content: space-between` (set at the base level,
		 * above) does the rest on its own: logo-start/toggle-end in
		 * LTR, logo-end/toggle-start in RTL, purely from document
		 * order and `dir` — exactly the "let flexbox handle it"
		 * behaviour logical properties are supposed to give for free.
		 * .tf-nav still drops flex-grow here: while collapsed, its box
		 * is just the toggle button, so it must not expand and center
		 * the toggle away from the true edge — that flex-grow is what
		 * lets it fill the nav-links space at every wider breakpoint,
		 * unchanged there. This is a sizing fix, not a placement rule. */
		.tf-nav {
			flex: 0 0 auto;
		}

		/* Logo, restored to full size on the first row (the tablet
		 * reduction above is too small to stay legible as a standalone
		 * mobile row) and given its own flex context so the link
		 * wrapper WordPress outputs around it can't introduce a
		 * baseline-driven vertical offset against the toggle beside it —
		 * align-items: center on the parent centers the two as a pair,
		 * but only if the logo's own box has no inline-baseline slack. */
		.tf-header__logo img {
			block-size: var(--tf-space-xl);
		}

		.tf-header__logo a {
			display: flex;
			align-items: center;
		}

		/* The wrapped second row is a deliberate row, not a leftover:
		 * it spans the full width so switcher and CTA anchor to the
		 * same edges as the logo/toggle row above, a visible top
		 * border marks it as an intentional division rather than
		 * accidental wrapping, and its own top padding keeps it from
		 * crowding the row above. */
		.tf-header__actions {
			flex-basis: 100%;
			justify-content: space-between;
			padding-block-start: var(--tf-space-xs);
			border-block-start: 1px solid var(--tf-border-subtle);
		}

		/* No-JS fallback: every link stays visible, wrapping onto
		 * multiple lines rather than disappearing behind a toggle
		 * that would have no way to open it. */
		.tf-nav__list {
			flex-wrap: wrap;
			justify-content: center;
		}

		/* JS-enhanced state only (navigation.js sets data-tf-js on
		 * the nav once it has attached the toggle behaviour) — this
		 * is the only path that hides the list and reveals the
		 * toggle button, so the two always change together. */
		.tf-nav[data-tf-js] .tf-nav__toggle {
			display: flex;
		}

		.tf-nav[data-tf-js] .tf-nav__list {
			display: none;
			position: absolute;
			inset-inline: 0;
			top: 100%;
			flex-direction: column;
			align-items: stretch;
			flex-wrap: nowrap;
			gap: 0;
			background-color: var(--tf-surface);
			box-shadow: var(--tf-shadow-m);
			padding: var(--tf-space-s);
			z-index: 10;
		}

		.tf-nav[data-tf-js] .tf-nav__list[data-tf-open] {
			display: flex;
		}

		.tf-nav[data-tf-js] .tf-nav__list a {
			padding-block: var(--tf-space-xs);
		}

		.tf-header {
			position: relative;
		}
	}
}