/* =====================================================================
   EZEL DESIGN SYSTEM  (theme.css)

   Loaded from base.html AFTER style.css and after each page's own <style>
   block, so at equal specificity it is the last word on the shared
   structure: tokens, type, navigation, footer, buttons, page heroes and
   section rhythm. Page-specific layout stays in the page template.

   Grid
     content width : max 1200px, centred
     page margins  : 48px desktop, 32px at <=1024px, 20px at <=640px
     columns       : 12, gutter 24px (one column = 78px at 1200)
     spans in use  : 12 | 7+5 (visual + text) | 6+6 | 4+4+4 | 8+4 (main + aside)
     baseline      : 8px. Body 16/24, so B = 24px.
     vertical      : section 96px (4B) desktop / 64px mobile
                     block gaps 48 / 32 / 24 / 16 / 8

   Type  (Libre Baskerville 700 for display, Inter for everything else)
     display  56/64  -0.02em   (mobile 38/44)
     h2       40/48  -0.015em  (mobile 30/36)
     h3       24/32  -0.01em
     lead     20/30            (mobile 18/28)
     body     16/24            long-form 17/28
     small    14/20
     label    12/16  uppercase +0.08em

   Colour roles
     paper    #faf8f4  page ground for nav, hero, alternating sections
     paper-2  #f1ede6  chips, secondary buttons, quiet fills
     white    #ffffff  cards and the default section ground
     line     #e4ded4  hairlines and borders
     navy     #0b1f3a  primary action, dark bands, headings
     text     #1f2a37  body copy       muted #5b6673 secondary copy
     accent   #457b9d  links, check marks, focus ring

   No decorative :hover or :active effects anywhere (site rule since commit
   9d2daaa4). Focus is shown with a visible ring instead.
   ===================================================================== */

:root {
    --paper: #faf8f4;
    --paper-2: #f1ede6;
    --white: #ffffff;
    --line: #e4ded4;
    --line-strong: #cbc3b6;
    --navy: #0b1f3a;
    --navy-2: #1d3557;
    --ink: #0b1f3a;
    --text: #1f2a37;
    --muted: #5b6673;
    --accent: #457b9d;
    --on-dark: #ffffff;
    --on-dark-muted: rgba(226, 233, 245, 0.78);
    --on-dark-line: rgba(255, 255, 255, 0.14);

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 48px;
    --space-7: 64px;
    --space-8: 96px;

    --radius-s: 8px;
    --radius-m: 12px;
    --radius-l: 16px;
    --radius-pill: 999px;

    --content: 1200px;
    --gutter: 24px;
    --margin: 48px;

    --shadow-card: 0 1px 2px rgba(11, 31, 58, 0.05), 0 10px 30px rgba(11, 31, 58, 0.06);
    --shadow-frame: 0 1px 2px rgba(11, 31, 58, 0.08), 0 24px 48px -12px rgba(11, 31, 58, 0.18);

    --t-display: clamp(38px, 2.4vw + 26px, 56px);
    --t-h2: clamp(30px, 1.4vw + 22px, 40px);
    --t-h3: 24px;
    --t-lead: clamp(18px, 0.4vw + 16px, 20px);
    --t-body: 16px;
    --t-small: 14px;
    --t-label: 12px;
}

@media (max-width: 1024px) {
    :root { --margin: 32px; }
}
@media (max-width: 640px) {
    :root { --margin: 20px; }
}

/* ---------- Base ---------- */

body {
    color: var(--text);
    font-size: var(--t-body);
    line-height: 1.5;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Reveal-on-scroll and entrance animations are decoration; honour the
   user's motion preference. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Shared labels ---------- */

/* Small uppercase section label. One treatment for every page that
   announces a section (home product badges, resource group labels,
   product-page badges). Text colour, no fill: the fill made each label
   compete with the heading it introduces. */
.ezel-product-badge,
.resource-group-label,
.resources-why h2,
.product-badge,
.section-label,
.section-badge {
    display: inline-block;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0 0 12px;
    color: var(--accent);
    font-family: var(--font-body);
    font-size: var(--t-label);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 16px;
    border-radius: 0;
}

/* ---------- Navigation ---------- */

#navbar {
    height: 72px;
    padding: 0 var(--margin);
    border-bottom: 1px solid var(--line);
    box-shadow: none;
    color: var(--ink);
}
#navbar::before {
    background: rgba(250, 248, 244, 0.94);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    opacity: 1;
}
#navbar::after { display: none; }
#navbar.scrolled {
    border-bottom-color: var(--line);
    box-shadow: none;
}
#navbar.scrolled::before {
    background: rgba(250, 248, 244, 0.94);
}

.nav-logo {
    font-size: 26px;
    color: var(--ink);
    letter-spacing: -0.01em;
}

.nav-links { gap: 4px; }

.nav-links .nav-link,
.nav-dropdown-toggle {
    font-size: 15px;
    font-weight: 500;
    color: var(--ink);
    padding: 10px 14px;
    border-radius: var(--radius-pill);
    line-height: 1;
}
.nav-links .nav-link:focus-visible,
.nav-dropdown-toggle:focus-visible {
    background: var(--paper-2);
    outline-offset: 0;
}

.nav-dropdown-menu {
    top: calc(100% + 8px);
    min-width: 232px;
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-card);
    padding: 8px;
    backdrop-filter: none;
}
.nav-dropdown-menu::before { top: -8px; height: 8px; }
.nav-dropdown-link {
    padding: 10px 12px;
    border-radius: var(--radius-s);
    font-size: 15px;
    color: var(--ink);
}
.nav-dropdown-link:focus-visible { background: var(--paper-2); outline: none; }

/* Primary action lives in the nav on every page. */
.nav-links .nav-cta {
    background: var(--navy);
    border: 1px solid var(--navy);
    color: var(--on-dark);
    font-weight: 600;
    margin-left: 8px;
}
.nav-links .nav-cta:focus-visible {
    background: var(--navy-2);
    border-color: var(--navy-2);
    color: var(--on-dark);
    outline-offset: 2px;
}

.nav-links .nav-login {
    color: var(--muted);
    font-weight: 500;
}
.nav-links .nav-login:focus-visible {
    color: var(--ink);
    background: var(--paper-2);
    text-decoration: none;
}

.nav-hamburger span { background: var(--ink); }

@media (max-width: 1024px) {
    .nav-links {
        top: 72px;
        background: var(--paper);
        padding: 12px var(--margin) 32px;
        gap: 2px;
        border-top: 1px solid var(--line);
    }
    .nav-links .nav-link,
    .nav-dropdown-toggle {
        padding: 14px 12px !important;
        font-size: 17px;
        border-radius: var(--radius-s);
        justify-content: flex-start;
        width: 100%;
        line-height: 1.2;
    }
    .nav-dropdown-toggle { justify-content: space-between; }
    .nav-dropdown-link {
        padding: 12px 12px 12px 28px;
        font-size: 16px;
        color: var(--text);
        margin: 0;
    }
    .nav-dropdown-menu {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 0 0 4px;
        background: transparent;
    }
    .nav-links .nav-cta {
        margin: 12px 0 4px;
        justify-content: center;
        padding: 15px 16px !important;
        border-radius: var(--radius-s);
        font-size: 17px;
    }
    .nav-links .nav-login {
        border: 0;
        background: transparent;
        justify-content: center;
        color: var(--muted);
    }
}

/* ---------- Buttons ---------- */

/* Two sizes, two roles. Everything marketing-facing maps onto these. */
.btn-hero,
.ezel-primary-btn,
.btn-prefooter,
.resources-cta .btn-hero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 28px;
    min-height: 52px;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    text-decoration: none;
    box-shadow: none;
    transition: none;
    cursor: pointer;
}
.btn-hero-primary,
.ezel-primary-btn,
.btn-prefooter-primary,
.resources-cta .btn-hero {
    background: var(--navy);
    border: 1px solid var(--navy);
    color: var(--on-dark);
}
.btn-hero-secondary {
    background: var(--white);
    border: 1px solid var(--line-strong);
    color: var(--ink);
}
.btn-hero-primary:focus-visible,
.ezel-primary-btn:focus-visible,
.btn-hero-secondary:focus-visible,
.btn-prefooter:focus-visible {
    transform: none;
    box-shadow: none;
}
/* On navy bands the primary is white and the secondary is outlined. */
.btn-prefooter-primary,
.cta-section .btn-hero-primary,
.prefooter-cta .btn-hero-primary {
    background: var(--white);
    border-color: var(--white);
    color: var(--navy);
    box-shadow: none;
}
.btn-prefooter-secondary,
.cta-section .btn-hero-secondary,
.prefooter-cta .btn-hero-secondary {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.4);
    color: var(--on-dark);
}
.btn-hero i, .ezel-primary-btn i, .btn-prefooter i { font-size: 0.9em; }

/* Small text link with arrow (cards, "view all"). */
.resource-card-cta,
.category-viewall {
    font-weight: 600;
    color: var(--ink);
}

/* ---------- Page heroes ---------- */

/* Two grounds, one system.
   paper: marketing pages (home, product pages, pricing).
   navy : the free library (resources hub, every corpus and detail page,
          blog). A reader always knows which half of the site they are in.
   Both use the serif display face and the same vertical rhythm. */

.resources-hero,
.templates-hero,
.blog-hero,
.opinions-hero,
.state-hero,
.bar-hero,
.surveys-hero,
.ann-hero,
.anst-hero,
.ctb-hero,
.sc-hero,
.st-hero,
.forms-hero,
.kit-hero,
.jb-header,
.jl-header,
.judge-header,
.ctp-header,
.anp-header,
.opinion-header,
.blog-post-header,
.prefooter-cta,
.cta-section {
    background: var(--navy);
    background-image: none;
    color: var(--on-dark);
}
.resources-hero::before,
.templates-hero::before,
.blog-hero::before,
.opinions-hero::before,
.prefooter-cta::before,
.cta-section::before,
.product-hero::before,
.product-hero::after {
    background: none;
    display: none;
}

/* Listing heroes (the ones with a centred title + one-line lede). */
.resources-hero,
.templates-hero,
.blog-hero,
.opinions-hero,
.state-hero,
.bar-hero,
.surveys-hero,
.ann-hero,
.anst-hero,
.ctb-hero,
.sc-hero,
.forms-hero {
    padding: 64px var(--margin) 72px;
}
.templates-hero,
.opinions-hero { padding-bottom: 88px; }   /* the search card overlaps by 32px */

.resources-hero h1,
.templates-hero h1,
.blog-hero h1,
.opinions-hero h1,
.state-hero h1,
.bar-hero h1,
.surveys-hero h1,
.ann-hero h1,
.anst-hero h1,
.ctb-hero h1,
.sc-hero h1,
.st-hero h1,
.forms-hero h1,
.form-hero h1,
.kit-hero h1,
.jb-h1 {
    font-family: var(--font-logo);
    font-weight: 700;
    font-size: clamp(32px, 1.6vw + 22px, 44px);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--on-dark);
    margin: 0 0 12px;
}
.resources-hero p,
.templates-hero p,
.blog-hero p,
.opinions-hero p,
.state-hero p,
.bar-hero p,
.surveys-hero p,
.jb-lede {
    font-size: var(--t-lead);
    line-height: 1.5;
    color: var(--on-dark-muted);
    max-width: 680px;
    margin: 0 auto;
}
.resources-hero p strong { color: var(--on-dark); }

/* Detail-page headers keep their own sizes; only the face changes so a
   case name, an opinion title or a judge's name is set in the same voice
   as every other page title. */
.judge-header h1,
.ctp-header h1,
.anp-header h1,
.opinion-header h1,
.blog-post-header h1,
.jl-header h1,
.jl-header .jc-name {
    font-family: var(--font-logo);
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Marketing hero (product pages share .product-hero; the home page has
   its own block in index.html built on the same values). */
.product-hero {
    background: var(--paper);
    padding: 72px var(--margin) 64px;
}
.product-hero h1 {
    font-size: var(--t-display);
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
}
.product-hero p {
    font-size: var(--t-lead);
    line-height: 1.5;
    color: var(--text);
    max-width: 640px;
    margin: 0 auto 32px;
}
.product-hero-content { max-width: 820px; }

.product-hero { padding-bottom: 48px; }

/* Product page sections: 12-col content, 6+6, alternate sides. */
.product-section { padding: 80px var(--margin); }
.product-section:nth-of-type(even) { background: var(--paper); }
.section-container {
    max-width: var(--content);
    gap: var(--space-7);
}
.section-content h2 {
    font-family: var(--font-logo);
    font-size: var(--t-h2);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin-bottom: 16px;
}
.section-content p {
    font-size: 17px;
    line-height: 1.6;
    color: var(--text);
}
@media (max-width: 1024px) {
    .product-section { padding: var(--space-7) var(--margin); }
    .section-container { gap: var(--space-6); }
    .product-hero { padding-bottom: 40px; }
    .product-hero p { margin-bottom: 24px; }
    /* Phones read every section the same way: words, then the picture. */
    .section-container > .section-content { order: -1; }
}

/* ---------- Pricing ---------- */

.pricing-hero {
    background: var(--paper);
    background-image: none;
    padding: 56px var(--margin) 40px;
}
.pricing-hero h1 {
    font-size: var(--t-h2);
    letter-spacing: -0.015em;
    line-height: 1.15;
}
.pricing-hero p { font-size: var(--t-lead); color: var(--muted); }
.pricing-section { padding-top: 40px; padding-bottom: 0; }
.pricing .payonce-section { margin-bottom: 0; }
.pricing .payonce-footnote { margin-bottom: 0; }
.pricing .faq-section { padding: 64px var(--margin); }
.pricing-card { box-shadow: var(--shadow-card); border-color: var(--line); }
.pricing-card.featured { border-color: var(--navy); box-shadow: var(--shadow-card); }
.plan-button.primary { box-shadow: none; border-color: var(--navy); }
.payonce-card { box-shadow: none; border-color: var(--line); }

/* ---------- Legal pages ---------- */

.legal-page { background: var(--paper); padding-top: 56px; }
.legal-container {
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-card);
}
.legal-header h1 { font-size: var(--t-h2); letter-spacing: -0.015em; }

/* ---------- Blog ---------- */

/* The chips above the posts already list every category, on every width. */
.blog-sidebar .sidebar-section:not(.sidebar-cta) { display: none; }

/* The kit pages (eviction defense, small claims, fee waiver) put their
   <style> inside the body, after this file, so they need one extra level of
   specificity to join the navy family. */
main .kit-hero {
    background: var(--navy);
    background-image: none;
    padding: 64px var(--margin) 72px;
}
main .kit-hero h1 {
    font-family: var(--font-logo);
    font-size: clamp(32px, 1.6vw + 22px, 44px);
    line-height: 1.15;
    letter-spacing: -0.015em;
}

/* ---------- Dark CTA bands ---------- */

/* A navy band followed by the navy footer read as one 160px void under the
   button. The band is now tighter and the footer is its own, darker surface
   with a hairline on top, so the two stop merging. */
.prefooter-cta,
.cta-section {
    padding: 72px var(--margin);
}
.cta-section .cta-content,
.cta-section .cta-content p,
.prefooter-cta p {
    margin-bottom: 0;
}
.cta-section .cta-content h2 + p,
.prefooter-cta h2 + p {
    margin-bottom: 28px;
}
.cta-section .cta-button {
    margin-top: 0;
}
.prefooter-cta h2,
.cta-section h2 {
    font-family: var(--font-logo);
    font-size: var(--t-h2);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--on-dark);
    margin: 0 0 16px;
}
.prefooter-cta p,
.cta-section p {
    font-size: var(--t-lead);
    line-height: 1.5;
    color: var(--on-dark-muted);
}

/* ---------- Footer ---------- */

footer {
    background: #08182d;
    background-image: none;
    color: var(--on-dark);
    padding: 56px var(--margin) var(--space-5);
    border-top: 1px solid var(--on-dark-line);
}
.footer-content {
    max-width: var(--content);
    gap: var(--space-6) var(--gutter);
    grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
}
.footer-brand { font-size: 26px; }
.footer-description {
    font-size: 15px;
    line-height: 1.55;
    color: var(--on-dark-muted);
    max-width: 300px;
}
.footer-social-link { border-color: var(--on-dark-line); }
.footer-links h4 {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-dark-muted);
    margin-bottom: 14px;
}
.footer-links ul { gap: 10px; }
.footer-links a {
    font-size: 15px;
    color: var(--on-dark);
    text-decoration: none;
}
.footer-links a:focus-visible { outline-color: var(--on-dark); }
.footer-contact-inline,
.footer-contact-inline a { color: var(--on-dark-muted); font-size: 14px; }
.footer-bottom {
    max-width: var(--content);
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--on-dark-line);
    text-align: left;
}
.footer-bottom p {
    font-size: 13px;
    color: var(--on-dark-muted);
    margin: 0;
}

@media (max-width: 1024px) {
    .footer-content { grid-template-columns: 1fr 1fr; }
    .footer-brand-block { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
    footer { padding: var(--space-6) var(--margin) var(--space-4); }
    .footer-content { grid-template-columns: 1fr 1fr; gap: var(--space-5) var(--gutter); }
}
@media (max-width: 480px) {
    footer { padding: var(--space-6) var(--margin) var(--space-4); }
}

/* ---------- Mobile screenshot affordance ---------- */

/* The "Tap to view full screen" strip covered a third of each product
   screenshot on phones. Replace it with a small expand glyph in the corner:
   the affordance stays, the picture stays visible. */
@media (max-width: 1024px) {
    #researcher .screenshot-content,
    #chat .chat-screenshot-content,
    #caselaw .caselaw-screenshot-content,
    #filings .filings-screenshot-content,
    #redaction .redaction-screenshot-content { cursor: pointer; }
    /* `body` prefix: these sections carry their own <style> in the body,
       which comes after this file, so equal specificity would lose. */
    body #researcher .screenshot-content::after,
    body #chat .chat-screenshot-content::after,
    body #caselaw .caselaw-screenshot-content::after,
    body #filings .filings-screenshot-content::after,
    body #redaction .redaction-screenshot-content::after,
    body.product-page .screenshot-content[id]::after {
        position: absolute;
        z-index: 10;
        pointer-events: none;
        content: '\2922';
        width: 32px;
        height: 32px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        bottom: 8px;
        right: 8px;
        border-radius: 50%;
        background: rgba(11, 31, 58, 0.72);
        color: #fff;
        font-size: 15px;
        line-height: 1;
        font-weight: 700;
    }
}

/* ---------- Test-mode banner (test.ezel.ai only) ---------- */
/* Same hierarchy as production; the banner just sits above it. */
.test-mode-banner {
    animation: none;
    background: #b45309;
    border-bottom: 0;
    box-shadow: none;
    font-size: 13px;
}
.test-mode-banner-icon { animation: none; }

/* ---------- Dark CTA band buttons ---------- */

/* On the navy band the paid action must be the brightest thing: a white pill.
   The accent-blue fill it used to have read as weaker than the paper-coloured
   secondary next to it. */
.cta-section .btn-hero-primary,
.prefooter .btn-hero-primary {
    background: var(--white);
    border: 1px solid var(--white);
    color: var(--navy);
    box-shadow: none;
}
.cta-section .btn-hero-secondary,
.prefooter .btn-hero-secondary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.55);
    color: var(--white);
}

/* ---------- Product page example boxes ---------- */

/* These used a blue tint that belongs to no colour role in the system.
   They become a paper panel with an accent rule, like every other aside. */
.example-box {
    background: var(--paper-2);
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--radius-s) var(--radius-s) 0;
    padding: 16px 20px;
}
.example-box strong { color: var(--navy); }

/* ---------- Template preview on phones ---------- */

/* style.css releases the editor's viewport clamp on small screens
   (.app-container { height: auto }), so the whole document rendered inline and
   a lease ran to 14,000px. Give it a bounded window that scrolls, as on desktop. */
@media (max-width: 768px) {
    .app-container#editor-app {
        height: 78vh;
        min-height: 520px;
        max-height: 760px;
    }
    #editor-app .workspace-container { min-height: 0; }
    #editor-app .editor-panel { min-height: 0; }
    #editor-app .editor-container { min-height: 0; }
}