/* ============================================================================
   Outfitter — footer.css  (Footer Builder)
   One configurable, skin-aware footer: 4 style archetypes (columns / centered /
   cta / newsletter) and the full block set (brand, menu, contact, hours,
   newsletter, map, payment icons, wordmark, social, copyright + legal, back to
   top). The footer is a deliberate dark contrast band in EVERY skin via the
   role tokens; per-pack signatures at the end reproduce each demo's footer.
   ============================================================================ */

/* 0. FOOTER SHELL ----------------------------------------------------------- */
.site-footer {
  position: relative;
  background-color: var(--r-contrast-bg, var(--color-primary));
  color: var(--r-contrast-ink, var(--color-on-primary));
  padding-block: var(--space-3xl) var(--space-xl);
}
.site-footer a { color: var(--r-contrast-muted, var(--color-on-primary)); text-decoration: none; }
.site-footer a:hover,
.site-footer a:focus { color: var(--r-contrast-ink, var(--color-accent)); }

.site-footer__heading {
  margin: 0 0 var(--space-md);
  color: var(--r-contrast-kicker, var(--color-accent));
  font-size: var(--fs-eyebrow);
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: var(--ls-section);
  text-transform: uppercase;
}
.site-footer__title {
  margin: 0 0 var(--space-sm);
  color: var(--r-contrast-ink, var(--color-on-primary));
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.site-footer__desc { margin: 0 0 var(--space-sm); max-width: 42ch; font-size: var(--fs-sm); line-height: var(--lh-sm); opacity: 0.85; }
.site-footer__brand .custom-logo,
.site-footer__centered .custom-logo { display: block; height: 50px; width: auto; max-width: 260px; object-fit: contain; margin-bottom: var(--space-sm); }

/* 1. COLUMNS GRID ----------------------------------------------------------- */
/* Auto-fit so the REAL number of columns (the brand block + however many groups
   the footer menu yields) always lays out evenly across one row, then wraps
   cleanly — rather than being forced into a fixed 2/3/4-track grid that strands a
   half-empty final row when a grouped menu produces more columns than the count.
   Row gap is larger than the column gap so wrapped rows stay clearly separated. */
.site-footer__columns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xl) var(--space-lg);
  align-items: flex-start;
}
.site-footer__col { flex: 1 1 150px; min-width: 0; }
/* The brand block leads with a wider column so the logo, blurb and social row sit
   comfortably — and the social icons never wrap to a stray second line. */
.site-footer__brand { flex: 1.7 1 260px; }

/* 2. BRAND COLUMN ----------------------------------------------------------- */
.site-footer__social { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--space-md); padding: 0; list-style: none; }
.site-footer__social:empty { display: none; }
.site-footer__social a,
.site-footer__social .brand-social__link {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: var(--border) solid color-mix(in srgb, var(--r-contrast-ink) 30%, transparent);
  border-radius: var(--radius);
  color: var(--r-contrast-muted, var(--color-on-primary));
}
.site-footer__social a:hover,
.site-footer__social .brand-social__link:hover { color: var(--r-contrast-ink); border-color: var(--r-contrast-ink); }
.site-footer__social svg { width: 18px; height: 18px; }

/* 3. FOOTER MENU ------------------------------------------------------------ */
.footer-menu { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.footer-menu a { display: inline-block; padding-block: 1px; font-size: var(--fs-sm); line-height: 1.3; }
.footer-menu--inline { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-md); }

/* 4. CONTACT COLUMN --------------------------------------------------------- */
.site-footer__addr,
.site-footer__line { margin: 0 0 var(--space-xs); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.site-footer__contact .brand-hours { margin: var(--space-xs) 0 0; padding: 0; list-style: none; font-size: var(--fs-sm); }
.site-footer__contact .brand-hours__row { display: flex; justify-content: space-between; gap: var(--space-sm); padding: 2px 0; opacity: 0.9; }

/* 5. NEWSLETTER ------------------------------------------------------------- */
.newsletter-form { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-sm); }
.newsletter-form input {
  flex: 1 1 160px;
  background-color: color-mix(in srgb, var(--r-contrast-ink) 8%, transparent);
  border-color: color-mix(in srgb, var(--r-contrast-ink) 24%, transparent);
  color: var(--r-contrast-ink);
}
.newsletter-form input::placeholder { color: var(--r-contrast-ink); opacity: 0.5; }
.site-footer__newsletter .off-form,
.site-footer__newsletter form { margin: 0; }

/* 6. MAP -------------------------------------------------------------------- */
.site-footer__map-embed {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius);
  border: var(--border) solid color-mix(in srgb, var(--r-contrast-ink) 18%, transparent);
}
.site-footer__map-embed iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(0.3) contrast(1.05); }

/* 7. PAYMENT ICONS ---------------------------------------------------------- */
.footer-payments { display: flex; flex-wrap: wrap; gap: var(--space-2xs); align-items: center; margin-top: var(--space-lg); }
.footer-payments__badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  background: color-mix(in srgb, var(--r-contrast-ink) 10%, transparent);
  border: var(--border) solid color-mix(in srgb, var(--r-contrast-ink) 22%, transparent);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--fs-tag);
  font-weight: 600;
  letter-spacing: var(--ls-tag);
  text-transform: uppercase;
  color: var(--r-contrast-muted);
}

/* 8. GIANT WORDMARK --------------------------------------------------------- */
.footer-wordmark {
  margin-top: var(--space-xl);
  font-family: var(--font-heading);
  font-size: clamp(3rem, 14vw, 11rem);
  line-height: 0.85;
  font-weight: var(--fw-display);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--r-contrast-ink) 22%, transparent);
  pointer-events: none;
  overflow: hidden;
  white-space: nowrap;
}

/* 9. BOTTOM BAR ------------------------------------------------------------- */
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
  margin-top: var(--space-3xl);
  padding-top: var(--space-lg);
  border-top: var(--border) solid color-mix(in srgb, var(--r-contrast-ink) 14%, transparent);
}
.site-footer__copyright { margin: 0; opacity: 0.72; }
/* "Created by UOutdoors®" credit, appended after the copyright on the same line. */
.site-footer__credit::before { content: "·"; margin: 0 0.5em; opacity: 0.6; }
.site-footer__credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.site-footer__credit a:hover,
.site-footer__credit a:focus-visible { color: var(--r-contrast-kicker, var(--r-accent)); }
.site-footer__legal { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); opacity: 0.72; }
.site-footer__legal:empty { display: none; }
.footer-legal-menu { display: inline-flex; flex-wrap: wrap; gap: var(--space-md); margin: 0; padding: 0; list-style: none; }

/* 10. STYLE: CENTERED ------------------------------------------------------- */
.site-footer__centered { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-md); }
.site-footer__centered .site-footer__bottom { flex-direction: column; justify-content: center; border-top: 0; margin-top: var(--space-sm); }
.site-footer__centered .site-footer__legal { justify-content: center; }
.site-footer__centered .footer-payments { justify-content: center; }

/* 11. STYLE: BIG-CTA -------------------------------------------------------- */
.footer-cta { background: var(--r-accentband-bg, var(--color-secondary)); color: var(--r-accentband-ink, var(--color-on-primary)); }
.footer-cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-2xl);
}
.footer-cta__heading { margin: 0; color: var(--r-accentband-ink); font-size: var(--fs-h1); }
.footer-cta__text { margin: var(--space-2xs) 0 0; max-width: 52ch; opacity: 0.9; }
.footer-cta__btn { flex-shrink: 0; }

/* 12. STYLE: NEWSLETTER-FORWARD --------------------------------------------- */
.footer-news { border-bottom: var(--border) solid color-mix(in srgb, var(--r-contrast-ink) 14%, transparent); }
.footer-news__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-xl);
  padding-block: var(--space-2xl);
}
.footer-news__heading { margin: 0; font-size: var(--fs-h1); color: var(--r-contrast-ink); }
.footer-news__text { margin: var(--space-2xs) 0 0; opacity: 0.88; }
.footer-news__form .newsletter-form input { flex: 1 1 220px; }
@media (max-width: 720px) { .footer-news__inner { grid-template-columns: 1fr; gap: var(--space-md); } }
/* The newsletter band leads the footer and carries its own generous top space, so
   drop the shell's top padding (which otherwise stacks into a big empty gap) and
   give the link columns clear breathing room below the band's divider. */
.site-footer--newsletter { padding-top: 0; }
.site-footer--newsletter .site-footer__columns { margin-top: var(--space-2xl); }
/* Lay the signup out inline: the email field grows, the submit button sits to its
   right, aligned with the input — and the whole form stays vertically centred with
   the heading + copy beside it (the band's grid already centres the two columns). */
.footer-news__form .off-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-sm);
}
.footer-news__form .off-form__field { flex: 1 1 200px; }
.footer-news__form .off-form__actions { flex: 0 0 auto; }
.footer-news__form .off-form__submit { white-space: nowrap; }
/* Anything that isn't the field/button (status notice, GDPR consent) drops to its
   own full-width row so it never crowds the inline signup. */
.footer-news__form .off-form__status,
.footer-news__form .off-form__consent { flex: 1 1 100%; }

/* 13. PER-SKIN SIGNATURES --------------------------------------------------- */
/* Hunting — ink ground (darker than the contrast band) + ember hairline + Cinzel.
   Keyed to the FOOTER'S OWN data-variant (the global Brand Settings skin, set in
   footer.php) rather than the page's data-pack, so every page's footer wears the
   same signature as the hunting home when the global skin is hunting. */
.site-footer[data-variant="hunting"] { background-color: var(--r-page-bg); border-top: 1px solid color-mix(in srgb, var(--r-scrim-ink) 12%, transparent); }
.site-footer[data-variant="hunting"]:not(.site-footer--newsletter)::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 1px; height: 60px; background: var(--r-accent); }
.site-footer[data-variant="hunting"] .site-footer__heading { font-family: "Cinzel", Georgia, serif; color: var(--r-accent); letter-spacing: 0.28em; }
.site-footer[data-variant="hunting"] .site-footer__title { font-family: "Cinzel", Georgia, serif; letter-spacing: 0.2em; }

/* 14. RESPONSIVE ------------------------------------------------------------ */
@media (max-width: 600px) {
  .footer-cta__inner { flex-direction: column; align-items: flex-start; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
}