/**
 * Top bar + header + core/navigation restyle.
 * Design: .top-bar, .site-header, .site-nav, .nav-drop, .nav-menu
 * in design/html/site/assets/site.css. Loaded with core/navigation
 * via wp_enqueue_block_style, so only where the header renders.
 *
 * Breakpoints: 860px (mobile menu, as in the design; core switches
 * at 600px, overridden below), 600px (CTA hidden, smaller brand).
 */

/* stylelint-disable no-descending-specificity --
 * State (hover/open) and breakpoint overrides deliberately follow the
 * base rules they modify; reordering would break the cascade. */

/* ---------- Top bar ---------- */

.ac-top-bar {
	padding-top: 0;
	padding-bottom: 0;
}

.ac-top-bar__inner {
	min-height: 36px;
	gap: 14px;
}

.ac-top-bar p {
	margin: 0;
	font-weight: var(--wp--custom--font-weight--link);
	line-height: 1.2;
	white-space: nowrap;
}

.ac-top-bar a {
	color: var(--wp--preset--color--on-navy);
	text-decoration: none;
	transition: color 0.2s;
}

.ac-top-bar .ac-top-bar__talk a {
	color: var(--wp--preset--color--sky-light);
}

.ac-top-bar a:hover,
.ac-top-bar a:focus-visible {
	color: var(--wp--preset--color--white);
}

/* ---------- Header bar ---------- */

.ac-header {
	position: relative;
	z-index: 50;
	border-bottom: 1px solid var(--wp--preset--color--line);
	background: color-mix(in srgb, var(--wp--preset--color--white) 95%, transparent);
	backdrop-filter: blur(15px);
}

.ac-header__inner {
	min-height: 83px;
	gap: 23px;
}

.ac-header .ac-header__brand {
	margin: 0;
	font-weight: var(--wp--custom--font-weight--heading);
	letter-spacing: -0.067em;
	white-space: nowrap;
}

.ac-header .ac-header__brand a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.ac-header .ac-header__cta {
	flex-shrink: 0;
}

/* Design: "Talk to us →"; the arrow is decorative. Size and spacing are in
 * style.css (button size). */
.ac-header .ac-header__cta .wp-block-button__link::after {
	content: "→" / "";
}

/* The menu panel (mobile) anchors to the header, not to the nav block. */
.ac-header .ac-nav {
	position: static;
	margin-inline: auto;
}

/* ---------- Desktop menu ---------- */

.ac-header .ac-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--nav);
	font-weight: var(--wp--custom--font-weight--link);
	text-decoration: none;
	transition: color 0.2s;
}

.ac-header .ac-nav .wp-block-navigation-item__content:hover,
.ac-header .ac-nav .wp-block-navigation-item__content:focus-visible,
.ac-header .ac-nav .has-child:hover > .wp-block-navigation-item__content,
.ac-header .ac-nav .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--blue);
}

.ac-header .ac-nav .wp-block-navigation__submenu-icon {
	width: 13px;
	height: 13px;
	margin-left: 4px;
	padding: 0;
	color: var(--wp--preset--color--nav);
}

.ac-header .ac-nav .wp-block-navigation__submenu-icon svg {
	width: 13px;
	height: 13px;
	transition: transform 0.2s;
}

.ac-header .ac-nav .has-child:hover > .wp-block-navigation__submenu-icon svg,
.ac-header .ac-nav .wp-block-navigation__submenu-icon[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

/* Dropdown panel */
.ac-header .ac-nav .has-child > .wp-block-navigation__submenu-container {
	top: calc(100% + 16px);
	left: -17px;
	min-width: 266px;
	padding: var(--wp--preset--spacing--10);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--preset--border-radius--md);
	background: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--dropdown);
}

.ac-header .ac-nav .ac-nav__resources > .wp-block-navigation__submenu-container {
	min-width: 205px;
}

/* Hover bridge across the 16px gap, so the panel stays open. */
.ac-header .ac-nav .has-child > .wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	top: -20px;
	right: 0;
	left: 0;
	height: 22px;
}

.ac-header .ac-nav .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	padding: 11px 12px;
	border-radius: var(--wp--preset--border-radius--sm);
	color: var(--wp--preset--color--body);
	line-height: 1.4;
}

.ac-header .ac-nav .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
.ac-header .ac-nav .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible,
.ac-header .ac-nav .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current="page"] {
	background: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--blue);
}

/* ---------- Mobile menu (≤ 860px) ---------- */

.ac-header .ac-nav .wp-block-navigation__responsive-container-open {
	padding: 8px;
	color: var(--wp--preset--color--ink);
}

.ac-header .ac-nav .wp-block-navigation__responsive-container-open svg {
	width: 24px;
	height: 24px;
}

/* Laptop widths: the menu (17px with the US type scale) steps down a size and
 * tightens so it stays on one line beside the brand and the button. */
@media (min-width: 861px) and (max-width: 1200px) {

	.ac-header .ac-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		font-size: var(--wp--preset--font-size--small);
	}

	.ac-header .ac-nav .wp-block-navigation__container {
		gap: 18px;
	}
}

@media (max-width: 860px) {

	.ac-header__inner {
		min-height: 74px;
	}

	/* Core switches to the mobile menu at 600px; the design does at 860px. */
	.ac-header .ac-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

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

	.ac-header .ac-nav {
		order: 3;
		margin-inline: 0;
	}

	.ac-header .ac-header__cta {
		margin-left: auto;
	}
}

/* Open menu: a panel under the header (design),
 * not core's full-screen overlay. */
.ac-header .ac-nav .wp-block-navigation__responsive-container.is-menu-open {
	position: absolute;
	top: 100%;
	right: 0;
	bottom: auto;
	left: 0;
	max-height: calc(100vh - 90px);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--dropdown);
	overflow-y: auto;
}

.has-modal-open .admin-bar .ac-header .ac-nav .is-menu-open .wp-block-navigation__responsive-dialog {
	margin-top: 0;
}

.ac-header .ac-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: 0;
	right: 0;
}

.ac-header .ac-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 32px;
}

/* Core centres overlay items (the inner list repeats the nav's
 * items-justified-center class); the panel is left-aligned in the design.
 * One class more specific than core's overlay rules. */
.ac-header .ac-nav .wp-block-navigation__responsive-container.is-menu-open,
.ac-header .ac-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	--navigation-layout-justification-setting: stretch;
	--navigation-layout-justify: flex-start;
}

.ac-header .ac-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.ac-header .ac-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.ac-header .ac-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	align-items: stretch;
}

.ac-header .ac-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.ac-header .ac-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.ac-header .ac-nav .wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation__submenu-container {
	align-items: stretch;
	gap: 0;
	width: 100%;
	text-align: left;
}

.ac-header .ac-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	font-size: var(--wp--preset--font-size--medium);
}

.ac-header .ac-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding: 13px 10px;
}

.ac-header .ac-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--nav);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: var(--wp--custom--font-weight--link);
}

.ac-header .ac-nav .wp-block-navigation__responsive-container.is-menu-open .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	padding: 10px 14px;
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--font-weight--link);
}

/*
 * Submenus are accordions in the mobile panel (user decision, option B).
 * Core keeps them expanded inside the overlay and its own arrows are inert
 * there, so they're hidden; each submenu gets an .ac-nav-acc toggle
 * (inc/nav-accordion.php) and only the list after an expanded toggle shows.
 */
.ac-header .ac-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
	display: none;
}

/* Submenu parents: label and chevron on one row, the list wraps below. */
.ac-header .ac-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .has-child {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}

.ac-header .ac-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .has-child > .wp-block-navigation-item__content {
	flex: 1;
}

/* The accordion toggle exists only for the mobile panel. */
.ac-header .ac-nav .ac-nav-acc {
	display: none;
}

.ac-header .ac-nav .wp-block-navigation__responsive-container.is-menu-open .ac-nav-acc {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: var(--wp--preset--border-radius--sm);
	background: none;
	color: var(--wp--preset--color--nav);
	cursor: pointer;
}

/* Chevron drawn in CSS (decorative); rotates when open. */
.ac-header .ac-nav .is-menu-open .ac-nav-acc::before {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 2px solid currentcolor;
	border-bottom: 2px solid currentcolor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.2s;
}

.ac-header .ac-nav .is-menu-open .ac-nav-acc[aria-expanded="true"]::before {
	transform: translateY(2px) rotate(-135deg);
}

.ac-header .ac-nav .wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation__submenu-container {
	display: none;
	flex-basis: 100%;
	min-width: 0;
	margin: 0 0 8px;
	padding: 5px 8px;
	border: 0;
	border-radius: var(--wp--preset--border-radius--sm);

	/* Core forces background-color: transparent !important in the overlay;
	 * a one-colour image paints the tint without !important. */
	background-image: linear-gradient(var(--wp--preset--color--wash), var(--wp--preset--color--wash));
	box-shadow: none;
	font-size: var(--wp--preset--font-size--base);
}

.ac-header .ac-nav .wp-block-navigation__responsive-container.is-menu-open .has-child > .ac-nav-acc[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
	display: flex;
}

.ac-header .ac-nav .wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation__submenu-container::before {
	display: none;
}

@media (max-width: 600px) {

	.ac-top-bar p {
		font-size: var(--wp--preset--font-size--tiny);
		line-height: 1.4;
	}

	/* With the larger US text sizes the two items don't fit one phone line:
	 * they wrap onto two centred lines, each item kept whole. */
	.ac-top-bar .ac-top-bar__inner {
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px 16px;
		padding-block: 6px;
	}

	/* Each wrapped link keeps its own 24px tap area without overlapping the
	 * other (line 18px + 2 x 4px padding, 8px between lines). */
	.ac-top-bar a {
		padding-block: 4px;
	}

	.ac-header .ac-header__brand {
		font-size: var(--wp--preset--font-size--large);
	}

	.ac-header .ac-header__cta {
		display: none;
	}

	.ac-header .ac-nav {
		margin-left: auto;
	}
}

/* Below 430px the two items always take two lines. Around 400–430px they
 * fit one line in the fallback font but not in Inter, so the bar grew
 * 20px when Inter loaded and pushed the page down (CLS 0.12 on posts at
 * 412px). Stacking here keeps the height the same in both fonts. */
@media (max-width: 429px) {

	.ac-top-bar .ac-top-bar__inner {
		flex-direction: column;
		align-items: center;
	}
}

@media (prefers-reduced-motion: reduce) {

	.ac-header .ac-nav .wp-block-navigation__submenu-icon svg,
	.ac-top-bar a,
	.ac-header .ac-nav .wp-block-navigation-item__content {
		transition: none;
	}
}