/* ==========================================================================
   contact-v2.css — contact.php + privacy.php
   --------------------------------------------------------------------------
   RENAMED FROM contact.css, 2026-07-15. Identical content — the ONLY reason
   for the new filename is to defeat a stale cache. The white-hero version of
   contact.css was verified live on the server, but the browser (and likely a
   LiteSpeed cache on the host) kept serving the old navy copy, and no refresh
   or ?v= stamp shifted it. A brand-new URL is the one thing no cache can have
   already stored, so it forces a clean fetch.

   (This file was also rebuilt via the file tools after a `cp` through the
   workspace mount produced a TRUNCATED copy — it lost everything after
   .c-alert. If you ever duplicate a stylesheet, verify the tail is intact.)

   Referenced by $page_styles = ['contact-v2'] in contact.php and privacy.php.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------------
   WHITE HERO. Every colour flipped with the background: on navy the title was
   white and the eyebrow/lede brass; on white the title is --color-brand
   (navy), the lede is --color-text-muted, and the eyebrow/seal fall back to
   base.css's garnet default (the explicit brass override was removed, not
   recoloured — base.css only flips it to brass under .on-dark, and this hero
   is not .on-dark). A hairline bottom border keeps the white hero from
   dissolving into the white routing cards below.
   -------------------------------------------------------------------------- */
.c-hero {
    padding: var(--space-16) var(--container-padding-x) var(--space-14);
    text-align: center;
    background: var(--color-bg-raised);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
}

.c-hero .eyebrow {
    justify-content: center;
}

.c-hero__title {
    margin: var(--space-4) 0 0;
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: clamp(32px, 5vw, 52px);
    letter-spacing: var(--tracking-tight);
    color: var(--color-brand);
}

.c-hero__lede {
    max-width: 52ch;
    margin: var(--space-4) auto 0;
    font-size: clamp(15px, 2vw, 18px);
    line-height: var(--leading-normal);
    color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Routing cards
   --------------------------------------------------------------------------
   A <ul>, not three divs. Three parallel ways to make contact IS a list, and
   a screen reader announcing "list, 3 items" is doing real work here.

   margin-top WAS -44px: the cards overlapped up into the navy hero, white
   panels lifting off a dark field for depth. With the hero now white, white
   cards over a white background just smudge the border line. Positive gap
   instead — clean separation below the hero's hairline border.
   -------------------------------------------------------------------------- */
.c-routes {
    position: relative;
    z-index: var(--z-timeline-marker);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    margin: var(--space-10) 0 0;
    padding: 0 0 var(--space-2);
    list-style: none;
}

.c-route {
    padding: var(--space-7) var(--space-6);
    background: var(--color-bg-raised);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-action);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card-hover-sm);
    transition:
        transform var(--duration-base) var(--ease),
        box-shadow var(--duration-base) var(--ease);
}

.c-route:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-card-hover);
}

.c-route__k {
    margin: 0;
    font-size: 11px;
    font-weight: var(--weight-black);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-action);
}

.c-route h2 {
    margin: var(--space-2) 0;
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: var(--text-xl);
    color: var(--color-brand);
}

.c-route__d {
    margin: 0 0 var(--space-4);
    font-size: var(--text-base);
    line-height: var(--leading-snug);
    color: var(--color-text-body);
}

.c-route__mail {
    display: block;
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    color: var(--color-action);
    text-decoration: none;
    word-break: break-all;
}

.c-route__mail:hover,
.c-route__mail:focus {
    text-decoration: underline;
}

.c-route__page {
    display: inline-block;
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-brand);
    text-decoration: none;
    border-bottom: 1px solid var(--color-accent);
}

.c-route__page:hover,
.c-route__page:focus {
    border-bottom-color: var(--color-action);
    color: var(--color-action);
}

/* --------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------- */
.c-form-wrap {
    padding-top: var(--space-14);
}

.c-form-head {
    max-width: 36ch;
    margin: 0 auto var(--space-9);
    text-align: center;
}

.c-form-head p {
    margin: var(--space-3) 0 0;
    font-size: var(--text-lg);
    color: var(--color-text-muted);
}

.c-form {
    max-width: 680px;
    margin: 0 auto;
}

.c-row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
}

.c-field {
    margin-bottom: var(--space-5);
}

.c-field label {
    display: block;
    margin-bottom: 7px;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--color-brand);
}

/* Scoped to .c-field / .c-form — deliberately NOT bare `input, select,
   textarea`. A bare element selector would reach the header's language
   <select> and any future form. */
.c-field input,
.c-field select,
.c-field textarea {
    width: 100%;
    padding: 13px 15px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-raised);
    font-family: var(--font-body);
    font-size: var(--text-lg);
    color: var(--color-text);
    transition:
        border-color var(--duration-fast) var(--ease),
        box-shadow var(--duration-fast) var(--ease);
}

.c-field input:focus,
.c-field select:focus,
.c-field textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(176, 141, 79, 0.16);
}

/* Server-side validation failure. aria-invalid is set by the PHP, so the
   styling and the accessibility tree can't disagree — one attribute drives
   both. */
.c-field input[aria-invalid="true"],
.c-field textarea[aria-invalid="true"] {
    border-color: var(--color-action);
    background: rgba(154, 39, 51, 0.03);
}

.c-field textarea {
    min-height: 150px;
    resize: vertical;
}

/* Honeypot. Off-canvas rather than display:none — some bots skip hidden
   fields, which defeats the point. */
.c-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Alerts
   -------------------------------------------------------------------------- */
.c-alert {
    max-width: 680px;
    margin: 0 auto var(--space-6);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-sm);
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
}

.c-alert:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.c-alert--ok {
    background: #eef6ee;
    border-left: 3px solid #2f7d3a;
    color: #1f5a2a;
}

.c-alert--err {
    background: #fbeeee;
    border-left: 3px solid var(--color-action);
    color: #6a1924;
}

.c-alert__t {
    margin: 0 0 var(--space-2);
    font-weight: var(--weight-bold);
}

.c-alert ul {
    margin: 0;
    padding-left: var(--space-5);
}

.c-alert a {
    color: inherit;
}

/* --------------------------------------------------------------------------
   Prose document — privacy.php
   --------------------------------------------------------------------------
   privacy.php sets $page_styles = ['contact-v2'] and reuses the hero from this
   file rather than carrying its own stylesheet for a handful of rules.
   -------------------------------------------------------------------------- */
.pr-doc {
    max-width: 72ch;
    margin: 0 auto;
}

.pr-updated {
    margin: 0 0 var(--space-8);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-black);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.pr-doc h2 {
    margin: var(--space-9) 0 var(--space-3);
    font-size: var(--text-xl);
    color: var(--color-brand);
}

.pr-doc h2:first-of-type {
    margin-top: 0;
}

.pr-doc p {
    margin: 0 0 var(--space-4);
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--color-text-body);
}

.pr-doc a {
    color: var(--color-action);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.pr-doc a:hover,
.pr-doc a:focus {
    border-bottom-color: var(--color-action);
}

.pr-doc code {
    padding: 2px 6px;
    background: var(--grey-100);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xs);
    font-size: 0.9em;
}

.pr-list {
    margin: 0 0 var(--space-5);
    padding: 0;
    list-style: none;
}

.pr-list li {
    position: relative;
    padding: 9px 0 9px var(--space-6);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    color: var(--color-text);
}

.pr-list li:last-child {
    border-bottom: none;
}

.pr-list li::before {
    content: "\00A7";
    position: absolute;
    left: 0;
    top: 9px;
    font-family: var(--font-display);
    font-size: 14px;
    color: var(--color-accent);
}

.pr-list strong {
    color: var(--color-brand);
}


/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
    .c-routes {
        grid-template-columns: 1fr;
        margin-top: var(--space-8);
    }

    .c-row2 {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .c-route,
    .c-route:hover {
        transition: none;
        transform: none;
    }
}