/* ============================================================
   Locale Sports Bar – Custom Styles
   Dark sports bar theme: black, neon green, burgundy
   ============================================================ */

:root {
  --black: #080808;
  --dark: #111111;
  --card: #1a1a1a;
  --border: #2a2a2a;
  --green: #22c55e;
  --green-bright: #4ade80;
  --green-dim: #16a34a;
  --burgundy: #8b1c3f;
  --red: #dc2626;
  --red-bright: #f87171;
  --gold: #d97706;
  --text: #f1f5f9;
  --muted: #94a3b8;
  --muted2: #64748b;
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  background: var(--black);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
}

::selection { background: rgba(34,197,94,.3); }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--dark); }
::-webkit-scrollbar-thumb { background: var(--green); border-radius: 3px; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ── Layout ── */
.wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

@media (min-width: 640px)  { .wrapper { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .wrapper { padding: 0 2rem; } }

.section { padding: 5rem 0; }
.section--dark { background: var(--dark); }
.section--alt  { background: #0d0d0d; }

/* ── Typography ── */
h1,h2,h3,h4,h5,h6 { line-height: 1.2; font-weight: 700; color: #fff; }

.section-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .375rem 1rem;
  background: rgba(34,197,94,.08);
  border: 1px solid rgba(34,197,94,.25);
  border-radius: 999px;
  font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--green);
  margin-bottom: 1rem;
}

.section-heading { font-size: clamp(1.75rem, 4vw, 2.5rem); margin-bottom: 1rem; }
.section-subheading { font-size: 1.05rem; color: var(--muted); max-width: 640px; }
.text-center { text-align: center; }
.text-center .section-subheading { margin-left: auto; margin-right: auto; }

.neon-line {
  width: 3.5rem; height: 3px;
  background: var(--green);
  border-radius: 99px;
  margin-bottom: 1.25rem;
  box-shadow: 0 0 8px rgba(34,197,94,.6);
}
.neon-line--center { margin-left: auto; margin-right: auto; }

.text-green { color: var(--green); }
.text-red   { color: var(--red); }
.text-muted { color: var(--muted); }
.text-gold  { color: var(--gold); }

/* gradient text */
.grad-green {
  background: linear-gradient(135deg, #22c55e, #4ade80);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.grad-red {
  background: linear-gradient(135deg, #dc2626, #f87171);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .75rem 1.5rem;
  border-radius: .5rem;
  font-weight: 700; font-size: .9rem;
  cursor: pointer; border: 2px solid transparent;
  transition: all .2s; white-space: nowrap;
}
.btn:active { transform: scale(.97); }

.btn-primary {
  background: var(--green); color: var(--black);
  border-color: var(--green);
}
.btn-primary:hover { background: var(--green-bright); box-shadow: 0 0 20px rgba(34,197,94,.4); }

.btn-outline {
  background: transparent; color: var(--green);
  border-color: var(--green);
}
.btn-outline:hover { background: var(--green); color: var(--black); box-shadow: 0 0 20px rgba(34,197,94,.4); }

.btn-red {
  background: transparent; color: var(--red);
  border-color: var(--red);
}
.btn-red:hover { background: var(--red); color: #fff; box-shadow: 0 0 20px rgba(220,38,38,.4); }

.btn-sm { padding: .5rem 1rem; font-size: .8rem; }

.btn-group { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

/* ── Cards ── */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: .75rem;
  overflow: hidden;
  transition: border-color .25s, box-shadow .25s;
}
.card:hover { border-color: rgba(34,197,94,.4); box-shadow: 0 0 12px rgba(34,197,94,.1); }

.card-body { padding: 1.5rem; }
.card-grid { display: grid; gap: 1.25rem; }
.card-grid--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%,280px),1fr)); }
.card-grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%,300px),1fr)); }

/* badge */
.badge {
  display: inline-block;
  padding: .25rem .75rem;
  border-radius: 999px;
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  border: 1px solid;
}
.badge-green  { background: rgba(34,197,94,.1);  color: var(--green); border-color: rgba(34,197,94,.3); }
.badge-red    { background: rgba(220,38,38,.1);   color: var(--red);   border-color: rgba(220,38,38,.3); }
.badge-pink   { background: rgba(236,72,153,.1);  color: #f472b6;      border-color: rgba(236,72,153,.3); }
.badge-purple { background: rgba(168,85,247,.1);  color: #c084fc;      border-color: rgba(168,85,247,.3); }
.badge-gold   { background: rgba(217,119,6,.1);   color: var(--gold);  border-color: rgba(217,119,6,.3); }
.badge-gray   { background: rgba(148,163,184,.1); color: var(--muted); border-color: rgba(148,163,184,.3); }

/* ── Header ── */
#site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .3s, border-color .3s, backdrop-filter .3s, box-shadow .3s;
  height: 64px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(8,8,8,.82);
  backdrop-filter: blur(10px);
}
#site-header.scrolled {
  background: rgba(8,8,8,.97);
  backdrop-filter: blur(16px);
  border-color: var(--border);
  box-shadow: 0 2px 24px rgba(0,0,0,.5);
}

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}

.logo-wrap {
  display: flex; align-items: center; gap: .75rem;
  text-decoration: none;
}
.logo-img {
  width: 42px; height: 42px;
  object-fit: contain;
  border-radius: .375rem;
}
.logo-text { line-height: 1.2; }
.logo-name { font-size: .9rem; font-weight: 700; color: #fff; }
.logo-loc  { font-size: .65rem; color: var(--green); }

.desktop-nav {
  display: none;
  align-items: stretch; gap: 1.5rem;
  list-style: none;
  height: 64px;
}
@media (min-width: 1024px) { .desktop-nav { display: flex; } }
.desktop-nav > li { display: flex; align-items: center; }

.desktop-nav a {
  font-size: .85rem; font-weight: 500; color: var(--muted);
  transition: color .2s;
}
.desktop-nav a:hover { color: var(--green); }

.header-cta { display: none; }
@media (min-width: 768px) { .header-cta { display: inline-flex; } }

.hamburger {
  display: flex; flex-direction: column; justify-content: center;
  width: 40px; height: 40px; gap: 5px; cursor: pointer;
  background: var(--card); border: 1px solid var(--border);
  border-radius: .5rem; padding: 0 10px;
  transition: border-color .2s;
}
.hamburger:hover { border-color: var(--green); }
.hamburger span {
  display: block; width: 20px; height: 2px;
  background: #fff; border-radius: 1px;
  transition: all .3s;
}
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }
@media (min-width: 1024px) { .hamburger { display: none; } }

/* mobile nav */
#mobile-nav {
  display: none;
  position: fixed; inset: 64px 0 0 0; z-index: 99;
  background: rgba(8,8,8,.97);
  backdrop-filter: blur(12px);
  padding: 1.5rem 1.25rem;
  overflow-y: auto;
  flex-direction: column; gap: .25rem;
}
#mobile-nav.open { display: flex; }

#mobile-nav a {
  display: block; padding: .875rem 1rem;
  font-size: 1.1rem; font-weight: 500; color: var(--muted);
  border-radius: .5rem;
  transition: color .2s, background .2s;
}
#mobile-nav a:hover { color: var(--green); background: var(--card); }

.mobile-cta-group {
  display: flex; flex-direction: column; gap: .75rem;
  margin-top: 1rem; padding-top: 1rem;
  border-top: 1px solid var(--border);
}

/* ── Hero ── */
.hero {
  min-height: 100vh;
  display: flex; align-items: center;
  padding-top: 64px;
  position: relative;
  background: var(--black);
  overflow: hidden;
}
.hero::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 10rem;
  background: linear-gradient(to top, var(--black), transparent);
  pointer-events: none;
  z-index: 3;
}

/* Hero background slider */
.hero-bg-slider {
  position: absolute; inset: 0; z-index: 0;
}
.hero-bg-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center center;
  opacity: 0;
  transition: opacity 1.4s ease;
  will-change: opacity;
}
.hero-bg-slide.active { opacity: 1; }

/* Gradient overlay for text readability */
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(8,8,8,.88) 0%, rgba(8,8,8,.55) 60%, rgba(8,8,8,.3) 100%),
    linear-gradient(to top, rgba(8,8,8,.7) 0%, transparent 50%),
    radial-gradient(ellipse at 10% 50%, rgba(34,197,94,.06) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(139,28,63,.06) 0%, transparent 55%);
}

/* Slider dots */
.hero-dots {
  display: flex; gap: .5rem; margin-top: 2.5rem;
}
.hero-dot {
  width: 8px; height: 8px; border-radius: 4px;
  background: rgba(255,255,255,.25); border: none; cursor: pointer;
  transition: all .35s ease; padding: 0;
}
.hero-dot.active {
  width: 28px;
  background: var(--green);
  box-shadow: 0 0 10px rgba(34,197,94,.6);
}
.hero-dot:hover:not(.active) { background: rgba(255,255,255,.5); }

.hero-inner { position: relative; z-index: 2; padding: 4rem 0; }
.hero-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .375rem 1rem;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 999px; font-size: .8rem; color: var(--muted);
  margin-bottom: 1.5rem;
}
.hero-pill span { width: 8px; height: 8px; background: var(--green); border-radius: 50%; animation: pulse 2s infinite; }

.hero h1 { font-size: clamp(2rem, 5vw, 3.5rem); max-width: 820px; margin-bottom: 1.25rem; }
.hero-sub {
  font-size: clamp(1rem, 2vw, 1.2rem); color: var(--muted);
  max-width: 640px; line-height: 1.7; margin-bottom: 1rem;
}
.hero-slogan { font-style: italic; color: var(--green); margin-bottom: 2.5rem; }

.hero--compact {
  min-height: 40vh;
  padding-top: 80px;
  padding-bottom: 2rem;
}
.hero--compact .hero-inner { padding: 3rem 0 2rem; }

/* ── Feature grid ── */
.feature-icon {
  width: 56px; height: 56px;
  border-radius: .75rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
.feature-icon--green { background: rgba(34,197,94,.1); }
.feature-icon--red   { background: rgba(236,72,153,.1); }

.card .feature-title { font-size: 1.05rem; margin-bottom: .5rem; transition: color .2s; }
.card:hover .feature-title { color: var(--green); }
.card .feature-desc { font-size: .875rem; color: var(--muted); line-height: 1.6; }

/* ── Menu highlights ── */
.menu-highlight-grid { display: grid; gap: .75rem; grid-template-columns: 1fr 1fr; }
.menu-item-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: .625rem; padding: .875rem 1rem;
  display: flex; gap: .75rem; align-items: flex-start;
  transition: border-color .2s;
}
.menu-item-card:hover { border-color: rgba(34,197,94,.35); }
.menu-item-card .emoji { font-size: 1.375rem; flex-shrink: 0; }
.menu-item-name { font-size: .875rem; font-weight: 600; color: #fff; }
.menu-item-desc { font-size: .72rem; color: var(--muted2); margin-top: 2px; }

.cat-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.cat-pill {
  padding: .35rem .85rem;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 999px; font-size: .78rem; color: var(--muted);
  transition: border-color .2s, color .2s, background .2s; cursor: default;
}
.cat-pill:hover { border-color: rgba(34,197,94,.4); color: var(--green); }
.cat-pill--link {
  text-decoration: none; cursor: pointer;
  display: inline-flex; align-items: center;
}
.cat-pill--link:hover {
  background: rgba(34,197,94,.08);
  border-color: rgba(34,197,94,.5);
  color: var(--green);
}

/* ── Events ── */
.event-meta { display: flex; flex-wrap: wrap; gap: 1rem; margin: .75rem 0; }
.event-meta-item { display: flex; align-items: center; gap: .375rem; font-size: .83rem; color: var(--muted); }
.event-meta-item svg { color: var(--green); flex-shrink: 0; }

.event-cta-row {
  display: flex; gap: .5rem; margin-top: 1.25rem;
  padding-top: 1rem; border-top: 1px solid var(--border);
}
.event-cta-row .btn { flex: 1; justify-content: center; }

/* ── Gallery ── */
.gallery-grid {
  display: grid;
  gap: .875rem;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
/* Homepage gallery: forced 4 columns × 2 rows on desktop, 2 cols on tablet, 2 cols on mobile */
.gallery-grid--home { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .gallery-grid--home { grid-template-columns: repeat(2, 1fr); }
}
.gallery-item {
  aspect-ratio: 4/3;
  border-radius: .75rem;
  overflow: hidden;
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  transition: border-color .25s, transform .25s;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: .5rem;
  cursor: default;
}
.gallery-item:hover {
  border-color: rgba(34,197,94,.4);
  transform: translateY(-2px);
  box-shadow: 0 0 15px rgba(34,197,94,.1);
}
.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  position: absolute; inset: 0;
}
.gallery-placeholder { text-align: center; }
.gallery-emoji { font-size: 3rem; }
.gallery-label { font-size: .8rem; color: var(--muted); }
.gallery-caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: .5rem .75rem;
  background: linear-gradient(to top, rgba(8,8,8,.85), transparent);
  font-size: .78rem; font-weight: 500; color: #fff;
  opacity: 0; transition: opacity .25s;
}
.gallery-item:hover .gallery-caption { opacity: 1; }

/* ── Map section ── */
.map-info { display: flex; flex-direction: column; gap: 1.25rem; }
.map-info-item { display: flex; gap: .75rem; align-items: flex-start; }
.map-icon {
  width: 36px; height: 36px; flex-shrink: 0;
  background: rgba(34,197,94,.1);
  border-radius: .5rem;
  display: flex; align-items: center; justify-content: center;
}
.map-icon svg { color: var(--green); }
.map-info-label { font-size: .875rem; font-weight: 600; color: #fff; margin-bottom: .2rem; }
.map-info-value { font-size: .83rem; color: var(--muted); }

.map-embed {
  border-radius: .75rem; overflow: hidden;
  border: 1px solid var(--border);
  height: 320px;
}
@media (min-width: 768px) { .map-embed { height: 380px; } }
.map-embed iframe { display: block; }

/* ── Social cards ── */
.social-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: .75rem;
  padding: 1.5rem;
  display: flex; flex-direction: column; gap: 1rem;
  transition: border-color .25s, box-shadow .25s;
  text-decoration: none; color: inherit;
}
.social-icon {
  width: 48px; height: 48px; border-radius: .75rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
}
.social-name { font-size: 1rem; font-weight: 700; color: #fff; }
.social-handle { font-size: .8rem; color: var(--muted2); }
.social-desc { font-size: .8rem; color: var(--muted); }

.social-card--ig:hover  { border-color: rgba(236,72,153,.5); }
.social-card--fb:hover  { border-color: rgba(59,130,246,.5); }
.social-card--ta:hover  { border-color: rgba(34,197,94,.5); }
.social-card--gm:hover  { border-color: rgba(220,38,38,.5); }
.si-ig { background: rgba(236,72,153,.1); color: #f472b6; }
.si-fb { background: rgba(59,130,246,.1); color: #60a5fa; }
.si-ta { background: rgba(34,197,94,.1); color: var(--green); }
.si-gm { background: rgba(220,38,38,.1); color: var(--red); }

/* ── Review CTA ── */
.review-row { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .review-row { grid-template-columns: 1fr 1fr; } }
.review-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: .75rem; padding: 2rem;
  display: flex; align-items: center; gap: 1.5rem;
  flex-wrap: wrap; transition: border-color .25s;
}
.review-card--green:hover { border-color: rgba(34,197,94,.4); }
.review-card--ta:hover    { border-color: rgba(34,197,94,.4); }
.review-icon {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.75rem; flex-shrink: 0;
}
.review-icon--green { background: rgba(34,197,94,.1); }
.review-icon--ta    { background: rgba(34,197,94,.1); }
.review-content { flex: 1; }
.review-title { font-size: 1.05rem; font-weight: 700; margin-bottom: .5rem; }
.review-text { font-size: .83rem; color: var(--muted); margin-bottom: 1rem; }

/* ── Drink photo grid ── */
.drink-photo-grid {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 639px) { .drink-photo-grid { grid-template-columns: repeat(2, 1fr); } }
.drink-photo-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: .625rem;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.drink-photo-card:hover {
  border-color: rgba(34,197,94,.35);
  box-shadow: 0 0 10px rgba(34,197,94,.1);
}
.drink-photo-img {
  aspect-ratio: 1/1;
  overflow: hidden;
}
.drink-photo-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.drink-photo-card:hover .drink-photo-img img { transform: scale(1.05); }
.drink-photo-info {
  padding: .625rem .75rem .75rem;
}

/* ── Menu page ── */
.menu-cat-nav {
  position: sticky; top: 64px; z-index: 50;
  background: rgba(17,17,17,.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.menu-cat-scroll {
  display: flex; gap: .5rem; overflow-x: auto;
  padding: .75rem 0; scrollbar-width: none;
}
.menu-cat-scroll::-webkit-scrollbar { display: none; }
.menu-cat-link {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: .375rem;
  padding: .375rem .875rem;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 999px; font-size: .78rem; color: var(--muted);
  text-decoration: none;
  transition: border-color .2s, color .2s;
  white-space: nowrap;
}
.menu-cat-link:hover { border-color: rgba(34,197,94,.5); color: var(--green); }

.menu-section { scroll-margin-top: 112px; }
.menu-section-header {
  display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem;
}
.menu-section-title { font-size: 1.375rem; }
.menu-section-divider { flex: 1; height: 1px; background: var(--border); }

.menu-item-list { display: grid; gap: .625rem; grid-template-columns: repeat(auto-fill, minmax(min(100%,260px),1fr)); }
.menu-list-item {
  background: var(--card); border: 1px solid var(--border);
  border-radius: .5rem; padding: .75rem 1rem;
  display: flex; flex-direction: column; gap: .2rem;
  transition: border-color .2s;
}
.menu-list-item:hover { border-color: rgba(34,197,94,.3); }
.menu-list-item.highlight { border-color: rgba(34,197,94,.25); background: rgba(34,197,94,.04); }
.menu-list-name { font-size: .875rem; font-weight: 600; color: #fff; }
.menu-list-name .star { color: var(--green); margin-right: .25rem; }
.menu-list-desc { font-size: .75rem; color: var(--muted2); }

/* ── Contact ── */
.contact-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: .75rem; padding: 1.5rem;
  display: flex; flex-direction: column; align-items: center; gap: .75rem;
  text-align: center; text-decoration: none; color: inherit;
  transition: border-color .25s;
}
.contact-icon {
  width: 48px; height: 48px; border-radius: .75rem;
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
}
.contact-card-name { font-weight: 600; color: #fff; font-size: .9rem; }
.contact-card-sub  { font-size: .78rem; color: var(--muted2); }

.hours-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: .75rem; padding: 1.5rem; max-width: 400px;
}
.hours-title { font-size: 1rem; font-weight: 700; display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.hours-row { display: flex; justify-content: space-between; padding: .5rem 0; border-bottom: 1px solid var(--border); font-size: .85rem; }
.hours-row:last-child { border-bottom: 0; }
.hours-day   { color: var(--muted); }
.hours-time  { color: #fff; }
.hours-link  { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--border); }
.hours-link a { font-size: .8rem; color: #f472b6; }
.hours-link a:hover { color: #fb7185; }

/* ── Footer ── */
#site-footer {
  background: var(--dark);
  border-top: 1px solid var(--border);
  margin-top: 5rem;
  padding: 3.5rem 0 2rem;
}
.footer-grid {
  display: grid; gap: 2.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }

.footer-logo { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.footer-tagline { font-size: .875rem; color: var(--muted); line-height: 1.7; max-width: 320px; margin-bottom: .875rem; }
.footer-slogan { font-style: italic; color: var(--green); font-size: .875rem; }
.footer-col-title { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #fff; margin-bottom: 1rem; }
.footer-links { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.footer-links a { font-size: .875rem; color: var(--muted); transition: color .2s; }
.footer-links a:hover { color: var(--green); }
.footer-social-links { display: flex; flex-direction: column; gap: .625rem; }
.footer-soc { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--muted); text-decoration: none; transition: color .2s; }
.footer-soc:hover { color: var(--green); }
.footer-soc svg { width: 16px; height: 16px; flex-shrink: 0; }
.footer-soc-ig:hover { color: #f472b6; }
.footer-soc-fb:hover { color: #60a5fa; }
.footer-soc-ta:hover { color: #4ade80; }
.footer-soc-gm:hover { color: #f87171; }

.footer-bottom {
  margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: .75rem; align-items: center;
  text-align: center;
}
@media (min-width: 640px) {
  .footer-bottom { flex-direction: row; justify-content: space-between; text-align: left; }
}
.footer-copy { font-size: .78rem; color: var(--muted2); }
.footer-extra { display: flex; gap: 1.25rem; }
.footer-extra a { font-size: .78rem; color: var(--muted2); transition: color .2s; }
.footer-extra a:hover { color: var(--green); }

/* ── Grid helpers ── */
.grid-2 { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

.grid-2-auto { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .grid-2-auto { grid-template-columns: 1fr 1fr; align-items: center; } }

.grid-4 {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
}

/* ── Stat grid ── */
.stat-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
.stat-card { background: var(--card); border: 1px solid var(--border); border-radius: .75rem; padding: 1.5rem; text-align: center; }
.stat-icon { font-size: 2rem; margin-bottom: .5rem; }
.stat-value { font-size: 1.25rem; font-weight: 700; color: var(--green); }
.stat-label { font-size: .78rem; color: var(--muted); margin-top: .25rem; }

/* ── League grid ── */
.league-grid { display: grid; gap: .625rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.league-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: .625rem; padding: .875rem 1rem;
  display: flex; flex-direction: column; align-items: center; gap: .375rem;
  text-align: center; transition: border-color .2s;
}
.league-card:hover { border-color: rgba(34,197,94,.4); }
.league-icon { font-size: 1.5rem; }
.league-name { font-size: .75rem; color: var(--muted); }

/* ── Night cards ── */
.night-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: .75rem; padding: 1.75rem;
  transition: border-color .25s;
}
.night-icon { font-size: 2.5rem; margin-bottom: 1rem; }
.night-event { font-size: 1.25rem; margin: .5rem 0; }
.night-time { font-size: .9rem; color: var(--green); margin-bottom: .75rem; }
.night-desc { font-size: .875rem; color: var(--muted); line-height: 1.6; }
.night-card--green { border-color: rgba(34,197,94,.25); background: rgba(34,197,94,.04); }
.night-card--pink  { border-color: rgba(236,72,153,.25); background: rgba(236,72,153,.04); }
.night-card--purple{ border-color: rgba(168,85,247,.25); background: rgba(168,85,247,.04); }

/* ── Highlight box ── */
.highlight-box {
  background: var(--card); border: 1px solid var(--border);
  border-radius: .75rem; padding: 2rem;
}

/* ── Utility ── */
.mt-1 { margin-top: .25rem; }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: .75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-12 { margin-top: 3rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }
.pt-6 { padding-top: 1.5rem; }
.pt-10 { padding-top: 2.5rem; }
.pt-12 { padding-top: 3rem; }
.pb-10 { padding-bottom: 2.5rem; }
.border-top { border-top: 1px solid var(--border); }
.gap-3 { gap: .75rem; }
.gap-4 { gap: 1rem; }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-1 { flex: 1; }
.w-full { width: 100%; }
.max-w-2xl { max-width: 640px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.hidden { display: none; }
.d-block { display: block; }

/* ── Blog ── */
.blog-grid {
  display: grid; gap: 1.75rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%,340px),1fr));
}
.blog-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: .75rem;
  overflow: hidden;
  transition: border-color .25s, box-shadow .25s;
  display: flex; flex-direction: column;
}
.blog-card:hover { border-color: rgba(34,197,94,.4); box-shadow: 0 0 15px rgba(34,197,94,.08); }
.blog-card-img-wrap {
  display: block; aspect-ratio: 16/9; overflow: hidden;
}
.blog-card-img-wrap img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease;
}
.blog-card:hover .blog-card-img-wrap img { transform: scale(1.04); }
.blog-card-body { padding: 1.25rem; display: flex; flex-direction: column; gap: .625rem; flex: 1; }
.blog-card-meta { display: flex; align-items: center; gap: .625rem; flex-wrap: wrap; }
.blog-card-date, .blog-card-read { font-size: .72rem; color: var(--muted2); }
.blog-card-title { font-size: 1.05rem; line-height: 1.35; margin: 0; }
.blog-card-title a { color: #fff; transition: color .2s; }
.blog-card-title a:hover { color: var(--green); }
.blog-card-excerpt { font-size: .85rem; color: var(--muted); line-height: 1.6; flex: 1; }
.blog-card-cta {
  display: inline-flex; align-items: center; gap: .375rem;
  font-size: .8rem; font-weight: 600; color: var(--green);
  margin-top: auto; transition: gap .2s;
}
.blog-card-cta:hover { gap: .6rem; }

/* Blog post */
.blog-post-meta { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .5rem; }
.blog-content {
  color: var(--muted); line-height: 1.85; font-size: .975rem;
}
.blog-content h2 {
  font-size: 1.3rem; color: #fff; margin: 2rem 0 .75rem;
  padding-bottom: .5rem; border-bottom: 1px solid var(--border);
}
.blog-content h3 { font-size: 1.1rem; color: #fff; margin: 1.5rem 0 .5rem; }
.blog-content p { margin-bottom: 1rem; }
.blog-content ul, .blog-content ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.blog-content li { margin-bottom: .4rem; }
.blog-content a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.blog-content a:hover { color: var(--green-bright); }
.blog-content strong { color: #fff; font-weight: 600; }
.blog-post-cta { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.blog-related-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); }
.blog-related-card {
  display: flex; gap: .875rem; align-items: center;
  background: var(--card); border: 1px solid var(--border);
  border-radius: .625rem; overflow: hidden;
  transition: border-color .2s; text-decoration: none;
}
.blog-related-card:hover { border-color: rgba(34,197,94,.4); }
.blog-related-card img { width: 90px; height: 70px; object-fit: cover; flex-shrink: 0; }
.blog-related-info { padding: .5rem .75rem .5rem 0; display: flex; flex-direction: column; gap: .375rem; }
.blog-related-title { font-size: .8rem; color: #fff; line-height: 1.35; font-weight: 600; }

/* ── WhatsApp floating button ── */
.wa-float {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 200;
  width: 54px; height: 54px; border-radius: 50%;
  background: #25d366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,.45);
  transition: transform .2s, box-shadow .2s;
}
.wa-float:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(37,211,102,.6); }
.wa-float svg { width: 28px; height: 28px; fill: #fff; }
.wa-tooltip {
  position: fixed; bottom: 5rem; right: 1.5rem; z-index: 199;
  background: #25d366; color: #fff;
  padding: .4rem .875rem; border-radius: 999px;
  font-size: .78rem; font-weight: 600;
  opacity: 0; pointer-events: none;
  transform: translateY(4px);
  transition: opacity .2s, transform .2s;
  white-space: nowrap;
}
.wa-float:hover + .wa-tooltip,
.wa-float:focus + .wa-tooltip { opacity: 1; transform: translateY(0); }

/* ── Nav dropdown ── */
.nav-dropdown { position: relative; }
.nav-dropdown > a::after {
  content: '▾'; margin-left: .3rem; font-size: .65rem;
}
.nav-dropdown-menu {
  display: none;
  position: absolute; top: calc(100% + .75rem); left: 50%;
  transform: translateX(-50%);
  background: rgba(17,17,17,.98);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: .625rem;
  padding: .5rem;
  min-width: 180px;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  z-index: 110;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a {
  display: block; padding: .5rem .875rem;
  font-size: .83rem; color: var(--muted);
  border-radius: .375rem;
  transition: color .15s, background .15s;
  white-space: nowrap;
}
.nav-dropdown-menu a:hover { color: var(--green); background: rgba(34,197,94,.07); }

/* ── Animations ── */
@keyframes pulse {
  0%,100% { opacity: 1; }
  50% { opacity: .4; }
}