/* ==========================================================================
   Site footer — brand, link columns, contact details, copyright.
   ========================================================================== */

/* --- Footer ----------------------------------------------------------- */
.site-foot {
  --focus-ring-color: var(--color-accent-300); /* light ring on the dark footer */
  /* Flush top (no rounding) — the .cta-band directly above now owns the
     rounded-top transition from the page; two rounded tops back to back
     would leave a mismatched corner where the flat edges don't meet. */
  position: relative;
  background: var(--color-accent-2-900); color: var(--color-neutral-200);
  padding: calc(var(--space-8) * 1.6) 0 var(--space-6);
}
/* Ground floor of the page, dark navy — the logo's native colors are
   themselves navy, so shown as-is here they'd all but disappear against a
   navy background even at full opacity. brightness(0) invert(1) flattens the
   opaque pixels to solid white first (alpha untouched), same end result as
   the tinted mask the light sections use, without needing mask-image.
   inset-inline-end overridden (unlike .watermark-craft) to sit near the
   section's own physical edge rather than lining up with .wrap's edge —
   the footer reads fine with it tucked into the true corner. */
.watermark-foot {
  width: 16vw; max-width: 220px; bottom: var(--space-6);
  inset-inline-end: var(--space-4);
  filter: brightness(0) invert(1);
  opacity: 0.16;
}
.site-foot > .wrap { position: relative; z-index: 1; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--space-8); }
/* Wraps the two .foot-links columns only for the mobile/tablet layouts
   further down, which need to treat them as one flex pair — display:
   contents here means the wrapper itself doesn't participate in this
   desktop 4-column grid at all, so .foot-grid's existing children (still
   effectively brand/collections/company/contact) and column widths are
   completely unaffected by its presence. */
.foot-links-row { display: contents; }
/* Native navy/amber artwork disappears against this section's own navy
   background — same brightness(0) invert(1) flatten used on .watermark-foot,
   just at full opacity since this is the real readable logo, not a decoration. */
.foot-logo { height: 90px; margin-bottom: var(--space-4); filter: brightness(0) invert(1); }
.foot-brand p { font-size: 13px; max-width: 32ch; color: color-mix(in srgb, var(--color-neutral-200) 74%, transparent); }
.foot-col { display: grid; align-content: start; gap: var(--space-2); }
.foot-col h2 { font-size: 14px; margin-bottom: var(--space-2); color: var(--color-accent-300); }
.foot-col a { font-size: 13px; color: var(--color-neutral-200); text-decoration: none; transition: color 0.2s ease; }
.foot-col a:hover { color: var(--color-accent-300); text-decoration: underline; }
/* ol/li markup (not a bare run of <a> tags) so the list is a real list —
   list-style/margin/padding reset and gap matching .foot-col's own means
   this looks identical to the old flat markup at every width already;
   the point of the semantic change only shows up in the mobile-only rules
   further down. */
.foot-links ol { display: grid; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.foot-links li { margin: 0; padding: 0; }
.foot-links a { position: relative; padding-inline-start: var(--space-4); }
.foot-links a::before {
  content: '‹'; position: absolute; inset-inline-start: 0; top: -1px;
  color: color-mix(in srgb, var(--color-neutral-200) 55%, transparent);
}
html[dir="ltr"] .foot-links a::before { content: '›'; }
.foot-contact a { display: flex; align-items: center; gap: var(--space-2); }
.foot-contact svg { flex: none; opacity: 0.7; }
.foot-base {
  display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  margin-top: calc(var(--space-8) * 1.2); padding-top: var(--space-4);
  border-top: 1px solid color-mix(in srgb, var(--color-neutral-200) 22%, transparent);
}
.foot-base p { margin: 0; font-size: 12px; color: color-mix(in srgb, var(--color-neutral-200) 60%, transparent); }

@media (max-width: 1020px) {
  /* Plain repeat(2,1fr) with no row control left this to DOM-order
     auto-placement: brand (1st child) shared row 1 with Collections (2nd
     child), then Company (3rd) shared row 2 with Contact (4th) — an
     accidental pairing nobody designed, not the intended "brand row /
     link pair row / contact row" structure. Pinning brand and contact to
     their own full-width rows fixes that; .foot-links-row (see the base
     rule's comment) switches from display:contents to a real flex row
     here so Collections/Company sit together as one pair instead of each
     stretching across its own half-width grid track — justify-content
     is a logical value (flex-start), so the pair sits at the reading
     direction's start automatically: left in LTR, right in RTL, no
     dir="rtl"/"ltr" split needed the way the column-placement approach
     this replaced required. */
  .foot-grid { grid-template-columns: repeat(2, 1fr); }
  .foot-brand { grid-column: 1 / -1; grid-row: 1; }
  .foot-contact { grid-column: 1 / -1; grid-row: 3; }
  .foot-links-row {
    display: flex; grid-column: 1 / -1; grid-row: 2;
    gap: var(--space-8); justify-content: flex-start;
  }
  .foot-links-row .foot-col { justify-items: normal; text-align: start; }
}

@media (max-width: 720px) {
  /* .steps is already 1 column from the 1020px breakpoint up above — just
     .foot-grid narrowing further here. Explicit row for brand/contact,
     same reasoning as the ≤1020px .foot-links-row rule above (auto-row
     placement doesn't reliably share a row the way you'd expect). The pair
     itself centers as a whole block on mobile only, by request — its
     internal alignment is untouched (.foot-links-row .foot-col's own
     justify-items/text-align, set at ≤1020px above, still governs how
     each column's heading/links align within themselves; only where the
     pair as a unit sits in the row changes here, from hugging the reading
     direction's start to centered). */
  .foot-grid { grid-template-columns: 1fr; }
  .foot-brand { grid-column: 1 / -1; grid-row: 1; }
  .foot-contact { grid-column: 1 / -1; grid-row: 3; }
  .foot-links-row { grid-column: 1 / -1; grid-row: 2; gap: var(--space-6); justify-content: center; }
  /* Footer refinement pass, mobile only, by request: brand/contact
     centered instead of sitting at their default RTL-right alignment,
     spacing tightened throughout, and the brand logo/type sized down a
     step — was a straight desktop column just narrowed to 1fr, reading
     heavy and left-hanging on a phone. Collections/Company stay out of
     this centering — direction-aware pair-alignment is what they asked
     for instead (.foot-links-row above / .foot-links-row .foot-col
     further up the file). */
  .site-foot { padding: var(--space-8) 0 var(--space-4); }
  .foot-grid { gap: var(--space-6); }
  .foot-brand { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .foot-logo { height: 86px; margin-bottom: var(--space-3); }
  .foot-brand p { font-size: 12px; margin-inline: auto; }
  .foot-col { gap: var(--space-2); }
  .foot-col h2 { font-size: 13px; }
  .foot-col a { font-size: 12px; }
  .foot-contact { justify-items: center; text-align: center; }
  .foot-base { justify-content: center; margin-top: var(--space-6); padding-top: var(--space-3); text-align: center; }
}

@media (max-width: 480px) {
  /* Set here explicitly: the footer logo also carries .brand-logo, so the
     header's small-phone size (css/components/site-header.css) would
     otherwise apply to it. */
  .foot-logo { height: 72px; }
}