/* GayOut — Design Tokens + Design System (combined) */

:root {

  /* ── Brand ─────────────────────────────────────────────── */
  --brand-50:   #F5EDFB;
  --brand-100:  #E9D5F8;
  --brand-200:  #D4ACF1;
  --brand-300:  #B66FE0;
  --brand-400:  #9B44CF;
  --brand-500:  #8B3DBE;
  --brand-600:  #7A33A8;
  --brand-700:  #6B2A95;
  --brand-800:  #531F76;
  --brand-900:  #3A1554;

  --color-primary:       var(--brand-500);
  --color-primary-hover: var(--brand-700);
  --color-primary-light: var(--brand-300);
  --color-primary-50:    var(--brand-50);

  --primary:       var(--brand-500);
  --primary-dark:  var(--brand-700);
  --primary-light: var(--brand-300);
  --primary-50:    var(--brand-50);
  --gray-logo:     #5A6070;
  --dark:          #111827;

  --color-bg:          #FAFAF8;
  --color-bg-elevated: #FFFFFF;
  --color-bg-subtle:   #F3F4F6;
  --color-border:      #E5E7EB;
  --color-border-subtle: #F3F4F6;

  --color-text:           #111827;
  --color-text-secondary: #374151;
  --color-text-muted:     #6B7280;
  --color-text-subtle:    #9CA3AF;
  --color-text-inverse:   #FFFFFF;

  --color-success: #059669;
  --color-warning: #D97706;
  --color-error:   #DC2626;
  --color-info:    #2563EB;

  --gradient-pride: linear-gradient(90deg,
    #E91E63 0%, #FF9800 16%, #FFC107 33%,
    #4CAF50 50%, #2196F3 67%, #9C27B0 83%, #8B3DBE 100%);
  --pride: var(--gradient-pride);

  --gradient-brand: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  --gradient-dark:  linear-gradient(135deg, #1a1034 0%, #2d1554 40%, #1a2040 100%);
  --gradient-hero:  linear-gradient(to bottom,rgba(0,0,0,.42) 0%,rgba(0,0,0,.58) 60%,rgba(0,0,0,.72) 100%);

  --shadow-xs:  0 1px 2px rgba(0,0,0,.04);
  --shadow-sm:  0 1px 3px rgba(0,0,0,.06);
  --shadow-md:  0 4px 12px rgba(0,0,0,.08);
  --shadow-lg:  0 12px 32px rgba(0,0,0,.12);
  --shadow-xl:  0 24px 60px rgba(0,0,0,.18);
  --shadow-2xl: 0 40px 80px rgba(0,0,0,.22);
  --shadow-brand: 0 4px 14px rgba(139,61,190,.35);
  --shadow-brand-lg: 0 12px 40px rgba(139,61,190,.25);

  --radius-xs:   4px; --radius-sm:  8px; --radius-md:  12px;
  --radius-lg:   16px; --radius-xl: 20px; --radius-2xl: 24px;
  --radius-3xl:  28px; --radius-full: 999px;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-instant: 0.1s; --duration-fast: 0.2s;
  --duration-base: 0.3s; --duration-slow: 0.5s; --duration-slower: 0.7s;

  --card-radius: var(--radius-lg);
  --card-shadow: var(--shadow-sm);
  --card-border: 1px solid var(--color-border-subtle);
  --card-bg:     var(--color-bg-elevated);
  --btn-radius:  var(--radius-md);
  --btn-shadow:  var(--shadow-brand);
  --input-radius: var(--radius-md);
  --input-border: 2px solid var(--color-border);
  --input-focus-shadow: 0 0 0 4px rgba(139,61,190,.1);
  --header-height: 65px;

  /* ── Typography ────────────────────────────────────────────
     Rubik covers Latin + Hebrew + Arabic + Cyrillic + Greek in one
     family — same metrics across all 11 site languages. Geist Mono
     is used only for digits (ratings, prices, dates, stats) so columns
     of numbers line up. */
  --font-sans: 'Rubik', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  /* Back-compat aliases — older rules in this file still reference these. */
  --font-body:    var(--font-sans);
  --font-display: var(--font-sans);

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  clamp(2rem, 5vw, 2.75rem);
  --text-5xl:  clamp(2.5rem, 7vw, 3.5rem);
  --text-6xl:  clamp(3rem, 9vw, 4.5rem);

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;
  --weight-black:   900;

  --leading-tight:   1.05;
  --leading-snug:    1.15;
  --leading-normal:  1.4;
  --leading-relaxed: 1.6;
  --leading-loose:   1.7;

  --tracking-tight:  -0.03em;
  --tracking-snug:   -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.05em;
  --tracking-wider:  0.1em;

  /* ── Pride flag palette — used as accents in the icon set ───
     The 6 stripes of the post-1979 rainbow flag plus extended community
     hues (trans cyan/pink, lesbian/bear oranges, general LGBTQ+ pink). */
  --pride-red:    #e63946;
  --pride-orange: #f4801f;
  --pride-yellow: #ffd60a;
  --pride-green:  #06a77d;
  --pride-blue:   #1d70b8;
  --pride-purple: #8b3aaf;
  --pride-pink:        #ec4899;
  --pride-cyan:        #06b6d4;
  --pride-pink-light:  #f5a9b8;
  --bear-brown:        #8b5a2b;
  --bear-orange:       #f4801f;
  --lesbian-red:       #d62900;
  --lesbian-purple:    #a40062;
  --trans-cyan:        #5bcefa;
  --trans-pink:        #f5a9b8;

  /* Convenient gradient ribbon (Pride flag, left-to-right) */
  --pride-gradient: linear-gradient(90deg,
    var(--pride-red),    var(--pride-orange),
    var(--pride-yellow), var(--pride-green),
    var(--pride-blue),   var(--pride-purple));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:            #0A0A0C; --color-bg-elevated:   #161618;
    --color-bg-subtle:     #222226; --color-border:        #3A3A40;
    --color-border-subtle: #28282E; --color-text:          #F4F4F5;
    --color-text-secondary:#E4E4E7; --color-text-muted:    #A1A1AA;
    --color-text-subtle:   #71717A;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.4); --shadow-md: 0 4px 12px rgba(0,0,0,.55);
    --shadow-lg: 0 12px 32px rgba(0,0,0,.65); --shadow-brand: 0 4px 14px rgba(139,61,190,.5);
    --card-border: 1px solid var(--color-border);
  }
}
:root[data-theme="dark"] {
  --color-bg:            #0A0A0C; --color-bg-elevated:   #161618;
  --color-bg-subtle:     #222226; --color-border:        #3A3A40;
  --color-border-subtle: #28282E; --color-text:          #F4F4F5;
  --color-text-secondary:#E4E4E7; --color-text-muted:    #A1A1AA;
  --color-text-subtle:   #71717A;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.4); --shadow-md: 0 4px 12px rgba(0,0,0,.55);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.65); --shadow-brand: 0 4px 14px rgba(139,61,190,.5);
  --card-border: 1px solid var(--color-border);
}

/* ── Utility classes using tokens ────────────────────────── */
.text-muted  { color: var(--color-text-muted); }
.text-subtle { color: var(--color-text-subtle); }
.bg-elevated { background: var(--color-bg-elevated); }
.shadow-brand { box-shadow: var(--shadow-brand); }
.transition-base { transition-duration:var(--duration-base); transition-timing-function:var(--ease-out); }
.transition-fast { transition-duration:var(--duration-fast); transition-timing-function:var(--ease-out); }

/* ── Pride bar ──────────────────────────────────────────── */
.pride-bar { height:4px; background:var(--pride); }

/* ── Typography (legacy block — main rules live below) ─── */
body {
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.65;
  color: #111827;
}
h1, h2, h3, h4, h5 {
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #111827;
}
p { line-height: 1.75; margin-bottom: 0.75rem; }
p:last-child { margin-bottom: 0; }

/* ── RTL ────────────────────────────────────────────────── */
.rtl { direction:rtl; text-align:right; }

/* ── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:#f8f8f8; }
::-webkit-scrollbar-thumb { background:#c4b5fd; border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--primary); }

/* ── Line clamp ─────────────────────────────────────────── */
.line-clamp-1 { display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden; }
.line-clamp-2 { display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.line-clamp-3 { display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; }

/* ── Cards ──────────────────────────────────────────────── */
.card {
  background:#fff;
  border-radius:16px;
  border:1px solid #F3F4F6;
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.card:hover {
  transform:translateY(-3px);
  box-shadow:0 12px 40px rgba(139,61,190,.13);
}
.card img { transition:transform .35s ease; }
.card:hover img { transform:scale(1.06); }

/* ── Buttons ────────────────────────────────────────────── */
.btn-primary {
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 28px;
  background:var(--primary);color:#fff;
  font-weight:700;font-size:15px;
  border-radius:12px;
  transition:background .18s,transform .18s,box-shadow .18s;
  box-shadow:0 4px 14px rgba(139,61,190,.35);
  /* Ripple-ready — JS auto-attaches to .btn-primary just like .ripple */
  position:relative;overflow:hidden;isolation:isolate;
}
.btn-primary:hover { background:var(--primary-dark);transform:translateY(-1px);box-shadow:0 6px 20px rgba(139,61,190,.45); }

.btn-outline {
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 26px;
  border:2px solid var(--primary);color:var(--primary);
  font-weight:700;font-size:15px;
  border-radius:12px;
  transition:all .18s;
}
.btn-outline:hover { background:var(--primary);color:#fff; }

.btn-white {
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 28px;
  background:#fff;color:var(--primary);
  font-weight:700;font-size:15px;
  border-radius:12px;
  transition:all .18s;
  box-shadow:0 4px 14px rgba(0,0,0,.15);
}
.btn-white:hover { background:#F5EDFB;transform:translateY(-1px); }

/* ── Nav hover underline ─────────────────────────────────── */
.nav-link {
  position:relative;
  padding:6px 7px;
  font-size:13px;font-weight:500;
  color:#374151;
  border-radius:8px;
  transition:color .15s;
  white-space:nowrap;
}
.nav-link::after {
  content:'';
  position:absolute;bottom:0;left:7px;right:7px;
  height:2px;
  background:var(--pride);
  border-radius:1px;
  transform:scaleX(0);
  transition:transform .2s ease;
}
.nav-link:hover { color:var(--primary); }
.nav-link:hover::after { transform:scaleX(1); }

/* ── Category pill ──────────────────────────────────────── */
.cat-pill {
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 12px;
  border-radius:20px;
  font-size:12px;font-weight:600;
  border:1.5px solid transparent;
  transition:all .15s;
  cursor:pointer;
}
.cat-tab { padding:10px 20px;font-size:14px;font-weight:500;border-bottom:3px solid transparent;color:#6b7280;white-space:nowrap;transition:all .2s; }
.cat-tab:hover,.cat-tab.active { color:var(--primary);border-bottom-color:var(--primary); }

/* ── Section titles ─────────────────────────────────────── */
.section-title {
  font-size: 30px;
  font-weight: 800;
  color: #111827;
  line-height: 1.15;
  letter-spacing: -0.03em;
}
.section-sub {
  font-size: 16px;
  color: #6B7280;
  margin-top: 6px;
  line-height: 1.6;
}

/* ── Date badge ─────────────────────────────────────────── */
.date-badge {
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;
  background:var(--primary-50);
  color:var(--primary);
  font-size:12px;font-weight:600;
  border-radius:20px;
}

/* ── TBA badge ──────────────────────────────────────────── */
.tba-badge {
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;
  background:#FEF3C7;color:#92400E;
  font-size:12px;font-weight:700;
  border-radius:20px;
}

/* ── Badges ─────────────────────────────────────────────── */
.badge { display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:.3px; }
.badge-featured { background:#FEF3C7;color:#92400E; }
.badge-new      { background:#D1FAE5;color:#065F46; }
.badge-mega     { background:var(--primary);color:#fff; }
.badge-pending  { background:#F3F4F6;color:#374151; }

/* ── Rating star ────────────────────────────────────────── */
.rating { display:inline-flex;align-items:center;gap:4px;font-weight:600;font-size:13px;color:#B45309; }
.rating svg { color:#F59E0B; }

/* ── Search box ─────────────────────────────────────────── */
.search-box-wrap { position:relative; }
.search-box-wrap input {
  width:100%;padding:16px 20px 16px 52px;
  border-radius:14px;border:2px solid #E5E7EB;
  font-size:15px;
  transition:border-color .15s,box-shadow .15s;
  background:#fff;
}
.search-box-wrap input:focus { border-color:var(--primary);box-shadow:0 0 0 4px rgba(139,61,190,.1);outline:none; }
.search-box-wrap .search-icon { position:absolute;left:18px;top:50%;transform:translateY(-50%);color:#9CA3AF;pointer-events:none; }
.search-box-wrap button.search-btn {
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  padding:8px 18px;background:var(--primary);color:#fff;
  border-radius:10px;font-weight:600;font-size:14px;
  transition:background .15s;
}
.search-box-wrap button.search-btn:hover { background:var(--primary-dark); }

/* ── Dropdown shadow ────────────────────────────────────── */
.dropdown-panel {
  background:#fff;
  border-radius:14px;
  border:1px solid #F3F4F6;
  box-shadow:0 20px 60px rgba(0,0,0,.12);
}

/* ── Mega menu ──────────────────────────────────────────── */
.mega-panel { scrollbar-width:thin;scrollbar-color:#d8b4fe #f5f3ff; }
.mega-panel::-webkit-scrollbar { width:6px; }
.mega-panel::-webkit-scrollbar-track { background:#f5f3ff; }
.mega-panel::-webkit-scrollbar-thumb { background:#c4b5fd;border-radius:3px; }

.mega-country-link {
  display:block;
  font-size:.72rem;
  font-weight:700;
  color:#374151;
  text-decoration:none;
  margin-bottom:4px;
}
.mega-country-link:hover { color:#6B2A95; }

.mega-city-link {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:.7rem;
  color:#6B7280;
  text-decoration:none;
  padding:1px 0 1px 10px;
  line-height:1.5;
}
.mega-city-link:hover { color:#6B2A95; }
.mega-city-count { color:#9CA3AF;margin-left:4px;flex-shrink:0; }

/* ── Map ────────────────────────────────────────────────── */
#leafletMap { height:400px;border-radius:16px;overflow:hidden;z-index:1; }
#worldGayMapFull { height:calc(100vh - 65px); }
.map-continent { cursor:pointer;transition:opacity .2s; }
.map-continent:hover { opacity:.8; }

/* ── Review stars ───────────────────────────────────────── */
.review-stars span { color:#FFC107;font-size:18px; }
.review-stars span.empty { color:#D1D5DB; }

/* ── Opening hours ──────────────────────────────────────── */
.hours-today { background:#F5EDFB;font-weight:600;color:var(--primary); }

/* ── Gallery ────────────────────────────────────────────── */
.gallery-slider { scroll-snap-type:x mandatory;scroll-behavior:smooth; }
.gallery-slide  { scroll-snap-align:start;flex-shrink:0; }

/* ── Lightbox ───────────────────────────────────────────── */
#lightbox { position:fixed;inset:0;background:rgba(0,0,0,.93);z-index:999;display:none;align-items:center;justify-content:center; }
#lightbox.open { display:flex; }
#lightbox img { max-width:90vw;max-height:90vh;object-fit:contain;border-radius:10px; }
#lightbox .close { position:absolute;top:20px;right:24px;color:#fff;font-size:36px;cursor:pointer;line-height:1;opacity:.7;transition:opacity .15s; }
#lightbox .close:hover { opacity:1; }

/* ── Skeleton ───────────────────────────────────────────── */
.skeleton {
  background:linear-gradient(90deg,#f0f0f0 25%,#e8e8e8 50%,#f0f0f0 75%);
  background-size:200% 100%;
  animation:skeleton-shimmer 1.4s infinite;
  border-radius:8px;
}
@keyframes skeleton-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── Admin ──────────────────────────────────────────────── */
.admin-sidebar { width:240px;min-height:100vh;background:#111827; }
.admin-sidebar a { display:flex;align-items:center;gap:10px;padding:10px 16px;color:#9CA3AF;font-size:14px;transition:all .15s;border-radius:8px;margin:2px 8px; }
.admin-sidebar a:hover,.admin-sidebar a.active { background:rgba(139,61,190,.25);color:#fff; }

/* ── Filter group ───────────────────────────────────────── */
.filter-group { border-bottom:1px solid #E5E7EB;padding-bottom:16px;margin-bottom:16px; }
.filter-group:last-child { border-bottom:none; }

/* ── Hero gradient ──────────────────────────────────────── */
.hero-gradient {
  background: linear-gradient(135deg, #1a1034 0%, #2d1554 40%, #1a2040 100%);
}

/* ── Pride glow ─────────────────────────────────────────── */
.pride-glow {
  background: var(--pride);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── City card ──────────────────────────────────────────── */
.city-card {
  position:relative;overflow:hidden;border-radius:16px;
  aspect-ratio:1/1;
  cursor:pointer;
}
.city-card img { width:100%;height:100%;object-fit:cover;transition:transform .35s ease; }
.city-card:hover img { transform:scale(1.08); }
.city-card-overlay {
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.1) 60%, transparent 100%);
  transition:background .25s;
}
.city-card:hover .city-card-overlay {
  background:linear-gradient(to top, rgba(139,61,190,.7) 0%, rgba(0,0,0,.15) 60%, transparent 100%);
}
.city-card-info { position:absolute;bottom:0;left:0;right:0;padding:16px; }

/* ── FullCalendar ───────────────────────────────────────── */
.fc-event { cursor:pointer;border-radius:4px !important;font-size:12px !important; }
.fc-toolbar-title { font-size:1.1rem !important;font-weight:700 !important; }
.fc-button-primary { background-color:var(--primary) !important;border-color:var(--primary) !important; }
.fc-button-primary:hover { background-color:var(--primary-dark) !important; }

/* ── Mobile fixes ───────────────────────────────────────── */
@media (max-width:640px) {
  #searchResults { position:fixed;left:0;right:0;top:65px;max-height:60vh;border-radius:0; }
  .section-title { font-size:24px; }
  .section-sub   { font-size:15px; }
}

/* ── Article body (shared across city, category, article pages) ── */
.article-body h2 { font-size:1.4rem;font-weight:700;color:#1f2937;margin:2rem 0 .75rem;border-bottom:2px solid #f3f4f6;padding-bottom:.5rem; }
.article-body h3 { font-size:1.1rem;font-weight:600;color:#374151;margin:1.25rem 0 .5rem; }
.article-body p  { color:#374151;line-height:1.8;margin-bottom:1rem; }
.article-body ul,
.article-body ol { padding-left:1.5rem;margin-bottom:1rem; }
.article-body ul { list-style:disc; }
.article-body ol { list-style:decimal; }
.article-body li { color:#374151;line-height:1.7;margin-bottom:.25rem; }
.article-body strong { font-weight:600;color:#111827; }
.article-body a { color:#7e22ce;text-decoration:underline;text-underline-offset:2px; }
.article-body a:hover { color:#5b21b6; }
/* Location-pin / metadata blocks (e.g. address lines extracted from old guides).
   NB: must exclude FAQ wrappers and structured-data containers, otherwise the
   "div div { display:flex }" rule below cascades into FAQPage Schema markup and
   crushes every Q&A into a flex row. */
.article-body > div:not(.faq-section-wrap):not([itemtype]) { background:#faf7ff;border:1px solid #ede9f7;border-radius:.75rem;padding:.75rem 1rem;margin:.5rem 0 1.25rem;font-size:.9rem;color:#4b5563; }
.article-body > div:not(.faq-section-wrap):not([itemtype]) > div { padding:.15rem 0;display:flex;align-items:center;gap:.4rem; }
/* Hard reset for FAQ + schema markup so the above rule never bleeds into them */
.article-body .faq-section-wrap,
.article-body .faq-section-wrap *,
.article-body [itemtype*="FAQPage"],
.article-body [itemtype*="FAQPage"] * {
  background: transparent;
}
.article-body .faq-section-wrap div,
.article-body [itemtype*="FAQPage"] div { display: block; flex: none; padding: 0; gap: 0; }
.article-body .faq-section-wrap .faq-question,
.article-body .faq-section-wrap .faq-icon-wrap { display: flex; }
.article-pin-icon { display:inline-block;vertical-align:-3px;margin-right:.25rem;color:#7e22ce; }
.article-venue-link,.article-event-link { color:#7e22ce;font-weight:500;text-decoration:underline;text-underline-offset:2px; }
.article-venue-link:hover,.article-event-link:hover { color:#5b21b6; }

/* ── FAQ Accordion ──────────────────────────────────────── */
.faq-section-wrap {
  margin:2rem 0;
  border:1px solid #ede9f7;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 1px 4px rgba(139,61,190,.06);
}
.faq-section-title {
  display:flex;align-items:center;gap:.6rem;
  padding:.9rem 1.25rem;
  background:linear-gradient(90deg,#f5edfb,#faf5ff);
  font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#7c3aed;border-bottom:1px solid #ede9f7;
}
.faq-item {
  border-bottom:1px solid #f3f0fb;
  background:#fff;
}
.faq-item:last-child { border-bottom:none; }
.faq-question {
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.95rem 1.25rem;
  cursor:pointer;background:transparent;
  font-size:.975rem;font-weight:600;color:#1f2937;line-height:1.4;
  margin:0;border:none;width:100%;text-align:left;
  transition:background .15s,color .15s;
  user-select:none;
}
.faq-question:hover { background:#faf5ff;color:#6d28d9; }
.faq-item.open .faq-question { color:#6d28d9;background:#faf5ff; }
.faq-q-text { flex:1;min-width:0; }
.faq-icon-wrap {
  display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;flex-shrink:0;
  border-radius:50%;background:#f3e8ff;
  transition:background .2s,transform .25s ease;
}
.faq-item.open .faq-icon-wrap { background:#7c3aed;transform:rotate(180deg); }
.faq-icon-wrap svg {
  display:block;width:14px;height:14px;
  color:#7c3aed;transition:color .2s;
}
.faq-item.open .faq-icon-wrap svg { color:#fff; }
.faq-answer {
  max-height:0;overflow:hidden;
  transition:max-height .32s cubic-bezier(.4,0,.2,1), padding .32s;
  padding:0 1.25rem;
  color:#374151;line-height:1.78;font-size:.95rem;
  background:#fefcff;
}
.faq-item.open .faq-answer {
  max-height:600px;
  padding:.85rem 1.25rem 1.1rem;
  border-top:1px solid #f3f0fb;
}
.faq-answer p { margin-bottom:.5rem; }
.faq-answer p:last-child { margin-bottom:0; }
@media(max-width:640px){
  .faq-question { font-size:.9rem;padding:.85rem 1rem; }
  .faq-item.open .faq-answer { padding:.75rem 1rem 1rem; }
}


/* ── Skeleton Loading ──────────────────────────────────────── */
@keyframes skeleton-pulse {
  0%,100% { opacity:1; }
  50%      { opacity:.4; }
}
.skeleton {
  background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);
  background-size:200% 100%;
  animation:shimmer 1.4s infinite;
}
@keyframes shimmer {
  0%   { background-position:200% 0; }
  100% { background-position:-200% 0; }
}
.skeleton-card { pointer-events:none; }

/* ══════════════════════════════════════════════════════════════
   DARK MODE — explicit user toggle: [data-theme="dark"] on <html>
   System preference (prefers-color-scheme:dark) is handled below
   ══════════════════════════════════════════════════════════════ */

[data-theme="dark"] body { background:#0A0A0C; color:#F4F4F5; }
[data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3,
[data-theme="dark"] h4,[data-theme="dark"] h5 { color:#F4F4F5; }
[data-theme="dark"] header { background:#111113 !important; border-color:#28282E !important; }
[data-theme="dark"] .nav-link { color:#D4D4D8; }
[data-theme="dark"] .nav-link:hover { color:#C4B5FD; }
[data-theme="dark"] #mobileMenu { background:#111113; border-color:#28282E; }
[data-theme="dark"] .card { background:#161618; border-color:#28282E; }
[data-theme="dark"] .dropdown-panel { background:#161618; border-color:#3A3A40; box-shadow:0 20px 60px rgba(0,0,0,.6); }
[data-theme="dark"] .mega-panel { background:#111113 !important; border-top-color:#8B3DBE !important; }
[data-theme="dark"] .search-box-wrap input { background:#1E1E22; border-color:#3A3A40; color:#F4F4F5; }
[data-theme="dark"] .search-box-wrap input::placeholder { color:#71717A; }
[data-theme="dark"] .bg-white  { background-color:#161618 !important; }
[data-theme="dark"] .bg-gray-50 { background-color:#0F0F11 !important; }
[data-theme="dark"] .bg-gray-100 { background-color:#1E1E22 !important; }
[data-theme="dark"] .text-gray-900 { color:#F4F4F5 !important; }
[data-theme="dark"] .text-gray-800 { color:#E4E4E7 !important; }
[data-theme="dark"] .text-gray-700 { color:#D4D4D8 !important; }
[data-theme="dark"] .text-gray-600 { color:#A1A1AA !important; }
[data-theme="dark"] .text-gray-500 { color:#71717A  !important; }
[data-theme="dark"] .border-gray-100 { border-color:#28282E !important; }
[data-theme="dark"] .border-gray-200 { border-color:#3A3A40 !important; }
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
[data-theme="dark"] select,
[data-theme="dark"] textarea { background:#1E1E22; border-color:#3A3A40; color:#F4F4F5; }
[data-theme="dark"] input::placeholder,[data-theme="dark"] textarea::placeholder { color:#52525B; }
[data-theme="dark"] .faq-item { background:#161618; }
[data-theme="dark"] .faq-question { color:#E4E4E7; }
[data-theme="dark"] .faq-answer { background:#111113; color:#A1A1AA; }
[data-theme="dark"] .faq-section-wrap { border-color:#28282E; }
[data-theme="dark"] .article-body p,[data-theme="dark"] .article-body li { color:#A1A1AA; }
[data-theme="dark"] .article-body h2,[data-theme="dark"] .article-body h3 { color:#E4E4E7; border-color:#28282E; }
[data-theme="dark"] ::-webkit-scrollbar-track { background:#1E1E22; }
[data-theme="dark"] .skeleton { background:linear-gradient(90deg,#222226 25%,#2A2A2E 50%,#222226 75%); }
[data-theme="dark"] .section-title { color:#F4F4F5; }
[data-theme="dark"] .section-sub   { color:#A1A1AA; }
[data-theme="dark"] .hover\:bg-gray-50:hover   { background-color:#1E1E22 !important; }
[data-theme="dark"] .hover\:bg-purple-50:hover { background-color:#1E1E22 !important; }
[data-theme="dark"] .btn-white { background:#1E1E22; color:#C4B5FD; }

/* ── System preference dark (mirrors above, no explicit toggle) ── */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) body { background:#0A0A0C; color:#F4F4F5; }
  html:not([data-theme="light"]) h1,html:not([data-theme="light"]) h2,
  html:not([data-theme="light"]) h3,html:not([data-theme="light"]) h4,
  html:not([data-theme="light"]) h5 { color:#F4F4F5; }
  html:not([data-theme="light"]) header { background:#111113 !important; border-color:#28282E !important; }
  html:not([data-theme="light"]) .nav-link { color:#D4D4D8; }
  html:not([data-theme="light"]) .nav-link:hover { color:#C4B5FD; }
  html:not([data-theme="light"]) #mobileMenu { background:#111113; border-color:#28282E; }
  html:not([data-theme="light"]) .card { background:#161618; border-color:#28282E; }
  html:not([data-theme="light"]) .dropdown-panel { background:#161618; border-color:#3A3A40; }
  html:not([data-theme="light"]) .mega-panel { background:#111113 !important; }
  html:not([data-theme="light"]) .bg-white   { background-color:#161618 !important; }
  html:not([data-theme="light"]) .bg-gray-50  { background-color:#0F0F11 !important; }
  html:not([data-theme="light"]) .bg-gray-100 { background-color:#1E1E22 !important; }
  html:not([data-theme="light"]) .text-gray-900 { color:#F4F4F5 !important; }
  html:not([data-theme="light"]) .text-gray-800 { color:#E4E4E7 !important; }
  html:not([data-theme="light"]) .text-gray-700 { color:#D4D4D8 !important; }
  html:not([data-theme="light"]) .text-gray-600 { color:#A1A1AA !important; }
  html:not([data-theme="light"]) .text-gray-500 { color:#71717A  !important; }
  html:not([data-theme="light"]) .border-gray-100 { border-color:#28282E !important; }
  html:not([data-theme="light"]) .border-gray-200 { border-color:#3A3A40 !important; }
  html:not([data-theme="light"]) input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
  html:not([data-theme="light"]) select,
  html:not([data-theme="light"]) textarea { background:#1E1E22; border-color:#3A3A40; color:#F4F4F5; }
  html:not([data-theme="light"]) .section-title { color:#F4F4F5; }
  html:not([data-theme="light"]) .section-sub   { color:#A1A1AA; }
}

/* ═══════════════════════════════════════════════════════════════════
   TYPOGRAPHY — Rubik (text) + Geist Mono (numbers).
   Anchored on the CSS tokens declared on :root above.
   ═══════════════════════════════════════════════════════════════════ */
html {
  font-family: var(--font-sans);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
}

h1 {
  font-family: var(--font-sans);
  font-size: var(--text-4xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}
h2 {
  font-family: var(--font-sans);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
}
h3 {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-snug);
}
h4 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
}

button, .btn { font-family: var(--font-sans); font-weight: var(--weight-medium); }

/* Display heading (homepage hero etc.) */
.text-display {
  font-family: var(--font-sans);
  font-size: var(--text-6xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

/* Eyebrow labels (e.g. "Featured · Berlin") */
.text-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

/* Numbers — ratings, review counts, prices, distances, times, stats.
   Anything wrapped in <span class="num"> or living in one of the listed
   semantic classes/elements gets Geist Mono with tabular figures so columns
   line up across rows. */
.num,
time,
.rating,
.price,
.stat-value,
.review-count,
.distance,
.duration,
.ec-date-day { /* event-card date badge */
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

/* RTL — Hebrew/Arabic prefer slightly looser body line-height and 0
   letter-spacing on headings (negative tracking is for Latin only). */
html[dir="rtl"] body { line-height: var(--leading-loose); }
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3 { letter-spacing: 0; line-height: 1.25; }

/* ═══════════════════════════════════════════════════════════════════
   RTL OVERRIDES — covers Hebrew, Arabic. Tailwind utilities below
   ship hard-coded `left/right` properties that don't auto-flip.
   We swap them on [dir="rtl"] so we don't have to touch every view.
   ═══════════════════════════════════════════════════════════════════ */

/* Margin / Padding flips */
[dir="rtl"] .ml-1{margin-left:0;margin-right:.25rem}[dir="rtl"] .ml-1\.5{margin-left:0;margin-right:.375rem}
[dir="rtl"] .ml-2{margin-left:0;margin-right:.5rem}[dir="rtl"] .ml-3{margin-left:0;margin-right:.75rem}
[dir="rtl"] .ml-4{margin-left:0;margin-right:1rem}[dir="rtl"] .ml-5{margin-left:0;margin-right:1.25rem}
[dir="rtl"] .ml-6{margin-left:0;margin-right:1.5rem}[dir="rtl"] .ml-8{margin-left:0;margin-right:2rem}
[dir="rtl"] .ml-auto{margin-left:0;margin-right:auto}
[dir="rtl"] .mr-1{margin-right:0;margin-left:.25rem}[dir="rtl"] .mr-1\.5{margin-right:0;margin-left:.375rem}
[dir="rtl"] .mr-2{margin-right:0;margin-left:.5rem}[dir="rtl"] .mr-3{margin-right:0;margin-left:.75rem}
[dir="rtl"] .mr-4{margin-right:0;margin-left:1rem}[dir="rtl"] .mr-5{margin-right:0;margin-left:1.25rem}
[dir="rtl"] .mr-6{margin-right:0;margin-left:1.5rem}[dir="rtl"] .mr-8{margin-right:0;margin-left:2rem}
[dir="rtl"] .mr-auto{margin-right:0;margin-left:auto}

[dir="rtl"] .pl-1{padding-left:0;padding-right:.25rem}[dir="rtl"] .pl-2{padding-left:0;padding-right:.5rem}
[dir="rtl"] .pl-3{padding-left:0;padding-right:.75rem}[dir="rtl"] .pl-4{padding-left:0;padding-right:1rem}
[dir="rtl"] .pl-5{padding-left:0;padding-right:1.25rem}[dir="rtl"] .pl-6{padding-left:0;padding-right:1.5rem}
[dir="rtl"] .pl-8{padding-left:0;padding-right:2rem}[dir="rtl"] .pl-10{padding-left:0;padding-right:2.5rem}
[dir="rtl"] .pl-12{padding-left:0;padding-right:3rem}
[dir="rtl"] .pr-1{padding-right:0;padding-left:.25rem}[dir="rtl"] .pr-2{padding-right:0;padding-left:.5rem}
[dir="rtl"] .pr-3{padding-right:0;padding-left:.75rem}[dir="rtl"] .pr-4{padding-right:0;padding-left:1rem}
[dir="rtl"] .pr-5{padding-right:0;padding-left:1.25rem}[dir="rtl"] .pr-6{padding-right:0;padding-left:1.5rem}
[dir="rtl"] .pr-8{padding-right:0;padding-left:2rem}[dir="rtl"] .pr-10{padding-right:0;padding-left:2.5rem}
[dir="rtl"] .pr-12{padding-right:0;padding-left:3rem}

/* Text alignment */
[dir="rtl"] .text-left  { text-align:right }
[dir="rtl"] .text-right { text-align:left  }

/* Absolute positioning swaps */
[dir="rtl"] .left-0   { left:auto; right:0 }
[dir="rtl"] .left-1   { left:auto; right:.25rem }
[dir="rtl"] .left-2   { left:auto; right:.5rem }
[dir="rtl"] .left-3   { left:auto; right:.75rem }
[dir="rtl"] .left-4   { left:auto; right:1rem }
[dir="rtl"] .right-0  { right:auto; left:0 }
[dir="rtl"] .right-1  { right:auto; left:.25rem }
[dir="rtl"] .right-2  { right:auto; left:.5rem }
[dir="rtl"] .right-3  { right:auto; left:.75rem }
[dir="rtl"] .right-4  { right:auto; left:1rem }

/* Border radii — top/bottom-left/right corners flip too */
[dir="rtl"] .rounded-l-lg { border-top-left-radius:0; border-bottom-left-radius:0;
                            border-top-right-radius:.5rem; border-bottom-right-radius:.5rem }
[dir="rtl"] .rounded-r-lg { border-top-right-radius:0; border-bottom-right-radius:0;
                            border-top-left-radius:.5rem; border-bottom-left-radius:.5rem }
[dir="rtl"] .rounded-l-xl { border-top-left-radius:0; border-bottom-left-radius:0;
                            border-top-right-radius:.75rem; border-bottom-right-radius:.75rem }
[dir="rtl"] .rounded-r-xl { border-top-right-radius:0; border-bottom-right-radius:0;
                            border-top-left-radius:.75rem; border-bottom-left-radius:.75rem }

/* Borders that hug a side */
[dir="rtl"] .border-l { border-left:0; border-right-width:1px }
[dir="rtl"] .border-r { border-right:0; border-left-width:1px }

/* Flex direction: rows that visually go "left to right" should still
   read in document order. Tailwind's `flex-row-reverse` callers don't
   need help, but plain `flex` rows with manual mr/ml are handled above. */

/* Arrow icons inside buttons / links: any inline SVG marked with the
   .rtl-flip helper class will mirror horizontally in RTL. Use this on
   chevron-right / arrow icons that should point start→end logically. */
[dir="rtl"] .rtl-flip { transform: scaleX(-1) }

/* `→` text glyph and similar inside CTAs */
[dir="rtl"] .rtl-arrow::after { content: " ←" }
[dir="rtl"] .ltr-arrow::after { content: " →" }

/* Inputs: prevent leftward text in RTL */
[dir="rtl"] input[type="text"], [dir="rtl"] input[type="search"],
[dir="rtl"] input[type="email"], [dir="rtl"] textarea {
  text-align: right;
}
[dir="rtl"] input[type="number"], [dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="url"] {
  /* numbers and URLs read better LTR even in an RTL document */
  text-align: left; direction: ltr;
}

/* Bottom mobile-nav stays LTR-style icon order — looks better that way */
[dir="rtl"] .bottom-nav { direction: ltr; }
[dir="rtl"] .bottom-nav a { direction: rtl; }

/* ═══════════════════════════════════════════════════════════════════
   MICRO-INTERACTIONS
   Subtle motion polish that lifts the perceived quality of the UI.
   All animations honour prefers-reduced-motion at the bottom.
   ═══════════════════════════════════════════════════════════════════ */

/* --- 1) Generic card hover (cards not already styled by .ec/.cc-*) --- */
.card-lift {
  transition: transform .22s cubic-bezier(.16,1,.3,1),
              box-shadow .22s cubic-bezier(.16,1,.3,1);
}
.card-lift:hover {
  transform: scale(1.02);
  box-shadow: 0 14px 30px rgba(0,0,0,.10), 0 4px 10px rgba(0,0,0,.06);
}

/* --- 2) Ripple effect on click (Material-style) ----------------------
   Use: <button class="ripple" data-ripple> ... </button>
   The button needs `position:relative; overflow:hidden;` (added below). */
.ripple { position: relative; overflow: hidden; isolation: isolate; }
.ripple .ripple-wave {
  position: absolute; border-radius: 50%; pointer-events: none;
  transform: scale(0); opacity: .35;
  background: currentColor;
  animation: rippleAnim .55s cubic-bezier(.16,1,.3,1) forwards;
  z-index: 0;
}
@keyframes rippleAnim {
  to { transform: scale(2.4); opacity: 0; }
}

/* --- 3) Filter chip spring animation ---------------------------------
   Use class .filter-chip on toggleable pill buttons.
   Switches to "active" state with a satisfying spring on click. */
.filter-chip {
  transition: transform .35s cubic-bezier(.34,1.56,.64,1),
              background-color .18s ease, color .18s ease, border-color .18s ease;
}
.filter-chip:active { transform: scale(.94); }
.filter-chip.is-active {
  animation: chipSpring .45s cubic-bezier(.34,1.56,.64,1);
}
@keyframes chipSpring {
  0%   { transform: scale(.94); }
  60%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* --- 4) Map pin pulse on hover --------------------------------------- */
.map-pin {
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
  transform-origin: center bottom;
}
.map-pin:hover {
  transform: scale(1.18);
  z-index: 5;
}
.map-pin::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(124,58,237,.55);
  animation: pinPulse 1.6s ease-out infinite;
  pointer-events: none;
}
@keyframes pinPulse {
  0%   { box-shadow: 0 0 0 0    rgba(124,58,237,.45); }
  70%  { box-shadow: 0 0 0 14px rgba(124,58,237,0); }
  100% { box-shadow: 0 0 0 0    rgba(124,58,237,0); }
}

/* --- 5) Page fade-in (no slide → no CLS) ---------------------------- */
@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body.page-fade-in { animation: pageFadeIn .2s ease-out both; }

/* --- 6) Category icon hover (scaled tap target affordance) --- */
.cat-icon {
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.cat-icon:hover { transform: scale(1.08) rotate(-2deg); }
.cat-icon:active { transform: scale(.96); }

/* --- Dropdown click-to-open (mobile) ---------------------------- */
[data-dropdown].dd-open [data-dropdown-panel] {
  opacity: 1 !important;
  visibility: visible !important;
}

/* --- Save heart button (wishlist) ------------------------------- */
.save-heart {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(6px);
  border: 0; cursor: pointer; padding: 0;
  color: #6b7280;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
  transition: transform .2s cubic-bezier(.16,1,.3,1),
              background .2s, color .2s, box-shadow .2s;
  z-index: 4;
}
.save-heart:hover { transform: scale(1.08); color: #ec4899; }
.save-heart:active { transform: scale(.94); }
.save-heart.is-saved {
  background: linear-gradient(135deg, #ec4899, #f43f5e);
  color: #fff;
  box-shadow: 0 4px 12px rgba(236, 72, 153, .4);
}
.save-heart.is-saved svg { fill: currentColor; }
.save-heart.just-saved {
  animation: heartPop .55s cubic-bezier(.34,1.56,.64,1);
}
@keyframes heartPop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.35); }
  60%  { transform: scale(.95); }
  100% { transform: scale(1); }
}

/* --- Reduced motion override — respect user's OS preference ----- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:   .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:  .001ms !important;
    scroll-behavior: auto !important;
  }
  /* Stop infinite pulses entirely (looping motion is the worst offender) */
  .map-pin::after { animation: none !important; }
  body.page-fade-in { animation: none !important; }
}

/* ─── Event-card pride wash ──────────────────────────────────────────
   When a mega-event has no cover image of its own and we fall back to
   the parent city's photo, the existing event-card.php partial sets
   $_isCityFallback=true and adds the .ec-pride-wash element.

   Effect: a soft rainbow gradient washes up from the bottom (~35% of
   the image height), plus a small diagonal pride ribbon in the top-
   right corner. Together they signal "Pride event" at a glance without
   defacing the underlying city photo.
   ─────────────────────────────────────────────────────────────────── */

.ec-media { position: relative; overflow: hidden; display: block; }

/* Slight desaturation of the city image so pride colors pop on top */
.ec-img-cityfallback { filter: saturate(.92); }

/* ─── Pride wash: a thick solid pride-flag bar at the BOTTOM ───
   Hardcoded hex (not CSS vars) for absolute reliability. Only the
   bottom 22% of the card is covered; the rest of the photo is
   untouched. Drop-shadow above the bar for a clean seam.
   Six bands top→bottom: red, orange, yellow, green, blue, purple.
   ─────────────────────────────────────────────────────────────── */
.ec-pride-wash {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  height: 22% !important;
  pointer-events: none;
  z-index: 4;
  background: linear-gradient(
    to bottom,
    #e63946 0%,    #e63946 16.67%,
    #f4801f 16.67%, #f4801f 33.33%,
    #ffd60a 33.33%, #ffd60a 50%,
    #06a77d 50%,    #06a77d 66.67%,
    #1d70b8 66.67%, #1d70b8 83.33%,
    #8b3aaf 83.33%, #8b3aaf 100%
  ) !important;
  box-shadow: 0 -10px 14px -6px rgba(0,0,0,.55);
  border: none !important;
  /* Subtle at rest, full color on hover/focus — the card stays readable
     while idle and "lights up" when the user interacts. */
  opacity: .45;
  transition: opacity .25s ease-out;
}

/* Light up when the user hovers/focuses the card */
.ec:hover .ec-pride-wash,
.ec:focus-within .ec-pride-wash {
  opacity: 1;
}

/* Keep MEGA EVENT / Featured / date badges above the bar */
.ec-overlay,
.ec-date-badge,
.ec-tba-badge { position: relative; z-index: 5; }