/*
 * Éclore Aesthetics — Site footer (VISUAL-DESIGN §5.11)
 * ─────────────────────────────────────────────────────────────────────────────
 * Ink ground, Bone text. Familjen wordmark + a quiet tagline, then
 * editorial columns over a full NAP. Column heads are Familjen caps in a
 * Bone/Ink mix (~7:1 on Ink — clears AA, §5.11). Links are Inter Bone
 * with a Terracotta underline reveal — the underline is decorative, the
 * text stays Bone (~13.5:1). A single low-opacity Bone hairline
 * divides the link rows from the fine print. The compound focus ring (Bone
 * on this dark ground) is owned by global.css.
 */

/* Vertical rhythm (uiux-pro-max pass, 2026-07-23): section 64–112 / block 40 /
   element 24 — the old section-y (96–192) + 96px gaps left ~300px of trapped
   whitespace and a ~980px footer. */
.site-footer {
  background: var(--color-bg-inverse); /* Ink */
  color: var(--color-text-inverse);    /* Bone */
  padding-block: clamp(var(--space-xl), 8vh, 7rem) var(--space-lg);
}

/* (The giant wordmark + connect statement moved to the homepage cl-close
   section — clinique.css §10 — owner 2026-07-23. The footer stays lean:
   grid → fine print.) */

/* ─── Grid ───────────────────────────────────────────────────────────────────── */

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

@media (min-width: 768px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    /* 64px, not 96 — the old gaps read as voids between half-empty columns. */
    gap: var(--space-xl);
  }
}

/* ─── Brand + NAP ────────────────────────────────────────────────────────────── */

.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
}

.footer-logo__mark {
  display: block;
  width: auto;
  /* 68px — deliberately taller than the ~59px two-line text block: the mark's
     thin compound petals read optically smaller than their bounding box, so it
     overshoots to LOOK equal (owner, 2026-07-23). */
  height: 4.25rem;
  flex-shrink: 0;
}

/* Stacked two-face lockup (matches the header): "Éclore" over "Aesthetics".
   Sized UP (owner, 2026-07-23) so the brand clearly outweighs the 20px
   tagline beneath it — the column reads lockup > tagline > email. */
.footer-logo__text {
  --footer-logo-size: clamp(1.5rem, 2.6vw, 1.75rem);
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  color: var(--color-text-inverse);
}

.footer-logo__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--footer-logo-size);
  line-height: 1.05;
  letter-spacing: 0.12em; /* tracked toward the width of "Aesthetics" beneath */
  text-indent: 0.12em;
}

.footer-logo__suffix {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  font-size: var(--footer-logo-size);
  line-height: 1.05;
  letter-spacing: 0;
}

.footer-tagline {
  margin: var(--space-sm) 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--color-text-inverse);
}

/* The house accent word — Fraunces italic, colour inherited (Bone). */
.footer-tagline em {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: 1.05em;
}

.footer-nap {
  margin-top: var(--space-md);
  font-style: normal; /* reset UA address italic */
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.footer-nap__name {
  margin: 0;
  font-weight: 700;
}

.footer-nap a {
  display: inline-block;
  width: fit-content;
}

/* ─── Columns ────────────────────────────────────────────────────────────────── */

.footer-col__heading {
  margin: 0 0 var(--space-md);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1.2;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  /* Bone / Ink mix — clears AA on Ink (~7:1), keeps the head quiet (§5.11) */
  color: color-mix(in srgb, var(--color-bone) 70%, var(--color-ink));
}

.footer-nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* ─── Links (Bone text, Terracotta underline reveal) ───────────────────── */

.footer-nav__list a,
.footer-nap a {
  position: relative;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text-inverse);
  text-decoration: none;
}

.footer-nav__list a::after,
.footer-nap a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--color-terracotta);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-short) var(--ease-reveal);
}

.footer-nav__list a:hover::after,
.footer-nav__list a:focus-visible::after,
.footer-nap a:hover::after,
.footer-nap a:focus-visible::after {
  transform: scaleX(1);
}

/* ─── Fine print bar ─────────────────────────────────────────────────────────── */

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  /* Hairline restored above the fine print — it now follows the giant
     connect statement, not the wordmark. */
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid color-mix(in srgb, var(--color-bone) 18%, transparent);
}

.footer-copyright {
  margin: 0;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--color-bone) 78%, transparent);
}

/* Legal links + Cookie Preferences as ONE wrapping row — the control reads
   as the row's last link and can never orphan-wrap on its own line. */
.footer-bottom__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}

/* Final line — copyright left, studio credit right, the footer's last row. */
.footer-final {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-md);
  margin-top: var(--space-md);
}

.footer-legal__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-legal__list a {
  position: relative;
  font-size: 0.8125rem;
  color: color-mix(in srgb, var(--color-bone) 78%, transparent);
  text-decoration: none;
  transition: color var(--dur-micro) var(--ease-standard);
}

.footer-legal__list a:hover,
.footer-legal__list a:focus-visible {
  color: var(--color-text-inverse);
}

/* Cookie Preferences — re-opens the consent banner (cookie-consent.js).
   A bare button dressed as a legal-bar link. */
.footer-cookie-prefs {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.8125rem;
  color: color-mix(in srgb, var(--color-bone) 78%, transparent);
  transition: color var(--dur-micro) var(--ease-standard);
}

.footer-cookie-prefs:hover,
.footer-cookie-prefs:focus-visible {
  color: var(--color-text-inverse);
}

/* Colophon — discreet studio credit, sharing the final line with the
   copyright (right-hand side via .footer-final). */
.footer-colophon {
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--color-bone) 55%, transparent);
}

.footer-colophon a {
  color: color-mix(in srgb, var(--color-bone) 78%, transparent);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--dur-micro) var(--ease-standard);
}

.footer-colophon a:hover,
.footer-colophon a:focus-visible {
  color: var(--color-text-inverse);
}

/* ─── Social row — Follow links under the NAP (owner, 2026-07-23) ─────────────
 * All channels from eclore_get_socials(): tracked caps labels in Bone,
 * dot-separated, Terracotta-underline on hover (announcement-link pattern). */

.footer-social {
  margin-top: var(--space-md);
}

.footer-social__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-social__list li {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* Knocked-back Bone dot between channels (house separator). */
.footer-social__list li + li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-bone) 45%, transparent);
}

.footer-social__list a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem; /* 13px caps label */
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  color: color-mix(in srgb, var(--color-bone) 82%, transparent);
  transition: color var(--dur-micro) var(--ease-standard);
}

.footer-social__list a:hover,
.footer-social__list a:focus-visible {
  color: var(--color-bone);
  text-decoration: underline;
  text-decoration-color: var(--color-terracotta);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* ── Icon variant — inline SVG brand marks (see inc/social-icons.php) ──────────
 * Square Font Awesome marks in `currentColor`: knocked-back Bone at rest, warming
 * to Terracotta on hover — the same accent language as the text links. The link
 * carries a 44×44 min touch target (skill: touch-target-size) while the glyph
 * stays a restrained 22px; the house dot separators are dropped for this row. */
/* Row rhythm (owner, 2026-07-23): the 44px hit boxes already hold 11px of air
   around each 22px glyph, so the flex gap collapses to 0 — glyphs sit an even
   22px apart — and the row shifts -11px so the FIRST glyph aligns flush with
   the text edge above while every target stays a full 44×44. */
.footer-social__list:has(.footer-social__link--icon) { gap: 0; margin-left: -11px; }
.footer-social__list li:has(.footer-social__link--icon)::before { content: none; }

.footer-social__link--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: color-mix(in srgb, var(--color-bone) 82%, transparent);
}
/* Selector carries the list class + element so it outweighs the generic
   `.footer-social__list a:hover` bone rule above — hover/focus goes Terracotta. */
.footer-social__list a.footer-social__link--icon:hover,
.footer-social__list a.footer-social__link--icon:focus-visible {
  color: var(--color-terracotta);
  text-decoration: none;
}
.footer-social__icon {
  display: block;
  width: 22px;
  height: 22px;
  transition: transform var(--dur-short) var(--ease-reveal);
}
@media (prefers-reduced-motion: no-preference) {
  .footer-social__link--icon:hover .footer-social__icon,
  .footer-social__link--icon:focus-visible .footer-social__icon { transform: translateY(-2px); }
}

/* ── Notebook baseline grid (owner, 2026-07-23) ────────────────────────────────
 * Every text row across all four columns sits on one shared --footer-row pitch
 * from the same origin — like ruled paper, the lines run continuously across
 * the grid. The excluded hierarchy (lockup = 2 rows, tagline = 1 row) occupies
 * clean multiples of the pitch so everything beneath stays on the lines:
 *   rows:   1        2        3        4        5        6        7
 *   brand:  lockup   lockup   tagline  (air)    address  email    phone
 *   cols:   heading  link 1   link 2   link 3   link 4   link 5   link 6
 * Row height also replaces the old per-item gaps — that's what read as
 * "too spread apart": 24px lines floating in 12px gaps instead of even rows. */

.footer-grid { --footer-row: 2.25rem; } /* 36px ruled line */

/* Brand column — excluded hierarchy sized to whole rows. display:flex (not
   inline-flex): the inline line-box added ~6px of baseline descender under the
   lockup and knocked every NAP row 6px off the ruled lines. */
.footer-logo    { display: flex; min-height: calc(var(--footer-row) * 2); align-items: center; }
.footer-tagline { margin: 0; min-height: var(--footer-row);
                  display: flex; align-items: center; }

.footer-nap { margin-top: var(--footer-row); /* one blank ruled line */ gap: 0; }
/* Rows via margins, NOT stretched boxes: keeping the anchor text-sized means
   the terracotta underline (::after on the anchor's bottom edge) hugs the
   text instead of sitting at the bottom of a 36px row. Flex-column margins
   don't collapse, so 24px line + 6px top/bottom = one exact 36px row. */
.footer-nap > * { margin: calc((var(--footer-row) - 1.5rem) / 2) 0; }

.footer-social { margin-top: var(--space-xs); } /* icon boxes carry their own air */

/* Link columns — heading is row 1, every link is exactly one row. */
.footer-col__heading { margin: 0; min-height: var(--footer-row);
                       display: flex; align-items: center; }
.footer-nav__list { gap: 0; }
.footer-nav__list li { display: flex; align-items: center;
                       min-height: var(--footer-row); }