/*
 * Amarante — base layer.
 *
 * Tokens, reset, typography, and the accessibility primitives every page
 * needs. Values trace back to phase-b/03_design_tokens.json; where a token
 * was derived rather than extracted, the JSON says so.
 */

:root {
	/*
	 * Color.
	 *
	 * The blue was extracted from wp_options.wpresidence_admin and is the
	 * brand's real accent — unchanged.
	 *
	 * The neutrals were NOT. Phase B derived --ink #282c1c and --surface-dark
	 * #282c1b from a legacy theme value whose green channel exceeds its blue
	 * (28 > 1c), which reads as olive against the blue accent. Production's
	 * dark surfaces are a neutral blue-leaning charcoal. Phase F replaces the
	 * two olive tokens with a slate ramp whose hue matches the accent, so
	 * dark bands and body text sit in the same family as the brand blue.
	 */
	--brand: #4a60a1;
	--brand-hover: #344772;
	--brand-soft: #eef1f8;
	--secondary: #c9d2e8;
	--ink: #23282f;
	--ink-inverse: #ffffff;
	--body: #5b636e;
	--muted: #646c78;   /* 5.31:1 on white, 4.95:1 on --surface-alt (WCAG AA) */
	--surface: #ffffff;
	--surface-alt: #f6f7f9;
	--surface-dark: #2b3038;
	--surface-darker: #21252b;
	--on-dark: #d6dae1;
	--border: #e2e5ea;
	--border-strong: #c9cfd8;
	--focus: #4a60a1;
	--success: #2f7d4f;
	--warning: #b26a00;
	--danger: #b3261e;

	/* Typography — Roboto is self-hosted via the OMGF plugin already
	   installed on this site. No external font request is made. */
	--font-sans: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--font-serif: "Roboto Slab", Georgia, "Times New Roman", serif;

	/*
	 * Editorial type scale (Phase G).
	 *
	 * Seven named roles, not an anonymous 1..5 ramp, so a template asks for
	 * "section heading" rather than guessing a step. Large sizes carry
	 * negative tracking and tight leading — the single biggest difference
	 * between a default WordPress heading and an editorial one.
	 */
	--text--1: clamp(0.8125rem, 0.79rem + 0.11vw, 0.875rem);   /* 13-14 small */
	--text-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);        /* 16-17 body */
	--text-1: clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem);   /* 17-19 card title */
	--text-2: clamp(1.25rem, 1.16rem + 0.45vw, 1.5rem);        /* 20-24 h3 */
	--text-3: clamp(1.5rem, 1.3rem + 1vw, 2.125rem);           /* 24-34 h2 */
	--text-4: clamp(1.875rem, 1.5rem + 1.85vw, 2.875rem);      /* 30-46 h1 */
	--text-5: clamp(2.25rem, 1.7rem + 2.75vw, 3.75rem);        /* 36-60 display */

	/* Named editorial roles */
	--type-display: var(--text-5);
	--type-title: var(--text-4);
	--type-section: var(--text-3);
	--type-sub: var(--text-2);
	--type-card: var(--text-1);
	--type-lede: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);     /* 17-20 intro */
	--type-body: var(--text-0);
	--type-small: var(--text--1);
	--type-eyebrow: clamp(0.6875rem, 0.66rem + 0.14vw, 0.78rem);

	/* Tracking: negative on display sizes, positive on eyebrows. */
	--track-display: -0.022em;
	--track-title: -0.018em;
	--track-section: -0.012em;
	--track-eyebrow: 0.1em;

	--lh-display: 1.06;
	--lh-tight: 1.12;
	--lh-heading: 1.22;
	--lh-body: 1.7;
	--measure: 68ch;
	--measure-lede: 60ch;

	/* Space — 4px base scale */
	--space-3xs: 0.25rem;
	--space-2xs: 0.5rem;
	--space-xs: 0.75rem;
	--space-s: 1rem;
	--space-m: 1.5rem;
	--space-l: 2rem;
	--space-xl: 3rem;
	--space-2xl: 4rem;
	--space-3xl: 6rem;

	/* Layout — Phase F container system (see phase-f/06_layout_container_system.md) */
	--container-hero: 1440px;      /* full-bleed hero band */
	--container-wide: 1320px;      /* search apps, maps, data tables, report grids */
	--container-standard: 1160px;  /* cards, directories, service modules */
	--container-form: 920px;       /* calculators, contact, account modules */
	--container-reading: 760px;    /* long-form prose and article bodies */
	--content-width: 1160px;       /* legacy alias -> standard */
	--wide-width: 1320px;          /* legacy alias -> wide */
	--prose-width: 760px;          /* legacy alias -> reading */

	/* Vertical rhythm — one scale for gaps between major components. */
	--rhythm-tight: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
	--rhythm-section: clamp(2.75rem, 2rem + 3vw, 4.5rem);
	--rhythm-band: clamp(3.5rem, 2.4rem + 4.5vw, 6rem);
	--gutter: clamp(1.25rem, 3vw, 2rem);
	--header-height: 84px;

	/*
	 * Shape. The 5px radius came from wp_estate_border_radius_corner and read
	 * as "almost square". Cards move to a single softer radius; controls stay
	 * tighter so a button never looks like a card.
	 */
	--radius-sm: 4px;
	--radius-md: 7px;    /* buttons, inputs */
	--radius-lg: 14px;   /* panels, media */
	--radius-card: 12px; /* every card variant */
	--radius-pill: 999px;

	/* Elevation — wp_estate_cssbox_shadow, preserved verbatim */
	/*
	 * Two-layer shadows: a tight contact shadow plus a soft ambient one. A
	 * single large blur reads as fog; the contact layer is what makes a card
	 * feel like it is resting on the page.
	 */
	--shadow-card: 0 1px 2px rgba(24, 30, 46, 0.05), 0 4px 16px rgba(24, 30, 46, 0.05);
	--shadow-card-hover: 0 2px 4px rgba(24, 30, 46, 0.07), 0 12px 28px rgba(24, 30, 46, 0.10);
	--shadow-focus: 0 0 0 3px rgba(74, 96, 161, 0.35);

	--transition: 150ms ease;
}

/* ---------- Reset ---------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	background: var(--surface);
	color: var(--body);
	font-family: var(--font-sans);
	font-size: var(--text-0);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--space-s);
	color: var(--ink);
	font-weight: 700;
	line-height: var(--lh-heading);
	text-wrap: balance;
}

h1 { font-size: var(--text-5); line-height: var(--lh-tight); }
h2 { font-size: var(--text-4); }
h3 { font-size: var(--text-3); }
h4 { font-size: var(--text-2); }
h5 { font-size: var(--text-1); }
h6 { font-size: var(--text-0); text-transform: uppercase; letter-spacing: 0.06em; }

p, ul, ol, dl, blockquote, figure, table, pre {
	margin: 0 0 var(--space-m);
}

a {
	color: var(--brand);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
	transition: color var(--transition);
}

a:hover,
a:focus {
	color: var(--brand-hover);
}

img,
picture,
video,
canvas,
svg,
iframe {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Images inside prose keep their intrinsic ratio; height:auto above can
   collapse an explicitly sized img, so restore it where dimensions exist. */
img[width][height] {
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

table {
	width: 100%;
	border-collapse: collapse;
}

hr {
	height: 1px;
	margin: var(--space-xl) 0;
	border: 0;
	background: var(--border);
}

/* ---------- Accessibility primitives ---------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed !important;
	top: var(--space-2xs);
	left: var(--space-2xs);
	z-index: 1000;
	width: auto;
	height: auto;
	padding: var(--space-2xs) var(--space-s);
	clip: auto;
	clip-path: none;
	background: var(--surface);
	color: var(--brand);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
}

/* main receives focus from the skip link but must not show a focus ring
   when reached that way — the ring belongs on interactive elements. */
.site-main:focus {
	outline: none;
}

/* ---------- Layout primitives ---------- */

.container {
	width: 100%;
	max-width: calc(var(--content-width) + (var(--gutter) * 2));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.container--wide {
	max-width: calc(var(--wide-width) + (var(--gutter) * 2));
}

.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-main {
	flex: 1 0 auto;
	padding-block: var(--space-xl);
}

/* Long unbroken words (all-caps legacy headlines) must never force a
   horizontal scrollbar on narrow viewports. */
h1, h2, h3, h4, h5, h6 {
	overflow-wrap: break-word;
}

/* ---------- Phase F: container primitives ---------- */

/*
 * Three widths, one rule each. Every section picks exactly one; mixing a
 * left-aligned heading in one container with a grid in another is what
 * produced the "heading here, cards 20% inward" offsets the owner flagged.
 */
.container-wide,
.container-standard,
.container-reading {
	width: 100%;
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.container-wide     { max-width: calc(var(--container-wide) + (var(--gutter) * 2)); }
.container-standard { max-width: calc(var(--container-standard) + (var(--gutter) * 2)); }
.container-reading  { max-width: calc(var(--container-reading) + (var(--gutter) * 2)); }

/* Section building blocks. */
.section-header {
	margin-bottom: var(--space-l);
}

.section-header__eyebrow {
	display: block;
	margin: 0 0 var(--space-3xs);
	color: var(--brand);
	font-size: var(--text--1);
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.section-header__title {
	margin: 0 0 var(--space-2xs);
	font-size: var(--text-4);
	line-height: var(--lh-heading);
}

.section-header__lede {
	max-width: var(--container-reading);
	margin: 0;
	color: var(--body);
}

/* Centered variant: heading, lede, grid and actions all share the axis. */
.section-header--center {
	text-align: center;
}

.section-header--center .section-header__lede {
	margin-inline: auto;
}

.section-grid {
	display: grid;
	gap: var(--space-m);
	grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
}

.section-grid--4 { --cols: 4; }
.section-grid--3 { --cols: 3; }
.section-grid--2 { --cols: 2; }

@media (max-width: 1200px) {
	.section-grid--4 { --cols: 2; }
}

@media (max-width: 1024px) {
	.section-grid--3 { --cols: 2; }
}

@media (max-width: 640px) {
	.section-grid--4,
	.section-grid--3,
	.section-grid--2 { --cols: 1; }
}

.section-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	margin-top: var(--space-l);
}

.section-actions--center {
	justify-content: center;
}


/* ---------- Phase F: icon masks ----------
 *
 * The same 24x24 stroke paths inc/icons.php prints inline, as CSS masks so
 * card decorations inherit a themeable colour. No font, no framework and no
 * extra request. Painted black because a mask only reads the alpha channel;
 * the visible colour comes from background-color at the use site.
 */
:root {
	--i-key: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M15%207a4%204%200%201%201-3.9%205H8v3H5v3H2v-4l7.1-7.1A4%204%200%200%201%2015%207Z%22/%3E%3Ccircle%20cx=%2216.5%22%20cy=%227.5%22%20r=%22.8%22%20fill=%22black%22%20stroke=%22none%22/%3E%3C/svg%3E");
	--i-tag: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M3%2012V4a1%201%200%200%201%201-1h8l9%209-9%209-9-9Z%22/%3E%3Ccircle%20cx=%227.5%22%20cy=%227.5%22%20r=%221.2%22/%3E%3C/svg%3E");
	--i-chart: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M3%2021h18%22/%3E%3Crect%20x=%225%22%20y=%2212%22%20width=%224%22%20height=%226%22%20rx=%221%22/%3E%3Crect%20x=%2211%22%20y=%228%22%20width=%224%22%20height=%2210%22%20rx=%221%22/%3E%3Crect%20x=%2217%22%20y=%224%22%20width=%224%22%20height=%2214%22%20rx=%221%22/%3E%3C/svg%3E");
	--i-truck: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M3%2016V6h11v10%22/%3E%3Cpath%20d=%22M14%209h4l3%203v4h-7%22/%3E%3Ccircle%20cx=%227%22%20cy=%2218%22%20r=%222%22/%3E%3Ccircle%20cx=%2217%22%20cy=%2218%22%20r=%222%22/%3E%3C/svg%3E");
	--i-report: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M6%203h9l4%204v14H6z%22/%3E%3Cpath%20d=%22M15%203v4h4%22/%3E%3Cpath%20d=%22M9%2013h6M9%2017h6M9%209h2%22/%3E%3C/svg%3E");
	--i-building: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M4%2021V6l7-3v18%22/%3E%3Cpath%20d=%22M11%2021V9l8%203v9%22/%3E%3Cpath%20d=%22M7%209h1M7%2013h1M7%2017h1M14%2014h1M14%2018h1%22/%3E%3C/svg%3E");
	--i-crane: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M4%2021h16%22/%3E%3Cpath%20d=%22M7%2021V5h12%22/%3E%3Cpath%20d=%22M19%205v4%22/%3E%3Cpath%20d=%22M7%205%203%209%22/%3E%3Crect%20x=%2216%22%20y=%229%22%20width=%226%22%20height=%224%22%20rx=%221%22/%3E%3C/svg%3E");
	--i-star: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22m12%203%202.7%205.6%206.1.9-4.4%204.3%201%206.1-5.4-2.9-5.4%202.9%201-6.1L3.2%209.5l6.1-.9z%22/%3E%3C/svg%3E");
	--i-skyline: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M3%2021h18%22/%3E%3Cpath%20d=%22M5%2021V9l4-3v15%22/%3E%3Cpath%20d=%22M13%2021V6l6%204v11%22/%3E%3C/svg%3E");
	--i-beach: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M3%2018h18%22/%3E%3Cpath%20d=%22M12%2018V9%22/%3E%3Cpath%20d=%22M4%209a8%208%200%200%201%2016%200z%22/%3E%3C/svg%3E");
	--i-tree: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%2021v-4%22/%3E%3Cpath%20d=%22M12%203%206%2012h12z%22/%3E%3Cpath%20d=%22M12%208%208%2015h8z%22/%3E%3C/svg%3E");
	--i-palette: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%203a9%209%200%201%200%200%2018c1.1%200%201.6-.9%201.2-1.7-.5-1%20.2-2.3%201.4-2.3H17a4%204%200%200%200%204-4c0-5.5-4-10-9-10Z%22/%3E%3Ccircle%20cx=%228%22%20cy=%2210%22%20r=%221.1%22%20fill=%22black%22%20stroke=%22none%22/%3E%3Ccircle%20cx=%2212%22%20cy=%227.5%22%20r=%221.1%22%20fill=%22black%22%20stroke=%22none%22/%3E%3Ccircle%20cx=%2215.8%22%20cy=%2210.5%22%20r=%221.1%22%20fill=%22black%22%20stroke=%22none%22/%3E%3C/svg%3E");
	--i-waves: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M2%208c2.5-2%204.5-2%207%200s4.5%202%207%200%204.5-2%206%200%22/%3E%3Cpath%20d=%22M2%2014c2.5-2%204.5-2%207%200s4.5%202%207%200%204.5-2%206%200%22/%3E%3Cpath%20d=%22M2%2020c2.5-2%204.5-2%207%200s4.5%202%207%200%204.5-2%206%200%22/%3E%3C/svg%3E");
	--i-search: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2211%22%20cy=%2211%22%20r=%227%22/%3E%3Cpath%20d=%22m20%2020-3.5-3.5%22/%3E%3C/svg%3E");
	--i-calculator: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%225%22%20y=%223%22%20width=%2214%22%20height=%2218%22%20rx=%222%22/%3E%3Cpath%20d=%22M9%207h6%22/%3E%3Cpath%20d=%22M9%2012h.01M12%2012h.01M15%2012h.01M9%2016h.01M12%2016h.01M15%2016h.01%22/%3E%3C/svg%3E");
	--i-scales: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%204v16%22/%3E%3Cpath%20d=%22M7%2020h10%22/%3E%3Cpath%20d=%22M4%208h16%22/%3E%3Cpath%20d=%22M4%208%202%2014h4z%22/%3E%3Cpath%20d=%22M20%208l-2%206h4z%22/%3E%3C/svg%3E");
}

/* ---------- Phase H: form container primitive ---------- */

.container-form {
	width: 100%;
	max-width: calc(var(--container-form) + (var(--gutter) * 2));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* ---------- Phase H: universal overflow guard ---------- */

/*
 * A blog post overflowed a 390px viewport by 42px with no element wider than
 * the screen: an unbroken bracketed link label inside a <ul> pushed the
 * intrinsic width out. Phase F broke long words in headings only; every text
 * node needs the same protection.
 */
.site-main p,
.site-main li,
.site-main td,
.site-main th,
.site-main dd,
.site-main dt,
.site-main a,
.site-main figcaption,
.site-main blockquote {
	overflow-wrap: break-word;
	word-break: break-word;
}