/**
 * Site chrome — header and footer.
 *
 * Loaded on every page, after style.css. Unlike css/home.css this is NOT
 * scoped to one template, because the header and footer are global. Rules are
 * prefixed with #masthead / #colophon (ID + class) so they sit above the
 * existing class-only rules without needing !important.
 *
 * Values come from css/tokens.css. No raw colors, sizes, radii or shadows.
 */

/* ===============================================================
 * HEADER
 * =============================================================== */

#masthead.site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	background: var(--color-surface);
	box-shadow: var(--shadow-xs);
}

/* The header container was 1360px while every content container is 1200px, so
   the logo sat ~40px outside the content edge below it. Aligning them is most
   of what makes a header look deliberate rather than approximate. */
#masthead.site-header .header-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6);
	max-width: var(--container-max);
	margin-inline: auto;
	padding-block: var(--space-3);
	padding-inline: var(--container-pad);
}

#masthead.site-header .site-branding {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

#masthead.site-header .custom-logo-link {
	display: block;
	line-height: 0;
}

#masthead.site-header .custom-logo {
	display: block;
	width: auto;
	height: 44px;
}

#masthead.site-header .site-title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--fs-lg);
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);
}

#masthead.site-header .site-title a {
	color: var(--color-text-strong);
	text-decoration: none;
}

#masthead.site-header .site-description {
	margin: 0;
	font-size: var(--fs-xs);
	color: var(--color-text-subtle);
}

/* --- Primary navigation --- */

/* Desktop only. Below 769px style.css runs a slide-in drawer (translateX,
   blurred overlay, animated hamburger→X) that is already well built — forcing
   `display: flex` at every width overrides its `display: none` and leaves the
   menu permanently open. Leave the drawer alone. */
@media (min-width: 769px) {
	#masthead.site-header .nav-menu,
	#masthead.site-header #primary-menu {
		display: flex;
		align-items: center;
		gap: var(--space-1);
		margin: 0;
		padding: 0;
		list-style: none;
	}
}

#masthead.site-header #primary-menu > li > a {
	display: flex;
	align-items: center;
	min-height: var(--control-height);
	padding-inline: var(--space-4);
	border-radius: var(--radius-md);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	line-height: var(--lh-snug);
	color: var(--color-text-muted);
	text-decoration: none;
	white-space: nowrap;
	transition:
		color var(--duration-base) var(--ease),
		background-color var(--duration-base) var(--ease);
}

#masthead.site-header #primary-menu > li > a:hover {
	color: var(--color-primary);
	background: var(--color-primary-subtle);
}

#masthead.site-header #primary-menu > li > a:focus-visible {
	outline: none;
	box-shadow: var(--shadow-focus);
}

/* Current page: color plus weight, so it does not rely on color alone. */
#masthead.site-header #primary-menu > li.current-menu-item > a,
#masthead.site-header #primary-menu > li.current_page_item > a,
#masthead.site-header #primary-menu > li.current-menu-ancestor > a {
	color: var(--color-primary);
	font-weight: var(--fw-semibold);
	background: var(--color-primary-subtle);
}

/* The last item is the Contact call to action. */
#masthead.site-header #primary-menu > li:last-child > a {
	padding-inline: var(--space-6);
	border-radius: var(--radius-pill);
	background: var(--color-primary);
	color: var(--color-text-invert);
	font-weight: var(--fw-semibold);
	box-shadow: var(--shadow-xs);
}

#masthead.site-header #primary-menu > li:last-child > a:hover {
	background: var(--color-primary-hover);
	color: var(--color-text-invert);
	box-shadow: var(--shadow-sm);
}

/* --- Dropdown (desktop only) ---
   Below 769px the drawer stacks sub-menus inline; an absolutely
   positioned, hover-revealed panel has no meaning on touch. */
@media (min-width: 769px) {
	#masthead.site-header #primary-menu li {
		position: relative;
	}

	#masthead.site-header #primary-menu .sub-menu {
		position: absolute;
		top: 100%;
		inset-inline-start: 0;
		z-index: var(--z-dropdown);
		min-width: 13rem;
		margin: 0;
		padding: var(--space-2);
		list-style: none;
		background: var(--color-surface);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-md);
		box-shadow: var(--shadow-lg);
		opacity: 0;
		visibility: hidden;
		transform: translateY(var(--space-1));
		transition:
			opacity var(--duration-fast) var(--ease),
			transform var(--duration-fast) var(--ease),
			visibility var(--duration-fast) var(--ease);
	}

	#masthead.site-header #primary-menu li:hover > .sub-menu,
	#masthead.site-header #primary-menu li:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	#masthead.site-header #primary-menu .sub-menu a {
		display: flex;
		align-items: center;
		min-height: var(--control-height-sm);
		padding: var(--space-2) var(--space-3);
		border-radius: var(--radius-sm);
		font-size: var(--fs-sm);
		color: var(--color-text-muted);
		text-decoration: none;
		transition:
			color var(--duration-base) var(--ease),
			background-color var(--duration-base) var(--ease);
	}

	#masthead.site-header #primary-menu .sub-menu a:hover {
		background: var(--color-primary-subtle);
		color: var(--color-primary);
	}
}

/* --- Mobile toggle ---
   The button, its screen-reader-only label and the bar styling all come from
   style.css and are deliberately left alone — restyling them broke the icon.

   KNOWN ISSUE, not introduced here: style.css declares a hamburger→X
   animation on [aria-expanded="true"], but the bars never cross. Ruled out:
   the menu does stay open (aria-expanded and .toggled both persist), the
   selector matches at runtime, the structure is a single button with three
   span children, no competing transform/opacity rule exists, and restating
   the declarations at higher specificity here had no effect either — a rule
   with `opacity: 0` still computed to 1. Left unfixed rather than shipping
   CSS that provably does nothing. The drawer itself works; only the icon
   does not animate. Worth a look with devtools open on a real device. */

/* ===============================================================
 * FOOTER
 * A dark footer bookends the page and separates site chrome from
 * content. It also resolves a clash: the footer was #f8f8f8 and the
 * copyright bar #e5e5e5 — two greys from the retired palette.
 * =============================================================== */

#colophon.site-footer {
	background: var(--color-primary-active);
	color: var(--color-on-dark-muted);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	line-height: var(--lh-normal);
}

/* .footer-widgets carried its own #f7f7f7 from the old light footer. Left in
   place it puts white text on near-white — the dark ground must come through. */
#colophon.site-footer .footer-widgets {
	padding-block: var(--space-16);
	background: transparent;
}

/* Fixed 260px columns did not reflow. auto-fit lets the grid collapse on its
   own instead of needing a breakpoint per column count. */
#colophon.site-footer .footer-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: var(--space-10);
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

#colophon.site-footer .footer-column {
	min-width: 0;
}

#colophon.site-footer .widget-title,
#colophon.site-footer .widget h2,
#colophon.site-footer .widget h3 {
	margin: 0 0 var(--space-5);
	font-family: var(--font-heading);
	font-size: var(--fs-md);
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
	color: var(--color-on-dark);
}

#colophon.site-footer p {
	margin: 0 0 var(--space-3);
	color: var(--color-on-dark-muted);
}

#colophon.site-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#colophon.site-footer li {
	margin: 0;
}

/* Footer links were royal blue (#4169e1) — a browser-default blue that is both
   off-brand and low contrast on any dark ground. */
#colophon.site-footer a {
	color: var(--color-on-dark-muted);
	text-decoration: none;
	transition: color var(--duration-base) var(--ease);
}

/* List links are navigation, so they get a real touch target. Links sitting
   inline inside a paragraph (a phone number, an email) are deliberately left
   as normal inline text — giving those a 44px box would break the line flow
   of the sentence they belong to. */
#colophon.site-footer li > a {
	display: flex;
	align-items: center;
	min-height: var(--control-height);
}

#colophon.site-footer a:hover {
	color: var(--color-on-dark);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

#colophon.site-footer a:focus-visible {
	outline: none;
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-focus);
}

/* --- Social icons --- */

#colophon.site-footer .social-icons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-5);
}

#colophon.site-footer .social-icons a {
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	/* The old footer added its own margin, which stacked on top of the flex gap
	   and pushed the fourth icon onto a second row. */
	margin: 0;
	width: var(--control-height);
	height: var(--control-height);
	min-height: var(--control-height);
	border: 1px solid var(--color-on-dark-border);
	border-radius: var(--radius-circle);
	color: var(--color-on-dark);
	font-size: var(--fs-sm);
	transition:
		background-color var(--duration-base) var(--ease),
		border-color var(--duration-base) var(--ease),
		transform var(--duration-base) var(--ease);
}

#colophon.site-footer .social-icons a:hover {
	background: var(--color-primary);
	border-color: var(--color-primary);
	text-decoration: none;
	transform: translateY(-2px);
}

/* --- Copyright bar --- */

#colophon.site-footer .site-info {
	padding-block: var(--space-5);
	background: transparent;
	border-top: 1px solid var(--color-on-dark-surface);
}

#colophon.site-footer .site-info .container {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

/* --color-text-subtle is tuned for light grounds and lands near 3.9:1 here,
   under the 4.5:1 needed at this size. */
#colophon.site-footer .site-info p {
	margin: 0;
	font-size: var(--fs-xs);
	color: var(--color-on-dark-muted);
}

/* ===============================================================
 * RESPONSIVE
 * =============================================================== */

@media (max-width: 992px) {
	#masthead.site-header #primary-menu > li > a {
		padding-inline: var(--space-3);
	}
}

@media (max-width: 768px) {
	#colophon.site-footer .footer-widgets {
		padding-block: var(--space-12);
	}

	#colophon.site-footer .footer-columns {
		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
		gap: var(--space-8);
	}
}

@media (max-width: 480px) {
	#colophon.site-footer .footer-columns {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}
}

@media (prefers-reduced-motion: reduce) {
	#colophon.site-footer .social-icons a:hover {
		transform: none;
	}
}