/**
 * Site header. Mobile-first: logo, menu toggle and call bar; the menu opens
 * as a full-screen panel with accordions. From the desktop breakpoint the
 * full bar shows the inline menu with dropdowns and the contact block.
 *
 * Breakpoints (only the fixed set documented in CLAUDE-starter.md):
 * - desktop (80em, 1280px): the desktop bar, condensed: smaller logo, menu
 *   text and phone. The narrowest width where the logo, six menu items and
 *   the contact block fit (79px to spare when measured).
 * - wide (105em, 1680px): the bar at full Figma size.
 * Below 80em the compact header (toggle + call bar) is used.
 *
 * Sticky at every width (position: sticky, so the page doesn't shift): the
 * whole header, call box and language badge included, stays at the top of
 * the viewport, below the admin bar when it is fixed. Offsets come from
 * assets/js/navigation.js (--firm-sticky-top: the fixed admin bar's height,
 * 0 when it scrolls away below 600px; --firm-header-height: the header plus
 * the badge hanging below it); without JS the fallbacks below apply. Anchor
 * jumps and keyboard focus keep clear of the header through the root
 * scroll-padding. --firm-sticky-offset (admin bar + header) is the distance
 * anything else that sticks must keep from the top of the viewport (the
 * table of contents column, page-layout.css). z-index: above page content
 * (maps, Trustindex widgets, Gravity Forms, editor notices), below the
 * WordPress admin bar.
 */

:root {
	--firm-sticky-offset: calc(var(--firm-sticky-top, var(--wp-admin--admin-bar--height, 0px)) + var(--firm-header-height, calc(var(--wp--preset--spacing--90) * 1.5)));
	scroll-padding-block-start: var(--firm-sticky-offset);
}

.site-header {
	position: sticky;
	inset-block-start: var(--firm-sticky-top, var(--wp-admin--admin-bar--height, 0px));
	z-index: 1000;
	background: var(--wp--custom--header--background, var(--wp--preset--color--base));
	box-shadow: var(--wp--preset--shadow--sm);
}

@media print {
	.site-header {
		position: static;
	}
}

.site-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--20) var(--wp--custom--header-gutter);
}

/* Logo */
.site-header__brand .custom-logo-link,
.site-header__name {
	display: block;
}

.site-header__brand .custom-logo {
	display: block;
	inline-size: auto;
	block-size: var(--wp--custom--logo--header);
}

.site-header__name {
	color: var(--wp--custom--header--brand, var(--wp--preset--color--primary));
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--h-4);
	line-height: var(--wp--custom--line-height--h-4);
	text-decoration: none;
}

/* Editors only, no logo yet: in the compact header (below 80em) the logo's
   pending tag sits under the name inside the bar, instead of hanging below
   it over the call bar or the first section. */
.site-header__brand > .firm-pending-image--tags.is-below {
	position: static;
	inline-size: auto;
	max-inline-size: none;
	margin-block-start: var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--body-xs);
}

/* Menu toggle */
.site-header__toggle {
	display: inline-flex;
	padding: var(--wp--preset--spacing--10);
	border: 0;
	background: none;
	color: var(--wp--custom--header--brand, var(--wp--preset--color--primary));
	cursor: pointer;
}

.site-header__toggle-close,
.site-header__toggle[aria-expanded="true"] .site-header__toggle-open {
	display: none;
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-close {
	display: inline-block;
}

/* Panel (mobile: hidden until the toggle opens it) */
.site-header__panel {
	display: none;
}

.site-header.is-open {
	position: fixed;
	inset: var(--firm-sticky-top, var(--wp-admin--admin-bar--height, 0px)) 0 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	box-shadow: none;
}

.site-header.is-open .site-header__bar {
	flex-wrap: wrap;
	padding-inline: 0;
	padding-block-end: 0;
}

.site-header.is-open .site-header__brand,
.site-header.is-open .site-header__toggle {
	margin-inline: var(--wp--custom--header-gutter);
}

.site-header.is-open .site-header__panel {
	display: block;
	flex-basis: 100%;
	border-top: 1px solid var(--wp--custom--header--divider, var(--wp--preset--color--surface-alt));
}

.site-header.is-open .firm-phone--call-bar {
	display: none;
}

.has-open-menu {
	overflow: hidden;
}

/* Menu list (mobile accordions) */
.site-nav__list,
.site-nav .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__list > li {
	border-bottom: 1px solid var(--wp--custom--header--divider, var(--wp--preset--color--surface-alt));
}

.site-nav .menu-item__link,
.site-nav .menu-item__toggle,
.site-nav .menu-item__label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--10);
	inline-size: 100%;
	padding: var(--wp--preset--spacing--30) var(--wp--custom--gutter);
	border: 0;
	background: none;
	/* The desktop dropdown sets --firm-header-link to its own hook (header.dropdownLink). */
	color: var(--firm-header-link, var(--wp--custom--header--link, var(--wp--preset--color--foreground)));
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--menu);
	text-align: start;
	text-decoration: none;
	text-transform: uppercase;
}

.site-nav .menu-item__toggle {
	cursor: pointer;
}

.site-nav .menu-item__link:hover,
.site-nav .menu-item__toggle:hover {
	color: var(--wp--custom--header--link-active, var(--wp--preset--color--primary));
}

.site-nav .menu-item__link[aria-current="page"] {
	color: var(--wp--custom--header--link-active, var(--wp--preset--color--primary));
	font-weight: 700;
}

/* A link with children keeps its own toggle next to it. */
.site-nav .menu-item:has(> .menu-item__toggle--icon) {
	display: flex;
	flex-wrap: wrap;
}

.site-nav .menu-item:has(> .menu-item__toggle--icon) > .menu-item__link {
	flex: 1;
	inline-size: auto;
}

.site-nav .menu-item__toggle--icon {
	inline-size: auto;
}

.site-nav .menu-item:has(> .menu-item__toggle--icon) > .sub-menu {
	flex-basis: 100%;
}

/* Mobile chevrons: down when closed, up when open (Figma accordion icons). */
.site-nav .menu-item__chevron {
	--firm-icon: url("../icons/chevron-down.svg");
	--firm-icon-size: var(--wp--custom--icon--md);
}

.site-nav .menu-item__toggle[aria-expanded="true"] {
	color: var(--wp--custom--header--link-active, var(--wp--preset--color--primary));
	font-weight: 700;
}

.site-nav .menu-item__toggle[aria-expanded="true"] .menu-item__chevron {
	--firm-icon: url("../icons/chevron-up.svg");
}

/* Pending items: visible to editors only, de-emphasized and not interactive. */
.site-nav .menu-item__label--pending,
.footer-nav .menu-item__label--pending {
	color: var(--wp--custom--text--subtle, var(--wp--preset--color--muted));
	font-style: italic;
	cursor: not-allowed;
}

.site-nav .sub-menu {
	display: none;
	background: var(--wp--custom--header--submenu-background, var(--wp--preset--color--surface));
}

.site-nav .menu-item.is-open > .sub-menu {
	display: block;
}

.site-nav .sub-menu > li {
	border-top: 1px solid var(--wp--custom--header--divider, var(--wp--preset--color--surface-alt));
}

.site-nav .sub-menu .menu-item__link,
.site-nav .sub-menu .menu-item__label {
	padding-inline-start: var(--wp--preset--spacing--60);
}

/* "View All +" closing an index page's dropdown: primary panel, base text
   (8.6:1). Two classes beat the generic link hover rules. */
.site-nav .menu-item__link--view-all,
.site-nav .menu-item__link--view-all:hover,
.site-nav .menu-item__link--view-all[aria-current="page"] {
	background: var(--wp--preset--color--primary);
	color: var(--wp--custom--text--on-primary, var(--wp--preset--color--base));
	font-weight: 700;
}

.site-nav .menu-item__link--view-all:hover {
	background: var(--wp--preset--color--primary-dark);
}

.site-nav .menu-item__link--view-all:focus-visible {
	outline: var(--wp--custom--border-width--thick) solid var(--wp--preset--color--base);
	outline-offset: calc(var(--wp--custom--border-width--thick) * -2);
}

/* Without JavaScript, submenus open on hover and keyboard focus. */
.no-js .site-nav .menu-item-has-children:is(:hover, :focus-within) > .sub-menu {
	display: block;
}

/* Mobile panel calls to action */
.site-header__panel-ctas {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	justify-items: center;
	padding: var(--wp--preset--spacing--50) var(--wp--custom--gutter);
}

.site-header__button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	inline-size: 100%;
	text-align: center;
	text-decoration: none;
}

.site-header__button-icon {
	--firm-icon-size: var(--wp--custom--icon--sm);
}

.site-header__availability {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	font-size: var(--wp--preset--font-size--body-xs);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--body-xxs);
	text-transform: uppercase;
}

.site-header__availability-badge {
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	background: var(--wp--preset--color--accent);
	color: var(--wp--custom--text--on-accent, var(--wp--preset--color--base));
}

.site-header__availability-label {
	color: var(--wp--custom--header--brand, var(--wp--preset--color--primary));
}

.social-links--header {
	justify-content: center;
	color: var(--wp--custom--header--brand, var(--wp--preset--color--primary));
}

/* Call bar (mobile and tablet) */
.firm-phone--call-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--10) var(--wp--custom--header-gutter);
	background: var(--wp--preset--color--primary);
	color: var(--wp--custom--text--on-primary, var(--wp--preset--color--base));
	text-decoration: none;
}

.firm-phone--call-bar:focus-visible {
	outline-offset: calc(var(--wp--custom--border-width--thick) * -2);
}

.site-header__call-label {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
}

.site-header__call-icon {
	--firm-icon-size: var(--wp--custom--icon--sm);
}

.site-header__call-text {
	max-inline-size: calc(var(--wp--preset--spacing--90) * 3);
	font-size: var(--wp--preset--font-size--body-xxs);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--caption);
	text-transform: uppercase;
}

.site-header__call-number {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--h-4);
	line-height: var(--wp--custom--line-height--h-4);
	white-space: nowrap;
}

/* Desktop contact block is hidden on small screens. */
.site-header__contact {
	display: none;
}

/* Desktop bar, condensed (laptops): smaller logo, menu text and phone. */
@media (min-width: 80em) {
	/* The desktop bar: the logo's pending tag hangs below the header again
	   (pending.css .is-below). */
	.site-header__brand > .firm-pending-image--tags.is-below {
		position: absolute;
		inline-size: max-content;
		max-inline-size: calc(100vw - 3 * var(--wp--preset--spacing--40));
		margin-block-start: 0;
		font-size: inherit;
	}

	.site-header {
		box-shadow: var(--wp--preset--shadow--lg);
	}

	/* Condensed bar: custom.headerGutterLaptop (unset: spacing-60, today's
	   value) until the full-size bar takes headerGutter at 105em. */
	.site-header__bar {
		align-items: stretch;
		gap: var(--wp--preset--spacing--50);
		padding-block: 0;
		padding-inline: var(--wp--custom--header-gutter-laptop, var(--wp--preset--spacing--60)) 0;
	}

	.site-header__brand {
		display: flex;
		align-items: center;
		padding-block: var(--wp--preset--spacing--40);
	}

	.site-header__brand .custom-logo {
		block-size: var(--wp--preset--spacing--80);
	}

	/* No logo: the firm name takes about the logo's box (spacing-80 tall,
	   ~4:1), on balanced lines, so the menu keeps its room. */
	.site-header__name {
		max-inline-size: calc(var(--wp--preset--spacing--80) * 4);
		font-size: var(--wp--preset--font-size--h-6);
		line-height: var(--wp--custom--line-height--h-6);
		text-wrap: balance;
	}

	.site-header__toggle,
	.firm-phone--call-bar,
	.site-header__panel-ctas {
		display: none;
	}

	.site-header__panel {
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: center;
	}

	/* Inline menu with dropdowns */
	.site-nav__list {
		display: flex;
		align-items: center;
		gap: var(--wp--preset--spacing--30);
	}

	.site-nav__list > li {
		position: relative;
		border: 0;
	}

	.site-nav__list > li > .menu-item__link,
	.site-nav__list > li > .menu-item__toggle,
	.site-nav__list > li > .menu-item__label {
		padding: var(--wp--preset--spacing--20) 0;
		font-size: var(--wp--preset--font-size--body-xs);
		white-space: nowrap;
	}

	.site-nav .menu-item__chevron,
	.site-nav .menu-item__toggle[aria-expanded="true"] .menu-item__chevron {
		--firm-icon: url("../icons/expand-more.svg");
		transition: transform 0.2s ease;
	}

	.site-nav .menu-item__toggle[aria-expanded="true"] {
		font-weight: 400;
	}

	.site-nav .menu-item__toggle[aria-expanded="true"] .menu-item__chevron {
		transform: rotate(180deg);
	}

	.site-nav .sub-menu {
		position: absolute;
		inset-block-start: 100%;
		inset-inline-start: 0;
		z-index: 1;
		min-inline-size: calc(var(--wp--preset--spacing--90) * 2);
		padding-block: var(--wp--preset--spacing--20);
		border-top: var(--wp--custom--border-width--thick) solid var(--wp--preset--color--primary);
		background: var(--wp--custom--header--dropdown-background, var(--wp--preset--color--base));
		box-shadow: var(--wp--preset--shadow--md);
		/* Dropdown links read header.dropdownLink through the shared link rule above. */
		--firm-header-link: var(--wp--custom--header--dropdown-link, var(--wp--preset--color--foreground));
	}

	.site-nav .sub-menu > li {
		border: 0;
	}

	.site-nav .sub-menu .menu-item__link,
	.site-nav .sub-menu .menu-item__label {
		padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--50);
		white-space: nowrap;
	}

	.site-nav .sub-menu .menu-item__link:hover {
		background: var(--wp--preset--color--surface);
	}

	.site-nav .sub-menu .menu-item__link--view-all:hover {
		background: var(--wp--preset--color--primary-dark);
	}

	.site-nav .sub-menu > .menu-item--view-all {
		margin-block-end: calc(var(--wp--preset--spacing--20) * -1);
	}

	/* Contact block */
	.site-header__contact {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: var(--wp--preset--spacing--10);
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
		background: var(--wp--preset--color--primary);
		color: var(--wp--custom--text--on-primary, var(--wp--preset--color--base));
		text-align: center;
	}

	/* Two balanced lines ("Call for your free / confidential consultation"):
	   the longest line needs about 218px at this size. */
	.site-header__contact-text {
		max-inline-size: calc(var(--wp--preset--spacing--90) * 2);
		margin: 0;
		text-wrap: balance;
		font-size: var(--wp--preset--font-size--body-xs);
		font-weight: 700;
		line-height: var(--wp--custom--line-height--menu);
		text-transform: uppercase;
	}

	.firm-phone--header {
		display: inline-flex;
		align-items: center;
		gap: var(--wp--preset--spacing--10);
		color: inherit;
		font-family: var(--wp--preset--font-family--display);
		font-size: var(--wp--preset--font-size--h-4);
		line-height: var(--wp--custom--line-height--display-2);
		text-decoration: none;
	}

	/* The whole blue box is the phone link: its ::after covers the box (not
	   the language badge hanging below it), which darkens slightly on hover
	   and shows the focus ring. The link keeps .firm-phone for call tracking. */
	.firm-phone--header::after {
		content: "";
		position: absolute;
		inset: 0;
	}

	.firm-phone--header:is(:hover, :focus-visible) {
		color: inherit;
		text-decoration: none;
		outline: none;
	}

	.site-header__contact {
		transition: background-color 0.2s ease;
	}

	.site-header__contact:has(.firm-phone--header:hover) {
		background: color-mix(in srgb, var(--wp--preset--color--primary), var(--wp--preset--color--primary-dark) 30%);
	}

	.site-header__contact:has(.firm-phone--header:focus-visible) {
		outline: var(--wp--custom--border-width--thick) solid var(--wp--preset--color--base);
		outline-offset: calc(var(--wp--custom--border-width--thick) * -2);
	}

	.site-header__phone-icon {
		inline-size: var(--wp--custom--icon--md);
		block-size: var(--wp--custom--icon--md);
	}

	.site-header__badge {
		position: absolute;
		inset-block-start: 100%;
		inset-inline: 0;
		margin: 0;
		padding: var(--wp--preset--spacing--30);
		background: var(--wp--preset--color--accent);
		color: var(--wp--custom--text--on-accent, var(--wp--preset--color--base));
		font-size: var(--wp--preset--font-size--body-sm);
		font-weight: 700;
		line-height: var(--wp--custom--line-height--menu);
		text-transform: uppercase;
	}
}

/* Desktop bar at full design size. */
@media (min-width: 105em) {
	.site-header__bar {
		gap: var(--wp--preset--spacing--60);
		padding-inline-start: var(--wp--custom--header-gutter);
	}

	.site-header__brand {
		padding-block: var(--wp--preset--spacing--50);
	}

	.site-header__brand .custom-logo {
		block-size: var(--wp--custom--logo--header);
	}

	.site-header__name {
		max-inline-size: calc(var(--wp--custom--logo--header) * 4);
		font-size: var(--wp--preset--font-size--h-5);
		line-height: var(--wp--custom--line-height--h-5);
	}

	.site-nav__list {
		gap: var(--wp--preset--spacing--40);
	}

	.site-nav__list > li > .menu-item__link,
	.site-nav__list > li > .menu-item__toggle,
	.site-nav__list > li > .menu-item__label,
	.site-header__contact-text {
		font-size: var(--wp--preset--font-size--body-sm);
	}

	.site-header__contact-text {
		max-inline-size: calc(var(--wp--preset--spacing--90) * 2.25);
	}

	.site-header__contact {
		padding-inline: var(--wp--preset--spacing--30);
	}

	.firm-phone--header {
		font-size: var(--wp--preset--font-size--h-3);
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-nav .menu-item__chevron,
	.site-header__contact {
		transition: none;
	}
}