/* ===========================================================================
   CompliantCA — site styles

   Plain CSS, no build step. Structured to stay maintainable as pages grow:

     1. @layer makes the cascade explicit, so specificity never needs escalating
     2. Design tokens are the ONLY place raw values live
     3. Native nesting keeps a component's rules in one block
     4. .prose styles all markdown articles at once, so publishing content
        never requires touching this file

   Conventions for anyone (human or agent) editing this file are in CLAUDE.md.
   =========================================================================== */

@layer tokens, base, layout, components, utilities;

/* ---------------------------------------------------------------------------
   1. TOKENS — the single source of truth for every raw value.
   Never hardcode a colour, size, or spacing value outside this layer.
   --------------------------------------------------------------------------- */
@layer tokens {
  :root {
    /* Light only, deliberately. Removed 2026-08-14: the audience is on office
       desktops that default to light, and a dark variant is maintenance surface
       that nobody here would see — a hardcoded colour breaks only in dark mode,
       where no reviewer is looking.

       This declaration is the part that is easy to forget. Without it a visitor
       whose OS is set to dark gets dark-rendered form inputs, scrollbars and
       autofill against a light page, which reads as broken rather than
       intentional. */
    color-scheme: light;

    /* Colour — semantic names, not literal ones. "--fg", never "--black",
       so a token means its role rather than its value. */
    --bg:          #ffffff;
    --bg-subtle:   #f6f7f9;
    --fg:          #16181d;
    --fg-muted:    #5c6370;
    --accent:      #1c5d3a;
    --accent-weak: #e8f1ec;
    --rule:        #e4e6ea;

    /* Spacing — a fixed scale. Pick the nearest step; don't invent values. */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;

    /* Type — fluid where it helps, fixed where it doesn't. */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
    --text-xs:   0.78rem;
    --text-sm:   0.9rem;
    --text-base: 1.0625rem;
    --text-lg:   1.15rem;
    --text-xl:   1.4rem;
    --text-2xl:  clamp(1.5rem, 3.5vw, 1.85rem);
    --text-3xl:  clamp(1.9rem, 5.5vw, 2.6rem);

    --leading-tight: 1.15;
    --leading-normal: 1.65;

    /* Everything else */
    --radius:     6px;
    --measure:    40rem;   /* readable line length for prose */
    --measure-wide: 64rem; /* marketing sections, which are multi-column */
    --border:     1px solid var(--rule);

    /* Marketing surface. Deliberately few additions — the accent already
       carries semantic weight (green = in good standing), which is why it was
       chosen over the safety-yellow the subject would suggest. Safety yellow
       reads as alarm, and docs/design-principles.md forbids fear-based design. */
    --ink-invert:  #f2f4f3;   /* text on dark bands */
    --band:        #12211a;   /* dark green-black, not neutral slate */
    --band-muted:  #93a89e;
    --ochre:       #8a6316;   /* used once, for the penalty figure only */

    /* Form validation only — "that address won't work", never a warning about
       the reader's compliance. Muted brick rather than a pure red, for the same
       reason the palette avoids safety yellow. */
    --danger:      #9c2a1f;

    /* Display face: Georgia is installed on essentially every Windows office
       machine, and 91% of our search impressions are desktop. Choosing a face
       the audience already has means the page renders as designed with no
       font loading at all. */
    --font-display: Georgia, "Times New Roman", serif;
  }

}

/* ---------------------------------------------------------------------------
   2. BASE — bare element defaults. No classes.
   --------------------------------------------------------------------------- */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3, h4 {
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
    margin: 0;
  }

  a {
    color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
  }

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

/* ---------------------------------------------------------------------------
   3. LAYOUT — page-level structure, shared across every template.
   --------------------------------------------------------------------------- */
@layer layout {
  .site-header {
    border-bottom: var(--border);
  }

  .site-header__inner {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: space-between;
    margin-inline: auto;
    max-width: var(--measure-wide);
    padding: var(--space-4) var(--space-5);
  }

  .wordmark {
    color: var(--fg);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    letter-spacing: -0.01em;
    text-decoration: none;

    span { color: var(--accent); }
  }

  .site-nav {
    display: flex;
    gap: var(--space-5);

    a {
      color: var(--fg-muted);
      font-size: var(--text-sm);
      text-decoration: none;

      &:hover { color: var(--accent); }
    }
  }

  /* Prose pages take the narrow reading measure. Marketing pages lay out their
     own full-bleed sections and must NOT be constrained here — that is why the
     width lives on a modifier rather than on `main` itself. */
  .main--prose {
    margin-inline: auto;
    max-width: var(--measure);
    padding: var(--space-7) var(--space-5) var(--space-8);
  }

  /* Article pages: a wide frame holding a reading-measure column plus a
     contents rail. The measure is right for reading and wrong for a whole
     page, which is why the frame and the column are separate widths. */
  .main--article {
    margin-inline: auto;
    max-width: var(--measure-wide);
    padding: var(--space-7) var(--space-5) var(--space-8);
  }

  .article-layout {
    display: grid;
    gap: var(--space-7);
    grid-template-columns: minmax(0, 1fr);
  }

  @media (min-width: 60rem) {
    .article-layout {
      align-items: start;
      grid-template-columns: minmax(0, var(--measure)) 1fr;
    }
  }

  .skiplink {
    background: var(--bg);
    border: var(--border);
    border-radius: var(--radius);
    inset-block-start: var(--space-2);
    inset-inline-start: var(--space-2);
    padding: var(--space-2) var(--space-3);
    position: absolute;
    transform: translateY(-250%);

    &:focus-visible { transform: none; z-index: 10; }
  }

  .site-footer {
    border-top: var(--border);
    margin-inline: auto;
    max-width: var(--measure-wide);
    padding: var(--space-5);
  }

  .copyright {
    color: var(--fg-muted);
    font-size: var(--text-xs);
    margin: var(--space-3) 0 0;
  }
}

/* ---------------------------------------------------------------------------
   4. COMPONENTS — reusable pieces. One block each, nested.
   --------------------------------------------------------------------------- */
@layer components {
  /* Callout box. Also the base for future variants (warning, tip). */
  .note {
    background: var(--bg-subtle);
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--radius) var(--radius) 0;
    color: var(--fg-muted);
    font-size: var(--text-sm);
    margin: 0;
    padding: var(--space-3) var(--space-4);
  }

  /* ---- .prose ------------------------------------------------------------
     Wraps rendered markdown. This is the load-bearing block: every generated
     article is styled by these rules and by nothing else, which is why adding
     content never means adding CSS. Style ELEMENTS here, not classes —
     markdown cannot emit classes.
     --------------------------------------------------------------------- */
  .prose {
    /* ---- Vertical rhythm --------------------------------------------------
       The organising principle: a heading belongs to the content BELOW it.
       So headings take generous space above and tight space below, which
       visually groups each section instead of leaving headings adrift
       equidistant between two blocks.

       Rules are ordered least- to most-specific; the cascade resolves the
       rest, so no rule here needs to fight another.
       -------------------------------------------------------------------- */

    /* 1. Baseline flow between any two blocks. */
    > * + * { margin-block-start: var(--space-4); }

    /* 2. Headings open a section, so they get room above. Size steps down. */
    h2 { font-size: var(--text-2xl); margin-block-start: var(--space-7); }
    h3 { font-size: var(--text-xl);  margin-block-start: var(--space-6); }
    h4 { font-size: var(--text-lg);  margin-block-start: var(--space-5); font-weight: 600; }

    /* 3. Whatever follows a heading is its content — pull it close. This is
          the single biggest readability gain over a flat margin. */
    :is(h2, h3, h4) + * { margin-block-start: var(--space-2); }

    /* 4. Two headings in a row are one stack, not two sections. Specificity
          (0,0,2) beats rule 3 above, so ordering is not load-bearing. */
    :is(h2, h3, h4) + :is(h3, h4) { margin-block-start: var(--space-3); }

    /* 5. A paragraph introducing a list ("you must fill in:") reads as one
          unit with it. */
    p + :is(ul, ol) { margin-block-start: var(--space-2); }

    /* 6. Never push the first block down or the last one out — the container
          owns the outer spacing. */
    > :first-child { margin-block-start: 0; }
    > :last-child  { margin-block-end: 0; }

    /* 7. Tables and callouts are heavier objects; give them more air. */
    :is(.table-wrap, blockquote) { margin-block: var(--space-5); }

    ul, ol { padding-inline-start: var(--space-5); }
    li + li { margin-block-start: var(--space-2); }

    /* Nested lists sit inside their parent item, not apart from it. */
    li > :is(ul, ol) { margin-block-start: var(--space-2); }

    blockquote {
      border-inline-start: 3px solid var(--rule);
      color: var(--fg-muted);
      margin-inline: 0;
      padding-inline-start: var(--space-4);
    }

    code {
      background: var(--bg-subtle);
      border-radius: 4px;
      font-family: var(--font-mono);
      font-size: 0.9em;
      padding: 0.1em 0.35em;
    }

    /* Wide tables scroll inside their own box rather than breaking the page. */
    .table-wrap { overflow-x: auto; }

    table {
      border-collapse: collapse;
      font-size: var(--text-sm);
      width: 100%;

      th, td {
        border-bottom: var(--border);
        padding: var(--space-2) var(--space-3);
        text-align: start;
      }

      th { font-weight: 600; }
    }

    img { height: auto; max-width: 100%; }
  }

  .article-header {
    border-bottom: var(--border);
    margin-block-end: var(--space-6);
    padding-block-end: var(--space-5);

    .eyebrow {
      color: var(--accent);
      font-size: var(--text-xs);
      font-weight: 600;
      letter-spacing: 0.08em;
      margin: 0 0 var(--space-3);
      text-transform: uppercase;
    }

    h1 {
      font-family: var(--font-display);
      font-size: var(--text-3xl);
      font-weight: 400;
    }

    .meta {
      color: var(--fg-muted);
      font-size: var(--text-sm);
      margin: var(--space-3) 0 0;
    }
  }

  .guide-group {
    margin-block-start: var(--space-7);
  }

  .guide-group__title {
    border-block-end: var(--border);
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    padding-block-end: var(--space-2);
    text-transform: uppercase;
  }

  /* A directory, not prose — two columns on desktop so the page does not
     trail down one narrow strip. */
  .guide-list {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    list-style: none;
    margin: var(--space-5) 0 0;
    padding: 0;

    a {
      display: block;
      font-weight: 600;
      text-decoration: none;

      &:hover { text-decoration: underline; }
    }

    .cite { margin-block-start: var(--space-2); }
  }

  .guide-desc {
    color: var(--fg-muted);
    display: block;
    font-size: var(--text-sm);
    margin-block-start: var(--space-1);
  }

  .faq,
  .related {
    border-top: var(--border);
    margin-block-start: var(--space-7);
    padding-block-start: var(--space-5);

    > h2 {
      font-size: var(--text-xl);
      margin-block-end: var(--space-4);
    }
  }

  .faq details {
    border-bottom: var(--border);
    padding-block: var(--space-3);

    summary {
      cursor: pointer;
      font-weight: 600;
    }

    p {
      color: var(--fg-muted);
      margin: var(--space-3) 0 0;
    }
  }

  .toc {
    display: none;   /* orientation aid, not content — desktop only */
  }

  @media (min-width: 60rem) {
    .toc {
      display: block;
      position: sticky;
      top: var(--space-5);
    }
  }

  .toc__title {
    color: var(--fg-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    margin: 0 0 var(--space-3);
    text-transform: uppercase;
  }

  .toc ol {
    border-inline-start: var(--border);
    list-style: none;
    margin: 0;
    padding: 0;

    li { padding-block: var(--space-1); }

    a {
      color: var(--fg-muted);
      display: block;
      font-size: var(--text-sm);
      line-height: 1.35;
      padding-inline-start: var(--space-4);
      text-decoration: none;

      &:hover { color: var(--accent); }
    }
  }

  .error-page {
    max-width: 34rem;
    padding-block: var(--space-7);

    h1 {
      font-family: var(--font-display);
      font-size: var(--text-3xl);
      font-weight: 400;
      margin-block-end: var(--space-4);
    }

    .lede {
      color: var(--fg-muted);
      margin: 0 0 var(--space-5);
    }
  }

  .backlink {
    border-top: var(--border);
    font-size: var(--text-sm);
    margin-block-start: var(--space-7);
    padding-block-start: var(--space-4);
  }

  .footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-block-end: var(--space-4);

    a {
      font-size: var(--text-sm);
      text-decoration: none;

      &:hover { text-decoration: underline; }
    }
  }

  .disclaimer {
    color: var(--fg-muted);
    font-size: var(--text-xs);
    line-height: 1.55;
    margin: 0;
  }

  /* Dev-only badge; rendered when DEBUG and the request is internal. */
  .devbadge {
    color: var(--fg-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    margin: var(--space-3) 0 0;
    opacity: 0.75;
  }
}

/* ---------------------------------------------------------------------------
   4b. MARKETING — the homepage only. Article pages never use these.

   The signature of this design is the CITATION RAIL: every factual claim on the
   page carries its verified statutory source in monospace micro-type. It is the
   thing a generic SaaS page never does, it suits an audience that appears in
   search beside dir.ca.gov, and it enforces the UPL rule that no claim goes
   unsourced. Only citations verified against our own content are used.
   --------------------------------------------------------------------------- */
@layer components {

  /* ---- Citation rail: the signature ------------------------------------- */
  .cite {
    color: var(--fg-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.01em;
    margin: 0;

    a { color: inherit; text-decoration-color: var(--rule); }
    a:hover { color: var(--accent); }
  }

  .cite--eyebrow {
    color: var(--accent);
    margin-block-end: var(--space-4);
  }

  /* ---- Shared section scaffolding --------------------------------------- */
  .section {
    margin-inline: auto;
    max-width: var(--measure-wide);
    padding-block: var(--space-8);
    padding-inline: var(--space-5);
  }

  /* Full-bleed tint. The band/cta pattern: an outer element carries the
     background edge to edge, an inner .section carries the measure. Do NOT put
     `margin-inline: auto` on the children instead — anything with its own
     narrower max-width (.section__head, .faq) then centres itself inside the
     wide container while its neighbours stay left-aligned. */
  .tint {
    background: var(--bg-subtle);
  }

  .section__head {
    margin-block-end: var(--space-6);
    max-width: 34rem;

    h1 {
      font-family: var(--font-display);
      font-size: var(--text-3xl);
      font-weight: 400;
    }

    h2 {
      font-family: var(--font-display);
      font-size: var(--text-2xl);
      font-weight: 400;   /* Georgia at 400 already reads authoritative */
    }
  }

  .section__sub {
    color: var(--fg-muted);
    margin: var(--space-3) 0 0;
  }

  /* ---- Hero -------------------------------------------------------------- */
  .hero {
    margin-inline: auto;
    max-width: var(--measure-wide);
    padding-block: var(--space-8) var(--space-7);
    padding-inline: var(--space-5);

    h1 {
      font-family: var(--font-display);
      font-size: clamp(2.1rem, 5.5vw, 3.1rem);
      font-weight: 400;
      letter-spacing: -0.015em;
    }

    .lede {
      color: var(--fg-muted);
      font-size: var(--text-lg);
      margin: var(--space-4) 0 var(--space-6);
      max-width: 34rem;
    }
  }

  .hero__accent { color: var(--accent); }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: 0;
  }

  .hero__note {
    color: var(--fg-muted);
    font-size: var(--text-sm);
    margin: var(--space-3) 0 0;
  }

  /* ---- Requirements band ------------------------------------------------- */
  .band {
    background: var(--band);
    color: var(--ink-invert);
  }

  .band__inner {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    margin-inline: auto;
    max-width: var(--measure-wide);
    padding: var(--space-7) var(--space-5);
  }

  .band__label {
    color: var(--band-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    margin: 0 0 var(--space-3);
    text-transform: uppercase;
  }

  .band__body {
    margin: 0 0 var(--space-3);

    strong { color: var(--ochre); font-weight: 600; }
  }

  .band .cite { color: var(--band-muted); }
  .band .cite a:hover { color: var(--ink-invert); }
  /* ---- Template cards ----------------------------------------------------------- */
  .plans {
    display: grid;
    gap: var(--space-5);
    /* Four template cards: two columns on desktop, one on narrow screens.
       auto-fit at 22rem can never reach three across inside --measure-wide. */
    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  }

  .plan {
    border: var(--border);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    padding: var(--space-5);
  }

  .plan__name {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 400;
  }

  .plan__for {
    color: var(--fg-muted);
    font-size: var(--text-sm);
    margin: var(--space-2) 0 var(--space-4);
    min-height: 2.6em;   /* keeps the price line aligned across cards */
  }

  .plan__features {
    flex: 1;
    font-size: var(--text-sm);
    list-style: none;
    margin: 0 0 var(--space-5);
    padding: 0;

    li {
      padding-inline-start: var(--space-5);
      position: relative;
    }

    li + li { margin-block-start: var(--space-2); }

    /* Rule-style tick rather than an emoji check. */
    li::before {
      color: var(--accent);
      content: "\2713";
      inset-inline-start: 0;
      position: absolute;
    }
  }

  /* ---- Buttons ----------------------------------------------------------- */
  .btn {
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font: inherit;
    font-weight: 600;
    padding: 0.7rem 1.2rem;
    text-align: center;
    text-decoration: none;
    transition: filter 120ms ease;

    &:hover { filter: brightness(1.1); }
  }

  .btn--quiet {
    background: transparent;
    border-color: var(--rule);
    color: var(--fg);

    &:hover { background: var(--bg-subtle); border-color: var(--accent); filter: none; }
  }

  /* ---- Capture form ------------------------------------------------------ */
  .capture {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    max-width: 30rem;
  }

  .capture__input {
    background: var(--bg);
    border: var(--border);
    border-radius: var(--radius);
    color: var(--fg);
    flex: 1 1 14rem;
    font: inherit;
    padding: 0.7rem 0.9rem;

    &::placeholder { color: var(--fg-muted); }
    &:focus-visible { border-color: var(--accent); }
  }

  .capture__devnote {
    color: var(--ochre);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    margin: var(--space-2) 0 0;
  }

  .capture__error {
    color: var(--danger);
    font-size: var(--text-sm);
    margin: 0 0 var(--space-3);
  }

  /* The honeypot field. display:none, not .visually-hidden — a screen reader
     announces visually-hidden content, which would invite a real person to fill
     in the trap. A CSS-hidden input still submits its value, which is the whole
     mechanism. */
  .honeypot { display: none; }

  /* ---- Offer page -------------------------------------------------------- */
  /* Request pages (/request/<slug>/) and their thank-you pages. Deliberately
     plain: one job, no competing calls to action. */
  .offer {
    max-width: var(--measure);

    h2 { font-size: var(--text-xl); margin-block-start: var(--space-6); }
    :is(h1, h2) + * { margin-block-start: var(--space-2); }
    > * + * { margin-block-start: var(--space-4); }
    ul { padding-inline-start: var(--space-5); }
    li + li { margin-block-start: var(--space-2); }
  }

  /* ---- Callout ------------------------------------------------------------
     An in-article link to an offer page. This is the ONE class an article is
     allowed to emit, via the attr_list syntax already enabled through the
     markdown "extra" extension:

         **Free IIPP template** — 17 pages […]
         [Request it here](/request/iipp-template/?from=<slug>)
         {: .callout }

     It must be declared AFTER .prose. Both `.prose > * + *` and `.callout` have
     the same specificity, so source order is what settles the margin — which is
     the intended way to win here, rather than escalating to `.prose .callout`.
     -------------------------------------------------------------------------- */
  .callout {
    background: var(--accent-weak);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    margin-block: var(--space-5);
    padding: var(--space-4) var(--space-5);

    a {
      display: inline-block;
      font-weight: 600;
      margin-block-start: var(--space-2);
    }
  }

  /* ---- FAQ --------------------------------------------------------------- */
  .faq {
    max-width: 44rem;

    details {
      border-block-end: var(--border);
      padding-block: var(--space-4);
    }

    summary {
      cursor: pointer;
      font-weight: 600;
      list-style-position: outside;
    }

    p {
      color: var(--fg-muted);
      margin: var(--space-3) 0 0;
      max-width: var(--measure);
    }
  }

  /* ---- Closing CTA ------------------------------------------------------- */
  .cta {
    background: var(--band);
    color: var(--ink-invert);

    h2 {
      font-family: var(--font-display);
      font-size: var(--text-2xl);
      font-weight: 400;
    }
  }

  .cta__inner {
    margin-inline: auto;
    max-width: var(--measure-wide);
    padding: var(--space-7) var(--space-5);
  }

  .cta__sub {
    color: var(--band-muted);
    margin: var(--space-3) 0 var(--space-5);
  }

  .cta .btn--quiet {
    background: transparent;
    border-color: rgb(255 255 255 / 0.4);
    color: var(--ink-invert);

    &:hover { border-color: var(--ink-invert); }
  }
}

/* ---------------------------------------------------------------------------
   5. UTILITIES — single-purpose overrides. Keep this list SHORT; a growing
   utilities layer is a signal that a component is missing.
   --------------------------------------------------------------------------- */
@layer utilities {
  .visually-hidden {
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
}