/* ============ Wadicos · Footer component — V12 ============ *
 * All CSS that styles the global site footer lives here.
 *
 * V12 (premium 5-column editorial layout): a single grid of
 * five columns replaces the prior masthead + 4-col + payments
 * stack. Column 1 carries the maison voice (wordmark, tagline,
 * lede, social row); columns 2–4 are navigation; column 5 is
 * the contact strip (address, hours, telephone, WhatsApp pill).
 * Below the grid a mega Fraunces signature mark closes the
 * page, followed by the legal bottom row.
 *
 * Anatomy:
 *   .footer                         — surface, ember ground
 *   .footer__container              — inner rhythm wrapper
 *   .footer__cols                   — 5-column grid
 *     .footer__col                  — generic column
 *     .footer__col--identity        — col 1 modifier
 *       .footer__wordmark-link      — wraps the wordmark
 *       .footer__wordmark           — display serif maison name
 *       .footer__tagline            — uppercase champagne
 *       .footer__lede               — short maison paragraph
 *       .footer__social             — row of social pills
 *       .footer__social-link        — single pill
 *     .footer__heading              — col 2-5 eyebrow heading
 *     .footer__list                 — link stack (col 2-4)
 *     .footer__link                 — foot link
 *     .footer__col--contact         — col 5 modifier
 *       .footer__address            — postal stack
 *       .footer__contact-list       — dl (phone + hours)
 *       .footer__contact-row        — one row in the dl
 *       .footer__contact-label      — uppercase muted dt
 *       .footer__contact-value      — body dd
 *       .footer__whatsapp           — cream pill CTA
 *   .footer__signature              — mega Fraunces wordmark
 *   .footer__signature-mark         — the glyph itself
 *   .footer__bottom                 — © + legal nav
 *
 * Token-only values — no raw colors, font-sizes, spacing,
 * radii, shadows, durations.
 * =========================================================== */

@layer components {
  /* ---- Surface ----------------------------------- *
   * Ember radial gradient anchored at the bottom of
   * the footer reads as the maison's closing wash —
   * same token the home subscribe section uses.
   * Hairline rule above separates the footer from
   * the last page section. */
  .footer {
    background: var(--gradient-ember);
    color: var(--color-ink-soft);
    padding-block: var(--space-9) var(--space-6);
    border-block-start: 1px solid var(--color-line-cream);
    position: relative;
    isolation: isolate;
  }

  /* Inner rhythm wrapper. Vertical air between blocks
     comes from one consistent gap rather than ad-hoc
     margins on each block. */
  .footer__container {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
  }

  /* ============================================================
     §A · 5-column grid
     ============================================================ *
     Responsive ladder:
       <48em        : single column stack
       48em–80em    : 2 columns; identity + contact span both
       80em+        : 5 columns, identity wider, contact wider
                      than the 3 nav columns
     The fr ratios at desktop (1.5 / 1 / 1 / 1 / 1.3) carve
     more room for the identity column (which holds the
     wordmark + lede paragraph) and the contact column (which
     holds the WhatsApp pill button) without starving the
     three nav columns. */
  .footer__cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }
  @media (min-width: 48em) {
    .footer__cols {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-7);
    }
    .footer__col--identity,
    .footer__col--contact {
      grid-column: 1 / -1;
    }
  }
  @media (min-width: 80em) {
    .footer__cols {
      grid-template-columns: 1.5fr 1fr 1fr 1fr 1.3fr;
      gap: var(--space-6);
    }
    .footer__col--identity,
    .footer__col--contact {
      grid-column: auto;
    }
    /* Hairline vertical dividers between adjacent columns at
       desktop only. Cream-tinted hairline reads as a quiet
       editorial rule on the ember ground. */
    .footer__cols .footer__col + .footer__col {
      padding-inline-start: var(--space-6);
      border-inline-start: 1px solid var(--color-line-cream);
    }
  }

  .footer__col {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-inline-size: 0;
  }

  /* ============================================================
     Col 1 · Identity
     ============================================================ */
  .footer__col--identity {
    gap: var(--space-5);
  }
  .footer__wordmark-link {
    display: inline-block;
    color: inherit;
    text-decoration: none;
    line-height: var(--lh-display);
  }
  .footer__wordmark {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2.75rem, 1.75rem + 4vw, 4.5rem);
    letter-spacing: var(--tracking-display);
    line-height: var(--lh-display);
    color: var(--color-ink);
  }
  .footer__tagline {
    font-family: var(--font-body);
    font-size: var(--fs-eyebrow);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--color-accent-champagne);
    margin: 0;
  }
  .footer__lede {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-ink-soft);
    margin: 0;
    max-inline-size: 38ch;
  }

  /* ---- Social row (inside identity column) ------- */
  .footer__social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: 0;
    margin-block-start: var(--space-2);
    padding: 0;
    list-style: none;
  }
  .footer__social-link {
    /* WCAG 2.5.5: 2.75rem = 44 px minimum touch target. */
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-line-cream);
    color: var(--color-ink);
    background-color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
      border-color var(--dur-fast) var(--ease-out),
      color var(--dur-fast) var(--ease-out),
      background-color var(--dur-fast) var(--ease-out),
      transform var(--dur-fast) var(--ease-out);
  }
  @media (hover: hover) {
    .footer__social-link:hover {
      border-color: var(--color-accent-champagne);
      color: var(--color-accent-champagne);
      transform: translateY(-2px);
    }
  }
  .footer__social-link:focus-visible {
    border-color: var(--color-accent-champagne);
    color: var(--color-accent-champagne);
    outline: 2px solid var(--color-accent-champagne);
    outline-offset: 3px;
  }

  /* ============================================================
     Cols 2–5 · Heading + link list
     ============================================================ */
  .footer__heading {
    font-family: var(--font-body);
    font-size: var(--fs-eyebrow);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--color-accent-champagne);
    margin: 0;
  }
  .footer__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .footer__link {
    color: var(--color-ink-soft);
    font-family: var(--font-body);
    font-size: var(--fs-small);
    line-height: var(--lh-tight);
    transition: color var(--dur-fast) var(--ease-out);
  }
  @media (hover: hover) {
    .footer__link:hover { color: var(--color-accent-champagne); }
  }
  .footer__link:focus-visible {
    color: var(--color-accent-champagne);
    outline: 2px solid var(--color-accent-champagne);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
  }

  /* ============================================================
     Col 5 · Contact
     ============================================================ */
  .footer__col--contact {
    gap: var(--space-4);
  }
  .footer__address {
    font-family: var(--font-body);
    font-style: normal;
    font-size: var(--fs-small);
    line-height: var(--lh-body);
    color: var(--color-ink);
    margin: 0;
  }
  .footer__contact-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
  }
  .footer__contact-row {
    display: grid;
    grid-template-columns: 6rem 1fr;
    gap: var(--space-3);
    align-items: baseline;
    padding-block: var(--space-2);
    border-block-start: 1px solid var(--color-line-cream);
  }
  .footer__contact-row:first-child {
    border-block-start: 0;
    padding-block-start: 0;
  }
  .footer__contact-label {
    font-family: var(--font-body);
    font-size: var(--fs-eyebrow);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--color-ink-muted);
    margin: 0;
  }
  .footer__contact-value {
    font-family: var(--font-body);
    font-size: var(--fs-small);
    color: var(--color-ink);
    margin: 0;
  }
  .footer__whatsapp {
    align-self: flex-start;
    margin-block-start: var(--space-3);
  }

  /* ============================================================
     §B · Bottom row — © + legal links
     ============================================================ */
  .footer__bottom {
    padding-block-start: var(--space-5);
    border-block-start: 1px solid var(--color-line-cream);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    font-family: var(--font-body);
    font-size: var(--fs-small);
    color: var(--color-ink-muted);
  }
  .footer__copy {
    margin: 0;
  }
  .footer__legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
  }
  /* Mid-dot between adjacent legal links — markup stays
     clean; the typographic separator comes from CSS. */
  .footer__legal-links .footer__link + .footer__link::before {
    content: "·";
    color: var(--color-ink-muted);
    margin-inline-end: var(--space-4);
    margin-inline-start: calc(var(--space-4) * -1);
  }
}