/* =============================================================================
   Global Access — main stylesheet
   Single hand-written stylesheet, no preprocessor. Mobile-first: base rules
   target mobile; @media (min-width: …) layers up. Tokens per
   docs/phase0-inventory.md. Phase 2 scope = chrome + base typography + the
   section/hero/card system + generic & legal pages. Per-page marketing layouts
   land in Phase 3.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   Design tokens
   --------------------------------------------------------------------------- */
:root {
	/* Brand */
	--ga-blue: #00aeef;          /* bright brand blue — accents, on-dark */
	--ga-blue-deep: #0b5c7a;     /* deep blue — accents/hover on light */
	--ga-link: #036896;          /* prose links on white (WCAG AA) */
	--ga-orange: #f7941d;        /* CTA fill */
	--ga-orange-deep: #dc7e08;   /* CTA hover */
	--ga-cta-ink: #10242e;       /* text on orange (high contrast) */

	/* Ink / text */
	--ga-ink: #0f2530;           /* headings */
	--ga-body: #44525c;          /* body text (~7:1 on white) */
	--ga-muted: #5f6e78;         /* secondary text — AA on white (5.3:1) + tinted band (4.9:1) */

	/* Surfaces */
	--ga-white: #ffffff;
	--ga-bg-alt: #f1f8fb;        /* tinted section band */
	--ga-border: #dce7ed;

	/* Dark surfaces */
	--ga-navy: #0b2733;          /* hero/footer base */
	--ga-navy-2: #103a52;        /* gradient end */
	--ga-blue-on-dark: #4fc9f2;  /* eyebrow/links on navy (contrast-safe) */
	--ga-footer-link: #b8c6cf;
	--ga-legal-bg: #081d27;

	/* Composite */
	--ga-hero-gradient: linear-gradient(145deg, var(--ga-navy) 0%, var(--ga-navy-2) 100%);

	/* Type */
	--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--lh-body: 1.7;
	--lh-heading: 1.2;

	/* Layout */
	--container-max: 1140px;
	--container-narrow: 760px;
	--container-header: 1200px;
	--pad-x: 20px;

	/* Radii + elevation */
	--radius: 6px;
	--radius-card: 10px;
	--shadow-card: 0 10px 30px rgba(11, 39, 51, 0.08);
	--shadow-card-hover: 0 16px 40px rgba(11, 39, 51, 0.14);
}

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

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

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 17px;
	font-weight: 400;
	line-height: var(--lh-body);
	color: var(--ga-body);
	background: var(--ga-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; height: auto; }

h1, h2, h3, h4 {
	margin: 0 0 0.5em;
	color: var(--ga-ink);
	font-weight: 700;
	line-height: var(--lh-heading);
}

p { margin: 0 0 1em; }

a { color: var(--ga-link); text-decoration: none; }
a:hover, a:focus { color: var(--ga-blue-deep); text-decoration: underline; }

:focus-visible { outline: 3px solid var(--ga-blue); outline-offset: 2px; }

/* ---------------------------------------------------------------------------
   Utilities
   --------------------------------------------------------------------------- */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--pad-x);
}
.container--narrow { max-width: var(--container-narrow); }

.eyebrow {
	margin: 0 0 0.75rem;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ga-blue-deep);
}
.eyebrow--on-dark { color: var(--ga-blue-on-dark); }

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

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
}
.skip-link:focus {
	left: 8px; top: 8px;
	width: auto; height: auto;
	clip: auto;
	padding: 10px 16px;
	background: var(--ga-white);
	color: var(--ga-link);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
}

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	border: 2px solid transparent;
	border-radius: var(--radius);
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn:hover, .btn:focus { text-decoration: none; }

.btn--cta {
	background: var(--ga-orange);
	color: var(--ga-cta-ink);
}
.btn--cta:hover, .btn--cta:focus { background: var(--ga-orange-deep); color: var(--ga-cta-ink); }

.btn--ghost {
	background: transparent;
	border-color: var(--ga-blue-deep);
	color: var(--ga-blue-deep);
}
.btn--ghost:hover, .btn--ghost:focus { background: var(--ga-blue-deep); color: var(--ga-white); }

.btn--ghost-light {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.7);
	color: var(--ga-white);
}
.btn--ghost-light:hover, .btn--ghost-light:focus { background: rgba(255, 255, 255, 0.14); color: var(--ga-white); }

/* ---------------------------------------------------------------------------
   Header
   --------------------------------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--ga-white);
	border-bottom: 1px solid var(--ga-border);
}
.site-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
	max-width: var(--container-header);
	margin-inline: auto;
	padding: 14px var(--pad-x);
}
.site-branding { margin-right: auto; }
.custom-logo-link { display: inline-flex; }
.custom-logo { max-height: 56px; width: auto; }
.site-title {
	font-size: 22px;
	font-weight: 700;
	color: var(--ga-ink);
	text-decoration: none;
}
.site-title:hover, .site-title:focus { color: var(--ga-blue-deep); text-decoration: none; }

.primary-nav { order: 3; width: 100%; }
.primary-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 22px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.primary-nav__list a {
	display: inline-block;
	padding: 6px 2px;
	color: var(--ga-ink);
	font-weight: 500;
	text-decoration: none;
}
.primary-nav__list a:hover,
.primary-nav__list a:focus,
.primary-nav__list .current-menu-item > a {
	color: var(--ga-blue-deep);
}

/* Mobile hamburger markup ships now; JS toggle wired in Phase 3. Hidden until
   then so the nav simply wraps. */
.nav-toggle { display: none; }
.site-header__cta { padding: 0.55rem 1.1rem; }

@media (min-width: 1024px) {
	.primary-nav { order: 0; width: auto; }
	.site-header__inner { flex-wrap: nowrap; }
}

/* ---------------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------------- */
.hero {
	background: var(--ga-hero-gradient);
	color: var(--ga-white);
	padding: 64px 0 72px;
}
.hero__inner { max-width: 800px; }
.hero__title {
	margin: 0 0 0.4em;
	color: var(--ga-white);
	font-size: clamp(2rem, 5vw, 3.25rem);
	letter-spacing: -0.01em;
}
.hero__lead {
	margin: 0 0 1.75rem;
	font-size: clamp(1.05rem, 2.2vw, 1.25rem);
	color: rgba(255, 255, 255, 0.86);
	max-width: 60ch;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------------------------------------------------------------------------
   Section system
   --------------------------------------------------------------------------- */
.section { padding: 56px 0; }
.section--alt { background: var(--ga-bg-alt); }
.section--center { text-align: center; }
.section__head {
	max-width: 720px;
	margin: 0 auto 40px;
	text-align: center;
}
.section__title {
	margin: 0 0 0.4em;
	font-size: clamp(1.6rem, 3.5vw, 2.25rem);
}
.section__lead { font-size: 1.125rem; color: var(--ga-muted); margin: 0; }

/* Card grid */
.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.card {
	background: var(--ga-white);
	border: 1px solid var(--ga-border);
	border-radius: var(--radius-card);
	padding: 28px 24px;
	box-shadow: var(--shadow-card);
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); }
.card__title { margin: 0 0 0.5rem; font-size: 1.2rem; color: var(--ga-ink); }
.card__body { margin: 0; color: var(--ga-body); }

/* CTA band */
.cta-band {
	background: var(--ga-navy);
	color: var(--ga-white);
	padding: 56px 0;
	text-align: center;
}
.cta-band__inner { max-width: 680px; }
.cta-band__title { color: var(--ga-white); font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 0.5rem; }
.cta-band__lead { color: rgba(255, 255, 255, 0.84); margin: 0 0 1.5rem; font-size: 1.1rem; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ---------------------------------------------------------------------------
   Interior pages (page.php) — hero + prose
   --------------------------------------------------------------------------- */
.page-hero {
	background: var(--ga-hero-gradient);
	color: var(--ga-white);
	padding: 56px 0;
}
.page-hero__title { margin: 0; color: var(--ga-white); font-size: clamp(1.8rem, 4vw, 2.5rem); }

.page-content { padding: 48px 0 64px; }
.page-content .container { color: var(--ga-body); }
.page-content h2 { margin-top: 1.6em; font-size: 1.5rem; }
.page-content h3 { margin-top: 1.4em; font-size: 1.2rem; }
.page-content ul, .page-content ol { padding-left: 1.4em; margin: 0 0 1em; }
.page-content li { margin-bottom: 0.4em; }
.page-content a { color: var(--ga-link); text-decoration: underline; }
.page-content--legal { font-size: 1rem; }
.page-content--legal h2 { font-size: 1.3rem; }

/* ---------------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------------- */
.site-footer { background: var(--ga-navy); color: var(--ga-footer-link); }
.site-footer__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	padding: 48px var(--pad-x);
}
.site-footer__name { font-size: 1.25rem; font-weight: 700; color: var(--ga-white); }
.site-footer__tagline { margin: 0.5rem 0 0; color: rgba(255, 255, 255, 0.7); }
.site-footer__heading {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ga-white);
	margin: 0 0 1rem;
}
.site-footer__list { list-style: none; margin: 0; padding: 0; }
.site-footer__list li { margin-bottom: 0.6rem; }
.site-footer__list a { color: var(--ga-footer-link); text-decoration: none; }
.site-footer__list a:hover, .site-footer__list a:focus { color: var(--ga-white); text-decoration: underline; }

.legal-bar {
	background: var(--ga-legal-bg);
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
	padding: 18px var(--pad-x);
	text-align: center;
}
.legal-bar__links { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; }
.legal-bar__links a { color: var(--ga-footer-link); font-size: 0.9rem; text-decoration: none; }
.legal-bar__links a:hover, .legal-bar__links a:focus { color: var(--ga-white); text-decoration: underline; }
.legal-bar__copyright { margin: 0; font-size: 0.85rem; color: rgba(255, 255, 255, 0.55); }

@media (min-width: 768px) {
	.site-footer__inner { grid-template-columns: 1.5fr 1fr 1fr; gap: 48px; }
	.legal-bar { flex-direction: row; justify-content: space-between; }
}

/* ---------------------------------------------------------------------------
   Phase 3 — page-template patterns
   --------------------------------------------------------------------------- */

/* Page hero lead (subpage heroes) */
.page-hero__lead {
	margin: 0.75rem 0 0;
	color: rgba(255, 255, 255, 0.86);
	font-size: 1.15rem;
	max-width: 60ch;
}

/* Centered action row under a section */
.section__action { text-align: center; margin: 36px 0 0; }

/* Readable prose block (About / Voice intro) */
.measure { text-align: left; }
.measure p { margin: 0 0 1em; color: var(--ga-body); }
.measure .section__title { text-align: left; margin-top: 1.8em; }
.measure .section__title:first-child { margin-top: 0; }

/* Service cards: brand accent bar across the top */
.service-card { position: relative; overflow: hidden; padding-top: 34px; }
.service-card::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 4px;
	background: var(--ga-blue);
}

/* Feature grid (3-up, icon + title + body) */
.feature-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.feature { text-align: center; padding: 12px; }
.feature__icon { width: 44px; height: 44px; margin: 0 auto 14px; color: var(--ga-blue-deep); }
.feature__title { margin: 0 0 0.4rem; font-size: 1.15rem; }
.feature__body { margin: 0; color: var(--ga-body); }

/* CTA cards (Voice / Portal resources, Contact aside) */
.cta-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.cta-card {
	display: flex;
	flex-direction: column;
	background: var(--ga-white);
	border: 1px solid var(--ga-border);
	border-radius: var(--radius-card);
	padding: 28px 24px;
	box-shadow: var(--shadow-card);
}
.cta-card__title { margin: 0 0 0.5rem; font-size: 1.2rem; color: var(--ga-ink); }
.cta-card__body { margin: 0 0 1.25rem; color: var(--ga-body); flex: 1 1 auto; }
.cta-card .btn { align-self: flex-start; }
.cta-card__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Testimonial */
.testimonial { text-align: center; }
.testimonial__quote {
	margin: 0 auto 1rem;
	max-width: 820px;
	font-size: clamp(1.25rem, 2.5vw, 1.6rem);
	line-height: 1.5;
	font-weight: 500;
	color: var(--ga-ink);
}
.testimonial__cite { font-style: normal; font-weight: 600; color: var(--ga-muted); }

/* Status banner (Outages) */
.status-banner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	max-width: 560px;
	margin: 0 auto 24px;
	padding: 20px 24px;
	background: #e8f7ee;
	border: 1px solid #bfe6cd;
	border-radius: var(--radius-card);
	color: #16633a;
	font-size: 1.15rem;
	font-weight: 600;
}
.status-dot {
	flex: none;
	width: 14px; height: 14px;
	border-radius: 50%;
	background: #1f9d57;
	box-shadow: 0 0 0 4px rgba(31, 157, 87, 0.2);
}

/* Contact layout */
.contact-grid { display: grid; gap: 32px; }
.contact-grid__main p { color: var(--ga-body); }
.contact-grid__aside { display: grid; gap: 20px; align-content: start; }
.contact-methods { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.contact-methods li { display: flex; flex-direction: column; margin-bottom: 1rem; }
.contact-methods__label {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ga-muted);
}
.contact-methods a { font-size: 1.15rem; font-weight: 600; }

@media (min-width: 880px) {
	.contact-grid { grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: start; }
}

/* ---------------------------------------------------------------------------
   Lead form (contact page)
   Mobile-first: single column; two columns at >=600px. Posts to the
   globalaccess/v1/lead REST proxy — see inc/lead-form.php + assets/lead-form.js.
   --------------------------------------------------------------------------- */
.lead-form {
	margin-top: 2rem;
	padding: 28px 24px;
	background: var(--ga-white);
	border: 1px solid var(--ga-border);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
}

.lead-form__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}

.lead-form__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.lead-form__field--full { grid-column: 1 / -1; }

.lead-form label {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--ga-ink);
}

.lead-form__req { color: #d00; }

.lead-form input[type="text"],
.lead-form input[type="email"],
.lead-form input[type="tel"],
.lead-form select,
.lead-form textarea {
	width: 100%;
	padding: 11px 13px;
	font: inherit;
	color: var(--ga-ink);
	background: var(--ga-white);
	border: 1px solid var(--ga-border);
	border-radius: var(--radius);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.lead-form textarea { resize: vertical; min-height: 120px; }

.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus {
	border-color: var(--ga-blue-deep);
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.18);
}

.lead-form__submit { width: 100%; margin-top: 22px; }

.lead-form__fineprint {
	margin: 12px 0 0;
	font-size: 0.85rem;
	color: var(--ga-muted);
	text-align: center;
}

.lead-form__error {
	margin: 0 0 16px;
	padding: 12px 14px;
	font-size: 0.9rem;
	color: #8a1c1c;
	background: #fdecec;
	border: 1px solid #f5c2c2;
	border-radius: var(--radius);
}

.lead-form__error:empty { display: none; }

.lead-form__success {
	margin-top: 2rem;
	padding: 40px 28px;
	text-align: center;
	background: var(--ga-bg-alt);
	border: 1px solid var(--ga-border);
	border-radius: var(--radius-card);
}

.lead-form__success h3 { margin: 0 0 0.5rem; color: var(--ga-blue-deep); }
.lead-form__success p { margin: 0; font-size: 1.125rem; color: var(--ga-body); }

/* Honeypot — kept in the DOM for bots, removed from sight + a11y tree + tab order. */
.lead-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (min-width: 600px) {
	.lead-form { padding: 32px 28px; }
	.lead-form__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}