/* ============================================================
   Task #1519713: Visual QA Batch C — About, Contact, Privacy,
   Terms, Quiz, No-Proof-Required (375px + 1440px)

   SCOPE: CSS-only fixes for issues found during visual audit.

   Fixes:
   1. Privacy/Terms: policy-hero vertical padding (desktop + mobile)
   2. Privacy/Terms: policy-toc sidebar layout (2-col at 1024px+)
   3. Privacy/Terms: policy-toc-card/list unstyled → styled
   4. Privacy/Terms: policy-toc-mobile visibility (hide desktop/show mobile)
   5. No-Proof-Required: np-card-file-btn touch target < 44px
   6. No-Proof-Required: np-email-btn touch target < 44px
   7. No-Proof-Required: np-hero top padding at 375px (clears fixed nav)
   8. Quiz: qw-page max-width centering at 1440px
   9. About: ab4-inner max-width overflow-x guard at 375px
   10. Contact: co-hero min-height for visual weight at 1440px
   ============================================================ */


/* ── 1. PRIVACY / TERMS: policy-hero vertical padding ──────────
   The design-system only sets left/right padding on .policy-hero.
   Zero top/bottom padding means hero content is cramped.
   Add breathing room that works with body padding-top (nav offset).
   ────────────────────────────────────────────────────────────── */

.policy-hero {
  padding-top: clamp(3rem, 7vw, 5rem) !important;
  padding-bottom: clamp(2.5rem, 5vw, 4rem) !important;
  text-align: center !important;
}

.policy-hero h1 {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif !important;
  font-size: clamp(1.9rem, 4.5vw, 2.8rem) !important;
  font-weight: 900 !important;
  color: #0A0A0A !important;
  -webkit-text-fill-color: #0A0A0A !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  margin: 0.75rem 0 1rem !important;
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.policy-hero-badge {
  display: inline-flex !important;
  align-items: center !important;
  background: rgba(0, 135, 90, 0.08) !important;
  border: 1.5px solid rgba(0, 135, 90, 0.25) !important;
  border-radius: 999px !important;
  color: #00643E !important;
  -webkit-text-fill-color: #00643E !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 0.35rem 1rem !important;
  margin-bottom: 0.5rem !important;
}

.policy-hero-sub {
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: clamp(0.95rem, 2vw, 1.1rem) !important;
  color: #4B5563 !important;
  -webkit-text-fill-color: #4B5563 !important;
  line-height: 1.6 !important;
  max-width: 600px !important;
  margin: 0 auto !important;
}

@media (max-width: 640px) {
  .policy-hero {
    padding-top: clamp(2.5rem, 8vw, 3.5rem) !important;
    padding-bottom: 2rem !important;
  }
}

@media (max-width: 420px) {
  .policy-hero {
    /* Extra top clearance for fixed mobile nav (56px) + announce bar (40px) */
    padding-top: calc(var(--header-height, 56px) + 1.5rem) !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}


/* ── 2. PRIVACY / TERMS: policy-layout sidebar grid ───────────
   Desktop (1024px+): 2-column grid — sticky sidebar TOC + main content.
   Mobile (<1024px): single column, sidebar hidden, mobile TOC shown.
   ────────────────────────────────────────────────────────────── */

@media (min-width: 1024px) {
  .policy-layout {
    display: grid !important;
    grid-template-columns: 240px 1fr !important;
    gap: 0 2.5rem !important;
    align-items: start !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 2.5rem 1.5rem 4rem !important;
  }
}

@media (max-width: 1023px) {
  .policy-layout {
    display: block !important;
    max-width: 760px !important;
    margin: 0 auto !important;
    padding: 1.5rem 1.25rem 3rem !important;
  }
  /* Hide desktop sidebar on mobile */
  .policy-toc {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .policy-layout {
    padding: 1.25rem 1rem 3rem !important;
  }
}


/* ── 3. PRIVACY / TERMS: policy-toc sidebar card styling ──────
   .policy-toc-card, .policy-toc-title, .policy-toc-list have
   no CSS — renders as an unstyled navigation block.
   ────────────────────────────────────────────────────────────── */

@media (min-width: 1024px) {
  .policy-toc {
    position: sticky !important;
    top: calc(var(--nav-height, 64px) + 1.5rem) !important;
    max-height: calc(100vh - var(--nav-height, 64px) - 3rem) !important;
    overflow-y: auto !important;
  }

  .policy-toc-card {
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 12px !important;
    padding: 1.25rem !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
  }

  .policy-toc-title {
    font-family: 'DM Sans', system-ui, sans-serif !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #6B7280 !important; /* WCAG AA: 4.6:1 on white (was #9CA3AF at 2.9:1) */
    -webkit-text-fill-color: #6B7280 !important; /* WCAG AA */
    margin-bottom: 0.75rem !important;
  }

  .policy-toc-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.1rem !important;
  }

  .policy-toc-list li a {
    display: block !important;
    font-family: 'DM Sans', system-ui, sans-serif !important;
    font-size: 0.82rem !important;
    color: #4B5563 !important;
    -webkit-text-fill-color: #4B5563 !important;
    text-decoration: none !important;
    padding: 0.3rem 0.5rem !important;
    border-radius: 6px !important;
    transition: background 0.15s, color 0.15s !important;
    line-height: 1.4 !important;
  }

  .policy-toc-list li a:hover {
    background: rgba(0, 135, 90, 0.08) !important;
    color: #00643E !important;
    -webkit-text-fill-color: #00643E !important;
  }

  .policy-toc-list li a.active {
    background: rgba(0, 135, 90, 0.1) !important;
    color: #00643E !important;
    -webkit-text-fill-color: #00643E !important;
    font-weight: 600 !important;
  }
}


/* ── 4. PRIVACY / TERMS: policy-toc-mobile visibility ─────────
   Mobile TOC accordion: hidden on desktop, visible on mobile.
   ────────────────────────────────────────────────────────────── */

@media (min-width: 1024px) {
  .policy-toc-mobile {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  .policy-toc-mobile {
    display: block !important;
    background: #F9FAFB !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 10px !important;
    margin-bottom: 1.5rem !important;
    overflow: hidden !important;
  }

  .policy-toc-mobile-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: 0.75rem 1.25rem !important;
    background: none !important;
    border: none !important;
    font-family: 'DM Sans', system-ui, sans-serif !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    color: #1F2A37 !important;
    -webkit-text-fill-color: #1F2A37 !important;
    cursor: pointer !important;
    text-align: left !important;
  }

  .policy-toc-mobile-body {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.25s ease !important;
  }

  .policy-toc-mobile.open .policy-toc-mobile-body {
    max-height: 600px !important;
    padding: 0 1.25rem 1rem !important;
  }

  .policy-toc-mobile .policy-toc-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .policy-toc-mobile .policy-toc-list li a {
    display: block !important;
    font-family: 'DM Sans', system-ui, sans-serif !important;
    font-size: 0.85rem !important;
    color: #4B5563 !important;
    -webkit-text-fill-color: #4B5563 !important;
    text-decoration: none !important;
    padding: 0.4rem 0 !important;
    border-bottom: 1px solid #F3F4F6 !important;
    line-height: 1.4 !important;
  }
}


/* ── 5. PRIVACY / TERMS: policy-content article styling ───────
   The article element has no CSS — should fill the grid column
   at desktop and have readable max-width at mobile.
   ────────────────────────────────────────────────────────────── */

.policy-content {
  min-width: 0 !important; /* Prevent grid blowout */
}

.policy-content h2 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: clamp(1.3rem, 3vw, 1.65rem) !important;
  font-weight: 800 !important;
  color: #0A0A0A !important;
  -webkit-text-fill-color: #0A0A0A !important;
  margin: 2rem 0 0.75rem !important;
  scroll-margin-top: calc(var(--nav-height, 64px) + 1rem) !important;
}

.policy-content h3 {
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: clamp(1rem, 2.5vw, 1.15rem) !important;
  font-weight: 700 !important;
  color: #1F2A37 !important;
  -webkit-text-fill-color: #1F2A37 !important;
  margin: 1.5rem 0 0.5rem !important;
}

.policy-content p {
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: 0.98rem !important;
  color: #374151 !important;
  -webkit-text-fill-color: #374151 !important;
  line-height: 1.75 !important;
  margin: 0 0 1rem !important;
}

.policy-content a {
  color: #00875A !important;
  -webkit-text-fill-color: #00875A !important;
  text-decoration: underline !important;
}

.policy-content ul,
.policy-content ol {
  padding-left: 1.5rem !important;
  margin: 0.5rem 0 1rem !important;
  color: #374151 !important;
}

.policy-content li {
  font-size: 0.98rem !important;
  line-height: 1.7 !important;
  margin-bottom: 0.35rem !important;
  color: #374151 !important;
  -webkit-text-fill-color: #374151 !important;
}

/* policy-meta / last-updated bar */
.policy-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem 1.5rem !important;
  background: #F9FAFB !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 8px !important;
  padding: 0.75rem 1rem !important;
  margin-bottom: 1.5rem !important;
}

.policy-meta-item {
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: 0.8rem !important;
  color: #6B7280 !important;
  -webkit-text-fill-color: #6B7280 !important;
}

/* policy-note callout box */
.policy-note {
  background: rgba(0, 135, 90, 0.06) !important;
  border-left: 3px solid #00875A !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 1rem 1.25rem !important;
  margin: 1rem 0 1.5rem !important;
}

.policy-note p {
  margin: 0 !important;
  font-size: 0.92rem !important;
  color: #065F46 !important;
  -webkit-text-fill-color: #065F46 !important;
}

/* policy-service-block (used for data services list) */
.policy-service-block {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.75rem !important;
  padding: 0.75rem 0 !important;
  border-bottom: 1px solid #F3F4F6 !important;
}

.policy-service-block:last-child {
  border-bottom: none !important;
}


/* ── 6. NO-PROOF-REQUIRED: np-card-file-btn touch target ──────
   Current: padding 0.5rem 1.1rem ≈ 30px height — under 44px.
   Fix: enforce min-height 44px.
   ────────────────────────────────────────────────────────────── */

.np-card-file-btn {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
}


/* ── 7. NO-PROOF-REQUIRED: np-email-btn touch target ──────────
   Current: padding 0.65rem 1.25rem ≈ 35px — under 44px.
   Fix: enforce min-height 44px.
   ────────────────────────────────────────────────────────────── */

.np-email-btn {
  min-height: 44px !important;
}


/* ── 8. NO-PROOF-REQUIRED: np-hero top padding at 375px ───────
   At 600px the hero drops to padding: 1.5rem top (24px).
   On 375px with a 56px fixed nav this feels squashed.
   Add extra top breathing room at very small viewports.
   ────────────────────────────────────────────────────────────── */

@media (max-width: 420px) {
  .np-hero {
    padding-top: 2.5rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .np-h1 {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
  }

  /* Hero intro text */
  .np-intro {
    font-size: 0.9rem !important;
    line-height: 1.65 !important;
  }
}


/* ── 9. QUIZ: qw-page horizontal overflow guard at 375px ──────
   The qw-viewport has max-width 640px with 1rem padding.
   At 375px this is fine, but extra guard for edge cases.
   ────────────────────────────────────────────────────────────── */

.qw-page {
  overflow-x: hidden !important;
}

@media (max-width: 420px) {
  .qw-viewport {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  /* State search list max-height reduction to avoid excessive scroll */
  .qw-state-list {
    max-height: 260px !important;
  }

  /* Back button touch target */
  .qw-back {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }
}


/* ── 10. ABOUT: ab4-inner overflow guard at 375px ─────────────
   The inner container uses max-width 840px / 1080px with 1.5rem
   padding. At 375px: 375 - 48 = 327px content width — fine.
   Guard overflow-x just in case chip/cred content overflows.
   ────────────────────────────────────────────────────────────── */

@media (max-width: 420px) {
  .ab4 {
    overflow-x: hidden !important;
  }

  /* Cred chips — allow wrapping at narrow mobile */
  .ab4-hero-creds {
    gap: 0.4rem !important;
  }

  .ab4-cred-chip {
    font-size: 0.72rem !important;
    padding: 0.3rem 0.65rem !important;
  }
}


/* ── 11. CONTACT: co-hero visual weight at 1440px ─────────────
   At very wide viewports the hero content centering is correct,
   but ensure max-width text container caps for readability.
   ────────────────────────────────────────────────────────────── */

@media (min-width: 1200px) {
  .co-hero h1 {
    max-width: 740px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .co-hero-sub,
  .co-hero p {
    max-width: 560px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* ── GLOBAL: policy-hero background restoration ────────────────
   color-authority.css may force .policy-hero to white #ffffff.
   Ensure the green gradient persists with sufficient specificity.
   ────────────────────────────────────────────────────────────── */

html body main section.policy-hero,
html body section.policy-hero {
  background: linear-gradient(160deg, #F0FDF7 0%, #F9FAFB 100%) !important;
}


/* ============================================================
   END Task #1519713
   ============================================================ */