/*
 * Utility bar, header, and navigation.
 *
 * The header surface stays light because the existing logo artwork is navy
 * lettering with a pale halo. That reads correctly on white and would lose its
 * edge on a dark bar. Deep navy is used for the utility strip, the footer, and
 * section accents instead, which also gives the header a clear top edge.
 *
 * Sticky behaviour is CSS position sticky. One class from the navigation script
 * collapses the utility strip and swaps to the compact lockup. Both lockups are
 * pinned to a fixed height, so the swap cannot shift the layout.
 *
 * Navigation is a single DOM instance. There is no duplicated mobile menu, so
 * every submenu id stays unique and the markup is half the size.
 */

/* The sentinel needs a real box for IntersectionObserver to report on. The
   negative margin cancels its height so it changes no layout. */
.afc-header-sentinel {
	display: block;
	block-size: 1px;
	margin-block-end: -1px;
}

.afc-header {
	position: sticky;
	inset-block-start: 0;
	z-index: var(--afc-z-header);
	background: var(--afc-color-surface);
	border-block-end: var(--afc-border-hairline);
	transition: box-shadow var(--afc-duration) var(--afc-ease-standard);
}

.afc-header.is-stuck {
	box-shadow: var(--afc-shadow-sm);
}

/* ---------------------------------------------------------------------------
 * Utility bar
 * ------------------------------------------------------------------------ */

.afc-utility {
	background: var(--afc-color-surface-darker);
	color: var(--afc-color-text-muted-on-dark);
	font-size: var(--afc-text-caption);
	overflow: hidden;
	max-block-size: 6rem;
	transition:
		max-block-size var(--afc-duration) var(--afc-ease-standard),
		opacity var(--afc-duration) var(--afc-ease-standard);
}

/* Both header rows share the header container rather than the reading container,
   so the strip has room for all four facts and still lines up with the logo. The
   rule sits after base.css, so it wins over .afc-container without needing to be
   more specific. */
.afc-utility__inner,
.afc-header__inner {
	max-inline-size: var(--afc-width-header);
	padding-inline: var(--afc-gutter-header);
}

.afc-utility__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	/* Fluid, so the gap gives ground before the content is forced to wrap. */
	gap: 0.25rem clamp(1rem, 2vw, 2rem);
	padding-block: 0.5rem;
}

.afc-utility p {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem clamp(0.85rem, 1.5vw, 1.35rem);
	margin: 0;
}

/* Each fact is atomic. It wraps to the next line whole, so a telephone number
   never splits across two lines and an address never breaks after the house
   number. Wrapping happens between facts, which is the only tidy place for it. */
.afc-utility__fact,
.afc-utility__link {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	white-space: nowrap;
}

.afc-utility__link {
	color: var(--afc-white);
	text-decoration: none;
}

.afc-utility__link:hover {
	color: var(--afc-white);
	text-decoration: underline;
}

.afc-utility__link--phone {
	font-weight: var(--afc-weight-bold);
	letter-spacing: 0.01em;
}

.afc-utility .afc-icon {
	color: var(--afc-color-heritage-red);
}

.afc-header.is-stuck .afc-utility {
	max-block-size: 0;
	opacity: 0;
}

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

.afc-header__bar {
	position: relative;
	background: var(--afc-color-surface);
}

.afc-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--afc-space-sm);
	padding-block: 0.9rem;
	transition: padding-block var(--afc-duration) var(--afc-ease-standard);
}

.afc-header.is-stuck .afc-header__inner {
	padding-block: 0.45rem;
}

/* Branding */

.afc-logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.afc-logo__img {
	display: block;
	inline-size: auto;
	block-size: var(--afc-logo-height);
	object-fit: contain;
	transition: block-size var(--afc-duration) var(--afc-ease-standard);
}

.afc-logo__text {
	font-family: var(--afc-font-display);
	font-size: var(--afc-text-h4);
	font-weight: var(--afc-weight-bold);
	font-variation-settings: var(--afc-display-variation);
	color: var(--afc-color-brand-navy-dark);
}

.afc-logo__compact {
	display: none;
}

.afc-header.is-stuck .afc-logo__wide {
	display: none;
}

.afc-header.is-stuck .afc-logo__compact {
	display: block;
}

.afc-header.is-stuck .afc-logo__img {
	block-size: var(--afc-logo-height-compact);
}

@media (max-width: 479px) {
	.afc-logo__img {
		block-size: 38px;
	}
}

/* Header actions */

.afc-header__actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.afc-header__call {
	white-space: nowrap;
}

.afc-header__call-icon {
	display: none;
	align-items: center;
	justify-content: center;
	inline-size: var(--afc-tap-target);
	block-size: var(--afc-tap-target);
	border: 1px solid var(--afc-color-border);
	border-radius: var(--afc-radius-xs);
	color: var(--afc-color-brand-navy-dark);
	font-size: 20px;
	text-decoration: none;
}

.afc-header__call-icon:hover {
	background: var(--afc-color-brand-red);
	border-color: var(--afc-color-brand-red);
	color: var(--afc-white);
}

.afc-menu-toggle {
	display: none;
	align-items: center;
	gap: 0.4rem;
	min-block-size: var(--afc-tap-target);
	padding: 0.35rem 0.7rem;
	border: 2px solid var(--afc-color-brand-navy-dark);
	border-radius: var(--afc-radius-xs);
	background: transparent;
	color: var(--afc-color-brand-navy-dark);
	font: inherit;
	font-size: var(--afc-text-body-sm);
	font-weight: var(--afc-weight-bold);
	cursor: pointer;
}

.afc-menu-toggle:hover {
	background: var(--afc-color-brand-navy-dark);
	color: var(--afc-white);
}

.afc-menu-toggle__icon {
	display: inline-flex;
	font-size: 20px;
}

.afc-menu-toggle__close,
.afc-menu-toggle[aria-expanded="true"] .afc-menu-toggle__open {
	display: none;
}

.afc-menu-toggle[aria-expanded="true"] .afc-menu-toggle__close {
	display: block;
}

/* ---------------------------------------------------------------------------
 * Navigation
 * ------------------------------------------------------------------------ */

.afc-menu {
	display: flex;
	align-items: center;
	gap: 0.15rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.afc-menu-item {
	position: relative;
}

.afc-menu-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-block-size: var(--afc-tap-target);
	padding: 0.35rem 0.75rem;
	color: var(--afc-color-brand-navy-dark);
	font-size: var(--afc-text-nav);
	font-weight: var(--afc-weight-semibold);
	letter-spacing: 0.01em;
	text-decoration: none;
}

/* The indicator is drawn with a pseudo element rather than a border, so hover
   does not change the height of the row. */
.afc-menu-link::after {
	content: "";
	position: absolute;
	inset-block-end: 0.35rem;
	inset-inline: 0.75rem;
	block-size: 2px;
	background: var(--afc-color-brand-red);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--afc-duration-fast) var(--afc-ease-standard);
}

.afc-menu-link:hover,
.afc-menu-link[aria-current] {
	color: var(--afc-color-brand-red-dark);
}

.afc-menu-link:hover::after,
.afc-menu-link[aria-current]::after {
	transform: scaleX(1);
}

.afc-submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2rem;
	min-block-size: 2rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--afc-color-brand-navy-dark);
	cursor: pointer;
}

.afc-submenu-toggle .afc-icon {
	transition: transform var(--afc-duration-fast) var(--afc-ease-standard);
}

.afc-submenu-toggle[aria-expanded="true"] .afc-icon {
	transform: rotate(180deg);
}

.afc-submenu {
	margin: 0;
	padding: 0.4rem 0;
	list-style: none;
}

@media (min-width: 900px) {
	.afc-submenu {
		position: absolute;
		inset-block-start: 100%;
		inset-inline-start: 0;
		display: none;
		min-inline-size: 16rem;
		background: var(--afc-white);
		border: var(--afc-border-hairline);
		border-block-start: var(--afc-rule-weight) solid var(--afc-color-brand-red);
		box-shadow: var(--afc-shadow-md);
		z-index: var(--afc-z-nav-panel);
	}

	.afc-menu-item--has-children:hover > .afc-submenu,
	.afc-menu-item--has-children:focus-within > .afc-submenu,
	.afc-submenu-toggle[aria-expanded="true"] ~ .afc-submenu {
		display: block;
	}

	.afc-submenu .afc-menu-link {
		display: flex;
		inline-size: 100%;
		min-block-size: 2.75rem;
	}

	.afc-submenu .afc-menu-link::after {
		inset-block-end: 0.5rem;
	}

	.afc-nav__panel-cta {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
 * Small screens
 * ------------------------------------------------------------------------ */

@media (max-width: 899px) {
	.afc-utility__fact--areas {
		display: none;
	}

	.afc-header__call {
		display: none;
	}

	.afc-header__call-icon,
	.afc-menu-toggle {
		display: inline-flex;
	}

	.afc-nav {
		position: absolute;
		inset-block-start: 100%;
		inset-inline: 0;
		display: none;
		max-block-size: 70vh;
		/* The header gutter, not the page gutter, so a panel item lines up with the
		   logo directly above it. */
		padding: var(--afc-space-sm) var(--afc-gutter-header) var(--afc-space-lg);
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--afc-white);
		border-block-start: var(--afc-border-hairline);
		box-shadow: var(--afc-shadow-lg);
		z-index: var(--afc-z-nav-panel);
	}

	.afc-nav[data-afc-open="true"] {
		display: block;
	}

	/* Without scripting the panel is part of the page flow and always available,
	   and the toggle that would control it is removed. */
	html:not(.afc-js) .afc-nav {
		position: static;
		display: block;
		max-block-size: none;
		box-shadow: none;
	}

	html:not(.afc-js) .afc-menu-toggle {
		display: none;
	}

	.afc-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.afc-menu-item {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		border-block-end: var(--afc-border-hairline);
	}

	.afc-menu-link {
		flex: 1 1 auto;
		min-block-size: 3rem;
		padding-inline: 0;
		font-size: 1.0625rem;
	}

	.afc-menu-link::after {
		inset-inline: 0;
		inset-block-end: 0;
	}

	.afc-submenu-toggle {
		inline-size: var(--afc-tap-target);
		min-block-size: var(--afc-tap-target);
	}

	.afc-submenu {
		flex: 1 1 100%;
		display: none;
		padding-inline-start: var(--afc-space-sm);
		border-inline-start: 2px solid var(--afc-color-border);
	}

	.afc-submenu-toggle[aria-expanded="true"] ~ .afc-submenu,
	html:not(.afc-js) .afc-submenu {
		display: block;
	}

	.afc-nav__panel-cta {
		display: flex;
		flex-direction: column;
		gap: var(--afc-space-2xs);
		margin-block-start: var(--afc-space-md);
	}

	.afc-nav__maps {
		display: inline-flex;
		align-items: flex-start;
		gap: 0.5rem;
		min-block-size: var(--afc-tap-target);
		color: var(--afc-color-brand-navy-dark);
		font-size: var(--afc-text-body-sm);
		text-decoration: none;
	}
}

/* On phones the utility strip is dropped so the sticky header stays slim. The
   licence number, address, and Google Maps link stay available in the navigation
   panel and the footer. */
@media (max-width: 699px) {
	.afc-utility {
		display: none;
	}
}