/**
 * JustAppraisals — ja-* base tokens + shared primitives.
 *
 * Loaded on every JA template (ja-home, ja-location, ja-coverage).
 * Tokens are aligned to the Figma "JustAppraisals" homepage frame
 * (file eSE4zWkdjypZ7xgq5V6L4c, #2564:2379) and encode five traps that
 * MUST NOT be reintroduced:
 *
 *  1. NEVER put `.bg_navy` on a ja-* section. assets/css/style.css:232 is
 *     `.bg_navy * { color:#F5F0EB !important; }` — it force-overs every colour
 *     inside a dark band. Use `.ja-section--navy` below instead.
 *  2. Headings are 'Hedvig Letters Serif' at weight 400 with normal tracking.
 *     Do NOT port Figma's `letter-spacing:-0.04em` onto the serif — that is
 *     an Inter-era default and looks broken on a 400-weight serif.
 *  3. Write ja-* CSS in px. The global `html { font-size:62.5% }` makes rem
 *     arithmetic error-prone here.
 *  4. DM Sans body/label text DOES take Figma's -0.04em tracking (decision 2
 *     guards the serif only). Tighter paragraphs are expected.
 *  5. .ja-eyebrow keeps letter-spacing:1.12px. Figma spec's 0.0112em (~0.18px)
 *     reads as an authoring artefact and kills uppercase legibility — a
 *     deliberate deviation alongside decision 2.
 *
 * All px values, not rem. Scoped under `.ja` so nothing leaks globally.
 */

/* ---- Brand tokens (Figma JustAppraisals frame) -------------------------- */
:root {
    --ja-navy:        #03002F;  /* footer / CTA band / FAQ band            */
    --ja-navy-2:      #1B1548;  /* hover only — derived, not in Figma       */
    --ja-blue:        #4768DA;  /* buttons, links, active pill              */
    --ja-blue-2:      #3550C2;  /* hover only — derived, not in Figma       */
    --ja-gold:        #F6CA60;  /* eyebrows on navy, intake submit          */
    --ja-cream:       #F5F0EC;  /* alt section background                   */
    --ja-white:       #FFFFFF;
    --ja-ink:         #03002F;  /* body colour — same value as navy in Figma */
    --ja-ink-2:       #4D4B57;
    --ja-ink-3:       #7A7886;
    --ja-line:        #C2C2C2;  /* footer divider                           */
    --ja-line-warm:   #E1D5CF;  /* card borders (stuck/scope) + img placeholder */
    --ja-rule:        #7B7984;  /* FAQ hairlines + pill-rail outline        */
    --ja-field-bg:    #F5F5F5;  /* form field background                    */
    --ja-field-border:#E0E0E1;  /* form field border                        */
    --ja-stat-label:  #E1D5CF;  /* stat label on navy                       */

    --ja-font-serif:  'Hedvig Letters Serif', serif;
    --ja-font-sans:   'DM Sans', sans-serif;

    --ja-radius-card:    30px;  /* stat bands, communication cards          */
    --ja-radius-tile:    30px;  /* fees / stuck 400-wide tiles              */
    --ja-radius-tile-sm: 20px;  /* specialists 290×320 cards                */
    --ja-radius-form:    20px;  /* intake card                              */
    --ja-radius-btn:     10px;  /* buttons AND form fields                  */
    --ja-radius-pill:    80px;  /* pill rail + chips                        */
    --ja-radius-img:     25px;  /* panel + hero images                      */

    --ja-section-pad: 75px;
    --ja-gap-cards:   20px;
    --ja-section-gap: 50px;    /* section header → body                    */
    --ja-head-gap:    14px;    /* eyebrow / H2 / lede stack                */
    --ja-container:   1220px;  /* Figma content width                      */
}

/* ---- Section primitives -------------------------------------------------- */
.ja-section {
    padding: var(--ja-section-pad) 0;
}

/* JA-scoped container: the global .container (style.css:236) is
   width:min(100% - 162px, 1280px) and shared with header/footer — do NOT
   edit it. JA sections run on Figma's 1220px grid instead. */
.ja-section .container {
    width: min(100% - 200px, var(--ja-container));
}

/* Dark band WITHOUT the .bg_navy colour trap. Figma navy-band headings and
   body copy are both #FFFFFF (#2564:2592, #2564:2637, #2564:2638). */
.ja-section--navy {
    background: var(--ja-navy);
    color: var(--ja-white);
}
.ja-section--navy .ja-lede,
.ja-section--navy p {
    color: var(--ja-white);
}

.ja-section--cream {
    background: var(--ja-cream);
    color: var(--ja-ink);
}

.ja-section--white {
    background: var(--ja-white);
    color: var(--ja-ink);
}

/* ---- Type --------------------------------------------------------------- */
/* Figma: 16px / 700 / uppercase. letter-spacing stays 1.12px — see header
   trap #5. Gold-on-navy variant is a JA brand accent. */
.ja-eyebrow {
    font-family: var(--ja-font-sans);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1.12px;
    line-height: normal;
    text-transform: uppercase;
    color: var(--ja-blue);
    margin: 0 0 12px;
}
.ja-section--navy .ja-eyebrow {
    color: var(--ja-gold);
}

.ja-h1, .ja-h2, .ja-h3, .ja-h4 {
    font-family: var(--ja-font-serif);
    font-weight: 400;
    letter-spacing: normal;
    color: var(--ja-ink);
    margin: 0;
}
.ja-section--navy .ja-h1,
.ja-section--navy .ja-h2,
.ja-section--navy .ja-h3,
.ja-section--navy .ja-h4 {
    color: var(--ja-white);
}

.ja-h1 { font-size: 56px; line-height: 1.04; text-wrap: balance; }
.ja-h2 { font-size: 48px; line-height: 1.25; }
.ja-h3 { font-size: 36px; line-height: 1.18; }
.ja-h4 { font-size: 30px; line-height: 1.2; } /* communication tiles, FAQ questions */

/* Figma body spec: 16px / 500 / 22.5px / -0.04em — the most visible copy
   change on every JA page; tighter paragraphs are expected. */
.ja-lede {
    font-family: var(--ja-font-sans);
    font-size: 16px;
    font-weight: 500;
    line-height: 22.5px;
    letter-spacing: -0.04em;
    color: var(--ja-ink);
    /* Top margin: breathing room under heads (user direction — 0 read
       cramped under display-size headings; hero copies it anyway via
       its own override). */
    margin: 26px 0 26px;
    max-width: 62ch;
}
.ja-center .ja-lede { margin-left: auto; margin-right: auto; }

.ja-center { text-align: center; }
.ja-narrow { max-width: 760px; margin: 0 auto; }

/* ---- Section head (shared/section-head.php) ------------------------------ */
/* Figma block header: centered eyebrow/H2/lede stack, 825px cap, 14px item
   gap, 50px before the block body. */
.ja-shead {
    display: flex;
    flex-direction: column;
    gap: var(--ja-head-gap);
    max-width: 825px;
    margin: 0 auto var(--ja-section-gap);
    text-align: center;
}
.ja-shead .ja-eyebrow,
.ja-shead .ja-h2,
.ja-shead .ja-lede { margin: 0; }
.ja-shead .ja-lede { max-width: none; }

.ja-emph {
    font-family: var(--ja-font-sans);
    font-weight: 600;
    color: var(--ja-ink);
    font-size: 18px;
}
.ja-section--navy .ja-emph { color: var(--ja-white); }

/* ---- Buttons (Figma: DM Sans 700 / 21px, 16px 40px, 10px radius) -------- */
.ja-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--ja-blue);
    color: var(--ja-white);
    border-radius: var(--ja-radius-btn);
    padding: 16px 40px;
    font-family: var(--ja-font-sans);
    font-size: 21px;
    font-weight: 700;
    line-height: normal;
    text-decoration: none;
    border: 1px solid var(--ja-blue);
    white-space: nowrap;
    transition: background 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
.ja-btn:hover { background: var(--ja-blue-2); border-color: var(--ja-blue-2); color: var(--ja-white); }

.ja-btn--ghost {
    background: transparent;
    color: var(--ja-ink);
    border-color: rgba(3, 0, 47, 0.25);
}
.ja-btn--ghost:hover { border-color: var(--ja-ink); background: transparent; color: var(--ja-ink); }

.ja-btn--lightghost {
    background: transparent;
    color: var(--ja-white);
    border-color: rgba(255, 255, 255, 0.4);
}
.ja-btn--lightghost:hover { background: var(--ja-navy-2); color: var(--ja-white); }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 960px) {
    .ja-section { padding: 64px 0; }
    .ja-section .container { width: min(100% - 48px, var(--ja-container)); }
    .ja-h1 { font-size: 36px; }
    .ja-h2 { font-size: 30px; }
    .ja-h3 { font-size: 24px; }
    .ja-h4 { font-size: 24px; }
    .ja-btn { font-size: 18px; padding: 14px 28px; }
}