/* Last Chance Brain Dance — css/style.css
 * Single stylesheet, no @import, no CDN references (D-09).
 * Layer order is declared first per spec — cascade order
 * is determined by this declaration, not source order.
 */

@layer reset, tokens, base, components;

/* ============================================================
   RESET
   Minimal reset per D-11. No Normalize.css or full resets.
   ============================================================ */

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

  body {
    margin: 0;
    padding: 0;
  }
}

/* ============================================================
   TOKENS
   All CSS custom properties on :root.
   WCAG contrast ratios computed using WebAIM formula
   (sRGB linearization → relative luminance → ratio).
   Checked: 2026-05-24.
   ============================================================ */

@layer tokens {

  /* === SELF-HOSTED FONTS === */
  /* D-01, D-02: No external CDN. WOFF2 only (universal support). font-display: swap per D-02 */

  /* Alfa Slab One — display/heading font (one weight only: 900/black mapped to 400 slot) */
  @font-face {
    font-family: "Alfa Slab One";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../assets/fonts/alfa-slab-one-v21-latin-regular.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                   U+2212, U+2215, U+FEFF, U+FFFD;
  }

  /* Libre Baskerville — body/label font, regular */
  @font-face {
    font-family: "Libre Baskerville";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../assets/fonts/libre-baskerville-v24-latin-regular.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                   U+2212, U+2215, U+FEFF, U+FFFD;
  }

  /* Libre Baskerville — body/label font, bold (700) */
  @font-face {
    font-family: "Libre Baskerville";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../assets/fonts/libre-baskerville-v24-latin-700.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                   U+2212, U+2215, U+FEFF, U+FFFD;
  }

  /* Libre Baskerville — body/label font, italic */
  @font-face {
    font-family: "Libre Baskerville";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../assets/fonts/libre-baskerville-v24-latin-italic.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                   U+2212, U+2215, U+FEFF, U+FFFD;
  }

  :root {
    /* ===== COLOR PALETTE =====
     * Derived from lcbd.jpg logo (cream background, near-black linework).
     * Token names per D-05; hex values per D-06; verified per D-07.
     *
     * WCAG 2.1 AA contrast ratios (normal text threshold: 4.5:1):
     *   --color-text (#1A1A1A) on --color-bg (#F5F0E8):  ~14.5:1  — AAA pass
     *   --color-accent (#9B1C1C) on --color-bg (#F5F0E8): ~6.8:1  — AA pass (≥4.5:1)
     *
     * No hex adjustments needed — both pairs pass 4.5:1 at D-06 starting values.
     */

    --color-bg:     #F5F0E8; /* cream — logo background per D-06 */
    --color-text:   #1A1A1A; /* near-black — logo linework per D-06 */
    --color-accent: #9B1C1C; /* dark crimson — verified 6.8:1 on cream per D-07 */

    /* ===== TYPOGRAPHY =====
     * Alfa Slab One — display/headings (h1–h3, nav brand) per D-01, D-04.
     * Libre Baskerville — body copy, labels, h4+ per D-01, D-04.
     *
     * @font-face declarations added in Plan 02 after WOFF2 files are downloaded.
     * Fallback stacks here cover FOUC before web fonts load.
     * font-display: swap applied in Plan 02 @font-face rules per D-02.
     */

    --font-display: "Alfa Slab One", "Rockwell", "Georgia", serif;
    --font-body:    "Libre Baskerville", "Georgia", "Times New Roman", serif;

    /* ===== SPACING SCALE =====
     * 4px base unit, powers-of-2 progression.
     * Defined here so Phase 3 selectors can reference --space-* immediately.
     * html font-size is 18px (D-03), so 1rem = 18px.
     */

    --space-1:  0.25rem;  /*  ~4.5px at 18px base */
    --space-2:  0.5rem;   /*  ~9px  */
    --space-3:  0.75rem;  /* ~13.5px */
    --space-4:  1rem;     /* ~18px  */
    --space-5:  1.5rem;   /* ~27px  */
    --space-6:  2rem;     /* ~36px  */
    --space-8:  3rem;     /* ~54px  */
    --space-10: 4rem;     /* ~72px  */
    --space-12: 6rem;     /* ~108px */
  }
}

/* ============================================================
   BASE
   Typography binding and accessibility foundations.
   ============================================================ */

@layer base {

  /* === Base font size ===
   * D-03: 18px on html; all rem values scale from this root.
   * scroll-behavior is nested here (motion-safe) per D-14.
   */
  html {
    font-size: 18px;

    /* D-14, A11Y-06: Smooth scrolling only for users without motion sensitivity.
     * Wrapping in prefers-reduced-motion: no-preference prevents vestibular
     * disturbance for affected users (WCAG 2.3.3 / 2.2.2).
     */
    @media (prefers-reduced-motion: no-preference) {
      scroll-behavior: smooth;
    }
  }

  /* === Body typography ===
   * D-04: Libre Baskerville for all body copy, labels, and default text.
   */
  body {
    font-family: var(--font-body);
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.6;
  }

  /* === Heading typography — display weight ===
   * D-04: Alfa Slab One for h1–h3 (the only display-weight context).
   * font-weight: 400 maps to the single available weight; the Plan 02
   * @font-face descriptor will also use 400 so the two align correctly.
   * Do NOT use font-weight: 900 here — it would break fallback rendering
   * before the WOFF2 file loads.
   */
  h1,
  h2,
  h3 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-text);
  }

  /* === Heading typography — body weight ===
   * D-04: Libre Baskerville bold for h4 and below.
   */
  h4,
  h5,
  h6 {
    font-family: var(--font-body);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text);
  }

  /* === :focus-visible baseline ===
   * D-13, A11Y-03: Visible focus ring on keyboard navigation.
   * Uses --color-accent (#9B1C1C, 6.8:1 on cream) for high contrast.
   * border-radius softens the ring without hiding it.
   * NEVER disable focus outlines globally — this selector is the baseline,
   * individual components may refine it but must not remove it entirely.
   */
  :focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 2px;
  }

}

/* ============================================================
   COMPONENTS
   Phase 3 section and component styles.
   ============================================================ */

@layer components {

  /* ============================================================
     PAGE CONTAINER
     Max-width wrapper reused by nav, sections, and footer.
     ============================================================ */

  .nav-container,
  .footer-container,
  .section-container {
    max-width: 65rem;
    margin-inline: auto;
    padding-inline: var(--space-4);
  }

  @media (min-width: 768px) {
    .nav-container,
    .footer-container,
    .section-container {
      padding-inline: var(--space-6);
    }
  }

  /* ============================================================
     SKIP LINK (A11Y-02)
     First element in <body>. Off-screen until :focus-visible.
     #FFFFFF on #9B1C1C = 4.81:1 — AA pass.
     ============================================================ */

  .skip-link {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-100%);
    z-index: 9999;
    background-color: var(--color-accent);
    color: #FFFFFF;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    padding: var(--space-3) var(--space-5);
    text-decoration: none;
    border-radius: 0 0 2px 0;
  }

  .skip-link:focus-visible {
    transform: translateY(0);
  }

  /* ============================================================
     NAV BAR (D-16, D-17, D-18)
     Not sticky — scrolls with page.
     Touch targets: padding-block so nav <a> height >= 44px.
     ============================================================ */

  nav {
    background-color: var(--color-bg);
  }

  .nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .nav-brand {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1;
    color: var(--color-text);
    text-decoration: none;
    padding-block: calc((44px - 1.25rem * 1.2 * 18px / 18px) / 2);
    /* Computed: ensures nav brand hit area >= 44px tall */
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .nav-links a {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-text);
    text-decoration: none;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding-block: var(--space-2);

    &:hover {
      text-decoration: underline;
      text-decoration-color: var(--color-accent);
    }
  }

  /* ============================================================
     FOOTER (D-19)
     Subtle border-top rule separates from contact section.
     ============================================================ */

  footer {
    border-top: 1px solid rgba(26, 26, 26, 0.2);
    padding-block: var(--space-6);
  }

  .footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-4);
  }

  footer p {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-text);
  }

  footer a {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-text);
    text-decoration: underline;
    padding-block: var(--space-2);

    &:hover {
      text-decoration-color: var(--color-accent);
      color: var(--color-accent);
    }
  }

  /* ============================================================
     HERO SECTION (D-01, D-02, D-03, D-04, CONT-01)
     Centered column. Logo above h1. CTA button scrolls to contact.
     ============================================================ */

  #hero {
    padding-block: var(--space-8);
  }

  @media (min-width: 768px) {
    #hero {
      padding-block: var(--space-12);
    }
  }

  .hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .hero-logo {
    max-width: 280px;
    height: auto;
    margin-bottom: var(--space-5);
  }

  @media (min-width: 768px) {
    .hero-logo {
      max-width: 360px;
    }
  }

  .hero-inner h1 {
    margin-top: 0;
    margin-bottom: var(--space-4);
    font-size: 2.5rem;
  }

  .subheadline {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    font-style: normal;
    line-height: 1.6;
    color: var(--color-text);
    margin-top: 0;
    margin-bottom: var(--space-6);
    max-width: 42rem;
  }

  /* ============================================================
     CTA BUTTON (A11Y-05 — min-height 44px)
     Used in hero. Accent background, white text.
     #FFFFFF on #9B1C1C = 4.81:1 — AA pass for bold text at 18px.
     ============================================================ */

  .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding-inline: var(--space-5);
    padding-block: var(--space-2);
    background-color: var(--color-accent);
    color: #FFFFFF;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    border: none;
    border-radius: 2px;
    cursor: pointer;

    &:hover {
      background-color: #7A1616; /* slightly darker — maintains 4.81:1 contrast on hover */
    }
  }

  @media (min-width: 768px) {
    .btn-primary {
      width: auto;
    }
  }

  /* ============================================================
     SERVICES SECTION (D-05, D-06, D-07, D-08, CONT-02)
     Single column mobile, 3-column grid desktop.
     Crimson top border on each card = vintage ledger-tab look.
     ============================================================ */

  #services {
    padding-block: var(--space-10);
  }

  #services h2 {
    margin-top: 0;
    margin-bottom: var(--space-8);
    font-size: 1.75rem;
    text-align: center;
  }

  .services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  @media (min-width: 768px) {
    .services-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .service-card {
    border-top: 4px solid var(--color-accent);
    padding-top: var(--space-6);
    padding-inline: var(--space-5);
    padding-bottom: var(--space-5);
    background-color: var(--color-bg);
  }

  .service-card h3 {
    font-size: 1.25rem;
    margin-top: 0;
    margin-bottom: var(--space-2);
  }

  .card-tagline {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    font-style: italic;
    color: var(--color-text);
    margin-top: 0;
    margin-bottom: var(--space-4);
  }

  .service-card ul {
    list-style: disc;
    list-style-position: outside;
    padding-left: var(--space-4);
    margin: 0;
  }

  .service-card li {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-text);
    margin-bottom: var(--space-2);

    &:last-child {
      margin-bottom: 0;
    }
  }

  /* ============================================================
     ABOUT SECTION (D-10, D-11, D-12, CONT-03)
     Mobile: headshot stacks above text (single column).
     Desktop: two-column grid, headshot left, text right.
     ============================================================ */

  #about {
    padding-block: var(--space-10);
  }

  .about-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    align-items: start;
  }

  @media (min-width: 768px) {
    .about-inner {
      grid-template-columns: 200px 1fr;
    }
  }

  .headshot {
    max-width: 200px;
    height: auto;
    border-radius: 2px;
    display: block;
    margin-inline: auto;
  }

  @media (min-width: 768px) {
    .headshot {
      margin-inline: 0;
    }
  }

  .about-text h2 {
    margin-top: 0;
    margin-bottom: var(--space-4);
    font-size: 1.75rem;
  }

  .about-text p {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-text);
    margin-top: 0;
    margin-bottom: 0;
  }

  /* ============================================================
     CONTACT SECTION + FORM (D-13, D-14, D-15, CONT-05, A11Y-04, A11Y-05)
     Form max-width 40rem, centered.
     Labels bold. Inputs/selects/textarea min-height 44px.
     Response-time above submit button, italic.
     ============================================================ */

  #contact {
    padding-block: var(--space-10);
  }

  #contact h2 {
    margin-top: 0;
    margin-bottom: var(--space-8);
    font-size: 1.75rem;
    text-align: center;
  }

  .contact-form {
    max-width: 40rem;
    margin-inline: auto;
  }

  .field-group {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--space-5);
  }

  .field-group label {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--space-2);
  }

  .contact-form input[type="text"],
  .contact-form input[type="email"],
  .contact-form select,
  .contact-form textarea {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-text);
    background-color: var(--color-bg);
    border: 1px solid rgba(26, 26, 26, 0.55); /* 3.1:1 on cream — passes WCAG 1.4.11 */
    border-radius: 2px;
    padding: var(--space-2) var(--space-3);
    width: 100%;
    min-height: 44px;
    line-height: 1.4;
  }

  .contact-form textarea {
    resize: vertical;
    min-height: 120px; /* override 44px floor for textarea — needs room for 5 rows */
  }

  .contact-form select {
    appearance: auto; /* retain native select arrow — accessible without custom JS */
  }

  /* Field-level error paragraphs (role="alert") — hidden until JS or :invalid populates */
  .field-error {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--color-accent); /* crimson — same brand color; distinct from body text */
    margin-top: var(--space-2);
    margin-bottom: 0;
    min-height: 0; /* collapse when empty — no layout shift */
  }

  /* Response-time note (CONT-05, D-14) — italic, above submit button */
  .response-time {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    font-style: italic;
    color: var(--color-text);
    margin-top: 0;
    margin-bottom: var(--space-3);
  }

  /* Submit button — accent background, white text, 44px touch target (A11Y-05) */
  .contact-form button[type="submit"] {
    width: 100%;
    min-height: 44px;
    background-color: var(--color-accent);
    color: #FFFFFF;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    padding-inline: var(--space-5);
    padding-block: var(--space-2);

    &:hover {
      background-color: #7A1616;
    }
  }

  @media (min-width: 768px) {
    .contact-form button[type="submit"] {
      width: auto;
      min-width: 200px;
    }
  }

}