/* ============================================================
   Mind-Body Functional Health — shared brand tokens
   ============================================================

   Design Audit Phase 1. Before this file, every page carried its own
   copy of the palette: account-info.html, order-history.html and
   create-new-password.html each defined --brand-dark and --brand-accent
   independently (byte-identical, three times over), and the remaining
   pages hardcoded hex values inline. Across the site that produced 137
   distinct hex declarations against a five-value palette.

   PHASE 1 IS DELIBERATELY PIXEL-NEUTRAL. Every value here is the value
   those pages already used, so adopting it changes nothing on screen.
   Consolidating first, converging second, means any later colour change
   shows up as its own reviewable diff rather than hiding inside a
   refactor.

   NOT YET ADOPTED BY:
   - index.html — carries the palette in an inline tailwind.config with
     257 brand-* utility usages. Moving it is Phase 2 and needs care.
   - understanding-metabolism.html — mid-rework; it uses a --ink of
     #1f2e35 where the course uses #2c3e50 for body text. Which of those
     two becomes the site-wide ink is Jaime's call, and is the one
     decision Phase 1 deliberately does not preempt.
   ============================================================ */

/* PHASE 3 — MATCH THE MAIN SITE (2026-10-09). The palette and type now
   follow mindbodyfunctionalhealth.com, the same values the Foundations of
   Health presenter was built on: spruce teal, brass gold, Gloock over
   Figtree. The old names stay so every page that reads them keeps working;
   only the values moved. Pages load Gloock and Figtree from Google Fonts. */
:root {
    --brand-dark: #1F4F5C;      /* teal — header, footer, headings, links */
    --brand-light: #EEF2F0;     /* page background */
    --brand-accent: #B9873A;    /* gold — buttons, small highlights */
    --brand-accent-hover: #A37630;
    --brand-text: #1B2A2D;      /* body copy */

    --mb-bg: #EEF2F0;
    --mb-card: #FFFFFF;
    --mb-ink: #1B2A2D;
    --mb-muted: #56676A;
    --mb-line: #D3DDDA;
    --mb-teal: #1F4F5C;
    --mb-teal-deep: #173C46;
    --mb-gold: #B9873A;
    --mb-gold-hover: #A37630;
    --mb-gold-ink: #1A150C;     /* text on gold */
    --mb-tint: #E2EBE8;         /* alternating sections */
    --mb-on-teal: #F2F6F4;
    --mb-on-teal-muted: #BFD2D3;

    --font-serif: "Gloock", Georgia, serif;
    --font-sans: "Figtree", "Segoe UI", system-ui, sans-serif;
}

/* ---------- shared components ----------
   Header bar: logo and wordmark only. The standalone pages never had a nav,
   so this adds none; .mb-site-nav styles the links on pages that have them. */
.mb-site-header {
    background: var(--mb-teal);
    color: var(--mb-on-teal);
    font-family: var(--font-sans);
}
.mb-site-header-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0.85rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.mb-site-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: #fff;
    text-decoration: none;
}
.mb-site-brand img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex: 0 0 auto;
}
.mb-site-brand b {
    display: block;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.2;
}
.mb-site-brand small {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: #fff;
    line-height: 1.3;
}
.mb-site-nav a,
.mb-site-nav button.mb-site-navlink {
    color: var(--mb-on-teal-muted);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.15s ease;
}
.mb-site-nav a:hover,
.mb-site-nav button.mb-site-navlink:hover {
    color: #fff;
}
.mb-site-header a:focus-visible,
.mb-site-header button:focus-visible {
    outline-color: var(--mb-gold);
}

.mb-eyebrow {
    font-family: var(--font-sans);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--mb-teal);
}

.mb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mb-gold);
    color: var(--mb-gold-ink);
    font-family: var(--font-sans);
    font-weight: 700;
    border: 0;
    border-radius: 6px;
    padding: 16px 26px;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.mb-btn:hover {
    background: var(--mb-gold-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -8px rgba(27, 42, 45, 0.45);
}

/* ============================================================
   ACCESSIBILITY BASELINE — TASK 4
   ============================================================
   The audit found no visible focus treatment anywhere on the site, which
   makes every interactive control unusable by keyboard. :focus-visible
   shows the ring for keyboard users without putting an outline around
   everything a mouse user clicks.
   ============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--brand-dark);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Paired with scripts/a11y.js, which injects the link. Off-screen until
   focused, then the first thing a keyboard user lands on. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10000;
    padding: 0.7rem 1.1rem;
    background: var(--brand-dark);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 6px 0;
}

.skip-link:focus {
    left: 0;
}

/* ============================================================
   TOUCH TARGETS — TASK 5
   ============================================================
   WCAG 2.5.5 asks for 44x44px. The compact controls across the app land
   around 30px: the pill toggles are 0.375rem padding on ~16px text, and
   42 buttons use py-1/py-1.5/py-2.

   Scoped to `pointer: coarse` so it only applies on touch devices - a
   mouse user keeps the denser layout, which is the right trade for a
   reading app with this many inline controls.
   ============================================================ */
@media (pointer: coarse) {
    button,
    a[role="button"],
    input[type="checkbox"],
    input[type="radio"],
    select {
        min-height: 44px;
    }

    /* Inline text actions sit inside sentences; forcing a 44px box there
       would break the line. Give them vertical padding instead so the tap
       area grows without changing the text flow. */
    button.c-link-accent,
    .btn-link {
        min-height: 0;
        padding-block: 0.5rem;
    }
}

/* Respect a reduced-motion preference. index.html uses animate-pulse on every
   AI loading state, which is exactly the kind of thing this setting is for. */
@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;
    }
}