/* ========================================================================
   footer.css -- ScribeHold site footer component

   Layer 4 of the modular CSS bundle. Consumes tokens from tokens.css and
   sits alongside the other component CSS files. All color, type, spacing,
   radius, and border values come from tokens.css via var(...). No
   hard-coded hex values in this file.

   Bundle order: tokens -> base -> layout -> components/* -> pages/*
   ------------------------------------------------------------------------

   Expected HTML structure (authored by Task 21 in _Layout.cshtml):

       <footer class="site-footer">
           <div class="container site-footer__inner">

               <div class="site-footer__brand">
                   <a class="site-footer__wordmark" href="/">ScribeHold</a>
                   <p class="site-footer__tagline">The record, kept.</p>
               </div>

               <nav class="site-footer__nav" aria-label="Footer">
                   <h2 class="site-footer__nav-heading">Site</h2>
                   <ul class="site-footer__nav-list">
                       <li><a href="/">Home</a></li>
                       <li><a href="/pricing">Pricing</a></li>
                       <li><a href="/support">Support</a></li>
                       <li><a href="/for/divorce-custody">Divorce &amp; Custody</a></li>
                       <li><a href="/for/harassment">Harassment</a></li>
                       <li><a href="/for/attorneys">Attorneys</a></li>
                   </ul>
               </nav>

               <div class="site-footer__legal">
                   <h2 class="site-footer__nav-heading">Legal</h2>
                   <ul class="site-footer__nav-list">
                       <li><a href="/privacy">Privacy</a></li>
                       <li><a href="/terms">Terms</a></li>
                   </ul>
               </div>

               <p class="site-footer__copyright">
                   &copy; 2026 ScribeHold. Your messages stay on your PC.
               </p>

           </div>
       </footer>

   Layout contract:
     - Mobile (< 768px): single-column stack -- brand, nav, legal, then the
       copyright row in order.
     - Desktop (>= 768px): three-column CSS grid -- brand | nav | legal --
       with the copyright spanning all columns as a full-width bottom row
       that starts at the left margin.
     - Tagline "The record, kept." renders in the brand column under the
       wordmark and is the only italic text in the footer.

   Breakpoints (literal -- @media does not support var(...)):
     md: 768px
   ======================================================================== */

/* ------------------------------------------------------------------------
   1. Footer shell -- separates the footer from page content with a top
      rule, switches to the warm card surface, and uses the standard
      footer typography scale (slightly smaller than body).
   ------------------------------------------------------------------------ */

.site-footer {
    margin-top: var(--space-12);
    padding-block: var(--space-6);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-muted);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
}

/* ------------------------------------------------------------------------
   2. Inner grid -- single column on mobile, three columns at >= md.
      The .container class on the same element supplies max-width and
      horizontal padding; this component owns only the column layout.
   ------------------------------------------------------------------------ */

.site-footer__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    align-items: start;
}

@media (min-width: 768px) {
    .site-footer__inner {
        grid-template-columns: 1.25fr 1fr 1fr;
        gap: var(--space-10);
    }
}

/* ------------------------------------------------------------------------
   3. Brand column -- wordmark + tagline.
   ------------------------------------------------------------------------ */

.site-footer__brand {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.site-footer__wordmark {
    font-family: var(--font-family-base);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-wide);
    color: var(--color-ink);
    text-decoration: none;
}

.site-footer__wordmark:hover {
    color: var(--color-accent-ink);
    text-decoration: none;
}

/* Tagline "The record, kept." -- the canonical brand tagline. Rendered
   in serif italic to echo the archival-register voice; sits one step
   smaller than body, in the muted ink. */
.site-footer__tagline {
    margin: 0;
    font-family: var(--font-family-serif);
    font-style: italic;
    font-size: var(--font-size-sm);
    color: var(--color-muted);
    letter-spacing: var(--letter-spacing-normal);
}

/* ------------------------------------------------------------------------
   4. Nav + legal columns -- shared heading + list typography. The two
      columns share visual treatment; only the content differs.
   ------------------------------------------------------------------------ */

.site-footer__nav,
.site-footer__legal {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.site-footer__nav-heading {
    margin: 0;
    font-family: var(--font-family-base);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    color: var(--color-ink);
}

.site-footer__nav-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.site-footer__nav-list li + li {
    /* Override base.css `li + li { margin-top: var(--space-1) }` so the
       gap utility above is the single source of vertical rhythm here. */
    margin-top: 0;
}

/* The Site nav carries the most links; at >= md flow them into two
   shorter columns so the footer reads as a balanced row of columns
   rather than one tall stack. Legal keeps its short single column. */
@media (min-width: 768px) {
    .site-footer__nav .site-footer__nav-list {
        display: grid;
        grid-template-columns: repeat(2, auto);
        column-gap: var(--space-8);
        row-gap: var(--space-2);
    }
}

.site-footer__nav-list a {
    color: var(--color-muted);
    text-decoration: none;
}

.site-footer__nav-list a:hover {
    color: var(--color-ink);
    text-decoration: underline;
}

/* ------------------------------------------------------------------------
   5. Copyright line -- a full-width bottom row that spans every grid column
      and starts at the footer's left margin (aligned with the brand block),
      separated from the columns above by a hairline rule.
   ------------------------------------------------------------------------ */

.site-footer__copyright {
    grid-column: 1 / -1;
    margin: 0;
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
    font-size: var(--font-size-xs);
    color: var(--color-muted);
}