/* cyb.css — Claim Your Benefits Design System
 * Version: 2.0
 * Phase: 02 — Vendor Assets & Design Tokens
 *
 * Layer order (lowest to highest priority):
 *   tokens -> base -> components -> utilities
 *
 * Rules: no external imports, no CDN links, no Sass syntax.
 * Rules: no vendor-prefixed properties without a specific need.
 */

/* Declare layer order before any rules */
@layer tokens, base, components, utilities;

/* ============================================================
 * @font-face — Inter Variable Font (self-hosted, Latin subset)
 * Source: /assets/fonts/inter/inter-variable.woff2
 * License: SIL OFL 1.1 — self-hosting permitted
 * font-display: swap — text visible immediately on slow connections
 *   (seniors on mobile with variable connections — swap is correct)
 * font-weight: 100 900 — activates variable axis across all weights
 * ============================================================ */
@font-face {
  font-family: 'Inter Variable';
  src: url('/assets/fonts/inter/inter-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
 * LAYER: tokens
 * Brand palette, typography scale, Bootstrap overrides
 * All values from CONTEXT.md — do not change hex values here
 * ============================================================ */
@layer tokens {

  :root {
    /* --- Brand Color Palette ---
     * Deep navy + warm amber-orange + neutral grays
     * Reference: Code for America / GetCalFresh pattern
     * All body text colors verified >= 4.5:1 contrast on white (#FFFFFF)
     */

    /* Primary brand */
    --cyb-navy:       #1B2A4A;  /* headings, nav, primary elements */
    --cyb-navy-dark:  #111D33;  /* hover states, footer background */

    /* CTA / accent */
    --cyb-accent:      #E8612C; /* buttons, highlights, warm amber-orange */
    --cyb-accent-dark: #C44E22; /* hover on CTAs */

    /* Neutral grays */
    --cyb-gray-50:  #F8F9FA;  /* page background */
    --cyb-gray-100: #F1F3F5;  /* section backgrounds */
    --cyb-gray-300: #CED4DA;  /* borders */
    --cyb-gray-600: #6C757D;  /* muted text — use sparingly, borderline 4.5:1 on white */
    --cyb-gray-700: #495057;  /* secondary body text */
    --cyb-gray-900: #212529;  /* primary body text */
    --cyb-white:    #FFFFFF;

    /* --- Typography Scale ---
     * Minimum 16px body for seniors/accessibility (WCAG 2.1 AA)
     * Line-height 1.6 for readability
     */
    --cyb-font-family-base: 'Inter Variable', system-ui, -apple-system, sans-serif;
    --cyb-font-size-base:   1rem;      /* 16px */
    --cyb-line-height-base: 1.6;

    --cyb-h1-size: 2.5rem;   /* 40px */
    --cyb-h2-size: 2rem;     /* 32px */
    --cyb-h3-size: 1.5rem;   /* 24px */
    --cyb-h4-size: 1.25rem;  /* 20px */

    /* --- Bootstrap Variable Overrides ---
     * These override Bootstrap's built-in --bs-* variables at :root.
     * Bootstrap components that consume these variables will
     * automatically use the CYB brand values.
     */
    --bs-primary:           var(--cyb-navy);
    --bs-primary-rgb:       27, 42, 74;   /* #1B2A4A as RGB for Bootstrap's rgba() usage */
    --bs-link-color:        var(--cyb-navy);
    --bs-link-hover-color:  var(--cyb-navy-dark);
    --bs-body-font-family:  var(--cyb-font-family-base);
    --bs-body-color:        var(--cyb-gray-900);
    --bs-body-bg:           var(--cyb-gray-50);
    --bs-body-font-size:    var(--cyb-font-size-base);
    --bs-body-line-height:  var(--cyb-line-height-base);

    /* Focus ring — visible 3px outline for WCAG 2.1 AA 2.4.7 */
    --bs-focus-ring-width:  3px;
    --bs-focus-ring-color:  rgba(27, 42, 74, 0.4);  /* cyb-navy at 40% opacity */
  }
}

/* ============================================================
 * LAYER: base
 * Body typography defaults; heading size overrides
 * ============================================================ */
@layer base {

  body {
    font-family: var(--cyb-font-family-base);
    font-size:   var(--cyb-font-size-base);
    line-height: var(--cyb-line-height-base);
    color:       var(--cyb-gray-900);
    background:  var(--cyb-gray-50);
  }

  h1 { font-size: var(--cyb-h1-size); font-weight: 700; color: var(--cyb-navy); }
  h2 { font-size: var(--cyb-h2-size); font-weight: 700; color: var(--cyb-navy); }
  h3 { font-size: var(--cyb-h3-size); font-weight: 600; color: var(--cyb-navy); }
  h4 { font-size: var(--cyb-h4-size); font-weight: 600; color: var(--cyb-navy); }

  /* Skip-to-content link — must be first focusable element on every page
   * Visually hidden until focused (WCAG 2.1 AA 2.4.1) */
  .skip-link {
    position:   absolute;
    top:        -3rem;
    left:       0;
    padding:    0.5rem 1rem;
    background: var(--cyb-navy);
    color:      var(--cyb-white);
    font-weight: 700;
    z-index:    9999;
    transition: top 0.15s ease;
  }
  .skip-link:focus {
    top: 0;
  }

  /* Anchor base override — use navy, not Bootstrap default blue */
  a {
    color: var(--cyb-navy);
  }
  a:hover {
    color: var(--cyb-navy-dark);
  }
}

/* Hero background must be outside @layer — unlayered styles (including the
 * inline critical CSS body{background:var(--cyb-gray-50)}) beat all @layer
 * rules regardless of specificity. Declaring .cyb-hero background here
 * ensures it wins over the body default. */
.cyb-hero { background: linear-gradient(135deg, var(--cyb-navy) 0%, var(--cyb-navy-dark) 100%); }

/* ============================================================
 * LAYER: components
 * Phase 3-9 component styles added here as phases complete.
 * Placeholder comment intentional — DO NOT remove this layer.
 * ============================================================ */
@layer components {
  /* Phase 3: header, footer, nav, sms-form styles */
  /* Phase 6: homepage hero, benefit cards */
  /* Phase 9: accessibility remediation overrides */

  /* ---- Hero section ---- */
  .cyb-hero {
    min-height: 60vh;
    display: flex;
    align-items: center;
    padding: 4rem 0;
  }
  @media (max-width: 768px) {
    .cyb-hero {
      min-height: 50vh;
    }
  }

  /* ---- How It Works section ---- */
  .cyb-how-it-works {
    background-color: var(--cyb-gray-50);
  }

  /* ---- Trust section ---- */
  .cyb-trust {
    background-color: var(--cyb-gray-100);
  }

  /* ---- Government disclaimer callout — used on about.html ---- */
  .cyb-gov-disclaimer {
    border-left: 4px solid var(--cyb-navy);
    background: var(--cyb-gray-100);
  }

  /* ---- Secondary CTA band ---- */
  .cyb-cta-band {
    background-color: var(--cyb-navy);
  }

  /* ---- Active nav state — cyb.js Nav sets aria-current="page" via pathname match ---- */
  [aria-current="page"] {
    font-weight: 700;
  }

  /* ---- Tap targets — PERF-08 (WCAG 2.5.5, 44px minimum) ---- */

  /* Nav links — Bootstrap default is 40px tall on mobile:
   *   padding-y: 0.5rem (8px) + line-height: 1.5 × 16px (24px) + 0.5rem (8px) = 40px
   * Override to 48px:
   *   padding-y: 0.75rem (12px) + line-height: 24px + 0.75rem (12px) = 48px
   * Applies to mobile nav (hamburger open state); desktop nav links are less critical */
  .navbar-nav .nav-link {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  /* Consent checkbox row — Bootstrap .form-check-input default is 1em × 1em (16px × 16px).
   * Entire .form-check row must be tappable at 44px minimum height.
   * .form-check-input enlarged to 1.5rem (24px) for easier tap on the checkbox itself.
   * intentional: checkbox top-aligns with first line of label text */
  .form-check {
    min-height: 2.75rem;
    display: flex;
    align-items: flex-start;
  }
  .form-check-input {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
  }
}

/* ============================================================
 * LAYER: utilities
 * Single-purpose overrides with highest cascade priority.
 * ============================================================ */
@layer utilities {
  /* =================================================================
   * Focus ring overrides — A11Y-06
   * Bootstrap 5.3 form-control:focus uses hardcoded rgba(13,110,253,.25)
   * at 25% opacity on white = 1.42:1 contrast — FAILS visible focus.
   * Bootstrap --bs-focus-ring-color does NOT affect form-control or
   * form-check-input; it only controls the .focus-ring utility class.
   * Override with solid navy ring: 14.22:1 contrast on white.
   * Using outline (not box-shadow alone) because outline is not clipped
   * by overflow:hidden containers; box-shadow can disappear on clipped inputs.
   * ================================================================= */

  /* Form inputs — override Bootstrap hardcoded blue box-shadow */
  .form-control:focus,
  .form-control:focus-visible,
  .form-check-input:focus,
  .form-check-input:focus-visible {
    border-color: var(--cyb-navy);
    outline: 3px solid var(--cyb-navy);
    outline-offset: 2px;
    box-shadow: none;
  }

  /* Buttons — Bootstrap .btn:focus-visible uses --bs-btn-focus-shadow-rgb.
   * Our CTA buttons use .btn without a .btn-* color class so
   * --bs-btn-focus-shadow-rgb is undefined and the ring does not render.
   * Explicit outline guarantees a visible ring on all buttons. */
  .btn:focus-visible {
    outline: 3px solid var(--cyb-navy);
    outline-offset: 2px;
    box-shadow: none;
  }

  /* Links — browser default focus is acceptable but override for brand
   * consistency and to guarantee the 3px minimum width on all pages. */
  a:focus-visible {
    outline: 3px solid var(--cyb-navy);
    outline-offset: 2px;
    border-radius: 2px;
  }
}