/*
Theme Name: Salvage Title
Theme URI: https://salvagetitlerocks.com
Author: Salvage Title
Author URI: https://salvagetitlerocks.com
Description: Custom dark rock band theme for Salvage Title, fully compatible with Elementor page builder. Features animated marquee, dynamic shows CPT, merch grid, gallery, band members, and contact section. Dark aesthetic with red accent color.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: salvage-title
Tags: dark, music, band, elementor, one-page, custom-header
*/

/* ============================================================
   0. CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
  --st-bg:            #0a0a0a;
  --st-surface:       #111111;
  --st-surface-elev:  #1a1a1a;
  --st-border:        rgba(255,255,255,0.08);
  --st-fg:            #f5f5f5;
  --st-muted:         #888888;
  --st-primary:       #e11d2e;
  --st-primary-glow:  #ff2d3f;
  --st-font-display:  'Barlow Condensed', 'Impact', sans-serif;
  --st-font-body:     'Inter', system-ui, sans-serif;
  --st-radius:        1rem;
  --st-max-w:         1280px;
}

/* ============================================================
   1. RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--st-bg);
  color: var(--st-fg);
  font-family: var(--st-font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a  { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ============================================================
   2. TYPOGRAPHY UTILITY
   ============================================================ */
.st-display {
  font-family: var(--st-font-display);
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.01em;
}
.st-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--st-primary);
  font-weight: 600;
}
.st-section-title {
  font-family: var(--st-font-display);
  font-size: clamp(2.8rem, 6vw, 5rem);
  text-transform: uppercase;
  line-height: 1;
}
.st-section-title span { color: var(--st-primary); }

/* ============================================================
   3. LAYOUT
   ============================================================ */
.st-container {
  max-width: var(--st-max-w);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2rem);
}
.st-section {
  padding-block: clamp(4rem, 8vw, 8rem);
}
.st-bg-surface { background-color: rgba(17,17,17,0.4); }

/* ============================================================
   4. BUTTONS
   ============================================================ */
.st-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 1.75rem;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  border-radius: 9999px;
  transition: background 0.2s, transform 0.2s, opacity 0.2s;
  cursor: pointer;
  border: none;
}
.st-btn-primary {
  background: var(--st-primary);
  color: #fff;
}
.st-btn-primary:hover {
  background: var(--st-primary-glow);
  transform: scale(1.04);
}
.st-btn-outline {
  background: rgba(26,26,26,0.8);
  border: 1px solid var(--st-border);
  color: var(--st-fg);
  backdrop-filter: blur(8px);
}
.st-btn-outline:hover { background: var(--st-surface-elev); }

/* ============================================================
   5. NAVBAR
   ============================================================ */
#st-navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  transition: background 0.3s, border-color 0.3s, backdrop-filter 0.3s;
}
#st-navbar.scrolled {
  background: rgba(10,10,10,0.85);
  border-bottom: 1px solid var(--st-border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.st-navbar-inner {
  max-width: var(--st-max-w);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2rem);
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.st-nav-logo img { height: 3rem; width: auto; }
.st-nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.st-nav-links a {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--st-muted);
  transition: color 0.2s;
}
.st-nav-links a:hover { color: var(--st-fg); }
.st-nav-cta {
  padding: 0.6rem 1.25rem;
  font-size: 0.7rem;
}
.st-hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--st-fg);
  cursor: pointer;
  padding: 0.5rem;
}
.st-mobile-menu {
  display: none;
  flex-direction: column;
  background: rgba(10,10,10,0.97);
  border-top: 1px solid var(--st-border);
  padding: 1.25rem;
  gap: 0.25rem;
}
.st-mobile-menu.open { display: flex; }
.st-mobile-menu a {
  padding: 0.75rem 0.5rem;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.st-mobile-menu a:last-child { border-bottom: none; }

@media (max-width: 768px) {
  .st-nav-links,
  .st-nav-cta { display: none; }
  .st-hamburger { display: block; }
}

/* ============================================================
   6. HERO SECTION
   ============================================================ */
#st-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: stretch; /* content div fills height so its own justify-content works */
  overflow: hidden;
}
.st-hero-bg {
  position: absolute;
  inset: 0;
}
.st-hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.7;
}
.st-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--st-bg) 0%, rgba(10,10,10,0.6) 50%, rgba(10,10,10,0.3) 100%);
}
.st-hero-content {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: var(--st-max-w);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2rem);
  padding-bottom: clamp(4rem, 8vw, 6rem);
  padding-top: clamp(2rem, 4vw, 4rem);
  /* Flex column: each child controls its own horizontal position via align-self */
  display: flex;
  flex-direction: column;
  align-items: stretch;    /* children stretch full width so text-align works on them */
  justify-content: flex-end; /* overridden per-instance by inline style */
  min-height: inherit;
}
.st-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.st-hero-dot {
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: var(--st-primary);
  animation: flicker 2.5s infinite;
}
.st-hero-eyebrow span {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--st-muted);
}
.st-hero-logo {
  max-width: min(90vw, 640px);
  height: auto;
  filter: drop-shadow(0 20px 60px rgba(225,29,46,0.45));
  display: block;
}
.st-hero-tagline {
  margin-top: 1.5rem;
  max-width: 38rem;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--st-muted);
  line-height: 1.7;
}
.st-hero-ctas {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ============================================================
   7. MARQUEE
   ============================================================ */
.st-marquee-wrap {
  position: absolute;
  top: 5rem;
  left: 0; right: 0;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(10,10,10,0.4);
  backdrop-filter: blur(8px);
  padding-block: 0.6rem;
  z-index: 5;
}
.st-marquee-track {
  display: flex;
  white-space: nowrap;
  animation: marquee 28s linear infinite;
  width: max-content;
}
.st-marquee-track .st-marquee-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-inline: 1rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--st-muted);
}
.st-marquee-dot { color: var(--st-primary); }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes flicker {
  0%,100% { opacity:1; }
  50%      { opacity:0.4; }
}

/* ============================================================
   8. SHOWS SECTION
   ============================================================ */
#st-shows { padding-block: clamp(4rem, 8vw, 8rem); }
.st-shows-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 3rem;
}
.st-show-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--st-surface-elev);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius);
  transition: border-color 0.3s, background 0.3s;
}
.st-show-card:hover {
  border-color: var(--st-primary);
  background: rgba(26,26,26,0.9);
}
.st-show-date {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--st-primary);
  margin-bottom: 0.35rem;
}
.st-show-venue {
  font-family: var(--st-font-display);
  font-size: 1.35rem;
  text-transform: uppercase;
}
.st-show-location {
  font-size: 0.85rem;
  color: var(--st-muted);
  margin-top: 0.25rem;
}
.st-show-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  min-width: 110px;
}
.st-show-list { display: flex; flex-direction: column; gap: 0.75rem; }
.st-shows-empty {
  text-align: center;
  padding: 3rem;
  color: var(--st-muted);
  border: 1px dashed var(--st-border);
  border-radius: var(--st-radius);
}
/* Ghost / text button for Details link */
.st-btn-ghost {
  background: transparent;
  border: 1px solid var(--st-border);
  color: var(--st-muted);
  font-size: 0.75rem;
  padding: 0.45rem 0.9rem;
  text-align: center;
  border-radius: var(--st-radius);
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.st-btn-ghost:hover { border-color: var(--st-primary); color: var(--st-fg); }
/* Mobile: stack info above buttons, full width */
@media (max-width: 540px) {
  .st-show-card {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .st-show-actions {
    flex-direction: row;
    min-width: 0;
  }
  .st-show-actions .st-btn {
    flex: 1;
    justify-content: center;
    text-align: center;
  }
}

/* ============================================================
   9. BAND SECTION
   ============================================================ */
#st-band { background: rgba(17,17,17,0.4); }
.st-band-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 4rem;
  align-items: flex-end;
  margin-bottom: 3rem;
}
.st-band-desc { color: var(--st-muted); font-size: 1rem; line-height: 1.7; }
.st-band-desc strong { color: var(--st-fg); font-weight: 600; }
.st-band-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.st-member-card {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  border-radius: var(--st-radius);
  border: 1px solid var(--st-border);
}
.st-member-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}
.st-member-card:hover img { transform: scale(1.1); }
.st-member-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--st-bg) 0%, rgba(10,10,10,0.3) 55%, transparent 100%);
}
.st-member-info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1.5rem;
}
.st-member-role {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--st-primary);
  margin-bottom: 0.5rem;
}
.st-member-name {
  font-family: var(--st-font-display);
  font-size: 2rem;
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .st-band-intro { grid-template-columns: 1fr; }
  .st-band-grid  { grid-template-columns: 1fr; gap: 1rem; }
  .st-member-card { aspect-ratio: 4/3; }
}

/* ============================================================
   10. GALLERY
   ============================================================ */
.st-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
.st-gallery-item {
  overflow: hidden;
  border-radius: 0.75rem;
  border: 1px solid var(--st-border);
  display: block;
  aspect-ratio: 3/2;
}
.st-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.st-gallery-item:hover img { transform: scale(1.05); }

@media (min-width: 768px) {
  .st-gallery-grid { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
}

/* ============================================================
   11. MERCH
   ============================================================ */
#st-merch { background: rgba(17,17,17,0.4); }
.st-merch-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 3rem;
}
.st-merch-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.st-merch-card {
  background: var(--st-surface-elev);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius);
  overflow: hidden;
  transition: border-color 0.3s;
  display: block;
}
.st-merch-card:hover { border-color: var(--st-primary); }
.st-merch-img-wrap {
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--st-surface), var(--st-surface-elev));
  padding: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.st-merch-img-wrap img {
  width: 100%; height: 100%;
  object-fit: contain;
  transition: transform 0.5s ease;
}
.st-merch-card:hover .st-merch-img-wrap img { transform: scale(1.1); }
.st-merch-tag {
  position: absolute;
  top: 0.75rem; left: 0.75rem;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  padding: 0.25rem 0.6rem;
  background: rgba(225,29,46,0.2);
  color: var(--st-primary);
  border: 1px solid rgba(225,29,46,0.3);
  border-radius: 9999px;
}
.st-merch-footer {
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--st-border);
}
.st-merch-name {
  font-family: var(--st-font-display);
  font-size: 0.9rem;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .st-merch-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}

/* ============================================================
   12. CONTACT
   ============================================================ */
#st-contact { background: rgba(17,17,17,0.4); }
.st-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem 5rem;
  align-items: start;
}
.st-contact-intro { color: var(--st-muted); margin-top: 1.5rem; max-width: 30rem; }
.st-contact-links { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.st-contact-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  margin-inline: -1rem;
  border-radius: 0.75rem;
  transition: background 0.2s;
}
.st-contact-link:hover { background: var(--st-surface-elev); }
.st-contact-link-icon {
  width: 3rem; height: 3rem;
  border-radius: 50%;
  background: rgba(225,29,46,0.1);
  border: 1px solid rgba(225,29,46,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--st-primary);
  flex-shrink: 0;
}
.st-contact-link-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--st-muted);
  margin-bottom: 0.2rem;
}
.st-contact-link-value {
  font-family: var(--st-font-display);
  font-size: 1.1rem;
  text-transform: uppercase;
  transition: color 0.2s;
}
.st-contact-link:hover .st-contact-link-value { color: var(--st-primary); }
.st-socials {
  display: flex;
  gap: 0.75rem;
  margin-top: 2.5rem;
}
.st-social-btn {
  width: 3rem; height: 3rem;
  border-radius: 50%;
  border: 1px solid var(--st-border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, color 0.2s;
  color: var(--st-fg);
}
.st-social-btn:hover { border-color: var(--st-primary); color: var(--st-primary); }
.st-social-btn svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Contact Form */
.st-contact-form {
  background: rgba(26,26,26,0.6);
  backdrop-filter: blur(12px);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius);
  padding: clamp(1.5rem, 4vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.st-field label {
  display: block;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--st-muted);
  margin-bottom: 0.5rem;
}
.st-field input,
.st-field textarea {
  width: 100%;
  background: var(--st-bg);
  border: 1px solid var(--st-border);
  border-radius: 0.5rem;
  padding: 0.8rem 1rem;
  color: var(--st-fg);
  font-family: var(--st-font-body);
  font-size: 0.95rem;
  transition: border-color 0.2s;
  outline: none;
}
.st-field input:focus,
.st-field textarea:focus { border-color: var(--st-primary); }
.st-field textarea { resize: none; }

@media (max-width: 768px) {
  .st-contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ============================================================
   13. FOOTER
   ============================================================ */
#st-footer {
  border-top: 1px solid var(--st-border);
  padding-block: 2.5rem;
}
.st-footer-inner {
  max-width: var(--st-max-w);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.8rem;
  color: var(--st-muted);
}
.st-footer-brand {
  font-family: var(--st-font-display);
  font-size: 1.1rem;
  text-transform: uppercase;
  color: var(--st-fg);
  letter-spacing: 0.05em;
}
.st-footer-brand span { color: var(--st-primary); }

/* ============================================================
   14. ELEMENTOR OVERRIDES & COMPATIBILITY
   ============================================================ */
.elementor-section,
.elementor-container,
.elementor-widget-wrap { background: transparent !important; }

/* Let Elementor sections sit on our dark bg */
body.elementor-page .elementor { background: var(--st-bg); }

/* Make Elementor text widgets inherit our font */
.elementor-widget-text-editor *,
.elementor-widget-heading * {
  font-family: inherit;
}

/* ============================================================
   15. WP ADMIN BAR FIX
   ============================================================ */
body.admin-bar #st-navbar { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar #st-navbar { top: 46px; }
}

/* ============================================================
   16. ACCESSIBILITY
   ============================================================ */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
:focus-visible { outline: 2px solid var(--st-primary); outline-offset: 3px; }

/* ============================================================
   VIDEO SECTION
   ============================================================ */
.st-video-grid {
  display: grid;
  grid-template-columns: var(--st-video-cols, 1fr 1fr 1fr);
  gap: 2rem;
}
@media (max-width: 900px) {
  .st-video-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .st-video-grid { grid-template-columns: 1fr; }
}

.st-video-item {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* 16:9 responsive embed wrapper */
.st-video-embed-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  background: var(--st-surface-elev);
  border-radius: var(--st-radius);
  overflow: hidden;
  border: 1px solid var(--st-border);
}
.st-video-embed-wrap iframe,
.st-video-embed-wrap video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.st-video-title {
  font-family: var(--st-font-display);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--st-fg);
}

/* Placeholder when no videos are set */
.st-video-placeholder {
  border: 2px dashed var(--st-border);
  border-radius: var(--st-radius);
  padding: 4rem 2rem;
}
.st-video-placeholder-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  color: var(--st-muted);
}
.st-video-placeholder-inner code {
  background: var(--st-surface-elev);
  padding: .2em .5em;
  border-radius: .25rem;
  font-size: .8rem;
  color: var(--st-primary);
}

/* ============================================================
   SHOW CARDS — LINKED TO DETAIL PAGES
   ============================================================ */
/* Make the info column a clickable link without breaking layout */
.st-show-info.st-show-detail-link {
  display: block;
  flex: 1;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s;
}
.st-show-info.st-show-detail-link:hover { opacity: 0.75; }
.st-show-info.st-show-detail-link:hover .st-show-venue {
  color: var(--st-primary);
}

/* "Details" outline button next to ticket button */
.st-show-more-btn {
  padding: 0.75rem 1.25rem;
  font-size: 0.7rem;
}

/* ============================================================
   ELEMENTOR-SPECIFIC OVERRIDES
   Ensures Elementor sections that use our CSS IDs display
   correctly when full-page editing is active.
   ============================================================ */

/* When Elementor renders the page, keep dark bg consistent */
.elementor-page .e-con,
.elementor-page .elementor-section {
  background-color: transparent;
}

/* Elementor wraps the page; make sure our sections still have padding */
.elementor-widget-shortcode .st-show-list,
.elementor-widget-shortcode .st-band-grid,
.elementor-widget-shortcode .st-merch-grid {
  margin-top: 0;
}

/* Elementor Video widget matches our dark theme */
.elementor-widget-video .elementor-video-container {
  border-radius: var(--st-radius);
  overflow: hidden;
}

/* CSS Anchor helper class — add to any element for anchor nav targets
   Usage in Elementor: Section → Advanced → CSS ID = "st-shows" etc.
   Then link to /#st-shows from the nav menu. */
[id^="st-"] {
  scroll-margin-top: 5.5rem; /* accounts for fixed navbar */
}

/* ============================================================
   SINGLE SHOW PAGE ENHANCEMENTS
   ============================================================ */
.st-show-single .st-label code {
  font-size: 0.7rem;
  background: var(--st-surface-elev);
  padding: .15em .4em;
  border-radius: .2rem;
  color: var(--st-primary);
}

/* ============================================================
   FOOTER NAV MENU (Appearance → Menus → Footer Navigation)
   ============================================================ */
.st-footer-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1.5rem;
}
.st-footer-menu a {
  color: var(--st-muted);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-decoration: none;
  transition: color .2s;
}
.st-footer-menu a:hover { color: var(--st-primary); }

/* Gallery column count is set in the original Section 10 above (columns: 4 at ≥768px) */