/* ============================================================
   /css/site.css
   Starter stylesheet. Ships with /inc/header.asp and /inc/footer.asp
   partials in the bundle. Deploy unchanged, then customize the
   brand tokens at the top to match the site's brand brief.
   Per-site component styles go below the "Per-site customizations"
   divider at the bottom of the file.
   ============================================================ */


/* ---------- Design tokens ----------------------------------- */
/* Override these per site. Values map to the brand brief:
   {BrandPrimaryColor}, {BrandTileColor}, {BrandBackgroundColor}. */

:root {
    --brand-primary:       #0b5cab;   /* {BrandPrimaryColor} */
    --brand-tile:          #c69214;   /* {BrandTileColor} */
    --brand-background:    #ffffff;   /* {BrandBackgroundColor} */

    /* Neutral palette — tune if the brand calls for it */
    --color-text:          #1a1a1a;
    --color-text-muted:    #5a5a5a;
    --color-surface:       #ffffff;
    --color-surface-alt:   #f6f7f9;
    --color-border:        #e4e6ea;
    --color-border-strong: #c9ccd1;
    --color-link:          var(--brand-primary);
    --color-link-hover:    var(--brand-tile);

    /* Feedback colors (used by alerts, validation, etc.) */
    --color-success:       #1f7a3f;
    --color-warning:       #8a6d00;
    --color-danger:        #b91c1c;

    /* Typography — system-font stack by default */
    --font-body:           system-ui, -apple-system, "Segoe UI", Roboto,
                           "Helvetica Neue", Arial, sans-serif;
    --font-heading:        var(--font-body);
    --font-mono:           ui-monospace, SFMono-Regular, Menlo, Consolas,
                           "Liberation Mono", monospace;
    --font-size-base:      1rem;
    --line-height-base:    1.6;
    --line-height-tight:   1.25;

    /* Spacing scale (1 unit = 4px) */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-24: 6rem;

    /* Layout */
    --container-max:       1200px;
    --container-pad:       var(--space-4);
    --container-pad-wide:  var(--space-6);
    --prose-max:           72ch;      /* readable width for long-form text */

    /* Chrome */
    --header-height:       4rem;
    --header-bg:           var(--color-surface);
    --header-border:       var(--color-border);
    --footer-bg:           var(--color-surface-alt);
    --footer-text:         var(--color-text-muted);

    /* Radius & shadow */
    --radius-sm:           3px;
    --radius-md:           6px;
    --radius-lg:           10px;
    --shadow-sm:           0 1px 2px rgba(0,0,0,0.04), 0 1px 1px rgba(0,0,0,0.03);
    --shadow-md:           0 2px 4px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04);

    /* Motion */
    --ease-out:            cubic-bezier(0.22, 1, 0.36, 1);
    --duration-fast:       150ms;
    --duration-base:       250ms;

    /* Focus */
    --focus-ring:          3px solid var(--brand-primary);
    --focus-offset:        2px;

    /* Breakpoints (for reference only; media queries use literals):
       sm: 480px, md: 640px, lg: 768px, xl: 960px, xxl: 1200px */
}


/* ---------- Reset & base ------------------------------------ */

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

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

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text);
    background: var(--brand-background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
    display: flex;
    flex-direction: column;   /* with main flex:1, pins footer to bottom */
}

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

svg { fill: currentColor; }

hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: var(--space-8) 0;
}

::selection {
    background: var(--brand-primary);
    color: #fff;
}


/* ---------- Typography -------------------------------------- */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    line-height: var(--line-height-tight);
    margin: 0 0 var(--space-4);
    font-weight: 700;
    letter-spacing: -0.01em;
}
h1 { font-size: clamp(1.75rem, 1.25rem + 2vw, 2.5rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.9375rem; text-transform: uppercase; letter-spacing: 0.05em; }

p { margin: 0 0 var(--space-4); }

.lede {
    font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
    color: var(--color-text-muted);
    max-width: 60ch;
    margin-bottom: var(--space-6);
}

small,
.text-small,
.small {                            /* .small alias — some templates use it */
    font-size: 0.875rem;
}

strong, b { font-weight: 600; }

blockquote {
    margin: 0 0 var(--space-4);
    padding: var(--space-2) var(--space-6);
    border-left: 3px solid var(--brand-primary);
    color: var(--color-text-muted);
    font-style: italic;
}

code, kbd, samp, pre {
    font-family: var(--font-mono);
    font-size: 0.9375em;
}
code {
    background: var(--color-surface-alt);
    padding: 0.125em 0.375em;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}
pre {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    overflow-x: auto;
    margin: 0 0 var(--space-4);
}
pre code { background: transparent; border: 0; padding: 0; }

address {
    font-style: normal;
    margin: 0 0 var(--space-4);
}


/* ---------- Links ------------------------------------------- */

a {
    color: var(--color-link);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--color-link-hover); }


/* ---------- Focus ring -------------------------------------- */

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


/* ---------- Forms ------------------------------------------- */

label {
    display: inline-block;
    font-weight: 600;
    margin-bottom: var(--space-1);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select,
textarea {
    display: block;
    width: 100%;
    font: inherit;
    color: inherit;
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    line-height: 1.4;
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(43, 93, 143, 0.15);
    outline: none;
}

textarea { min-height: 6rem; resize: vertical; }

button {
    font: inherit;
    color: inherit;
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
}


/* ---------- Tables ------------------------------------------ */

table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 var(--space-4);
}
th, td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
}
th {
    font-weight: 600;
    background: var(--color-surface-alt);
    border-bottom-color: var(--color-border-strong);
}


/* ---------- Skip link --------------------------------------- */
/* Required per web-standards.md — hidden until focused.
   Page templates must use <main id="main"> for this to work. */

.skip {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--brand-primary);
    color: #fff;
    text-decoration: none;
    border-radius: var(--radius-sm);
    transform: translateY(-200%);
    transition: transform var(--duration-fast) var(--ease-out);
    z-index: 1000;
}
.skip:focus { transform: translateY(0); }


/* ---------- Container --------------------------------------- */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
}
@media (min-width: 768px) {
    .container {
        padding-left: var(--container-pad-wide);
        padding-right: var(--container-pad-wide);
    }
}


/* ---------- Main -------------------------------------------- */

main {
    flex: 1 0 auto;          /* fill vertical space so footer pins to bottom */
    min-height: 60vh;
}


/* ---------- Buttons ----------------------------------------- */

.btn,
.btn-primary,
.btn-secondary {
    display: inline-block;
    padding: var(--space-3) var(--space-6);
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    line-height: 1.2;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.btn-primary {
    background: var(--brand-primary);
    color: #fff;
    border-color: var(--brand-primary);
}
.btn-primary:hover {
    background: var(--brand-tile);
    border-color: var(--brand-tile);
    color: #fff;
}

.btn-secondary {
    background: transparent;
    color: var(--brand-primary);
    border-color: var(--brand-primary);
}
.btn-secondary:hover {
    background: var(--brand-primary);
    color: #fff;
}

.btn {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border-strong);
}
.btn:hover {
    background: var(--color-surface-alt);
    border-color: var(--color-text-muted);
    color: var(--color-text);
}

/* Horizontal group that wraps cleanly on small screens */
.btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}


/* ============================================================
   Site header — hamburger nav (right-aligned on mobile)
   Matches markup in /inc/header.asp
   ============================================================ */

.site-header {
    background: var(--header-bg);
    border-bottom: 1px solid var(--header-border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--header-height);
    gap: var(--space-4);
    position: relative;       /* anchor for absolutely positioned mobile nav */
}

/* Brand: name + optional tagline stacked */
.site-brand {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.2;
    text-decoration: none;
    color: var(--color-text);
}
.site-brand:hover { color: var(--brand-primary); }

.site-name {
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: -0.01em;
}
.site-tagline {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    font-weight: 400;
}
/* Tagline collapses on very narrow screens to prevent brand wrap */
@media (max-width: 479px) {
    .site-tagline { display: none; }
}

/* Hamburger — mobile only. DOM order [brand][toggle][nav]
   means space-between gives: brand left, toggle right on mobile
   (nav is absolutely positioned) and brand left, nav right on
   desktop (toggle is display:none). */
.nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    padding: 0;
    transition: background var(--duration-fast) var(--ease-out);
}
.nav-toggle:hover { background: var(--color-surface-alt); }

.nav-toggle-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-text);
    transform-origin: center;
    transition: transform var(--duration-base) var(--ease-out),
                opacity var(--duration-base) var(--ease-out);
}

/* Morph bars into X when open */
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
    opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Primary nav — desktop defaults */
.site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}
.site-nav a {
    color: var(--color-text);
    text-decoration: none;
    padding: var(--space-2) 0;
    font-weight: 500;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] {
    color: var(--brand-primary);
}

/* Nav-variant button (the "Admin" link). Keeps button shape but
   tighter than .btn-primary so it sits well in the header row. */
.btn-nav {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.2;
    background: var(--brand-primary);
    color: #fff;
    border: 1px solid var(--brand-primary);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}
.btn-nav:hover {
    background: var(--brand-tile);
    border-color: var(--brand-tile);
    color: #fff;
}

/* Mobile: below 768px — nav collapses behind the hamburger */
@media (max-width: 767px) {
    .site-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--header-bg);
        border-bottom: 1px solid var(--header-border);
        box-shadow: var(--shadow-md);
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--duration-base) var(--ease-out);
    }
    .site-nav[data-open="true"] {
        max-height: 80vh;
    }
    /* Plain links become full-width rows */
    .site-nav a:not(.btn-nav) {
        padding: var(--space-4) var(--container-pad);
        border-top: 1px solid var(--color-border);
    }
    .site-nav a:not(.btn-nav):first-child { border-top: 0; }
    /* Button variant stays a button — padded pill, centered */
    .site-nav .btn-nav {
        margin: var(--space-3) var(--container-pad);
        text-align: center;
    }
}

/* Desktop: 768px and up — hamburger hidden, nav always visible */
@media (min-width: 768px) {
    .nav-toggle { display: none; }
}


/* ============================================================
   Site footer — 1 column on mobile, 3 columns on tablet+
   Matches markup in /inc/footer.asp (brand + 2 nav columns)
   ============================================================ */

.site-footer {
    background: var(--footer-bg);
    color: var(--footer-text);
    padding: var(--space-12) 0 var(--space-8);
    margin-top: var(--space-16);
    border-top: 1px solid var(--color-border);
    flex-shrink: 0;           /* pairs with body flex-column */
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
}
@media (min-width: 640px) {
    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr;
        align-items: start;
    }
}

.footer-brand { /* left column */ }

.footer-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 var(--space-2);
}

.footer-tagline {
    margin: 0 0 var(--space-3);
}

.footer-copyright {
    font-size: 0.875rem;
    margin: 0;
}

.footer-nav-title {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text);
    margin: 0 0 var(--space-3);
}

.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer-links li { margin-bottom: var(--space-2); }
.footer-links a {
    color: var(--footer-text);
    text-decoration: none;
}
.footer-links a:hover {
    color: var(--brand-primary);
    text-decoration: underline;
}


/* ============================================================
   Page layouts
   --------------------------------------------------------------
   Every page template sets <main class="page page-*">. The .page
   class gives the main element the same horizontal constraints
   as .container, so page sections don't need to repeat .container
   everywhere. Templates may still wrap individual sections in
   .container for explicit control.
   ============================================================ */

.page {
    width: 100%;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
}
@media (min-width: 768px) {
    .page {
        padding-left: var(--container-pad-wide);
        padding-right: var(--container-pad-wide);
    }
}

/* Legal pages get a narrower measure for readability — long-form
   text is unreadable at 1200px. */
.page-legal {
    max-width: var(--prose-max);
}

.legal-stamp {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    font-style: italic;
    margin-bottom: var(--space-6);
}


/* ============================================================
   Hero — used on index.asp, about.asp, contact.asp starters
   ============================================================ */

.hero {
    padding: var(--space-12) 0 var(--space-8);
}
@media (min-width: 768px) {
    .hero {
        padding: var(--space-16) 0 var(--space-12);
    }
}


/* ============================================================
   Cards — used on the starter index.asp
   ============================================================ */

.cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-12);
}
@media (min-width: 640px) {
    .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
    .cards { grid-template-columns: repeat(3, 1fr); }
}

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    transition: border-color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}
.card:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.card h2 {
    font-size: 1.125rem;
    margin-bottom: var(--space-2);
    color: var(--color-text);
}
.card p:last-child { margin-bottom: 0; }


/* ============================================================
   Contact methods — used on the starter contact.asp
   ============================================================ */

.contact-methods {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    margin-bottom: var(--space-8);
    list-style: none;
    padding: 0;
}
@media (min-width: 768px) {
    .contact-methods { grid-template-columns: repeat(3, 1fr); }
}

.contact-method h2 {
    font-size: 1.125rem;
    margin-bottom: var(--space-2);
}
.contact-method p:last-child { margin-bottom: 0; }


/* ============================================================
   Utilities
   ============================================================ */

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


/* ============================================================
   Reduced motion — disable animations for users who prefer it
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ============================================================
   Print
   ============================================================ */

@media print {
    .site-header,
    .site-footer,
    .nav-toggle,
    .skip,
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-nav { display: none !important; }

    body { color: #000; background: #fff; }
    a { color: #000; text-decoration: underline; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
    main { min-height: 0; }
}


/* ============================================================
   Per-site customizations
   --------------------------------------------------------------
   Page-specific layouts, component styles, and any overrides go
   below this line. Change the tokens at the top of the file for
   brand-level adjustments — do not duplicate rules here.
   ============================================================ */

/* (site-specific rules go here) */