/* ===================================================================
 * chrome.css — Brand Pass 1 (Linnea spec §§8, 9, 10)
 *
 *   §8  Site header — logo, primary nav, secondary CTAs, burger.
 *   §9  Site footer — 4 columns, newsletter, social row, bottom row.
 *   §10 Page-header bands — light + dark variants.
 *
 * H4A CTA is now a real menu item (`tec_primary` menu, custom-link
 * "Handel for All", CSS class `tec-nav-cta`) rather than a hardcoded
 * `<div class="tec-site-header__cta">` partial in `header.php`. The
 * pill styling lives on `li.tec-nav-cta > a` so editors can change
 * the URL/label/visibility from Appearance → Menus without touching
 * code. Same item feeds desktop and mobile renderings.
 * =================================================================== */

/* ===========================================================
 * §8 Site header
 * =========================================================== */
.tec-site-header {
	background: var(--wp--preset--color--white);
	border-bottom: 1px solid var(--wp--preset--color--transparent-navy);
	position: sticky;
	top: 0;
	z-index: 1000;
	height: 80px;
	display: flex;
	align-items: center;
	/* Gutter lives on the outer banner so the inner can hit the canonical
	 * 1200px content cap edge-to-edge — matches the .tec-band / .tec-band-inner
	 * contract used by every content section below. */
	padding-inline: var(--tec-gutter);
}

.tec-site-header__inner {
	max-width: var(--tec-width-content);
	width: 100%;
	margin-inline: auto;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
}

.tec-site-header__logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	text-decoration: none;
	margin-right: auto;
}
.tec-site-header__logo-img {
	display: block;
	height: 48px;
	width: auto;
	max-width: 100%;
}
.tec-site-header__logo-text {
	font-family: var(--wp--preset--font-family--serif-heading);
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--navy);
}

/* Primary nav (desktop) */
.tec-site-header__nav .tec-site-header__menu,
.tec-site-header__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: clamp(1rem, 2.5vw, 2rem);
	align-items: center;
}
.tec-site-header__nav a {
	font-family: var(--wp--preset--font-family--sans-heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	color: var(--wp--preset--color--charcoal);
	text-decoration: none;
	padding: 0.5rem 0;
	position: relative;
	white-space: nowrap;
}
.tec-site-header__nav a:hover,
.tec-site-header__nav a:focus-visible {
	color: var(--wp--preset--color--accent-yellow);
}
/* Current page + current ancestor: top-level item shows a gold underline
 * so the visitor can see at a glance which top-level section they're in,
 * even when the actual current page is a child inside a dropdown. */
.tec-site-header__nav .tec-site-header__menu > .current-menu-item > a,
.tec-site-header__nav .tec-site-header__menu > .current-menu-ancestor > a,
.tec-site-header__nav a[aria-current="page"] {
	color: var(--wp--preset--color--charcoal);
}
.tec-site-header__nav .tec-site-header__menu > .current-menu-item > a::after,
.tec-site-header__nav .tec-site-header__menu > .current-menu-ancestor > a::after,
.tec-site-header__nav a[aria-current="page"]::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	/* 3px (current) vs 2px hover ::before — current reads as the
	 * heavier/permanent indicator, hover as transient. */
	height: 3px;
	background: var(--wp--preset--color--accent-yellow);
}

/* Primary nav — submenus (desktop)
 *
 * The primary nav is rendered by `tec_render_primary_nav()` via
 * `wp_nav_menu()` against the `tec_primary` location, depth 2. WP emits
 * standard markup: `.menu-item-has-children > ul.sub-menu`. Submenus open
 * on hover/focus with a small close-delay (hover-intent feel) so the
 * cursor can travel diagonally from parent to panel without losing it.
 *
 * Pure CSS — no JS, no superfish. Keyboard a11y preserved via :focus-within. */
.tec-site-header__nav .tec-site-header__menu {
	position: relative;
}
.tec-site-header__nav .tec-site-header__menu > li {
	position: relative;
}
/* Caret on items with children (skip current — current uses ::after for underline) */
.tec-site-header__nav .menu-item-has-children:not(.current-menu-item):not(.current-menu-ancestor) > a::after {
	content: "";
	display: inline-block;
	inline-size: 0.45em;
	block-size: 0.45em;
	margin-inline-start: 0.4em;
	border-inline-end: 1.5px solid currentColor;
	border-block-end: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.18s ease;
	vertical-align: middle;
}
.tec-site-header__nav .menu-item-has-children:not(.current-menu-item):not(.current-menu-ancestor):hover > a::after,
.tec-site-header__nav .menu-item-has-children:not(.current-menu-item):not(.current-menu-ancestor):focus-within > a::after {
	transform: translateY(1px) rotate(-135deg);
}
/* Top-level hover/focus underline accent */
.tec-site-header__nav .tec-site-header__menu > li > a::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 2px;
	background: var(--wp--preset--color--accent-yellow);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.18s ease;
}
.tec-site-header__nav .tec-site-header__menu > li:hover > a::before,
.tec-site-header__nav .tec-site-header__menu > li:focus-within > a::before {
	transform: scaleX(1);
}
/* Submenu panels
 *
 * Width sized to fit the longest current label ("Become a friend or patron")
 * on a single line at the medium type size — keeps every sub-item visually
 * parallel and avoids the ragged wrap that read as an alignment mismatch.
 * `white-space: nowrap` enforces single-line items; min/max-inline-size keep
 * the panel within sensible bounds if labels grow. */
.tec-site-header__nav .sub-menu {
	position: absolute;
	inset-block-start: 100%;
	/* Panel extends 1.5rem (24px) outward from the parent li's inline-start
	 * edge. Sub-item anchors carry an equal `padding-inline-start` so the
	 * sub-item text x-position remains flush with the parent menu text;
	 * the negative inset is purely visual breathing room on the panel. */
	inset-inline-start: -1.5rem;
	min-inline-size: 260px;
	max-inline-size: 320px;
	margin: 0;
	padding-block: var(--wp--preset--spacing--20);
	padding-inline: 0;
	list-style: none;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--transparent-navy);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	display: flex;
	flex-direction: column;
	/* Override the `align-items: center` inherited from the generic
	 * `.tec-site-header__nav ul` rule so sub-items stretch to the panel
	 * width and their text starts at the panel's inline-start edge —
	 * which is itself flush with the parent menu item's text. */
	align-items: stretch;
	gap: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	/* Hover-intent: instant open, ~180ms delayed close lets the cursor
	 * cross the gap between parent and panel without losing the menu. */
	transition: opacity 0.15s ease 0.18s,
	            visibility 0s linear 0.33s,
	            transform 0.15s ease 0.18s;
	z-index: 10;
}
.tec-site-header__nav .menu-item-has-children:hover > .sub-menu,
.tec-site-header__nav .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 0.15s ease 0s,
	            visibility 0s linear 0s,
	            transform 0.15s ease 0s;
}
.tec-site-header__nav .sub-menu li {
	display: block;
}
/* Sub-item type matches top-level (medium / 17px) — a sub-item is the
 * destination the visitor wants, so it shouldn't read as smaller/lesser.
 * Inline padding (1.5rem each side) compensates for the panel's negative
 * `inset-inline-start: -1.5rem` so sub-item text x stays flush with the
 * parent menu text. The matching `padding-inline-end` gives the panel
 * symmetric breathing room and shapes the hover gold-tint button. */
.tec-site-header__nav .sub-menu a {
	display: block;
	padding-block: 0.5rem;
	padding-inline: 1.5rem;
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--sans-heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	text-align: start;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}
/* Hover affordance — softened button language. Sub-items adopt the
 * accent-yellow at low saturation (≈14% via rgba) plus the canonical
 * 4.9px button radius, so the hover state reads as "button-cousin":
 * clearly clickable, accent-coded, but quieter than a filled CTA. */
.tec-site-header__nav .sub-menu a:hover,
.tec-site-header__nav .sub-menu a:focus-visible {
	background: rgba(198, 143, 2, 0.14);
	border-radius: 4.9px;
	color: var(--wp--preset--color--charcoal);
	font-weight: 600;
}
.tec-site-header__nav .sub-menu a::before { content: none; }
/* Current-page indicator inside dropdowns: same 3px gold underline as
 * top-level current state. Uniform "you are here" cue across surfaces.
 * Hover (soft gold tint) and current (gold underline) stay distinct, and
 * co-exist cleanly when both are active. */
.tec-site-header__nav .sub-menu .current-menu-item > a,
.tec-site-header__nav .sub-menu a[aria-current="page"] {
	color: var(--wp--preset--color--charcoal);
}
.tec-site-header__nav .sub-menu .current-menu-item > a::after,
.tec-site-header__nav .sub-menu a[aria-current="page"]::after {
	content: "";
	position: absolute;
	/* Inset the underline by the anchor's inline padding so the 3px gold
	 * rule sits under the text only — not stretched into the panel's
	 * left/right breathing-room padding. */
	inset-inline: 1.5rem;
	bottom: -2px;
	height: 3px;
	background: var(--wp--preset--color--accent-yellow);
}

/* Primary CTA — "Handel for All" pill, rendered as the last <li> of the
 * `tec_primary` menu carrying CSS class `tec-nav-cta`. Mirrors
 * .is-style-tec-primary (buttons.css). Yellow filled, white text,
 * 4.9px radius — single source of visual truth for the primary button.
 *
 * Selector is scoped to `.tec-site-header__nav` so the inherited base
 * nav-link rules (padding, color, hover-color, ::before underline) are
 * overridden at the same specificity tier rather than via !important. */
.tec-site-header__nav .tec-nav-cta > a {
	font-family: var(--wp--preset--font-family--sans-body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.7;
	background-color: var(--wp--preset--color--accent-yellow);
	color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--accent-yellow);
	padding-block: 3.5px;
	padding-inline: 28px;
	min-height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 4.9px;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.tec-site-header__nav .tec-nav-cta > a:hover,
.tec-site-header__nav .tec-nav-cta > a:focus-visible {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--accent-yellow);
	border-color: var(--wp--preset--color--accent-yellow);
}
/* Suppress the top-level hover/current underline pseudo on the CTA item
 * (the pill IS the affordance — it should not also carry the gold rule). */
.tec-site-header__nav .tec-site-header__menu > li.tec-nav-cta > a::before,
.tec-site-header__nav .tec-site-header__menu > li.tec-nav-cta > a::after {
	content: none;
}

/* Burger button — mobile only */
.tec-site-header__burger {
	display: none;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	padding: 0;
	color: var(--wp--preset--color--navy);
	cursor: pointer;
}
.tec-site-header__burger-close { display: none; }
body.tec-mobile-nav-open .tec-site-header__burger-icon { display: none; }
body.tec-mobile-nav-open .tec-site-header__burger-close { display: block; }

/* Mobile breakpoint — collapse desktop nav, reveal burger. */
@media (max-width: 977px) {
	.tec-site-header { height: 64px; }
	.tec-site-header__logo-img { height: 36px; }
	.tec-site-header__nav {
		display: none;
	}
	.tec-site-header__burger {
		display: inline-flex;
	}
}

/* Avoid sticky on very-short viewports — no jump on iOS keyboard. */
@media (max-height: 480px) {
	.tec-site-header { position: relative; }
}

/* Mobile nav drawer */
.tec-mobile-nav {
	position: fixed;
	inset: 64px 0 0 0;
	background: var(--wp--preset--color--white);
	z-index: 999;
	overflow-y: auto;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}
.tec-mobile-nav__inner {
	max-width: 480px;
	margin: 0 auto;
}
.tec-mobile-nav__menu,
.tec-mobile-nav ul {
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
.tec-mobile-nav a {
	display: block;
	padding: 0.85rem 0.25rem;
	font-family: var(--wp--preset--font-family--sans-heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	color: var(--wp--preset--color--charcoal);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--transparent-navy);
}
.tec-mobile-nav a:hover,
.tec-mobile-nav a:focus-visible {
	color: var(--wp--preset--color--accent-yellow);
}
/* Mobile submenu accordion. JS in site-header.js injects a
 * `.tec-mobile-nav__submenu-toggle` button next to each parent link, sets
 * aria-expanded on it, and toggles `[data-tec-open]` on the parent <li>. */
.tec-mobile-nav .menu-item-has-children {
	position: relative;
}
.tec-mobile-nav__submenu-toggle {
	position: absolute;
	inset-inline-end: 0;
	inset-block-start: 0;
	inline-size: 44px;
	block-size: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	padding: 0;
	color: var(--wp--preset--color--navy);
	cursor: pointer;
}
.tec-mobile-nav__submenu-toggle::before {
	content: "";
	display: inline-block;
	inline-size: 0.55em;
	block-size: 0.55em;
	border-inline-end: 1.5px solid currentColor;
	border-block-end: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.18s ease;
}
.tec-mobile-nav__submenu-toggle[aria-expanded="true"]::before {
	transform: translateY(2px) rotate(-135deg);
}
.tec-mobile-nav .menu-item-has-children > .sub-menu {
	list-style: none;
	margin: 0;
	padding-block: 0;
	padding-inline-start: var(--wp--preset--spacing--40);
	display: none;
}
.tec-mobile-nav .menu-item-has-children[data-tec-open] > .sub-menu {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.tec-mobile-nav .sub-menu a {
	/* Match top-level mobile nav size (large) — a sub-item is the
	 * destination, not a footnote. */
	font-size: var(--wp--preset--font-size--large);
	padding-block: 0.65rem;
	padding-inline-start: 0.25rem;
	position: relative;
	transition: background-color 0.15s ease, color 0.15s ease;
}
/* Mobile sub-item hover/tap mirrors desktop: softened gold-tint button
 * cousin. Same rgba(198,143,2,0.14) tint and 4.9px radius. Selector is
 * scoped to `.sub-menu a` so it does not affect top-level mobile links
 * (they keep the existing accent-yellow text-colour hover). */
.tec-mobile-nav .sub-menu a:hover,
.tec-mobile-nav .sub-menu a:focus-visible {
	background: rgba(198, 143, 2, 0.14);
	border-radius: 4.9px;
	color: var(--wp--preset--color--charcoal);
	font-weight: 600;
}
/* Current-page indicators (mobile) — top-level keeps the inset gold
 * left-rail (drawer surface, no underline space below the item).
 * Sub-items use the same 3px gold underline as desktop sub-items, for
 * uniform "you are here" cue across surfaces. */
.tec-mobile-nav .current-menu-item > a,
.tec-mobile-nav a[aria-current="page"] {
	color: var(--wp--preset--color--charcoal);
	box-shadow: inset 3px 0 0 0 var(--wp--preset--color--accent-yellow);
	padding-inline-start: 0.65rem;
}
.tec-mobile-nav .sub-menu .current-menu-item > a,
.tec-mobile-nav .sub-menu a[aria-current="page"] {
	box-shadow: none;
	padding-inline-start: 0.25rem;
	color: var(--wp--preset--color--charcoal);
}
.tec-mobile-nav .sub-menu .current-menu-item > a::after,
.tec-mobile-nav .sub-menu a[aria-current="page"]::after {
	content: "";
	position: absolute;
	left: 0.25rem;
	right: 0.25rem;
	bottom: 2px;
	height: 3px;
	background: var(--wp--preset--color--accent-yellow);
}

/* H4A pill (mobile drawer). The CTA is the last <li> of the same
 * `tec_primary` menu that feeds desktop, carrying CSS class `tec-nav-cta`.
 * Selector is qualified with `.tec-mobile-nav` so it carries the same
 * specificity as the broader `.tec-mobile-nav a` rule (0,2,0 vs 0,1,1)
 * and wins on source order — without the qualification the generic
 * descendant selector would override color, font-weight, border-bottom,
 * and display. The `<li>` itself gets a top-margin to preserve the
 * breathing room the previous standalone `.tec-mobile-nav__cta` wrapper
 * provided between the last menu link and the pill. */
.tec-mobile-nav .tec-nav-cta {
	margin-top: var(--wp--preset--spacing--40);
}
.tec-mobile-nav .tec-nav-cta > a {
	text-align: center;
	padding-block: 3.5px;
	padding-inline: 28px;
	background-color: var(--wp--preset--color--accent-yellow);
	color: var(--wp--preset--color--white);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--sans-body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.7;
	border: 1px solid var(--wp--preset--color--accent-yellow);
	border-radius: 4.9px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.tec-mobile-nav .tec-nav-cta > a:hover,
.tec-mobile-nav .tec-nav-cta > a:focus-visible {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--accent-yellow);
	border-color: var(--wp--preset--color--accent-yellow);
}

body.tec-mobile-nav-open {
	overflow: hidden;
}

/* ===========================================================
 * §9 Site footer  —  Phase D rebuild (2026-05-10)
 *
 * Implements Linnea's footer visual spec — final IA. Four sections,
 * top to bottom, on a charcoal-dark publisher-band surface:
 *
 *   1. .tec-site-footer__newsletter   — sign-up stripe (Gravity Form id 1)
 *   2. .tec-site-footer__columns      — 4-up grid IA block
 *        Watch and Listen · About TEC · Read · Support us
 *   3. .tec-site-footer__utility      — Contact us · Privacy Policy + social
 *   4. .tec-site-footer__copyright    — charity # + registered address
 *
 * Surface: charcoal-dark (--wp--preset--color--near-black, #08101B).
 * Text: warm white. (Linnea's spec said "navy ground"; surface reverted
 * to charcoal-dark per Alfonso 2026-05-10 — colour change was not in
 * the original brief. All other Linnea fidelity intact: typography,
 * spacing, layout, mid-dot separator, hairlines, sentence-case headers,
 * stripe-above-columns stack, 4×col grid, mobile collapse, hover.)
 * Container: existing site content width via `.tec-site-footer__inner`
 * (max-inline-size: var(--tec-width-wide)).
 *
 * Hairline rules (1px warm-white at 0.15 opacity) separate sections
 * 1↔2, 2↔3, 3↔4. The accent yellow appears only on the submit button
 * (single earned accent). Column links never go yellow on hover —
 * underline + opacity-bump per Linnea §3.
 *
 * Departures from prior chrome (callouts):
 * — Surface stays on `near-black` (charcoal-dark) — matches prior chrome.
 * — Centred logo band dropped (Linnea spec has no logo in stack).
 * — Phone + email block dropped (lives on /contact/ page now).
 * — Column header case is sentence case at 14px / +20 tracking
 *   (Linnea §3 / §7). The earlier `__menu li:first-child a { font-weight:700 }`
 *   convention is retired — all column links sit at the same weight.
 * — Newsletter stripe sits ABOVE the columns (Linnea §1 / §6).
 *
 * Holt 2026-05-10.
 * =========================================================== */

/* — Local tokens (footer-scoped only) — */
.tec-site-footer {
	--tec-footer-bg:        var(--wp--preset--color--near-black);
	--tec-footer-fg:        var(--wp--preset--color--white);
	--tec-footer-fg-muted:  rgba(255, 255, 255, 0.85);
	--tec-footer-fg-quiet:  rgba(255, 255, 255, 0.7);
	--tec-footer-fg-meta:   rgba(255, 255, 255, 0.6);
	--tec-footer-fg-sep:    rgba(255, 255, 255, 0.5);
	--tec-footer-rule:      rgba(255, 255, 255, 0.15);
	--tec-footer-accent:    var(--wp--preset--color--accent-yellow);

	background: var(--tec-footer-bg);
	color: var(--tec-footer-fg);
	margin-block-start: 0;
	font-family: var(--wp--preset--font-family--sans-body);
	padding-block: var(--wp--preset--spacing--60) 24px;
}
@media (max-width: 977px) {
	.tec-site-footer {
		padding-block: 48px 24px;
	}
}
@media (max-width: 600px) {
	.tec-site-footer {
		padding-block: 40px 24px;
	}
}

/* Container — reuse the site content width tokens.
 *
 * Mirrors the canonical .tec-band / .tec-band-inner contract: the
 * gutter lives on the *outer* section wrapper (one of
 * `.tec-site-footer__newsletter | __columns | __utility | __copyright`),
 * so this inner is flush to 1200px — matching `.tec-band-inner--wide`
 * used by every main-content section. Holt 2026-05-10. */
.tec-site-footer__inner {
	max-inline-size: var(--tec-width-wide);
	margin-inline: auto;
	/* No padding-inline. Ever. The gutter is on the section wrapper. */
}

/* Section outers carry the gutter (canonical band pattern). */
.tec-site-footer__newsletter,
.tec-site-footer__columns,
.tec-site-footer__utility,
.tec-site-footer__copyright {
	padding-inline: var(--tec-gutter);
}

/* Force footer paragraphs to white (beats child theme `body p { color: charcoal }`
 * at equal specificity via source order). */
.tec-site-footer p {
	color: var(--tec-footer-fg);
	margin: 0;
}

/* Link rest / hover / focus — never yellow inside the footer except submit. */
.tec-site-footer a {
	color: var(--tec-footer-fg-muted);
	text-decoration: none;
	transition: color 0.15s ease, opacity 0.15s ease, text-decoration-color 0.15s ease;
}
.tec-site-footer a:hover,
.tec-site-footer a:focus-visible {
	color: var(--tec-footer-fg);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
.tec-site-footer a:focus-visible {
	outline: 2px solid var(--tec-footer-fg);
	outline-offset: 2px;
	border-radius: 0;
}

/* ---------- Section 1 · Newsletter stripe ---------- */
/* Hairline rule removed 2026-05-10 (Alfonso) — section spacing carries the break. */
.tec-site-footer__newsletter-inner {
	padding-block: 24px;
}
.tec-site-footer__newsletter-form {
	max-width: 1200px;
	margin-inline: auto;
}
.tec-site-footer__newsletter-eyebrow {
	font-family: var(--wp--preset--font-family--serif-heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 400;
	letter-spacing: 0.01em;
	text-transform: none;
	color: var(--tec-footer-fg);
	margin: 0 0 var(--wp--preset--spacing--20);
	line-height: 1.15;
}
.tec-site-footer p.tec-site-footer__newsletter-lede {
	font-family: var(--wp--preset--font-family--sans-body);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
	color: var(--tec-footer-fg);
	margin: 0 0 var(--wp--preset--spacing--40);
}
.tec-site-footer__newsletter-disclaimer,
.tec-site-footer__newsletter-disclaimer em {
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.5;
	color: var(--tec-footer-fg);
	opacity: 0.7;
	margin: var(--wp--preset--spacing--30) 0 0;
}

/* Inert HTML fallback (no Gravity Forms) — label-left, input+submit-right
 * on lg/xl/md; stack on sm. */
.tec-newsletter-form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	align-items: center;
}
.tec-newsletter-form__row {
	display: flex;
	gap: var(--wp--preset--spacing--20);
	flex-wrap: wrap;
	flex: 1 1 auto;
}
.tec-newsletter-form__row--name-email > input { flex: 1 1 12rem; min-width: 0; }
.tec-newsletter-form input[type="text"],
.tec-newsletter-form input[type="email"],
.tec-newsletter-form input[type="tel"] {
	width: 100%;
	padding: 0.75rem 1rem;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--charcoal);
	border: 1px solid rgba(255,255,255,0.4);
	border-radius: 4px;
	font-family: var(--wp--preset--font-family--sans-body);
	font-size: 15px;
	min-height: 44px;
}
.tec-newsletter-form__row--submit {
	flex: 0 0 auto;
}
.tec-newsletter-form button[type="submit"] {
	background-color: var(--tec-footer-accent);
	color: var(--wp--preset--color--white);
	border: 1px solid var(--tec-footer-accent);
	border-radius: 4px;
	padding: 12px 20px;
	font-family: var(--wp--preset--font-family--sans-heading);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	min-height: 44px;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.tec-newsletter-form button[type="submit"]:hover,
.tec-newsletter-form button[type="submit"]:focus-visible {
	background-color: var(--wp--preset--color--white);
	color: var(--tec-footer-accent);
	border-color: var(--tec-footer-accent);
}

/* Gravity Forms scoping — token overrides at the newsletter root so
 * GF Orbital framework rules resolve to TEC tokens. Applies only inside
 * `.tec-site-footer__newsletter` so the donation form (gform 26) keeps
 * its own theming. Carried forward from the prior implementation,
 * rescoped from `__signup` → `__newsletter`. */
.tec-site-footer__newsletter {
	--gf-color-primary: var(--tec-footer-accent);
	--gf-color-primary-rgb: 198, 143, 2;
	--gf-color-primary-contrast: var(--wp--preset--color--white);
	--gf-color-primary-contrast-rgb: 255, 255, 255;
	--gf-color-primary-darker: var(--tec-footer-accent);
	--gf-color-primary-lighter: var(--tec-footer-accent);
	--gf-color-secondary: var(--wp--preset--color--white);
	--gf-color-secondary-rgb: 255, 255, 255;
	--gf-color-secondary-contrast: var(--wp--preset--color--navy);
	--gf-color-secondary-contrast-rgb: 5, 47, 103;

	--gf-ctrl-label-color-primary: var(--tec-footer-fg);
	--gf-ctrl-label-color-secondary: var(--tec-footer-fg);
	--gf-ctrl-label-color-tertiary: var(--tec-footer-fg);
	--gf-ctrl-label-color-quaternary: var(--tec-footer-fg);
	--gf-ctrl-label-color-req: var(--tec-footer-accent);

	--gf-ctrl-desc-color: rgba(255,255,255,0.8);

	--gf-ctrl-color: var(--wp--preset--color--charcoal);
	--gf-ctrl-bg-color: var(--wp--preset--color--white);
	--gf-ctrl-border-color: rgb(104, 110, 119);
	--gf-ctrl-border-color-focus: var(--tec-footer-accent);
	--gf-ctrl-border-color-hover: var(--tec-footer-accent);
	--gf-ctrl-outline-color-focus: rgba(198, 143, 2, 0.65);
	--gf-ctrl-accent-color: var(--tec-footer-accent);
	--gf-ctrl-placeholder-color: var(--wp--preset--color--ink-low-emphasis);

	--gf-field-section-border-color: rgba(255,255,255,0.25);
	--gf-field-repeater-separator-color: rgba(255,255,255,0.25);
	--gf-field-repeater-nested-border-color: rgba(255,255,255,0.25);

	--gf-ctrl-btn-bg-color-primary: var(--tec-footer-accent);
	--gf-ctrl-btn-color-primary: var(--wp--preset--color--white);
	--gf-ctrl-btn-border-color-primary: var(--tec-footer-accent);
	--gf-ctrl-btn-bg-color-hover-primary: var(--wp--preset--color--white);
	--gf-ctrl-btn-color-hover-primary: var(--tec-footer-accent);
	--gf-ctrl-btn-border-color-hover-primary: var(--tec-footer-accent);

	--gf-form-validation-bg-color: rgba(255,255,255,0.08);
	--gf-form-validation-border-color: rgba(192, 43, 10, 0.6);
}
.tec-site-footer__newsletter .gform_wrapper {
	max-width: none;
	margin-inline: 0;
	text-align: start;
}
.tec-site-footer__newsletter .gform_wrapper input::placeholder,
.tec-site-footer__newsletter .gform_wrapper textarea::placeholder {
	color: var(--wp--preset--color--ink-low-emphasis);
	opacity: 1;
}
.tec-site-footer__newsletter .gform_wrapper .gfield--type-text > .gfield_label,
.tec-site-footer__newsletter .gform_wrapper .gfield--type-email > .gfield_label,
.tec-site-footer__newsletter .gform_wrapper .gfield--type-name > .gfield_label,
.tec-site-footer__newsletter .gform_wrapper .gfield--type-phone > .gfield_label,
.tec-site-footer__newsletter .gform_wrapper .gfield--type-address > .gfield_label,
.tec-site-footer__newsletter .gform_wrapper .gfield--type-textarea > .gfield_label,
.tec-site-footer__newsletter .gform_wrapper .ginput_complex .gform-field-label {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}
.tec-site-footer__newsletter .gform_wrapper .gfield--type-checkbox > .gfield_label,
.tec-site-footer__newsletter .gform_wrapper .gfield--type-radio > .gfield_label,
.tec-site-footer__newsletter .gform_wrapper .gchoice label,
.tec-site-footer__newsletter .gform_wrapper .gfield_consent_label {
	color: var(--tec-footer-fg);
}
.tec-site-footer__newsletter .gform_wrapper input[type="text"],
.tec-site-footer__newsletter .gform_wrapper input[type="email"],
.tec-site-footer__newsletter .gform_wrapper input[type="tel"],
.tec-site-footer__newsletter .gform_wrapper input[type="number"],
.tec-site-footer__newsletter .gform_wrapper select,
.tec-site-footer__newsletter .gform_wrapper textarea {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--charcoal);
	border: 1px solid rgb(104, 110, 119);
	border-radius: 4px;
	min-height: 44px;
	padding-inline: 12px;
	font-family: var(--wp--preset--font-family--sans-body);
	font-size: 15px;
}
.tec-site-footer__newsletter .gform_wrapper .gfield_required {
	color: var(--tec-footer-accent);
}
.tec-site-footer__newsletter .gform_wrapper .row-of-checkboxes .gfield_checkbox,
.tec-site-footer__newsletter .gform_wrapper .gfield--type-checkbox.row-of-checkboxes .gfield_checkbox {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
	align-items: center;
}
.tec-site-footer__newsletter .gform_wrapper .row-of-checkboxes .gchoice {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin: 0;
}
.tec-site-footer__newsletter .gform_wrapper .row-of-checkboxes label {
	color: var(--tec-footer-fg);
	font-size: 15px;
}
.tec-site-footer__newsletter .gform_wrapper .gfield.always-fullwidth,
.tec-site-footer__newsletter .gform_wrapper #field_1_7,
.tec-site-footer__newsletter .gform_wrapper #field_1_8 {
	grid-column: 1 / -1;
	width: 100%;
	max-width: 100%;
}
.tec-site-footer__newsletter .gform_wrapper #field_1_7 input,
.tec-site-footer__newsletter .gform_wrapper #field_1_7 select,
.tec-site-footer__newsletter .gform_wrapper #field_1_8 input {
	width: 100%;
}

@media (min-width: 978px) {
	.tec-site-footer__newsletter #gform_1 .gform_fields {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--wp--preset--spacing--30);
		row-gap: var(--wp--preset--spacing--30);
		align-items: start;
	}
	.tec-site-footer__newsletter #gform_1 #field_1_6 {
		grid-column: 1 / 9;
		grid-row: 2;
	}
	.tec-site-footer__newsletter #gform_1 .gfield--type-submit {
		grid-column: 9 / -1;
		grid-row: 2;
		justify-self: end;
		align-self: start;
		margin: 0;
		max-inline-size: none;
	}
}

/* GF submit — yellow accent (single earned accent in footer chrome).
 * Rest: white text on gold; hover: gold text on white. Matches the
 * primary-button convention in buttons.css. Form id on the clone is 1
 * ("Sign Up", active); prod uses a different id (29 per Alfonso) —
 * selectors are wrapper-id-scoped AND class-scoped so both resolve. */
.tec-site-footer__newsletter #gform_wrapper_1 input[type="submit"],
.tec-site-footer__newsletter #gform_wrapper_1 input[type="submit"].button.gform_button,
.tec-site-footer__newsletter #gform_wrapper_29 input[type="submit"],
.tec-site-footer__newsletter #gform_wrapper_29 input[type="submit"].button.gform_button,
.tec-site-footer__newsletter .gform_wrapper.gform-theme.gform-theme--framework input[type="submit"],
.tec-site-footer__newsletter .gform_wrapper.gform-theme.gform-theme--framework input[type="submit"].button.gform_button,
.tec-site-footer__newsletter .gform_wrapper .gform_button {
	background-color: var(--tec-footer-accent);
	color: var(--wp--preset--color--white);
	border: 1px solid var(--tec-footer-accent);
	border-radius: 4px;
	padding: 12px 20px;
	font-family: var(--wp--preset--font-family--sans-heading);
	font-weight: 600;
	letter-spacing: 0.02em;
	font-size: 14px;
	min-height: 44px;
	min-inline-size: auto;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.tec-site-footer__newsletter #gform_wrapper_1 input[type="submit"]:hover,
.tec-site-footer__newsletter #gform_wrapper_1 input[type="submit"].button.gform_button:hover,
.tec-site-footer__newsletter #gform_wrapper_29 input[type="submit"]:hover,
.tec-site-footer__newsletter #gform_wrapper_29 input[type="submit"].button.gform_button:hover,
.tec-site-footer__newsletter .gform_wrapper.gform-theme.gform-theme--framework input[type="submit"]:hover,
.tec-site-footer__newsletter .gform_wrapper.gform-theme.gform-theme--framework input[type="submit"].button.gform_button:hover,
.tec-site-footer__newsletter .gform_wrapper .gform_button:hover {
	background-color: var(--wp--preset--color--white);
	color: var(--tec-footer-accent);
	border-color: var(--tec-footer-accent);
}

/* ---------- Section 2 · Four-column IA block ---------- */
/* Hairline rule removed 2026-05-10 (Alfonso) — section spacing carries the break. */
.tec-site-footer__columns-inner {
	padding-block: 48px;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: 32px;
	row-gap: 40px;
	align-items: start;
}
@media (max-width: 1199px) {
	.tec-site-footer__columns-inner { column-gap: 24px; }
}

.tec-site-footer__col {
	font-size: 15px;
	line-height: 1.6;
	color: var(--tec-footer-fg);
}

/* Column heading — sentence case, 14px, +20 tracking, weight 600,
 * full-opacity warm white, 16px to first list item. */
.tec-site-footer__col-heading {
	font-family: var(--wp--preset--font-family--sans-body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--tec-footer-fg);
	margin: 0 0 16px;
	line-height: 1.4;
}

/* Column list — flush left, no bullets, 15px / line-height 1.6,
 * warm-white-0.85 rest, full opacity + underline on hover/focus.
 * No yellow on column links. */
.tec-site-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.tec-site-footer__menu li {
	margin: 0;
}
.tec-site-footer__menu li a {
	display: inline-block;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--tec-footer-fg-muted);
	padding-block: 2px;
}
.tec-site-footer__menu li a:hover,
.tec-site-footer__menu li a:focus-visible {
	color: var(--tec-footer-fg);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

/* Reflows: md (767–978) → 2x2; sm (≤ 766) → 1 column */
@media (max-width: 977px) {
	.tec-site-footer__columns-inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 24px;
		row-gap: 40px;
		padding-block: 40px;
	}
}
@media (max-width: 600px) {
	.tec-site-footer__columns-inner {
		grid-template-columns: 1fr;
		row-gap: 32px;
	}
}

/* ---------- Section 3 · Row A — Contact row ---------- */
/* Layout: contact-line on the left (split-justified), social icons on the right.
 * "Contact us" is the visual anchor — bolder + slightly larger than the meta. */
.tec-site-footer__utility-inner {
	padding-block: 18px 14px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
}

.tec-site-footer__contact-line {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans-body);
	font-size: 13px;
	letter-spacing: 0.01em;
	color: var(--tec-footer-fg-muted);
	line-height: 1.6;
}
.tec-site-footer__contact-anchor {
	font-size: 15px;
	font-weight: 700;
	color: var(--tec-footer-fg);
	letter-spacing: 0.005em;
}
.tec-site-footer__contact-anchor:hover,
.tec-site-footer__contact-anchor:focus-visible {
	color: var(--tec-footer-fg);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.tec-site-footer__contact-sep {
	color: var(--tec-footer-fg-sep);
	margin-inline: 6px;
}
.tec-site-footer__contact-meta {
	font-size: 13px;
	font-weight: 400;
	color: var(--tec-footer-fg-muted);
}
a.tec-site-footer__contact-meta:hover,
a.tec-site-footer__contact-meta:focus-visible {
	color: var(--tec-footer-fg);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

/* Social icons — right cluster. Bumped 2026-05-10: 22px glyph, full opacity,
 * slightly larger tap area, brighter resting colour. Reads as prominent on
 * charcoal rather than faint. */
.tec-site-footer__social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 14px;
	align-items: center;
}
.tec-site-footer__social a {
	display: inline-flex;
	width: 28px;
	height: 28px;
	align-items: center;
	justify-content: center;
	color: var(--tec-footer-fg);
	border: 0;
	border-radius: 0;
	background: transparent;
	transition: color 0.15s ease, transform 0.15s ease;
	opacity: 1;
}
.tec-site-footer__social a:hover,
.tec-site-footer__social a:focus-visible {
	color: var(--wp--preset--color--brand-gold, var(--tec-footer-fg));
	transform: translateY(-1px);
	text-decoration: none;
}
.tec-site-footer__social svg {
	width: 22px;
	height: 22px;
	display: block;
}

@media (max-width: 600px) {
	.tec-site-footer__utility-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--20);
	}
}

/* ---------- Section 4 · Row B — Legal micro-row ---------- */
/* Copyright · Registered Charity · Privacy Policy. 12px meta typography.
 * Top padding kept tight (10px) so Row A→Row B reads as one paired block,
 * not as a section break. */
.tec-site-footer__copyright-inner {
	padding-block: 10px 16px;
}
.tec-site-footer__copyright-line {
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.01em;
	color: var(--tec-footer-fg-meta);
	line-height: 1.5;
	margin: 0;
}
.tec-site-footer__copyright-sep {
	color: var(--tec-footer-fg-meta);
}

@media (max-width: 600px) {
	.tec-site-footer__copyright-line {
		line-height: 1.7;
	}
}

/* ===========================================================
 * §10 Page-header bands
 * Used by page.php, single.php, single-recording.php,
 * single-work.php, archive-musician.php, archive-tec-events.php
 * etc. Single Musician keeps its own bespoke header.
 * Two variants — light (default) + dark (single-tec-events,
 * single-production). Surface is selected via the body_class
 * filter in functions.php.
 *
 * IMPORTANT: when the page-header is a `core/cover` instance
 * (the `tec/page-header` Block Pattern, since 2026-05-02), the
 * cover owns the surface paint, padding, and text colour via
 * its own block JSON attributes (overlayColor, dimRatio,
 * textColor, style.spacing.padding). The :not(.wp-block-cover)
 * guard below scopes the legacy structural + surface rules to
 * non-cover consumers only (404.php, page.php's soft fallback,
 * inc/tec-page-header.php server-render for archives /
 * single-tec-events / single-production). Holt 2026-05-02.
 * =========================================================== */
.tec-page-header:not(.wp-block-cover) {
	padding-block: var(--wp--preset--spacing--80) var(--wp--preset--spacing--70);
	padding-inline: var(--tec-gutter);
}
.tec-page-header__inner {
	max-width: var(--tec-width-content);
	margin-inline: auto;
}
.tec-page-header__title {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--serif-heading);
}
.tec-page-header__subtitle {
	font-family: var(--wp--preset--font-family--sans-body);
	font-size: var(--wp--preset--font-size--medium);
	font-style: italic;
	margin: 0;
	opacity: 0.85;
}
.tec-page-header__image {
	max-width: var(--tec-width-wide);
	margin: var(--wp--preset--spacing--60) auto 0;
	padding-inline: var(--tec-gutter);
}
.tec-page-header__image img,
.tec-page-header__image-img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 21 / 9;
	object-fit: cover;
}

/* Light variant — default. Excludes cover-based instances (the
 * tec/page-header pattern) — those own their surface via the
 * cover overlay + textColor. */
body.tec-surface-light-header .tec-page-header:not(.wp-block-cover),
.tec-page-header.tec-page-header--light:not(.wp-block-cover) {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--charcoal);
}

/* Dark variant — single-tec-events, single-production */
body.tec-surface-dark-header .tec-page-header:not(.wp-block-cover),
.tec-page-header.tec-page-header--dark:not(.wp-block-cover) {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}
body.tec-surface-dark-header .tec-page-header:not(.wp-block-cover) .tec-page-header__title,
.tec-page-header.tec-page-header--dark:not(.wp-block-cover) .tec-page-header__title {
	color: var(--wp--preset--color--white);
}
body.tec-surface-dark-header .tec-page-header:not(.wp-block-cover) .tec-page-header__subtitle,
.tec-page-header.tec-page-header--dark:not(.wp-block-cover) .tec-page-header__subtitle {
	color: var(--wp--preset--color--white);
}

/* Fallback rules for templates whose body class hasn't been set
 * (rare; safety net). Light is the default. */
.tec-page-header:not(.tec-page-header--dark):not(.tec-page-header--light):not(.wp-block-cover) {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--charcoal);
}