/* 09 · Footer — spec §4 "09". Dividers (gold hairlines between the 5
   columns) are built for the true 5-across desktop tier (>=1280px) only —
   once the layout restructures into stacked rows below that, replicating an
   equivalent hairline per intermediate arrangement would be a lot of
   bespoke CSS for a detail spec doesn't actually ask for at those tiers, so
   it's dropped there rather than approximated. */
@layer components {
  .site-footer {
    background-color: var(--ink-900);
    padding-top: 48px;
    padding-bottom: 24px;
  }

  .footer__columns {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1.15fr 1.9fr;
    grid-template-areas: "brand shop quicklinks help newsletter";
  }

  .footer__columns > :not(:first-child) {
    padding-left: 48px;
    border-left: 1px solid var(--gold-hairline);
  }

  .footer-brand {
    grid-area: brand;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-brand__emblem {
    display: block;
    width: 60px;
    height: auto;
    aspect-ratio: 400 / 368; /* logo-emblem.png's real ratio — same reasoning as
      .header-drawer__head img in header.css */
  }

  .footer-brand__wordmark {
    margin: 10px 0 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.375rem; /* 22px, spec's own approximate figure — no token sits at this exact size */
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold-400);
  }

  .footer-brand__tagline {
    margin: 4px 0 0;
    font-family: var(--font-label);
    font-size: var(--fs-micro);
    letter-spacing: var(--ls-micro);
    text-transform: uppercase;
    color: var(--text-on-dark-muted);
  }

  .footer-brand__socials {
    display: flex;
    gap: 14px;
    margin-top: 16px;
  }

  .footer-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--gold-400);
    border-radius: 50%;
    color: var(--gold-400);
    transition:
      background-color var(--dur) var(--ease),
      color var(--dur) var(--ease);

    & .icon {
      width: 13px;
      height: 13px;
    }

    &:hover,
    &:focus-visible {
      background-color: var(--gold-400);
      color: var(--ink-900);
    }
  }

  .footer-links--shop {
    grid-area: shop;
  }

  .footer-links--quicklinks {
    grid-area: quicklinks;
  }

  .footer-links--help {
    grid-area: help;
  }

  .footer-links__heading {
    margin: 0;
  }

  .footer-links__list {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
  }

  .footer-links__list li + li {
    margin-top: 11px; /* 25px row pitch: ~14px line + 11px = 25px */
  }

  .footer-links__list a {
    text-decoration: none;
    transition: color var(--dur) var(--ease);

    &:hover,
    &:focus-visible {
      color: var(--gold-400);
    }
  }

  .newsletter {
    grid-area: newsletter;
  }

  .newsletter__heading {
    margin: 0;
  }

  .newsletter__text {
    margin: 8px 0 0;
    max-width: 30ch;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.55;
    color: var(--text-on-dark-muted);
  }

  .newsletter__form {
    margin-top: 18px;
  }

  .newsletter__field {
    display: flex;
  }

  .newsletter__input {
    flex: 1;
    min-width: 0;
    height: 40px;
    padding-left: 16px;
    background: transparent;
    border: 1px solid var(--gold-400);
    border-right: none;
    color: var(--text-on-dark);
    font-family: var(--font-body);
    font-size: var(--fs-body);

    &::placeholder {
      color: var(--text-on-dark-muted);
    }
  }

  .newsletter__submit {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--gold-600);
    color: var(--ink-900);
    border: none;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease);

    &:hover,
    &:focus-visible {
      background-color: var(--gold-500);
    }
  }

  .newsletter__message {
    margin: 10px 0 0;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    color: var(--text-on-dark-muted);
    min-height: 1em;

    &:empty {
      display: none;
    }

    & .icon {
      flex: none;
    }

    &[data-state="success"] .icon {
      color: var(--gold-400);
    }
  }

  .footer__bottom {
    margin-top: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
  }

  /* Tailwind's preflight sets svg { display: block } globally, which is
     right for icons used as flex/grid items (everywhere else in this
     project) but forces a line break before and after an icon sitting
     inline in running text, like this one — "Handcrafted with [icon] in
     Bengaluru, India" was wrapping onto 3 lines because of it. */
  .footer__bottom .icon {
    display: inline;
    color: var(--gold-400);
  }

  /* ---- Responsive --------------------------------------------------------
     Spec gives 3 distinct restructurings (not the site's usual single
     desktop/tablet/mobile split), so each tier gets its own
     grid-template-areas rather than reusing one pattern. */

  /* 1024–1279px: brand full-width on top; the 3 link columns + newsletter below.
     Dividers are dropped for every column here, not just brand — the desktop
     rule targets ":not(:first-child)" by DOM order, so without this reset
     every column would keep carrying it even once "shop" becomes the first
     item in its own new row, leaving an orphaned divider with nothing to its
     left to separate it from. Matches the base rule's own selector (same
     specificity) rather than "> *", which is LOWER specificity and lost to
     the base rule regardless of source order — the first version of this
     fix looked right in the CSS but the divider was still rendering. */
  @media (max-width: 1279.98px) {
    .footer__columns {
      grid-template-columns: 1fr 1fr 1.15fr 1.9fr;
      grid-template-areas:
        "brand brand brand brand"
        "shop quicklinks help newsletter";
      row-gap: var(--space-7);
    }

    .footer__columns > :not(:first-child) {
      padding-left: 0;
      border-left: none;
    }
  }

  /* 768–1023px: brand, then the 3 link columns in a row, then newsletter full-width.
     Same specificity note as the tier above: this must match the base
     rule's ":not(:first-child)" selector, not a lower-specificity one, or
     the reset silently loses regardless of source order. */
  @media (min-width: 768px) and (max-width: 1023.98px) {
    .footer__columns {
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-areas:
        "brand brand brand"
        "shop quicklinks help"
        "newsletter newsletter newsletter";
    }

    .footer__columns > :not(:first-child) {
      padding-left: 0;
      border-left: none;
    }

    .newsletter__text {
      max-width: none;
    }
  }

  /* <768px: centred brand; link groups as a 2-column grid (help spans both,
     spec offers "2 columns" as the simpler alternative to accordions);
     newsletter full-width; bottom row stacks, centred. */
  @media (max-width: 767.98px) {
    .footer__columns {
      grid-template-columns: 1fr 1fr;
      grid-template-areas:
        "brand brand"
        "shop quicklinks"
        "help help"
        "newsletter newsletter";
      row-gap: var(--space-6);
    }

    .footer__columns > :not(:first-child) {
      padding-left: 0;
      border-left: none;
    }

    .newsletter__text {
      max-width: none;
    }

    .footer__bottom {
      justify-content: center;
      text-align: center;
    }
  }

  /* Touch-target floor (components.css does this for .btn/.arrow-btn; these
     two icon-only controls are footer-specific and need the same treatment —
     spec's 26px social circles and 40px newsletter square stay exact on
     desktop, same pattern as everywhere else this rule appears). */
  @media (pointer: coarse) {
    .footer-social {
      width: 44px;
      height: 44px;
    }

    .newsletter__input,
    .newsletter__submit {
      height: 44px;
    }

    .newsletter__submit {
      width: 44px;
    }
  }
}