/* ============================================================================
   SITE FOOTER — the one footer, on every public page.
   ----------------------------------------------------------------------------
   Self-contained on purpose. The previous footer's design lived inside
   style.css, a 2,000-line storefront bundle that the Cast & Crew layout does
   not load — so the same markup rendered there completely unstyled. Keeping the
   footer's CSS with the footer means it can be included anywhere and look the
   same, which is the whole point of unifying it.

   Colours come from theme.css tokens, so the footer follows the admin's
   light/dark setting rather than being permanently dark as it was before.
   ========================================================================== */

.sf {
  background: var(--sf-bg, #14111a);
  color: var(--sf-text, #cfc9d6);
  font-size: .9rem;
  line-height: 1.65;
  margin-top: 3rem;
}

/* The footer is a deliberately dark band in the LIGHT theme too — that is the
   established brand look — so it defines its own surface rather than following
   --site-bg. In dark mode it lifts slightly off the page so the edge still
   reads. */
:root {
  --sf-bg:        #14111a;
  --sf-bg-2:      #0e0c12;
  --sf-text:      #cfc9d6;
  --sf-heading:   #ffffff;
  --sf-muted:     #9d95a6;
  --sf-line:      rgba(255, 255, 255, .10);
  --sf-chip:      rgba(255, 255, 255, .07);
  --sf-chip-hover:var(--site-brand, #c401cb);
}

:root[data-theme="dark"] {
  --sf-bg:        #1a1720;
  --sf-bg-2:      #121016;
  --sf-line:      rgba(255, 255, 255, .08);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --sf-bg:      #1a1720;
    --sf-bg-2:    #121016;
    --sf-line:    rgba(255, 255, 255, .08);
  }
}

.sf .sf__container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.sf .sf__main { padding: 3rem 0 2.25rem; }

.sf .sf__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 2rem 2.25rem;
  align-items: start;
}

.sf .sf__head {
  color: var(--sf-heading);
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 1rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--sf-line);
  letter-spacing: .01em;
}

.sf .sf__about {
  margin: 0 0 1.1rem;
  color: var(--sf-text);
  max-width: 42ch;
}

/* ── link lists ─────────────────────────────────────────────────────────── */
.sf .sf__links,
.sf .sf__contact,
.sf .sf__social,
.sf .sf__pay {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sf .sf__links li { margin-bottom: .55rem; display: flex; align-items: baseline; gap: .45rem; }
.sf .sf__links i  { font-size: .62rem; color: var(--site-brand, #c401cb); flex: none; }

.sf .sf__links a,
.sf .sf__contact a {
  color: var(--sf-text);
  text-decoration: none;
  transition: color .15s ease;
}
.sf .sf__links a:hover,
.sf .sf__contact a:hover { color: var(--site-brand, #c401cb); }

.sf .sf__contact li {
  display: flex;
  gap: .6rem;
  margin-bottom: .7rem;
  align-items: flex-start;
  color: var(--sf-text);
}
.sf .sf__contact i {
  color: var(--site-brand, #c401cb);
  margin-top: .28rem;
  flex: none;
  width: 15px;
  text-align: center;
}

/* ── social ─────────────────────────────────────────────────────────────── */
.sf .sf__social { display: flex; flex-wrap: wrap; gap: .5rem; }
.sf .sf__social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--sf-chip);
  color: var(--sf-heading);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}
.sf .sf__social a:hover { background: var(--sf-chip-hover); transform: translateY(-2px); }

/* ── map ────────────────────────────────────────────────────────────────── */
.sf .sf__col--map { min-width: 0; }
.sf .sf__map {
  border-radius: 10px;
  overflow: hidden;
  line-height: 0;
  border: 1px solid var(--sf-line);
}
.sf .sf__map iframe,
.sf .sf__map img { width: 100% !important; height: 190px; border: 0; display: block; }

/* ── bottom bar ─────────────────────────────────────────────────────────── */
.sf .sf__bar {
  background: var(--sf-bg-2);
  border-top: 1px solid var(--sf-line);
  padding: 1rem 0;
}
.sf .sf__bar-in {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
}
.sf .sf__copy {
  margin: 0;
  color: var(--sf-muted);
  font-size: .84rem;
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}
.sf .sf__red { color: #ff5a68; text-decoration: none; font-weight: 600; }
.sf .sf__red:hover { text-decoration: underline; }

.sf .sf__pay { display: flex; gap: .5rem; align-items: center; }
.sf .sf__pay img { height: 24px; width: auto; opacity: .85; }
.sf .sf__pay img:hover { opacity: 1; }

/* ── small screens ──────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .sf .sf__main { padding: 2.25rem 0 1.5rem; }
  .sf .sf__grid { gap: 1.6rem; }
  .sf .sf__bar-in { justify-content: center; text-align: center; }
  .sf .sf__copy { justify-content: center; }
}

/* Keyboard users get the same affordance as mouse users. */
.sf a:focus-visible {
  outline: 2px solid var(--site-brand, #c401cb);
  outline-offset: 3px;
  border-radius: 3px;
}

/* A share link (not embeddable) falls back to a plain link rather than a blank frame. */
.sf .sf__maplink{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem .9rem;color:var(--sf-text);text-decoration:none;}
.sf .sf__maplink i{color:var(--site-brand,#c401cb);}
.sf .sf__maplink:hover{color:var(--site-brand,#c401cb);}