/*
 * sitewide-fixes-1581826.css — Task #1581826
 * Owns: 8 sitewide visual audit CSS fixes
 * Does NOT own: page-specific layout, design system base, auth logic, cookie consent logic
 *
 * Fixes:
 *  1. Nav "Get Started" CTA clipped at ≤1280px — reduce hn-right gap, compress CTA padding
 *  2. Login card centering — sr-auth-card/aup-form-col centered on desktop
 *  3. "AMERICA'S SETTLEMENT PLATFORM" all-caps → Title Case (CSS text-transform override)
 *  4. Multi-word section labels ALL-CAPS → Title Case (section-label, section-eyebrow)
 *  5. Login card logo "Settlement/RADAR" — align with nav brand (fixed in EJS, CSS prep)
 *  6. H1+description alignment on /tools, /no-proof-required — consistent left or center
 *  7. Cookie banner persistence — already in JS; CSS guard to ensure banner re-hides
 *  8. Hero badge all-caps → Title Case, add number comma formatting
 */

/* ═══════════════════════════════════════════════════════════════
   FIX 1: Nav "Get Started" CTA clipped at ≤1280px
   Root cause: .hn-right has flex-shrink: 0, so the whole right
   section pushes past viewport edge at 1280px. At 1280px, the sum
   of logo (≈200px) + nav (≈560px) + search (≈220px) + login (≈70px)
   + CTA (≈140px) + gaps exceeds 1280px.
   Fix: tighten gaps and search width at 1024px–1280px.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) and (max-width: 1380px) {
  html body .hn-inner {
    gap: 0.5rem !important;
  }
  html body .hn-right {
    gap: 0.375rem !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }
  html body .hn-search {
    width: 160px !important;
    min-width: 120px !important;
  }
  html body .hn-cta {
    padding: 0 0.875rem !important;
    font-size: 0.8125rem !important;
    white-space: nowrap !important;
  }
  html body .hn-login {
    white-space: nowrap !important;
  }
  /* Compress nav link padding to free space */
  html body .hn-nav {
    gap: 0.125rem !important;
  }
  html body .hn-nav-btn,
  html body .hn-nav-link {
    padding: 0 0.625rem !important;
    font-size: 0.8125rem !important;
  }
  html body .hn-logo {
    margin-right: 0.75rem !important;
    flex-shrink: 0 !important;
  }
}

/* At exactly ~1280px (common laptop viewport) — extra tightening */
@media (min-width: 1024px) and (max-width: 1300px) {
  html body .hn-search {
    width: 140px !important;
  }
  html body .hn-cta {
    padding: 0 0.75rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FIX 2: Login/auth card not centered on desktop
   Root cause: .aup-page is a CSS grid 1fr 1fr but auth-login.ejs
   only has ONE child (.aup-form-col) so it occupies only the left
   column. The sr-auth-card inside needs to be centered.
   Fix: when there's no .aup-mkt sibling, make aup-form-col span
   both columns and center its content.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  /* Center the auth card horizontally within the form column */
  html body .aup-page .aup-form-col {
    align-items: center !important;
    justify-content: center !important;
  }

  /* The sr-auth-card — explicitly centered */
  html body .aup-page .aup-form-col .sr-auth-card {
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 440px !important;
  }

  /* When aup-form-col is the only column (no aup-mkt or aup-sp-panel sibling) —
     expand to fill and center. The aup-value-panel is a sibling WITHIN aup-form-col
     so this layout approach: make aup-page a flex row, each child 50%. */
  html body .aup-page {
    display: flex !important;
    align-items: stretch !important;
  }

  html body .aup-page .aup-form-col {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 48px 40px !important;
  }

  /* Value panel (right side) */
  html body .aup-page .aup-value-panel {
    flex: 0 0 400px !important;
    max-width: 400px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 48px 40px !important;
    background: linear-gradient(160deg, #0f172a 0%, #00875A 100%) !important;
    color: #FFFFFF !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FIX 3: "AMERICA'S SETTLEMENT PLATFORM" all-caps → Title Case
   Root cause: .hn-logo-tag has text-transform: uppercase in the
   original design-system.css §27 definition (before the override).
   The earlier design-system.css override removed uppercase but a
   later rule or specificity war may restore it.
   Belt-and-suspenders: force text-transform: none on the logo tag.
   ═══════════════════════════════════════════════════════════════ */
html body .hn-logo-tag,
html body a.hn-logo .hn-logo-tag,
html body .hn-header .hn-logo-tag {
  text-transform: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   FIX 4: Multi-word section labels ALL-CAPS → Title Case
   Root cause: .section-label, .section-eyebrow, .sr-section__eyebrow
   all have text-transform: uppercase. Fine for single-word badges
   ("LIVE", "NEW") but wrong for multi-word labels.
   Strategy: Remove uppercase globally from multi-word label classes
   and preserve it only for short badge-style elements via class
   selectors.
   ═══════════════════════════════════════════════════════════════ */

/* Multi-word section label classes — remove uppercase */
html body .section-label:not(.badge):not(.badge-new):not(.badge-hot):not(.badge-live) {
  text-transform: none !important;
  letter-spacing: 0.02em !important;
}

html body .section-eyebrow,
html body .sr-section__eyebrow {
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  font-weight: 600 !important;
}

/* Specific sections identified in audit — OUR STORY, BY THE NUMBERS, etc.
   These all use .section-label or inline uppercase in various templates.
   The above rules cover the CSS layer. */

/* Keep uppercase on short single-word badge chips */
html body .badge-new,
html body .badge-hot,
html body .badge-live,
html body .hn-mega-badge,
html body .hn-mega-badge--new,
html body .hn-mega-badge--hot {
  font-size: 0.6875rem !important;
  letter-spacing: 0.08em !important;
}

/* ═══════════════════════════════════════════════════════════════
   FIX 5: Login card logo — CSS prep for "SettlementRadar" brand
   The EJS fix handles the HTML change. CSS ensures the radar span
   does NOT render with uppercase text-transform inherited from
   any global rule.
   ═══════════════════════════════════════════════════════════════ */
html body .sr-auth-card .sr-auth-logo-brand,
html body .sr-auth-card .sr-auth-logo-radar {
  text-transform: none !important;
  font-weight: 700 !important;
}

/* SettlementRadar unified logo style in auth card */
html body .sr-auth-card .sr-auth-logo-name {
  text-transform: none !important;
  font-weight: 800 !important;
  font-size: 1.25rem !important;
  color: #0A0A0A !important;
  letter-spacing: -0.02em !important;
}

html body .sr-auth-card .sr-auth-logo-name .accent {
  color: #00875A !important;
}

/* ═══════════════════════════════════════════════════════════════
   FIX 6: H1 + description alignment on /tools, /no-proof-required
   Root cause: hub-hero__title is left-aligned but hub-hero__sub
   has max-width: 540px with no explicit text-align, inheriting center
   from a parent. Or the reverse — title has one alignment, sub another.
   Fix: both left-aligned within their container.
   ═══════════════════════════════════════════════════════════════ */

/* Tools hub hero — consistent left align */
html body .tools-hub-hero .hub-hero__title,
html body .tools-hub-hero .hub-hero__sub,
html body .hub-hero .hub-hero__title,
html body .hub-hero .hub-hero__sub {
  text-align: left !important;
}

/* No-proof-required page hero — consistent left align */
html body .np-hero .np-h1,
html body .np-hero p.np-intro,
html body .no-proof-hero .np-h1,
html body .no-proof-hero p {
  text-align: left !important;
}

/* ═══════════════════════════════════════════════════════════════
   FIX 7: Cookie banner — CSS guard
   The JS already stores consent in localStorage and skips banner
   on reload. This CSS rule ensures the banner stays invisible if
   the body has the .sr-cookie-dismissed class (set by JS after
   consent/dismiss).
   ═══════════════════════════════════════════════════════════════ */
html body.sr-cookie-dismissed #sr-cookie-consent {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   FIX 8: Hero badge "N+ OPEN SETTLEMENTS — UPDATED DAILY" all-caps
   Root cause: .hp-hero__eyebrow has text-transform: uppercase in
   homepage-components-1452565.css. Remove uppercase; text is already
   the right length.
   Number comma formatting is handled in home.ejs via JS toLocaleString.
   The badge text is dynamically generated from _openCount so no
   hardcoded text fix needed — just removing uppercase.
   ═══════════════════════════════════════════════════════════════ */
html body .hp-hero__eyebrow {
  text-transform: none !important;
  letter-spacing: 0.01em !important;
}