/* Venue North content pages.
   Standalone stylesheet for the statically generated city, service and guide pages.
   Deliberately independent of the Vite bundle so these pages ship with no JavaScript at all,
   which keeps them fast, crawlable and cheap to render. Tokens mirror src/index.css. */

@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/fonts/lexend-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/fonts/lexend-latin-ext.woff2') format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/fonts/source-sans-3-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/fonts/source-sans-3-latin-ext.woff2') format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --background: #f8fafc;
  --foreground: #0f172a;
  --card: #ffffff;
  --muted: #e8ecf1;
  --muted-foreground: #4b5b76;
  --border: #e2e8f0;
  --ocean: #0369a1;
  --ocean-soft: #e6f2fa;
  --warm: #faf6f0;
  --brand-ink: #05202c;
  --whatsapp: #25d366;
  --wrap: 1120px;
  --read: 720px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 18px;
  line-height: 1.65;
  font-weight: 400;
}

h1, h2, h3, h4, .brand-word, .btn { font-family: 'Lexend', sans-serif; }
h1, h2, h3 { font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.9rem, 4.4vw, 2.9rem); margin: 0 0 1rem; }
h2 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); margin: 2.6rem 0 0.75rem; }
h3 { font-size: 1.14rem; margin: 1.9rem 0 0.5rem; }
p { margin: 0 0 1.05rem; }
a { color: var(--ocean); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--brand-ink); }
ul { margin: 0 0 1.2rem; padding-left: 1.15rem; }
li { margin-bottom: 0.4rem; }
strong { font-weight: 600; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }
.read { max-width: var(--read); }

/* ---------- header ---------- */
.site-header {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 40;
}
.site-header .wrap { display: flex; align-items: center; gap: 18px; min-height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--brand-ink); }
.brand-word { font-weight: 700; letter-spacing: 0.14em; font-size: 0.98rem; text-transform: uppercase; }
.brand-mark { width: 30px; height: 30px; flex: 0 0 30px; }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.site-nav a { font-size: 0.95rem; color: var(--muted-foreground); text-decoration: none; }
.site-nav a:hover { color: var(--brand-ink); }
.site-header .btn { padding: 9px 16px; font-size: 0.93rem; }

/* ---------- hamburger menu, small screens only ---------- */
.nav-menu { display: none; position: relative; }
.nav-menu summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--brand-ink);
  background: var(--card);
}
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu[open] summary { background: var(--muted); }
.nav-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  width: min(88vw, 340px);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px 18px 20px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
  max-height: 76vh;
  overflow-y: auto;
}
.nav-group {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  font-weight: 600;
  margin: 0 0 8px;
}
.nav-group + .nav-list + .nav-group { margin-top: 18px; }
.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-list li { margin: 0; }
.nav-list a {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--foreground);
  text-decoration: none;
  font-size: 0.97rem;
}
.nav-list a:hover { background: var(--muted); color: var(--brand-ink); }
.nav-list-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
.nav-panel-cta { display: block; text-align: center; margin-top: 18px; }
.sr, .nav-menu .sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.btn {
  display: inline-block;
  background: var(--brand-ink);
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  padding: 12px 22px;
  font-weight: 500;
  font-size: 1rem;
  border: 1px solid var(--brand-ink);
}
.btn:hover { color: #fff; background: #0b3040; }
.btn-outline { background: transparent; color: var(--brand-ink); border-color: var(--border); }
.btn-outline:hover { background: var(--muted); color: var(--brand-ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.4rem 0 0.4rem; }

/* ---------- hero ---------- */
.hero { background: var(--warm); border-bottom: 1px solid var(--border); padding: 52px 0 44px; }
.crumbs { font-size: 0.85rem; color: var(--muted-foreground); margin-bottom: 20px; }
.crumbs a { color: var(--muted-foreground); }
.crumbs span { margin: 0 8px; }
.eyebrow { font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ocean); font-weight: 600; margin: 0 0 12px; }
.lede { font-size: 1.09rem; color: var(--muted-foreground); max-width: var(--read); }

/* ---------- the AEO direct answer ---------- */
.answer {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--ocean);
  border-radius: 4px;
  padding: 22px 24px;
  margin: 0 0 34px;
  max-width: var(--read);
}
.answer p { margin: 0; font-size: 1.05rem; }
.answer-label { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-foreground); margin: 0 0 10px; font-weight: 600; }

main { padding: 46px 0 20px; }

/* ---------- sources ---------- */
.sources { background: var(--card); border: 1px solid var(--border); border-radius: 4px; padding: 24px; margin: 2.6rem 0 0; max-width: var(--read); }
.sources h2 { margin-top: 0; font-size: 1.13rem; }
.sources ol { margin: 0; padding-left: 1.3rem; }
.sources li { font-size: 0.92rem; color: var(--muted-foreground); margin-bottom: 0.5rem; }
.sources a { word-break: break-word; }
.sources .checked { display: block; font-size: 0.83rem; color: var(--muted-foreground); margin-top: 14px; }

/* ---------- FAQ ---------- */
.faq { margin: 2.8rem 0 0; max-width: var(--read); }
.faq h2 { margin-top: 0; }
.faq details { background: var(--card); border: 1px solid var(--border); border-radius: 4px; margin-bottom: 10px; }
.faq summary { cursor: pointer; padding: 15px 18px; font-weight: 600; font-family: 'Lexend', sans-serif; font-size: 1rem; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; float: right; color: var(--ocean); font-weight: 600; }
.faq details[open] summary::after { content: '\2212'; }
.faq .a { padding: 0 18px 16px; margin: 0; color: var(--muted-foreground); }

/* ---------- CTA band ---------- */
.cta-band { background: var(--brand-ink); color: #fff; padding: 46px 0; margin-top: 52px; }
.cta-band h2 { color: #fff; margin-top: 0; }
.cta-band p { color: #cbd5e1; max-width: var(--read); }
.cta-band .btn { background: #fff; color: var(--brand-ink); border-color: #fff; }
.cta-band .btn:hover { background: var(--muted); color: var(--brand-ink); }
.cta-band .btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,0.45); }
.cta-band .btn-outline:hover { background: rgba(255,255,255,0.12); color: #fff; }

/* ---------- location links ---------- */
.locations { background: var(--ocean-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 34px 0; }
.locations h2 { margin: 0 0 14px; font-size: 1.06rem; }
.locations ul { display: flex; flex-wrap: wrap; gap: 10px 20px; list-style: none; padding: 0; margin: 0; }
.locations a { font-size: 0.95rem; }

/* ---------- footer ---------- */
.site-footer { background: var(--card); border-top: 1px solid var(--border); padding: 40px 0 96px; font-size: 0.93rem; color: var(--muted-foreground); }
.site-footer .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 26px; }
.site-footer h3 { font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--foreground); margin: 0 0 10px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 6px; }
.site-footer a { color: var(--muted-foreground); text-decoration: none; }
.site-footer a:hover { color: var(--ocean); text-decoration: underline; }
.site-footer .legal { border-top: 1px solid var(--border); margin-top: 30px; padding-top: 18px; font-size: 0.85rem; }

/* ---------- floating WhatsApp ---------- */
.wa-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--whatsapp);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.18);
}
.wa-fab svg { width: 31px; height: 31px; fill: #fff; }
.wa-fab .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.wa-fab::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--whatsapp);
  animation: wa-pulse 2.6s ease-out infinite;
}
@keyframes wa-pulse {
  0% { transform: scale(1); opacity: 0.55; }
  70% { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

@media (max-width: 767px) {
  body { font-size: 17px; }
  .site-nav { gap: 12px; }
  .desk-link { display: none; }
  .nav-menu { display: block; }
  /* The floating WhatsApp button and the menu panel both carry the call to action on
     small screens, so the header button is dropped to keep the bar uncluttered. */
  .site-nav > .btn { display: none; }
  .site-header .wrap { min-height: 62px; }
  .hero { padding: 38px 0 32px; }
  .site-footer { padding-bottom: 104px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wa-fab::after { animation: none; }
}

@media print {
  .site-header, .wa-fab, .cta-band { display: none; }
}