/* ═══════════════════════════════════════════════════════════
   BrunchScene Design System v3 — Editorial Minimal
   Fonts: Bricolage Grotesque (display) + DM Sans (body)
   Palette: warm white / near-black / tomato accent
   WCAG 2.2 AA — all contrast ratios documented inline
═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600&display=swap');

/* ── Tokens ── */
:root {
  --bg:        #FAFAF8;
  --surface:   #FFFFFF;
  --text:      #111110;
  --muted:     #6B6B67;      /* 4.7:1 on white ✓ */
  --border:    #E8E8E4;
  --border-md: #D4D4CE;

  --red:       #E8441A;      /* primary accent — 4.5:1 on white ✓ */
  --red-lt:    #FFF1ED;
  --red-dk:    #B83310;
  --red-deep:  #8A2000;

  --green:     #166534;      /* 6.2:1 on white ✓ */
  --green-lt:  #F0FDF4;
  --gold:      #B45309;      /* 5.1:1 on white ✓ */
  --gold-lt:   #FFFBEB;

  --font-d:    'Bricolage Grotesque', system-ui, sans-serif;
  --font-b:    'DM Sans', system-ui, sans-serif;

  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  20px;
  --r-pill:999px;

  --sh-sm:  0 1px 4px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
  --sh-md:  0 4px 16px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
  --sh-lg:  0 8px 32px rgba(0,0,0,.12);
  --sh-xl:  0 16px 48px rgba(0,0,0,.16);
}


/* ═══ LEGACY VARIABLE ALIASES (owner page compatibility) ═══ */
:root {
  --ink:       #111110;
  --cream:     #FAFAF8;
  --warm:      #F5F5F2;
  --terra:     #E8441A;
  --terra-lt:  #FFF1ED;
  --terra-dk:  #B83310;
  --muted-old: #6B6B67;
  --gold-old:  #B45309;
  --green-old: #166534;
  --logo-font: var(--font-d);
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:hidden;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-b);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.5}
img{display:block;max-width:100%}
a{color:var(--red)}
button,input,select,textarea{font-family:var(--font-b)}

/* ── 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}
.skip-link{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--red);color:#fff;padding:10px 18px;font-size:.9rem;font-weight:500;text-decoration:none;border-radius:0 0 6px 6px}
.skip-link:focus{left:50%;transform:translateX(-50%)}
:focus{outline:none}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:3px}
:focus-visible:not(.skip-link){scroll-margin-top:60px}

/* ═══ HEADER ═══ */
.bs-header{
  position:sticky;top:0;z-index:200;
  height:56px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 1.5rem;
}
.bs-logo{
  font-family:var(--font-d);
  font-size:1.2rem;
  font-weight:800;
  letter-spacing:-.03em;
  color:var(--text);
  text-decoration:none;
  display:inline-flex;align-items:center;
  height:100%;
}
.bs-logo em{color:var(--red);font-style:normal}
.bs-logo:focus-visible{outline-color:var(--red)}

.bs-nav{display:flex;align-items:center;gap:2px}
.bs-nav-link{
  color:var(--muted);
  font-size:.78rem;
  font-weight:400;
  text-decoration:none;
  padding:0 10px;
  height:40px;
  display:inline-flex;align-items:center;
  border-radius:var(--r-md);
  transition:color .12s,background .12s;
  white-space:nowrap;
}
.bs-nav-link:hover{color:var(--text);background:#F5F5F3}
.bs-nav-link.active{color:var(--text);font-weight:500}

.bs-nav-btn{
  background:var(--red);
  color:#fff;
  border:none;
  height:36px;
  padding:0 16px;
  border-radius:var(--r-pill);
  font-size:.78rem;
  font-weight:600;
  cursor:pointer;
  transition:background .12s;
  white-space:nowrap;
  margin-left:6px;
  letter-spacing:.01em;
}
.bs-nav-btn:hover{background:var(--red-dk)}
@media(max-width:640px){
  .bs-nav-link{display:none}
  .bs-nav-btn{height:34px;padding:0 14px;font-size:.75rem}
}

/* ═══ MOOD / VIBE STRIP ═══ */
.bs-vibe-wrap{
  background:var(--surface);
  border-bottom:1px solid var(--border);
}
.bs-vibe-meta{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 1.5rem 0;
}
.bs-vibe-lbl{
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#B0B0AA;
}
.bs-clear-btn{
  font-size:.72rem;color:var(--red);background:none;border:none;
  cursor:pointer;padding:4px 8px;border-radius:var(--r-sm);
  display:none;align-items:center;gap:4px;font-weight:500;
}
.bs-clear-btn.show{display:inline-flex}
.bs-clear-btn:hover{background:var(--red-lt)}

/* Vibe scroll — wraps on mobile, scrolls on desktop */
.bs-vibe-scroll{
  display:flex;
  gap:6px;
  padding:8px 1.5rem 10px;
  overflow-x:auto;
  overflow-y:visible;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.bs-vibe-scroll::-webkit-scrollbar{display:none}

/* Vibe pill button */
.bs-vb{
  display:inline-flex;
  align-items:center;
  gap:5px;
  border:1.5px solid var(--border);
  background:var(--surface);
  border-radius:var(--r-pill);
  padding:6px 14px;
  cursor:pointer;
  font-size:.78rem;
  font-weight:500;
  color:var(--text);
  white-space:nowrap;
  flex-shrink:0;
  min-height:36px;
  transition:border-color .12s,background .12s,color .12s,box-shadow .12s;
  position:relative;
}
.bs-vb:hover{border-color:var(--border-md);background:#F8F8F6;box-shadow:var(--sh-sm)}
.bs-vb.on{
  background:var(--text);
  border-color:var(--text);
  color:#fff;
  box-shadow:var(--sh-sm);
}
.bs-vi{font-size:1rem;line-height:1;flex-shrink:0}
.bs-vn{font-size:.75rem;font-weight:500}

/* Mobile: wrap to 2 rows */
@media(max-width:860px){
  .bs-vibe-scroll{flex-wrap:wrap;overflow:visible}
  .bs-vb{padding:5px 12px;font-size:.72rem;min-height:32px}
  .bs-vi{font-size:.9rem}
}

/* ═══ FORM ELEMENTS ═══ */
.fg{margin-bottom:.875rem}
.fg label{display:block;font-size:.8rem;font-weight:600;margin-bottom:5px;color:var(--text)}
.fc{
  width:100%;
  border:1.5px solid var(--border);
  border-radius:var(--r-md);
  padding:10px 12px;
  font-size:.88rem;
  color:var(--text);
  background:var(--surface);
  transition:border-color .12s;
}
.fc:focus{border-color:var(--red);outline:3px solid rgba(232,68,26,.15);outline-offset:0}
.fc::placeholder{color:#B0B0AA}
textarea.fc{resize:vertical;min-height:80px}

/* ═══ BUTTONS ═══ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:none;border-radius:var(--r-pill);
  font-size:.85rem;font-weight:600;cursor:pointer;
  transition:all .12s;text-decoration:none;white-space:nowrap;
  letter-spacing:.01em;
}
.btn-primary{
  background:var(--red);color:#fff;
  padding:10px 20px;min-height:44px;width:100%;
}
.btn-primary:hover{background:var(--red-dk)}
.btn-secondary{
  background:var(--surface);color:var(--text);
  border:1.5px solid var(--border);
  padding:9px 18px;min-height:40px;
}
.btn-secondary:hover{border-color:var(--border-md);background:#F5F5F3}
.btn-ghost{
  background:none;color:var(--red);
  padding:8px 14px;border:1.5px solid transparent;
}
.btn-ghost:hover{background:var(--red-lt);border-color:var(--red-lt)}
.btn-sm{padding:6px 14px;font-size:.75rem;min-height:32px}
.btn-dark{background:var(--text);color:#fff}
.btn-dark:hover{background:#2A2A28}

/* ═══ CARDS ═══ */
.card-base{
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:var(--r-lg);
  transition:border-color .12s,box-shadow .12s;
}
.card-base:hover{border-color:var(--border-md);box-shadow:var(--sh-md)}

/* ═══ BADGES ═══ */
.badge{
  display:inline-flex;align-items:center;
  font-size:.62rem;font-weight:700;
  padding:3px 8px;border-radius:var(--r-pill);
  letter-spacing:.04em;text-transform:uppercase;
  white-space:nowrap;
}
.badge-featured{background:var(--gold-lt);color:var(--gold)}
.badge-red     {background:var(--red-lt);color:var(--red-deep)}
.badge-green   {background:var(--green-lt);color:var(--green)}

/* ═══ MODAL ═══ */
.bs-modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.5);
  z-index:1000;display:flex;align-items:center;justify-content:center;
  padding:1rem;backdrop-filter:blur(6px);
}
.bs-modal-overlay.hidden{display:none}
.bs-modal{
  background:var(--surface);
  border-radius:var(--r-xl);
  padding:2rem;
  max-width:440px;width:100%;
  max-height:90dvh;overflow-y:auto;
  position:relative;
  box-shadow:var(--sh-xl);
}
.bs-modal-close{
  position:absolute;top:14px;right:14px;
  background:none;border:none;font-size:1.1rem;cursor:pointer;
  color:var(--muted);width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-sm);
}
.bs-modal-close:hover{background:#F5F5F3;color:var(--text)}

/* ═══ COOKIE BANNER ═══ */
#bs-cookie{
  position:fixed;bottom:0;left:0;right:0;z-index:900;
  background:var(--text);
  padding:1rem 1.5rem;
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  box-shadow:0 -4px 24px rgba(0,0,0,.15);
}
#bs-cookie.hidden{display:none}
.cookie-text{flex:1;min-width:200px;font-size:.78rem;color:#D4D4CE;line-height:1.6}
.cookie-text a{color:#FF8A6A;text-decoration:underline}
.cookie-btns{display:flex;gap:.5rem;flex-shrink:0;flex-wrap:wrap}
.cookie-btns button{
  padding:8px 16px;border-radius:var(--r-pill);
  font-size:.75rem;font-weight:600;cursor:pointer;min-height:38px;
  border:1px solid rgba(255,255,255,.2);
  background:transparent;color:#D4D4CE;transition:all .12s;
}
.cookie-btns button:hover{background:rgba(255,255,255,.1);color:#fff}
.cookie-btns button.accept{background:var(--red);color:#fff;border-color:var(--red)}
.cookie-btns button.accept:hover{background:var(--red-dk)}

/* ═══ TOAST ═══ */
.bs-toast{
  position:fixed;bottom:60px;left:50%;
  transform:translateX(-50%) translateY(20px);
  background:var(--text);color:#fff;
  padding:10px 20px;border-radius:var(--r-pill);
  font-size:.8rem;font-weight:500;z-index:2000;
  opacity:0;transition:opacity .2s,transform .2s;
  pointer-events:none;white-space:nowrap;box-shadow:var(--sh-lg);
}
.bs-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.bs-toast.ok {background:var(--green)}
.bs-toast.err{background:#B91C1C}

/* ═══ LEAFLET POPUP ═══ */
.leaflet-popup-content-wrapper{
  border-radius:var(--r-lg)!important;
  box-shadow:var(--sh-lg)!important;
  padding:0!important;overflow:hidden;
  font-family:var(--font-b)!important;
  border:1.5px solid var(--border);
}
.leaflet-popup-content{margin:0!important}
.bs-popup{padding:12px 14px;min-width:180px}
.bs-popup-name{font-family:var(--font-d);font-size:.95rem;font-weight:700;margin-bottom:3px;color:var(--text)}
.bs-popup-meta{font-size:.7rem;color:var(--muted);margin-bottom:5px}
.bs-popup-sp{font-size:.7rem;background:var(--red-lt);color:var(--red-deep);padding:3px 8px;border-radius:var(--r-sm);margin-bottom:6px;display:block}
.bs-popup-link{font-size:.72rem;color:var(--red);font-weight:600;text-decoration:none}
.bs-popup-link:hover{text-decoration:underline}
.leaflet-popup-tip{background:var(--surface)!important}
.leaflet-popup-close-button{color:var(--muted)!important;padding:8px!important;font-size:1.1rem!important}

/* ═══ QUICK LINKS (top list shortcuts) ═══ */
.quick-links{
  display:flex;gap:6px;flex-wrap:wrap;
  padding:8px 1.5rem;
  background:var(--bg);
  border-bottom:1px solid var(--border);
}
.ql-btn{
  display:inline-flex;align-items:center;gap:4px;
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:var(--r-pill);
  padding:5px 12px;
  font-size:.72rem;
  font-weight:600;
  color:var(--muted);
  cursor:pointer;
  white-space:nowrap;
  transition:all .12s;
  min-height:30px;
}
.ql-btn:hover{border-color:var(--red);color:var(--red);background:var(--red-lt)}
.ql-btn.active{background:var(--red-lt);border-color:var(--red);color:var(--red)}

/* ═══ REDUCED MOTION ═══ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}
@media(forced-colors:active){
  .bs-vb{border:2px solid ButtonText}
  .bs-vb.on{background:Highlight;color:HighlightText}
  .bs-nav-btn{background:ButtonFace;color:ButtonText;border:2px solid ButtonText}
}

/* ═══ AD UNITS ═══ */
.ad-unit{
  background:#F5F5F3;border:1.5px dashed var(--border);
  border-radius:var(--r-md);text-align:center;
  min-height:90px;display:flex;align-items:center;justify-content:center;
  font-size:.7rem;color:#C0C0BA;overflow:hidden;
}
.ad-unit:empty,.ad-unit:has(ins:empty){display:none}

/* ═══ CITIES DROPDOWN ═══ */
.nav-dropdown { position: relative; }
.nav-dd-trigger { cursor: pointer; }
.nav-dd-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  min-width: 200px;
  z-index: 500;
  overflow: hidden;
  padding: 4px;
}
.nav-dd-menu.hidden { display: none; }
.nav-dd-item {
  display: block;
  padding: 8px 12px;
  font-size: .82rem;
  color: var(--text);
  text-decoration: none;
  border-radius: var(--r-sm);
  transition: background .1s;
  font-weight: 400;
}
.nav-dd-item:hover { background: #F5F5F3; color: var(--red); }

/* ═══ FILTER TOGGLES — visually distinct from mood pills ═══ */
/* Override any inherited .ftoggle styles from index pages */
.filter-toggle-group {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.ftoggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg);
  border: 1.5px solid var(--border-md);
  border-radius: var(--r-sm); /* square-ish, not pill */
  padding: 4px 11px;
  font-size: .72rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  min-height: 30px;
  white-space: nowrap;
  transition: all .12s;
  letter-spacing: .01em;
}
.ftoggle:hover { border-color: var(--text); color: var(--text); background: #F0F0EC; }
.ftoggle.on {
  background: var(--text);
  border-color: var(--text);
  color: #fff;
}
.ftoggle.on:hover { background: #2A2A28; }