/**
 * AWR brand lockup (logo mark + wordmark) and header brand. Loaded on every page.
 *
 * Proportions are expressed as ratios of one size (the mark's height) so the
 * homepage intro lockup can scale exactly onto the header lockup.
 * Ratios are measured from the reference logo image; adjust here only.
 */

:root {
	--awr-blue: var(--wp--custom--awr--color--blue, #0178ff);
	--awr-slate: var(--wp--custom--awr--color--slate, #1e2a38);
	--awr-light-gray: var(--wp--custom--awr--color--light-gray, #e0dfe2);
	--awr-white: var(--wp--custom--awr--color--white, #fff);
	--awr-font-wordmark: var(--wp--custom--awr--font--wordmark, var(--wp--preset--font-family--montserrat, sans-serif));
}

/* ===========================================================
   Lockup component
   =========================================================== */
.awr-lockup {
	--awr-lockup-size: 36px;          /* mark height */
	--awr-lockup-gap: 0.11;           /* mark → wordmark gap (reference: 0.103 ink to ink) */
	--awr-lockup-text: 0.51;          /* wordmark font size */
	--awr-lockup-text-shift: 0.092;   /* puts the baseline at 0.775 of the mark height, as in the reference */
	--awr-logo-ink: var(--awr-slate);

	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: calc(var(--awr-lockup-size) * var(--awr-lockup-gap));
	line-height: 1;
	color: var(--awr-logo-ink);
	vertical-align: middle;
}

.awr-lockup__mark {
	position: relative;
	display: block;
	flex: none;
	height: var(--awr-lockup-size);
}

.awr-lockup__mark > svg {
	display: block;
	width: auto;
	height: 100%;
	overflow: visible;
	/* Extendable's dark header sets fill: currentColor on header SVGs. Undo that,
	   keeping the logo's own root fill if it has one (--awr-svg-fill, set in PHP). */
	fill: var(--awr-svg-fill, initial) !important;
}

.awr-lockup__wordmark {
	position: relative;
	top: calc(var(--awr-lockup-size) * var(--awr-lockup-text-shift));
	font-family: var(--awr-font-wordmark);
	font-size: calc(var(--awr-lockup-size) * var(--awr-lockup-text));
	font-weight: 650;
	/* Montserrat is ~25% wider than the reference lettering. With these values the
	   caps are ~7% shorter than the reference and the wordmark ends ~0.07 of the
	   mark height further right. Revisit with the final font. */
	letter-spacing: -0.06em;
	word-spacing: 0.06em;
	line-height: 1;
	white-space: nowrap;
	color: var(--awr-logo-ink);
}

.awr-lockup__lead {
	font-weight: 800;
}

/* The final SVG may ship its own outlined wordmark; then the HTML text is not used. */
.awr-lockup.has-svg-wordmark > .awr-lockup__wordmark {
	display: none;
}

/* ===========================================================
   Header brand
   =========================================================== */
.awr-brand {
	display: inline-flex;
	align-items: center;
	flex: none;
	color: inherit;
	text-decoration: none;
}

.awr-brand:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
	border-radius: 2px;
}

/* Header "Talk to AWR" (also its copy in the mobile menu): same blue as every page button. */
.awr-header-cta .wp-block-button__link.wp-element-button {
	border-radius: 6px;
	background-color: #0061D9;
	color: #fff;
	font-weight: 600;
	transition: background-color 0.2s ease;
}
.awr-header-cta .wp-block-button__link.wp-element-button:hover { background-color: #004FB3; color: #fff; }
.awr-header-cta .wp-block-button__link.wp-element-button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -5px;
}

/* Extendable forces a white pill over the dark homepage hero; keep the brand blue
   (same selectors as its style.css, one class more specific). */
body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:not(.is-past-hero):has(.ext-header-overlay.ext-header--dark) .ext-nav-extras-btn:not(.cloned-for-mobile, .cloned-for-mobile *) .wp-block-button__link.wp-element-button,
body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-glass.ext-header--dark) .ext-nav-extras-btn:not(.cloned-for-mobile, .cloned-for-mobile *) .wp-block-button__link.wp-element-button {
	background-color: #0061D9 !important;
	color: #fff !important;
}

/* Tablets (600-781px): Extendable hides the button up to 781px but the menu only collapses
   below 600px, so neither showed. Show it and tighten the row so everything fits. */
@media (min-width: 600px) and (max-width: 781.98px) {
	body header.wp-block-template-part .ext-nav-extras-btn:not(.ext-nav-extras-mobile *) { display: flex !important; flex: none; }
	header.wp-block-template-part .wp-block-navigation { letter-spacing: 0.06em !important; }
	header.wp-block-template-part .wp-block-navigation__container { gap: 0.75rem !important; }
	header.wp-block-template-part .awr-header-cta .wp-block-button__link.wp-element-button { padding-right: 14px !important; padding-left: 14px !important; white-space: nowrap; }
}
@media (min-width: 600px) and (max-width: 719.98px) {
	header.wp-block-template-part .wp-block-navigation { font-size: 0.75rem !important; letter-spacing: 0.02em !important; }
	header.wp-block-template-part .wp-block-navigation__container { gap: 0.625rem !important; flex-wrap: nowrap !important; }
	header.wp-block-template-part .wp-block-navigation-item__content { white-space: nowrap; }
}

/* Phone menu open: logo and close button sit where they are when it's closed. */
header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog { padding-top: 10px !important; }
header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { top: 9px !important; }

/* Footer: who runs the site. */
.awr-footer-legal {
	margin: 0;
	color: #55606E;
	font-size: 0.875rem;
	line-height: 1.7;
	text-align: center;
	text-wrap: balance;
}
.awr-footer-legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* Phones: the separators can't wrap, so one long run overflowed below 373px. Stack the items instead. */
@media (max-width: 480px) {
	.awr-footer-legal .awr-sep { display: block; height: 0; margin: 0; overflow: hidden; }
}
.awr-footer-legal a:hover { color: #0061D9; }
.awr-footer-legal .awr-sep { margin-inline: 0.4em; opacity: 0.6; }

/* Menu button: visible ring over the dark homepage hero and on white headers. */
header .wp-block-navigation__responsive-container-open:focus-visible,
header .wp-block-navigation__responsive-container-close:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.awr-brand .awr-lockup {
	--awr-lockup-size: 36px;
}

@media (max-width: 781px) {

	.awr-brand .awr-lockup {
		--awr-lockup-size: 30px;
	}
}

/* Reversed lockup (A, R and wordmark white) while the header sits over the dark homepage hero. Mirrors
   the conditions Extendable uses for its dark overlay header (style.css). */
body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:not(.is-past-hero):has(.ext-header-overlay.ext-header--dark) .awr-brand .awr-lockup,
body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-glass.ext-header--dark) .awr-brand .awr-lockup {
	--awr-logo-ink: var(--awr-white);
}

body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:not(.is-past-hero):has(.ext-header-overlay.ext-header--dark) .awr-brand .awr-lockup__mark :is([id$="awr-a"], [id$="awr-r"], [id$="awr-wordmark"], [id$="awr-a"] *, [id$="awr-r"] *, [id$="awr-wordmark"] *),
body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-glass.ext-header--dark) .awr-brand .awr-lockup__mark :is([id$="awr-a"], [id$="awr-r"], [id$="awr-wordmark"], [id$="awr-a"] *, [id$="awr-r"] *, [id$="awr-wordmark"] *) {
	fill: var(--awr-white) !important;
}

/* Match Extendable's 300ms header colour transition when .is-past-hero toggles. */
.awr-brand .awr-lockup__wordmark,
.awr-brand .awr-lockup__mark :is([id$="awr-a"], [id$="awr-r"], [id$="awr-wordmark"], [id$="awr-a"] *, [id$="awr-r"] *, [id$="awr-wordmark"] *) {
	transition: color 300ms ease, fill 300ms ease;
}

/* Development placeholder marker in the header. Disappears with the real SVG. */
.awr-brand .awr-lockup__mark[data-placeholder] {
	outline: 1px dashed #d98a00;
	outline-offset: 3px;
}