/*
 * Shared site chrome for the public pages (issue #47).
 *
 * This file is additive and deliberately narrow. It carries three things every
 * public page needs and none of them had before:
 *
 *   1. The approved Rare Air color system as custom properties, so a page can
 *      opt into the palette instead of re-deriving it. Source of truth:
 *      WEBSITE_RECOMMENDATIONS.md, "Color system".
 *   2. A skip link and a visible :focus-visible ring, so the site is usable
 *      from a keyboard.
 *   3. The shared footer that carries business identity, contact, and the
 *      privacy link.
 *
 * Page-specific stylesheets are loaded after this one and keep winning, so
 * nothing here changes an existing page's visual design.
 */

:root {
    /* Approved color system. */
    --rad-midnight-navy: #0b1020; /* main background and header */
    --rad-deep-slate: #17213a; /* cards and section separation */
    --rad-clear-sky: #63c7cf; /* primary accent, links, highlights */
    --rad-summit-blue: #8097f2; /* secondary accent */
    --rad-warm-cloud: #f4f1e8; /* headlines and light backgrounds */
    --rad-mist-gray: #b8c2d9; /* secondary text */

    /* Focus ring. Sized so it stays visible over both the navy chrome and the
       lighter painted scenes on the /v* gallery pages. */
    --rad-focus-ring: #ffd166;
}

/* ---------------------------------------------------------------- skip link */

/* The :link/:visited selectors are not decoration — they raise specificity above
   the page stylesheets' generic `a { color: ... }` rules, which otherwise repaint
   the skip link accent-on-cream and destroy its contrast. */
.skip-link,
.skip-link:link,
.skip-link:visited {
    position: absolute;
    left: 8px;
    top: 8px;
    z-index: 1000;
    padding: 10px 16px;
    border-radius: 8px;
    background: var(--rad-warm-cloud);
    color: #0b1020;
    font: 600 14px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    text-decoration: none;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
    transform: translateY(-160%);
    transition: transform 0.14s ease-out;
}

.skip-link:focus,
.skip-link:focus-visible {
    transform: translateY(0);
    outline: 3px solid var(--rad-focus-ring);
    outline-offset: 2px;
}

/* ------------------------------------------------------------ focus visible */

/* A single visible indicator for every interactive element. :focus-visible
   means pointer users never see it; keyboard users always do. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--rad-focus-ring);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Some variant stylesheets set `outline: none` on focused form fields, which
   removes the only focus indicator those pages had. Restore it. */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid var(--rad-focus-ring) !important;
    outline-offset: 2px;
}

/* --------------------------------------------------------- primary navigation */

.site-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid #26324f;
    background: rgba(11, 16, 32, 0.94);
    backdrop-filter: blur(8px);
    font: 14px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.site-nav-inner {
    max-width: 1080px;
    min-height: 62px;
    margin: 0 auto;
    padding: 10px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.site-nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #eef2fb;
    font-weight: 800;
    text-decoration: none;
}

.site-nav-brand:hover { text-decoration: none; }

.site-nav-logo {
    display: block;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    filter: drop-shadow(0 0 9px rgba(99, 199, 207, 0.28));
}

.site-nav nav {
    display: flex;
    align-items: center;
    gap: 20px;
}

.site-nav-link {
    padding: 9px 0;
    color: var(--rad-mist-gray);
    text-decoration: none;
}

.site-nav-link:hover { color: #eef2fb; text-decoration: none; }

.site-nav-cta {
    display: inline-block;
    padding: 11px 20px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--rad-clear-sky), var(--rad-summit-blue));
    color: #06121a;
    font-weight: 700;
    text-decoration: none;
}

.site-nav-cta:hover { text-decoration: none; }

@media (max-width: 640px) {
    .site-nav-inner { align-items: flex-start; flex-direction: column; gap: 6px; }
    .site-nav nav { width: 100%; flex-wrap: wrap; gap: 8px 16px; }
    .site-nav-cta { padding: 9px 14px; }
}

/* --------------------------------------------------------------- site footer */

.site-footer {
    position: relative;
    z-index: 2;
    border-top: 1px solid rgba(184, 194, 217, 0.22);
    background: var(--rad-midnight-navy);
    color: var(--rad-mist-gray);
    font: 14px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    padding: 30px 0 38px;
}

.site-footer .site-footer-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 22px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    align-items: start;
}

/* Scoped through .site-footer-inner so a page stylesheet's generic `h2` rule
   cannot win on specificity and blow these column headings up to display size. */
.site-footer .site-footer-inner h2 {
    margin: 0 0 6px;
    font-size: 13px;
    line-height: 1.3;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rad-warm-cloud);
    font-weight: 700;
}

.site-footer-brand {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.site-footer-logo {
    display: block;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
}

.site-footer p,
.site-footer ul {
    margin: 0 0 6px;
}

.site-footer ul {
    list-style: none;
    padding: 0;
}

.site-footer li {
    margin: 0 0 4px;
}

.site-footer a {
    color: var(--rad-clear-sky);
    text-decoration: none;
}

.site-footer a:hover {
    text-decoration: underline;
}

.site-footer .site-footer-legal {
    max-width: 1080px;
    margin: 22px auto 0;
    padding: 16px 22px 0;
    border-top: 1px solid rgba(184, 194, 217, 0.16);
    color: #9aa6c2;
    font-size: 13px;
}

@media (max-width: 760px) {
    .site-footer .site-footer-inner {
        grid-template-columns: 1fr;
    }
}

/* The field notes and the design gallery run a warm paper-and-ink palette
   rather than the navy system, so the footer borrows their tokens there instead
   of stamping a navy slab onto a cream page (issue #47). The site running two
   design systems is a real open question for Bob — see
   wiki/design-qa-accessibility-pass.md — but this at least keeps each page
   internally coherent.

   Text uses --ink rather than --muted on purpose: --muted on --paper-deep is
   4.02:1 in day mode, which fails WCAG AA. */
.writing-page .site-footer {
    background: var(--paper-deep);
    color: var(--ink);
    border-top-color: var(--line);
}

.writing-page .site-footer .site-footer-inner h2 {
    color: var(--ink);
}

.writing-page .site-footer a {
    color: var(--button);
}

.writing-page .site-footer .site-footer-legal {
    color: var(--ink);
    border-top-color: var(--line);
}

/* ------------------------------------------------------------- form privacy */

/* The disclosure that sits directly under any form that collects a name and a
   way to reach someone. Kept small but never hidden. */
.form-privacy {
    margin: 10px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--rad-mist-gray);
}

.form-privacy a {
    color: inherit;
    text-decoration: underline;
}

/* ----------------------------------------------------------- reduced motion */

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

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}