/**
 * Fluid Framework - Footer Sections
 * @layer components
 *
 * Page-level footer layouts. Three variants via data-type attribute.
 * Uses <footer> element with <nav> for link groups.
 *
 * Usage:
 *   <!-- Simple (default) -->
 *   <footer class="site-footer">
 *     <div class="site-footer__inner">
 *       <p class="site-footer__copyright">&copy; 2026 Company</p>
 *       <nav class="site-footer__links" aria-label="Footer">
 *         <a href="#">Privacy</a>
 *         <a href="#">Terms</a>
 *         <a href="#">Contact</a>
 *       </nav>
 *     </div>
 *   </footer>
 *
 *   <!-- Standard multi-column -->
 *   <footer class="site-footer" data-type="standard">
 *     <div class="site-footer__grid">
 *       <div class="site-footer__column">
 *         <h3 class="site-footer__title">Company</h3>
 *         <nav class="site-footer__links" aria-label="Company links">
 *           <a href="#">About</a>
 *           <a href="#">Careers</a>
 *         </nav>
 *       </div>
 *       <div class="site-footer__column">
 *         <h3 class="site-footer__title">Product</h3>
 *         <nav class="site-footer__links" aria-label="Product links">
 *           <a href="#">Features</a>
 *           <a href="#">Pricing</a>
 *         </nav>
 *       </div>
 *     </div>
 *     <div class="site-footer__bottom">
 *       <p class="site-footer__copyright">&copy; 2026 Company</p>
 *     </div>
 *   </footer>
 *
 *   <!-- Mega footer -->
 *   <footer class="site-footer" data-type="mega">
 *     <div class="site-footer__brand">
 *       <h2>Brand Name</h2>
 *       <p>A short tagline about the company.</p>
 *       <div class="site-footer__social">
 *         <a href="#" aria-label="Twitter"><svg>...</svg></a>
 *         <a href="#" aria-label="GitHub"><svg>...</svg></a>
 *       </div>
 *     </div>
 *     <div class="site-footer__grid">
 *       <!-- columns -->
 *     </div>
 *     <div class="site-footer__bottom">
 *       <p class="site-footer__copyright">&copy; 2026 Company</p>
 *     </div>
 *   </footer>
 */

@layer components {

  /* ========================================
     BASE FOOTER
     Its own grammar, not another tinted band: the page colour under a
     thick ink rule (a tinted section above it no longer runs into it),
     the brand in the heading face like the nav's. Content on the
     .container edges. Links in the text colour, no underline at rest;
     hover and aria-current underline them.
     ======================================== */

  .site-footer {
    --_footer-border: var(--color-border);
    --_footer-padding: var(--space-xl);

    background-color: var(--_footer-bg, var(--color-background));
    color: var(--color-text-muted);
    padding-block: var(--_footer-padding);
    padding-inline: max(var(--page-edge), (100% - var(--container-content)) / 2);
    border-block-start: var(--border-width-thick) solid var(--_footer-rule, var(--color-border-strong));
    font-size: var(--step--1);
  }

  .site-footer :is(nav:not(.nav), .site-footer__links) a { color: var(--color-text); }

  .site-footer a:not(.nav *) {
    color: inherit;
    text-decoration-line: none;
  }

  .site-footer a:not(.nav *):is(:hover, [aria-current]) {
    color: var(--color-text);
    text-decoration-line: underline;
  }

  .site-footer a:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-focus);
    outline-offset: 2px;
  }

  /* Simple (default): copyright + a row of links */
  .site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-s) var(--space-m);
  }

  .site-footer__copyright { margin: 0; }

  .site-footer:not([data-type]) .site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s) var(--space-m);
  }

  /* Standard and mega: columns over a bottom bar */
  .site-footer:is([data-type="standard"], [data-type="mega"]) { --_footer-padding: var(--space-2xl) var(--space-xl); }

  .site-footer__grid {
    display: grid;
    gap: var(--space-l) var(--space-m);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  }

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

  .site-footer__title {
    font: calc(600 + var(--_dark-weight)) var(--step--2) / 1.2 var(--font-body);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--color-text);
    margin: 0;
  }

  .site-footer__column .site-footer__links {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  .site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-s) var(--space-m);
    margin-block-start: var(--space-xl);
    padding-block-start: var(--space-m);
    border-block-start: var(--border-width) solid var(--_footer-border);
  }

  .site-footer__brand:not(.site-footer__column) { margin-block-end: var(--space-xl); }

  /* The brand, as the nav sets it (a column can be the brand too:
     <div class="site-footer__column site-footer__brand">). */
  .site-footer__brand :is(h2, .site-footer__title) {
    font: calc(500 + var(--_dark-weight)) var(--step-1) / 1.2 var(--font-heading);
    text-transform: none;
    letter-spacing: var(--tracking-heading);
    color: var(--color-text);
    margin: 0; margin-block-end: var(--space-xs);
  }

  .site-footer__brand p {
    color: var(--color-text-muted);
    margin: 0; margin-block-end: var(--space-s);
    max-inline-size: 28rem;
  }

  .site-footer__social {
    display: flex;
    gap: var(--space-1);
    margin-inline-start: -0.75rem;
  }

  .site-footer__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
  }

  .site-footer__social svg {
    inline-size: 1.125rem;
    block-size: 1.125rem;
  }

  /* Dark: a dark band. Its roles re-resolve dark (tokens.css role scope). */
  .site-footer[data-dark] {
    --_footer-bg: var(--band-inverse);
    --_footer-rule: transparent;
  }
}