/* ==========================================================================
   footer.css - (10) FOOTER  (#site-footer)
   Figma 6914..7859 (band 891 + credits bar 54):
   - 1:7  white textured band, 1:9 caramel textured panel with a diagonal
          edge from x1132 (top) to x746 (bottom) - mirrored hero shape.
   - 1:151 760x417 stadium outline (2px brown) at x580 y+105,
           1:150 694x365 stadium photo inside it, 2 brown sparkles.
   - 1:10 contact details (right edge x448, y+247), 1:73 legal row (y+480),
          1:72 white nav (right edge x1844, y+224).
   - 1:93 + 1:94 "RuthChindler" wordmark (inline SVG outlines, y+619).
   - 1:145 54px #5D2809 bar, Futurism 20 white.
   Mobile first; desktop (>=1024) is the Figma-exact absolute composition.
   ========================================================================== */

#site-footer.footer {
  position: relative;
  background: var(--fg-paper);
  color: var(--fg-brown);
  overflow: hidden;
}

/* ---------- band (mobile first: stacked) ---------- */
#site-footer .footer__band {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 0 0;
  background: #faf9f8 url("../../assets/figma/contact-noise-light.webp") repeat;
  background-size: 256px 256px;
}

#site-footer .footer__panel { display: none; }

/* stadium photo + ring: children are placed in % of the 760x417 ring box
   so the same geometry works at every width */
#site-footer .footer__media {
  position: relative;
  width: min(calc(100% - 40px), 560px);
  aspect-ratio: 760 / 417;
  margin: 0 0 36px;
}
#site-footer .footer__ring {
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--fg-brown);
  border-radius: 999px;
}
#site-footer .footer__photo {
  position: absolute;
  left: 4.342%;
  top: 6.475%;
  width: 91.316%;
  height: 87.53%;
  border-radius: 999px;
  object-fit: cover;
  display: block;
}
#site-footer .footer__sparkle {
  position: absolute;
  width: 4.474%;
  height: auto;
  aspect-ratio: 1;
  fill: var(--fg-brown);
  overflow: visible;
}
#site-footer .footer__sparkle--a { left: .46%; top: 25.5%; }
#site-footer .footer__sparkle--b { left: 95%;  top: 68.1%; transform: rotate(90deg); }

/* contact details */
#site-footer .footer__details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;           /* right edge (RTL) */
  gap: 10px;
  font-style: normal;
}
#site-footer .footer__detail {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  color: var(--fg-brown);
  font-family: var(--font-heb);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.2;
  text-decoration: none;
}
#site-footer a.footer__detail:hover .footer__detail-text { text-decoration: underline; text-underline-offset: 4px; }
#site-footer a.footer__detail:focus-visible { outline: 2px solid var(--fg-caramel); outline-offset: 4px; border-radius: 4px; }
#site-footer .footer__icon { width: 26px; height: 26px; flex: 0 0 auto; fill: var(--fg-brown); }

/* legal row - plain text until the pages exist */
#site-footer .footer__legal {
  margin: 20px 0 28px;
  color: var(--fg-brown);
  font-family: var(--font-heb);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.2;
  text-align: center;
}
#site-footer .footer__legal-sep { margin-inline: .55em; }

/* nav - caramel block with a diagonal top edge (echo of the desktop panel) */
#site-footer .footer__nav {
  align-self: stretch;
  padding: 64px 24px 20px;
  background: #975a35 url("../../assets/figma/contact-noise-caramel.webp") repeat;
  background-size: 256px 256px;
  clip-path: polygon(0 40px, 100% 0, 100% 100%, 0 100%);
}
#site-footer .footer__nav-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 420px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
}
#site-footer .footer__nav-list a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: #fff;
  font-family: var(--font-heb);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.2;
  text-decoration: none;
}
#site-footer .footer__nav-list a:hover { text-decoration: underline; text-underline-offset: 4px; }
#site-footer .footer__nav-list a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 3px; }

/* wordmark */
#site-footer .footer__wordmark {
  align-self: stretch;
  margin: 0;
  padding: 8px 0 0;
  background: #975a35 url("../../assets/figma/contact-noise-caramel.webp") repeat;
  background-size: 256px 256px;
  line-height: 0;
}
#site-footer .footer__wordmark-svg { display: block; width: 100%; height: auto; }
#site-footer .wm-ruth,
#site-footer .wm-chindler { fill: #fff; }
#site-footer .wm-s { fill: #fff; }          /* all white on the stacked caramel strip */

/* ---------- credits bar ---------- */
#site-footer .footer__bar {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  background: var(--fg-brown);
  color: #fff;
  font-family: var(--font-heb);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.2;
  text-align: center;
}
#site-footer .footer__rights,
#site-footer .footer__credits { margin: 0; }
#site-footer .footer__credits {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 12px;
}
#site-footer .footer__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
}

/* ---------- tablet (768 - 1023) ---------- */
@media (min-width: 768px) {
  #site-footer .footer__band { padding-top: 72px; }
  #site-footer .footer__media { width: min(76%, 620px); margin-bottom: 44px; }
  #site-footer .footer__detail { font-size: 20px; }
  #site-footer .footer__legal { font-size: 18px; margin-bottom: 56px; }
  #site-footer .footer__nav { padding: 88px 40px 28px; clip-path: polygon(0 64px, 100% 0, 100% 100%, 0 100%); }
  #site-footer .footer__nav-list { max-width: 640px; grid-template-columns: repeat(3, 1fr); }
  #site-footer .footer__bar {
    flex-direction: row;
    justify-content: space-between;
    padding-inline: 40px;
    font-size: 15px;
  }
}

/* ---------- desktop: Figma-exact composition (>= 1024) ---------- */
@media (min-width: 1024px) {
  #site-footer .footer__band {
    display: block;
    height: calc(891 * var(--u));
    padding: 0;
    overflow: hidden;
  }
  #site-footer .footer__panel {
    display: block;
    position: absolute;
    inset: 0;
    background: #975a35 url("../../assets/figma/contact-noise-caramel.webp") repeat;
    background-size: 256px 256px;
    /* 1:9 edge: x1132 at the top -> x746 at the bottom (of 1920) */
    clip-path: polygon(58.958% 0, 100% 0, 100% 100%, 38.854% 100%);
  }
  #site-footer .footer__media {
    position: absolute;
    left: calc(580 * var(--u));
    top: calc(105 * var(--u));
    width: calc(760 * var(--u));
    margin: 0;
    z-index: 2;
  }
  #site-footer .footer__ring { border-width: max(1px, calc(2 * var(--u))); }

  #site-footer .footer__details {
    position: absolute;
    right: calc(1472 * var(--u));
    top: calc(247 * var(--u));
    gap: calc(11 * var(--u));
    z-index: 2;
  }
  #site-footer .footer__detail {
    min-height: calc(30 * var(--u));
    gap: calc(13 * var(--u));
    font-size: max(15px, calc(24 * var(--u)));
  }
  #site-footer .footer__icon { width: calc(30 * var(--u)); height: calc(30 * var(--u)); min-width: 18px; min-height: 18px; }

  #site-footer .footer__legal {
    position: absolute;
    right: calc(1365 * var(--u));
    top: calc(480 * var(--u));
    margin: 0;
    font-size: max(15px, calc(24 * var(--u)));
    white-space: nowrap;
    z-index: 2;
  }
  #site-footer .footer__legal-sep { margin-inline: calc(12 * var(--u)); }

  #site-footer .footer__nav {
    position: absolute;
    right: calc(76 * var(--u));
    top: calc(224 * var(--u));
    padding: 0;
    background: none;
    clip-path: none;
    z-index: 2;
  }
  #site-footer .footer__nav-list { display: block; max-width: none; }
  #site-footer .footer__nav-list a {
    display: block;
    min-height: 0;
    font-size: max(15px, calc(24 * var(--u)));
    line-height: 1.2;
    text-align: right;
  }

  #site-footer .footer__wordmark {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(619.27 * var(--u));
    height: calc(285 * var(--u));
    padding: 0;
    background: none;
    z-index: 1;
  }
  #site-footer .footer__wordmark-svg { height: 100%; }
  /* Figma per-glyph colours: "Ruth" + custom S brown on the white side,
     "hindler" white on the caramel panel */
  #site-footer .wm-ruth,
  #site-footer .wm-s { fill: var(--fg-brown); }

  #site-footer .footer__bar {
    height: max(40px, calc(54 * var(--u)));
    padding: 0 calc(76 * var(--u));
    font-size: var(--t-small);
  }
  #site-footer .footer__credits { gap: calc(15 * var(--u)); flex-wrap: nowrap; }
  #site-footer .footer__dot { width: max(4px, calc(5 * var(--u))); height: max(4px, calc(5 * var(--u))); }
}