/**
 * Navigation styling for core/navigation.
 *
 * Loaded only on pages containing a navigation block. No JavaScript is added:
 * the core block's own Interactivity API implementation handles the responsive
 * overlay, focus trapping and Escape-to-close.
 */

.wp-block-navigation {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.wp-block-navigation .wp-block-navigation-item__content {
	padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--xs);
	border-radius: var(--wp--custom--radius--pill);
	text-decoration: none;
	color: var(--wp--preset--color--text-primary);
	transition:
		background-color var(--wp--custom--transition--fast),
		color var(--wp--custom--transition--fast);
}

/*
 * The redesign's nav hover is a subtle pill tint, not a colour change and
 * underline — a background change is itself a non-colour signal (WCAG 1.4.1).
 */
.wp-block-navigation .wp-block-navigation-item__content:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--text-primary) 7%, transparent);
	color: var(--wp--preset--color--text-primary);
	text-decoration: none;
}

/*
 * The current page gets a soft green pill rather than an underline: the nav
 * items are pill-shaped now, and a bottom border reads as a stray line across
 * the rounded corners. The tinted fill is a non-colour signal in its own right
 * (WCAG 1.4.1), and the green text sits on it at ample contrast.
 */
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .current_page_item > .wp-block-navigation-item__content,
.wp-block-navigation
	.current-menu-parent
	> .wp-block-navigation-submenu__toggle {
	background-color: var(--wp--preset--color--surface-accent);
	color: var(--wp--preset--color--brand-primary);
}

/* --- Submenus ------------------------------------------------------------ */

/*
 * Submenu toggles ("Tjänster", "Sjukvård & hygien") rendered at 72x25 and
 * 141x25 — one pixel above the 24x24 WCAG 2.2 SC 2.5.8 minimum, and out of
 * step with the 44px targets used everywhere else. The core block renders
 * these as <button>, which does not inherit the padding applied to
 * .wp-block-navigation-item__content on link items.
 */
.wp-block-navigation .wp-block-navigation-submenu__toggle {
	gap: var(--wp--preset--spacing--3-xs);
	padding-block: var(--wp--preset--spacing--2-xs);
	min-block-size: 44px;
	display: inline-flex;
	align-items: center;
}

/*
 * Click-to-open toggles need their inline padding restated. Core ships
 *
 *   .wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle
 *   { padding-left: 0; padding-right: .85em }
 *
 * which at (0,3,0) outranks both the rule above and the shared
 * .wp-block-navigation-item__content padding, so the hover pill rendered flush
 * against the first letter of "Städtjänster" with no side padding at all.
 *
 * Restated at (0,4,0) using the same `xs` the link items use, so every pill in
 * the bar has identical side padding. Both sides are set rather than just the
 * zeroed one: the chevron is a *sibling* of the button and core pulls it back
 * with `margin-left: -.6em` into this padding, so the right value has to stay
 * near core's .85em — `xs` is 0.75rem against a 0.875–0.9375rem font, which
 * lands within a pixel of it and leaves the chevron where it sits.
 */
.wp-block-navigation
	.wp-block-navigation-item.open-on-click
	.wp-block-navigation-submenu__toggle {
	padding-inline: var(--wp--preset--spacing--xs);
}

.wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border-subtle);
	border-radius: 8px;
	box-shadow: var(--wp--preset--shadow--raised);
	padding-block: var(--wp--preset--spacing--xs);
	min-inline-size: 16rem;

	/*
	 * Core sets `color: #000` on the submenu container, which every link inside
	 * then inherits. Pure black is not in the palette — body text is #1A1919 —
	 * and it made the eleven service links in the dropdown the only text on the
	 * site rendered in a colour the design system does not define.
	 */
	color: var(--wp--preset--color--text-primary);

	/*
	 * Core ships `transition: opacity .1s linear`, fast enough to read as a hard
	 * cut. design-system.md §6.2 item 3 sanctions disclosure motion, and §6.1
	 * restricts what may animate to opacity and transform — so the panel fades
	 * and rises, and nothing else moves.
	 *
	 * `visibility` is stepped rather than eased and delayed on the way out; that
	 * delay is what keeps the fade visible instead of the panel disappearing on
	 * frame one.
	 */
	transform: translateY(-0.5rem);
	transition:
		opacity var(--wp--custom--transition--base),
		transform var(--wp--custom--transition--base),
		visibility 0s linear 200ms;

	/*
	 * Clears the header's own bottom padding.
	 *
	 * Core anchors the panel to the bottom of the menu ITEM, which sits a
	 * padding-height above the bottom of the header. The panel therefore opened
	 * across the header's hairline border and cut a white gap out of it. Offset
	 * by the same spacing token the header pads with, so the two stay in step if
	 * that padding is ever changed.
	 */
	margin-block-start: var(--wp--preset--spacing--s);
}

.wp-block-navigation
	.wp-block-navigation__submenu-container
	.wp-block-navigation-item__content {
	padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--s);
	inline-size: 100%;
	border-radius: 4px;
}

/*
 * Submenus must not be hover-only: a keyboard or touch user needs the click
 * target. The core block opens on click when "Open on click" is set, which is
 * how the header template part configures it.
 */

/*
 * Hovering a submenu link tints the whole row rather than just the words. A
 * full-width target reads as a menu row instead of a line of text, and it gives
 * the pointer a much larger area to land on than the glyphs do.
 */
.wp-block-navigation
	.wp-block-navigation__submenu-container
	.wp-block-navigation-item__content:hover,
.wp-block-navigation
	.wp-block-navigation__submenu-container
	.wp-block-navigation-item__content:focus-visible {
	background-color: var(--wp--preset--color--surface-raised);
	color: var(--wp--preset--color--brand-primary);
	text-decoration: none;
}

/* --- Opening transition -------------------------------------------------- */

.wp-block-navigation
	.wp-block-navigation-submenu__toggle[aria-expanded="true"]
	~ .wp-block-navigation__submenu-container {
	transform: translateY(0);
	transition:
		opacity var(--wp--custom--transition--base),
		transform var(--wp--custom--transition--base),
		visibility 0s;
}

/*
 * The chevron turns to point at the panel it opened. A rotation is a transform,
 * so it costs nothing, and it gives the control a state that is visible without
 * relying on the panel itself being on screen.
 */
.wp-block-navigation .wp-block-navigation__submenu-icon svg {
	transition: transform var(--wp--custom--transition--base);
}

.wp-block-navigation
	.wp-block-navigation-submenu__toggle[aria-expanded="true"]
	.wp-block-navigation__submenu-icon
	svg {
	transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-navigation .wp-block-navigation__submenu-container,
	.wp-block-navigation .wp-block-navigation__submenu-icon svg {
		transition: none;
		transform: none;
	}
}

/* --- Wide panel for the service catalogue --------------------------------- */

/*
 * Eleven services in one vertical column ran nearly the height of the viewport
 * and made the reader scan a list instead of a menu. Coor solves the same
 * problem with a wide panel and the catalogue set in columns; this is the same
 * idea at the scale this site needs.
 *
 * Applied only to panels that are actually long. `:has()` counts the children,
 * so the two-item "Sjukvård & hygien" panel keeps its compact dropdown and does
 * not stretch into an mostly-empty slab. Engines without `:has()` keep the
 * single column, which is the current behaviour rather than a broken one.
 *
 * Desktop only, and 64em matches the breakpoint at which the inline row
 * replaces the overlay — below it every item is already a full-width row.
 */
@supports selector(:has(*)) {
	@media (width >= 64em) {
		/*
		 * The long selector is deliberate. Because the navigation is justified
		 * right, core matches it with
		 * `.wp-block-navigation.items-justified-right .wp-block-navigation__container
		 * .has-child .wp-block-navigation__submenu-container { left: auto; right: 0 }`
		 * — five classes. A shorter override loses on specificity and the panel
		 * silently stays right-aligned, which is what happened here.
		 */
		.wp-block-navigation
			.wp-block-navigation__container
			.has-child
			.wp-block-navigation__submenu-container:has(> li:nth-child(7)) {
			display: grid;
			grid-template-columns: repeat(2, minmax(13rem, 1fr));
			gap: 0 var(--wp--preset--spacing--m);
			padding: var(--wp--preset--spacing--m);

			/*
			 * Anchored to the trigger's left edge. Core right-aligns submenu
			 * panels, which is the right call for a narrow dropdown near the end
			 * of the row but wrong for a 490px panel: it hung ~420px to the LEFT
			 * of "Tjänster", visually detached from the control that opened it,
			 * and ran off the viewport entirely at 1100px.
			 *
			 * Safe because this rule only ever matches the services panel, and
			 * "Tjänster" is the first item in the row — there is nothing to its
			 * left to collide with, and 490px from there clears the viewport at
			 * every width this panel is shown at.
			 */
			inset-inline: 0 auto;
		}

		/*
		 * The first item is the catalogue's own page. It reads as the panel's
		 * heading rather than as the first of eleven siblings: full width, above
		 * a hairline, with the arrow used on every other "go here" control.
		 */
		.wp-block-navigation
			.wp-block-navigation__submenu-container:has(> li:nth-child(7))
			> li:first-child {
			grid-column: 1 / -1;
			border-block-end: 1px solid var(--wp--preset--color--border-subtle);
			padding-block-end: var(--wp--preset--spacing--xs);
			margin-block-end: var(--wp--preset--spacing--xs);
		}

		.wp-block-navigation
			.wp-block-navigation__submenu-container:has(> li:nth-child(7))
			> li:first-child
			.wp-block-navigation-item__content {
			font-weight: 600;
			color: var(--wp--preset--color--brand-primary);
		}

		.wp-block-navigation
			.wp-block-navigation__submenu-container:has(> li:nth-child(7))
			> li:first-child
			.wp-block-navigation-item__content::after {
			content: " →";
		}
	}
}

/* --- Overlay breakpoint ---------------------------------------------------- */

/*
 * Core switches to the overlay menu below 600px. That is too low for this
 * navigation: seven top-level items, two of them long Swedish compounds, plus a
 * phone number and a call to action. Measured header heights before this rule:
 *
 *      600px  221px  (three rows)
 *      700px  174px  (three rows)
 *      768px  130px  (two rows)
 *      900px  130px  (two rows)
 *     1024px   77px  (one row)
 *
 * A header that is a fifth of a tablet viewport tall, made of wrapped menu
 * items, is not a navigation — it is an accident. The overlay is raised to the
 * `lg` breakpoint (64em), which design-system.md §4.3 already calls "the main
 * structural breakpoint", so the inline row is only used where it genuinely
 * fits on one line.
 *
 * Re-stating the rules below 600px as well is harmless — core already does the
 * same thing there — and keeps this as one legible block rather than a narrow
 * band that has to be reasoned about separately.
 */
@media (width < 64em) {
	.wp-block-navigation
		.wp-block-navigation__responsive-container:not(
			.hidden-by-default,
			.is-menu-open
		) {
		display: none;
	}

	.wp-block-navigation
		.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

/* --- Mobile overlay ------------------------------------------------------ */

.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--surface);

	/*
	 * The company's own flower, very quiet, anchored off the bottom-right
	 * corner — their mark rather than an invented ornament, faint and low
	 * enough that it never competes with the links.
	 *
	 * Drawn as a pseudo-element rather than a background on the panel itself, so
	 * it can carry an opacity. At full strength the mark is a saturated yellow
	 * flower a third of the screen tall, which is an illustration competing with
	 * the menu, not a watermark behind it.
	 */
	padding-inline: var(--wp--custom--gutter);
	text-align: start;
}

/*
 * Block padding, with the end clearing the fixed mobile CTA bar (4.25rem, see
 * sections.css). The overlay is `position: fixed`, so the `body` padding that
 * keeps that bar off the page content does nothing here — with the services
 * list open the bar cut the last two entries in half.
 *
 * The extra `.wp-block-navigation` is load-bearing. Something upstream sets
 * `padding-block: 1rem` at the same two-class specificity as the rule above, so
 * the shorthand there lost its block values while keeping its inline ones —
 * measured, not assumed: computed padding read `16px 20.64px`.
 */
.wp-block-navigation
	.wp-block-navigation__responsive-container.is-menu-open {
	padding-block: var(--wp--preset--spacing--xl)
		calc(var(--wp--preset--spacing--xl) + 4.25rem);
}

.wp-block-navigation__responsive-container.is-menu-open::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("../images/brand/indoor-mark.png");
	background-repeat: no-repeat;
	background-position: right -3rem bottom -2rem;
	background-size: auto 34vh;
	opacity: 0.12;
	pointer-events: none;
	z-index: 0;
}

/*
 * ...and the menu sits above it. The pseudo-element is a later sibling in paint
 * order, so without this the watermark would be drawn over the links.
 */
.wp-block-navigation__responsive-container.is-menu-open
	> .wp-block-navigation__responsive-close {
	position: relative;
	z-index: 1;
}

/* --- Overlay: giving the full-screen menu some design ---------------------
 *
 * It was a flat white sheet with a list on it. Everything below is decorative
 * or structural — deliberately no text is introduced through CSS `content`,
 * because a Swedish string in a stylesheet cannot be translated and would be a
 * second source of truth for wording that belongs in the menu itself.
 * ------------------------------------------------------------------------- */

/*
 * The brand mark, very quiet, anchored to the bottom-right corner.
 *
 * It uses the company's own flower rather than an invented ornament, and sits
 * far enough down and faint enough that it never competes with the links — the
 * design system's restraint applies here too. `background-attachment: local`
 * keeps it pinned while a long menu scrolls over it.
 */

/*
 * A gold hairline separating the close control from the menu itself. The same
 * accent the eyebrows and the credential rules use, so the overlay reads as
 * part of the system rather than a stock WordPress panel.
 */
/*
 * The rule goes on the list, not on the content wrapper. Core positions the
 * close button absolutely and gives the wrapper `position: absolute; inset: 0`
 * of its own, so a top border there drew a line across the very top of the
 * panel — above the X rather than under it — and a margin on it moved nothing.
 * On the list it lands where it was meant to: under the header row, separating
 * the close control and the mark from the menu itself.
 *
 * `inline-size: 100%` is what makes it span. The wrapper is a flex column with
 * `align-items: flex-start` (see the left-alignment rule below), which shrinks
 * the list to its widest label — 172px of a 349px panel — leaving the dividers
 * stopping halfway across and the chevron tucked against the word rather than
 * at the edge of the row.
 */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container {
	inline-size: 100%;
	border-block-start: 2px solid var(--wp--preset--color--brand-accent);
	padding-block-start: var(--wp--preset--spacing--m);

	/* Clears the 44px close control above it. */
	margin-block-start: var(--wp--preset--spacing--xl);
}

/*
 * The mark, top-left, opposite the close control — so the row above the gold
 * rule reads as a panel header rather than a stray X in an empty corner. Small
 * and decorative: the name is already in the header behind the overlay, and a
 * second copy would only be something more for a screen reader to announce.
 */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-dialog {
	position: relative;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-dialog::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: 1.75rem;
	block-size: 1.75rem;
	background-image: url("../images/brand/indoor-mark.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/*
 * Hairline dividers between the top-level entries, matching the numbered-step
 * and footer-column treatment. A vertical list of unrelated destinations reads
 * far better with rules than with whitespace alone.
 */
.wp-block-navigation__responsive-container.is-menu-open
	> .wp-block-navigation__responsive-close
	.wp-block-navigation__container
	> .wp-block-navigation-item {
	inline-size: 100%;
	border-block-start: 1px solid var(--wp--preset--color--border-subtle);
}

.wp-block-navigation__responsive-container.is-menu-open
	> .wp-block-navigation__responsive-close
	.wp-block-navigation__container
	> .wp-block-navigation-item:first-child {
	border-block-start: 0;
}

/*
 * The submenu parent is a control, so it is set as a peer of the other rows and
 * carries a chevron. It was previously styled as a mono eyebrow — a label, not
 * something to press — which was defensible while the list below it was always
 * open and is actively misleading now that it collapses.
 */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-submenu__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--s);
	inline-size: 100%;
	color: var(--wp--preset--color--text-primary);
}

/*
 * Core's own chevron is a span beside the button, so pressing it does nothing —
 * a 24px target that looks like the control and is not. It is replaced by one
 * drawn on the button, which makes the whole row the target.
 */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-icon {
	display: none;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-submenu__toggle::after {
	content: "";
	flex: none;
	inline-size: 0.5rem;
	block-size: 0.5rem;
	border-inline-end: 2px solid var(--wp--preset--color--brand-primary);
	border-block-end: 2px solid var(--wp--preset--color--brand-primary);
	transform: rotate(45deg) translate(-0.12em, -0.12em);
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-submenu__toggle[aria-expanded="true"]::after {
	transform: rotate(-135deg) translate(-0.12em, -0.12em);
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-submenu__toggle::after {
		transition: transform var(--wp--custom--transition--base);
	}
}


/*
 * The overlay settles in rather than snapping — the mobile-nav disclosure motion
 * §6.2 item 3 sanctions (duration-slow, ease-out). The backdrop fades and the
 * menu itself rises a few pixels into place, so opening the menu reads as a
 * deliberate transition rather than an instant repaint.
 *
 * Runs each time core adds `is-menu-open`; it is only ever an entrance (closing
 * is instant, which is what a dismiss should feel like). No layout shift — the
 * overlay is `position: fixed`, so it animates over the page, never in its flow —
 * and it never blocks interaction, since the panel is present and focusable for
 * the whole animation. Off entirely under reduced motion.
 */
@media (prefers-reduced-motion: no-preference) {
	@keyframes indoor-overlay-fade {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	@keyframes indoor-overlay-rise {
		from {
			opacity: 0;
			transform: translateY(0.75rem);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.wp-block-navigation__responsive-container.is-menu-open {
		animation: indoor-overlay-fade var(--wp--custom--transition--base) both;
	}

	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-content {
		animation: indoor-overlay-rise var(--wp--custom--transition--slow) both;
	}
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--heading-4);
	padding-block: var(--wp--preset--spacing--xs);
}

/*
 * Left-align the overlay.
 *
 * The inline navigation is justified right, which is correct in a header row
 * beside the logo and wrong in a full-screen menu, where it left every label
 * hugging the right edge above a ragged left margin the eye cannot scan. Digg's
 * webbriktlinjer asks for left alignment on vertical menus for that reason.
 *
 * The extra `.wp-block-navigation` on the front is what makes this land. Core
 * aligns the overlay with
 * `.wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__container`,
 * and `:where()` contributes nothing to specificity, so that resolves to three
 * classes. Setting the custom properties core reads instead does not work
 * either: `.wp-block-navigation.items-justified-right` sets them on a closer
 * ancestor than any override placed on the overlay itself.
 */
.wp-block-navigation
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content,
.wp-block-navigation
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container,
.wp-block-navigation
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container,
.wp-block-navigation
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item {
	align-items: flex-start;
	justify-content: flex-start;
}

/*
 * Inside the overlay a submenu is a nested list, not a floating panel. The
 * desktop treatment — card background, border, shadow, radius, offset — is
 * meaningless here and rendered as a white slab sitting on top of a white
 * screen. It becomes a plainly indented group under its parent.
 *
 * No divider rule: core resets borders on overlay submenus with a selector that
 * repeats the class four times, and out-specifying that for a decorative
 * hairline is not worth the fight. The indent and the type-size step already
 * carry the hierarchy.
 */
/*
 * A closed submenu is closed.
 *
 * Core renders overlay submenus expanded and leaves the toggle's aria-expanded
 * at false, which is both a lie to assistive technology and, with fourteen
 * services under Städtjänster, the reason Miljöer, Om oss and Kontakt sat two
 * screens down in a menu that had just been opened to reach them. The `~` skips
 * the chevron span that sits between the button and the list.
 */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-submenu__toggle[aria-expanded="false"]
	~ .wp-block-navigation__submenu-container {
	display: none;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container {
	display: block;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	min-inline-size: 0;
	padding: 0 0 0 var(--wp--preset--spacing--s);
	margin: var(--wp--preset--spacing--2-xs) 0 var(--wp--preset--spacing--s);
	/* The desktop panel rises as it fades in; in the overlay it simply is. */
	transform: none;
}

/*
 * Submenu links step down a size from their parent so the overlay reads as a
 * hierarchy rather than nineteen equal-weight rows, and indent under it now
 * that the parent is set as a section label rather than a peer link.
 */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container
	.wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--base);
	font-weight: 400;
	padding-inline: var(--wp--preset--spacing--s) 0;
}

/* ---------------------------------------------------------------------------
   Overlay click-to-call

   The menu is where a phone-in-hand buyer looks first for a way to make contact,
   and on mobile the header number is hidden. The "Ring …" item (built in
   tools/build-navigation.mjs from the shared NAP) fills that, shown only in the
   overlay.
   --------------------------------------------------------------------------- */

/*
 * The desktop bar already carries the number, so the item would double it there.
 * Hidden at the overlay's own breakpoint (64em), where the bar takes over. The
 * selector carries the container and item classes as well as `.indoor-nav-call`
 * (three classes) so it outweighs core's own `display: flex` on the nav item,
 * which a single class lost to.
 */
@media (width >= 64em) {
	.wp-block-navigation__container .wp-block-navigation-item.indoor-nav-call {
		display: none;
	}
}

/*
 * In the overlay it reads as a contact action, not another destination: set off
 * from the navigation above it by a hairline, and carrying the brand green.
 */
.wp-block-navigation__responsive-container.is-menu-open .indoor-nav-call {
	margin-block-start: var(--wp--preset--spacing--m);
	padding-block-start: var(--wp--preset--spacing--m);
	border-block-start: 1px solid var(--wp--preset--color--border-subtle);
}

.wp-block-navigation__responsive-container.is-menu-open
	.indoor-nav-call
	.wp-block-navigation-item__content {
	color: var(--wp--preset--color--brand-primary);
	font-weight: 600;
}

/* Open and close buttons need a real 44px target on touch. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	min-inline-size: 44px;
	min-block-size: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--text-primary);
}

.wp-block-navigation__responsive-container-open:focus-visible,
.wp-block-navigation__responsive-container-close:focus-visible {
	outline: 3px solid var(--wp--preset--color--brand-primary);
	outline-offset: 2px;
}

/* --- Header shell -------------------------------------------------------- */

.indoor-header {
	border-block-end: 1px solid var(--wp--preset--color--border-subtle);
	background-color: var(--wp--preset--color--surface);
}

/*
 * Sticky header.
 *
 * design-system.md §6.2 item 4 specifies a sticky header with a shadow on
 * scroll; it was specified but never built. On service pages running to 4 000px
 * and more, the quote button and phone number were the only conversion paths and
 * both scrolled away within one screen.
 *
 * The background is OPAQUE, not translucent. §9.1 item 2 forbids glassmorphism
 * here for a load-bearing reason rather than a stylistic one: every contrast
 * ratio proven in §2 assumes an opaque backdrop, and a translucent header
 * invalidates the whole table the moment content scrolls beneath it.
 *
 * Positioned on the TEMPLATE PART WRAPPER, not on `.indoor-header` itself.
 * `templates/*.html` render the part with `tagName: header`, and `parts/header.html`
 * declares its own root group as `header` too, so the markup nests
 * `header.wp-block-template-part > header.indoor-header`. A sticky element can
 * only travel within its containing block, and that wrapper is exactly as tall
 * as the header — so sticking `.indoor-header` produced an element with nowhere
 * to stick, which scrolled away looking like `position: sticky` had been ignored.
 */
header.wp-block-template-part {
	position: sticky;
	inset-block-start: 0;
	/*
	 * Above page content, below the navigation overlay (which core sets to 100)
	 * and below the skip link at 999.
	 */
	z-index: 50;
	/* See the note below on why this separation is static rather than on scroll. */
	box-shadow: var(--wp--preset--shadow--subtle);
}

/*
 * Separation from the content scrolling underneath.
 *
 * design-system.md §6.2 item 4 sanctions a shadow that APPEARS on scroll. That
 * needs either JavaScript or a scroll-driven animation, and neither earns its
 * place here:
 *
 *   - A JS sentinel would work, but the theme ships 0 bytes of JS and a shadow
 *     is not worth being the change that ends that.
 *   - `animation-timeline: scroll()` is unsupported in Firefox and Safari, so
 *     most visitors would get no shadow at all; and the obvious formulation —
 *     animating `box-shadow` — is banned outright by §6.1 ("only ever animate
 *     opacity and transform") because it repaints rather than composites.
 *
 * So the separation is static: the hairline border declared above, plus the
 * subtle shadow permanently. Against `surface` the shadow is barely present at
 * rest and only reads once content passes beneath it, which is the effect §6.2
 * was after. No motion, nothing to disable under reduced-motion, no JS, and it
 * behaves identically in every engine.
 *
 * Measured after this change: 61 FPS while scrolling on /, /kontorsstadning/,
 * /kontakt/ and /stadtjanster/, header pinned at top 0 on all four.
 */

/* --- Header phone -------------------------------------------------------- */

/*
 * Hidden by default and shown only where the header row can genuinely absorb it.
 *
 * Measured cost of the phone block, by viewport width:
 *
 *      768px  +68px   (row already wraps to two lines without it)
 *      820px  +68px
 *      900px    0
 *     1024px  +53px
 *     1180px    0     and every width above
 *
 * So it is revealed at 75em/1200px, which is also the theme's `wideSize`. Below
 * that the navigation's seven top-level items already consume the row, and the
 * phone pushes it to a third line.
 *
 * `display: none` removes it from the accessibility tree as well as the layout,
 * which is intended rather than an oversight: a visually hidden phone link would
 * still be announced and still be a tab stop, giving screen-reader users a
 * control sighted users cannot see. The same number is in the footer of every
 * page, so nothing is lost for anyone.
 */
.indoor-header__phone-wrap {
	display: none;
	flex-direction: column;
	margin: 0;
	line-height: 1.25;
	white-space: nowrap;
}

@media (width >= 75em) {
	.indoor-header__phone-wrap {
		display: flex;
	}
}

/*
 * The hours qualifier sets an expectation the bare number cannot. text-muted is
 * 7.32:1 on surface, so it stays legible at this size.
 */
.indoor-header__hours {
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--text-muted);
}

/*
 * Header wrapping headroom on small screens.
 *
 * This fixes a CLS of 0.21 — the largest layout problem on the site, and one
 * that only appeared under network throttling, so it was invisible locally.
 *
 * The header row was balanced two pixels from wrapping at 412px. Measured:
 * with the Arial fallback the two children plus the gap came to 367px in a
 * 370px row and fitted on one line; once Inter loaded they came to 372px and
 * wrapped, growing the header from 77px to 129px and pushing the entire page
 * down 52px mid-load.
 *
 * Metric-matched fallbacks narrowed the gap but could not fix it: no width
 * matching is exact enough to be safe when the margin is two pixels. The real
 * defect was a layout with no tolerance, so the fix is to create some — this
 * buys roughly 30px, which no plausible font substitution can consume.
 */
@media (width < 48em) {
	.indoor-header .wp-block-group.alignwide {
		gap: var(--wp--preset--spacing--2-xs);
	}

	.indoor-header__cta .wp-block-button__link {
		padding-inline: 1rem;
	}

	.indoor-header .wp-block-site-title {
		/* Allow the title to shrink rather than force a wrap. */
		min-inline-size: 0;
	}

}

.indoor-header__cta .wp-block-button__link {
	font-size: var(--wp--preset--font-size--small);
	padding-block: 0.625rem;
	padding-inline: 1.25rem;
}

/*
 * The header CTA is hidden exactly where .indoor-mobile-bar appears (64em).
 *
 * Below that width the fixed bottom bar already carries "Ring" and "Boka
 * besiktning", so keeping the button in the header duplicated the same action
 * twice on one screen — and it was what pushed the header onto two rows: brand
 * 219px + toggle 44px + CTA 146px does not fit 390px. One row, one CTA, and the
 * persistent bar is the better placement anyway because it stays reachable
 * after the header scrolls away.
 */
@media (width < 64em) {
	/*
	 * Two classes, because core's layout stylesheet ships `body .is-layout-flex
	 * { display: flex }` at 0,1,1 and the CTA group carries `is-layout-flex`. A
	 * single-class rule here loses and the button stays visible — which is
	 * exactly what happened on the first attempt.
	 */
	.indoor-header .indoor-header__cta {
		display: none;
	}
}

/* The phone number in the header is a conversion path, not decoration. */
.indoor-header__phone {
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	color: var(--wp--preset--color--text-primary);
}

.indoor-header__phone:hover {
	color: var(--wp--preset--color--brand-primary);
	text-decoration: underline;
}