@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
@layer cinder.components {
  .cinder-footer {
    container-type: inline-size;
    container-name: cinder-footer;
    display: grid;
    /*
     * CIN-124: this is the boundary between .cinder-footer__main (brand +
     * link groups, related content) and .cinder-footer__legal (unrelated
     * legal/copyright row). It must read as MORE separated than any
     * related-sibling gap inside .cinder-footer__main, so it can't reuse
     * --cinder-space-6 -- that token is also .cinder-footer__main's own
     * brand-to-groups gap (see below), which would make two different
     * relationships (related vs. unrelated) look identical. space-8 keeps
     * the hierarchy strictly increasing: list 0.5rem < groups 1rem <
     * main 1.5rem < this gap 2rem, reinforced by the border-top + padding-top
     * on `.cinder-footer__main + .cinder-footer__legal` -- scoped to that
     * boundary rather than to the legal row itself, since a legal-only footer
     * has no main region to be separated from.
     */
    gap: var(--cinder-space-8);
    padding: var(--cinder-space-6) var(--cinder-space-4);
    border-top: 1px solid var(--cinder-border-muted);
    background: var(--cinder-surface);
  }

  .cinder-footer__main {
    display: grid;
    gap: var(--cinder-space-6);
    grid-template-columns: minmax(0, 1fr);
  }

  .cinder-footer__brand {
    display: grid;
    gap: var(--cinder-space-2);
    max-width: 40ch;
  }

  .cinder-footer__brand-title {
    margin: 0;
    font-family: var(--cinder-font-sans);
    font-size: var(--cinder-text-lg);
    font-weight: var(--cinder-font-semibold);
    line-height: var(--cinder-leading-snug);
  }

  .cinder-footer__brand-description {
    margin: 0;
  }

  .cinder-footer__brand-title,
  .cinder-footer__brand-description,
  .cinder-footer__group-title {
    overflow-wrap: anywhere;
  }

  .cinder-footer__groups {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cinder-space-4);
  }

  .cinder-footer__groups > nav {
    flex: 1 1 10rem;
    /*
     * CIN-110: revisited empirically, not left unmeasured. Links render at
     * --cinder-text-sm via cinder-_value-text (~0.8125rem / 13px), which at
     * typical sans-serif advance widths (~0.5-0.55em/char) fits roughly
     * 26-28 characters per line inside a 12rem (192px) column.
     *
     * Checked against every label actually shipped for this component
     * (footer.examples.json, footer.test.ts, the playground example):
     * "Features", "Pricing", "About", "Careers", "Docs", "Privacy",
     * "Terms" -- all 4-8 characters, nowhere near the wrap threshold.
     *
     * Checked against realistic longer labels real footers use but this
     * component's fixtures don't yet exercise: "Terms of Service" (16
     * chars) and "Cookie Preferences" (18 chars) fit on one line;
     * "Accessibility Statement" (23 chars) still fits on one line at the
     * ~26-28 char/line budget. Longer multi-word labels beyond that wrap
     * at a word boundary (normal CSS word-wrap behavior), not mid-word --
     * only a single unbroken token longer than the column width forces a
     * character-level break, and that's already covered by
     * .cinder-footer__link's overflow-wrap: anywhere plus the dedicated
     * long-label Playwright case in footer-layout.playwright.ts.
     *
     * Conclusion: 12rem does not force awkward mid-phrase wrapping for
     * any representative or realistic label. Kept as-is.
     */
    max-inline-size: 12rem;
  }

  .cinder-footer__group-title {
    margin: 0 0 var(--cinder-space-2);
  }

  .cinder-footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--cinder-space-2);
  }

  .cinder-footer__link {
    text-decoration: none;
    overflow-wrap: anywhere;
  }

  @media (hover: hover) {
    .cinder-footer__link:hover {
      color: var(--cinder-text-default);
      text-decoration: underline;
    }
  }

  .cinder-footer__link:focus-visible {
    /* cinder-focus-ring-owner: parent */
    outline: none;
    box-shadow: 0 0 0 var(--cinder-ring-width) var(--cinder-ring-color);
    border-radius: var(--cinder-radius-sm);
  }

  @media (forced-colors: active) {
    .cinder-footer__link:focus-visible {
      outline: var(--cinder-ring-width) solid ButtonText;
      outline-offset: var(--cinder-ring-width);
      box-shadow: none;
    }
  }

  .cinder-footer__legal {
    display: flex;
    gap: var(--cinder-space-4);
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    color: var(--cinder-text-muted);
    font-size: var(--cinder-text-sm);
  }

  /*
   * The rule ABOVE the legal row marks the main-to-legal boundary, so it belongs to
   * that boundary rather than to the legal row itself.
   *
   * `.cinder-footer__main` is now omitted entirely when a consumer supplies only
   * `copyright`/`legalLinks` — a valid combination. Left on `.cinder-footer__legal`
   * unconditionally, this border drew a divider above the ONLY content in that footer,
   * doubling up with the root's own top border for no reason: a separator separating
   * nothing.
   *
   * The adjacent-sibling selector ties it to the boundary it actually describes.
   */
  .cinder-footer__main + .cinder-footer__legal {
    padding-top: var(--cinder-space-2);
    border-top: 1px solid var(--cinder-border-muted);
  }

  .cinder-footer__legal-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
    gap: var(--cinder-space-3);
    flex-wrap: wrap;
  }

  @container cinder-footer (min-width: 48rem) {
    .cinder-footer__main {
      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
      align-items: start;
    }

    .cinder-footer__main > :only-child {
      grid-column: 1 / -1;
    }
  }
}