/* Toronto site nav — mirrors atlanta-style categorized hover dropdowns + drawer
   Dark-mode only. Reuses MX/CA inline-CSS variables: --bg, --mid, --card,
   --border, --text, --white, --muted, --gold, --fh, --ca-red.

   Selector strategy: scoped under nav#main-nav for the topbar itself,
   but dropdown / hamburger / drawer rules use the same class names atlanta
   uses, so the visual language matches one-to-one. */

:root{--accent:var(--ca-red);--accent-tint:rgba(216,6,33,0.10);--accent-soft:rgba(216,6,33,0.06)}

/* TOP NAV BAR ─────────────────────────────────────────────── */
nav#main-nav{position:fixed;top:0;left:0;right:0;z-index:200;height:56px;overflow:visible;
  background:rgba(6,9,15,0.92);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);display:flex;align-items:center;
  justify-content:space-between;padding:0 2rem;gap:1rem}
nav#main-nav .logo{font-family:var(--fh);font-weight:900;font-size:1.25rem;
  letter-spacing:.04em;display:flex;align-items:center;gap:6px;cursor:pointer;
  white-space:nowrap;color:inherit;text-decoration:none}
nav#main-nav .logo:hover{text-decoration:none}
nav#main-nav .logo .g{color:var(--white)}
nav#main-nav .logo .r{color:var(--accent)}

/* "All Cities" hub pill */
.hub-link{display:inline-flex;align-items:center;gap:5px;text-decoration:none;
  color:var(--muted);font-size:.65rem;font-family:var(--fh);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;
  border:1px solid rgba(255,255,255,0.15);border-radius:3px;
  margin-right:8px;white-space:nowrap;
  transition:color .15s,border-color .15s}
.hub-link:hover{color:var(--white);border-color:rgba(255,255,255,0.4);text-decoration:none}
.hub-link .hub-icon{font-size:.85rem}
@media(max-width:900px){.hub-link{display:none}}

/* Category buttons (desktop) */
.nav-links{display:flex;list-style:none;gap:0;margin:0;padding:0;align-items:center;overflow:visible}
.nav-cats{gap:0 !important}
.nav-cat-item{position:relative;overflow:visible;list-style:none}
.nav-cat-btn{background:none;border:none;color:var(--muted);font-family:var(--fh);
  font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer;padding:0 .85rem;height:56px;display:flex;align-items:center;
  gap:5px;transition:color .18s;white-space:nowrap}
.nav-cat-btn:hover,.nav-cat-btn.active{color:var(--white)}
.active-cat .nav-cat-btn{color:var(--white)}
.active-cat .nav-cat-btn::after{content:'';position:absolute;bottom:0;
  left:.85rem;right:.85rem;height:2px;background:var(--accent)}
.nav-caret{font-size:.55rem;opacity:.6;transition:transform .2s}
.dd-open .nav-caret{transform:rotate(180deg)}

/* Dropdown panel */
.nav-dropdown{position:absolute;top:100%;left:50%;min-width:220px;
  background:var(--bg);border:1px solid var(--border);border-top:2px solid var(--accent);
  padding:.5rem 0;opacity:0;pointer-events:none;
  transform:translateX(-50%) translateY(-8px);
  transition:opacity .18s,transform .18s;z-index:300;
  box-shadow:0 8px 32px rgba(0,0,0,.5)}
.dd-open .nav-dropdown{opacity:1;pointer-events:all;
  transform:translateX(-50%) translateY(0)}
.nav-dd-item{display:flex;flex-direction:column;padding:.6rem 1.1rem;
  text-decoration:none;transition:background .15s;border-left:2px solid transparent}
.nav-dd-item:hover{background:rgba(248,244,239,.06);border-left-color:var(--accent);text-decoration:none}
.nav-dd-item.active{background:var(--accent-tint);border-left-color:var(--accent)}
.nav-dd-label{font-family:var(--fh);font-size:.78rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;color:var(--text)}
.nav-dd-sub{font-size:.68rem;color:var(--muted);font-weight:300;margin-top:1px}

/* Right-hand actions group (hamburger only — theme toggle skipped) */
.nav-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}

/* ── HAMBURGER MENU ── */
.hamburger{display:none;width:36px;height:40px;position:relative;
  -webkit-appearance:none;appearance:none;
  background:transparent;border:0;cursor:pointer;padding:0;
  flex-shrink:0;-webkit-tap-highlight-color:transparent;outline:none;box-shadow:none;}
.hamburger::before{content:none}
.hamburger span{display:block;position:absolute;left:9px;
  width:18px;height:2px;background:rgba(255,255,255,.85);
  transition:transform .3s ease,opacity .25s;transform-origin:center}
.hamburger span:nth-child(1){top:11px}
.hamburger span:nth-child(2){top:19px}
.hamburger span:nth-child(3){top:27px}
.hamburger.open span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

/* Mobile nav dropdown */
.mobile-nav-drawer{display:block;position:fixed;top:56px;left:0;right:0;
  background:rgba(4,8,18,.97);border-top:2px solid var(--accent);
  border-bottom:1px solid var(--border);z-index:190;
  max-height:0;overflow:hidden;
  transition:max-height .35s cubic-bezier(.76,0,.24,1)}
.mobile-nav-drawer.open{max-height:540px;overflow-y:auto}
.mob-dd-grid{display:grid;grid-template-columns:1fr 1fr}
.mobile-nav-link{display:flex;align-items:center;gap:10px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:.88rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;padding:.85rem 1.25rem;
  border-bottom:1px solid rgba(248,244,239,.05);transition:color .15s,background .15s}
.mobile-nav-link:nth-child(odd){border-right:1px solid rgba(248,244,239,.05)}
.mobile-nav-link:hover,.mobile-nav-link.active{color:var(--white);background:rgba(248,244,239,.04)}
.mob-dd-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;
  background:var(--muted);transition:background .15s}
.mobile-nav-link:hover .mob-dd-dot,.mobile-nav-link.active .mob-dd-dot{background:var(--gold)}
.mobile-nav-link.active{color:var(--gold)}
.mob-dd-bar{display:flex;align-items:center;justify-content:space-between;
  padding:.75rem 1.25rem;border-top:1px solid rgba(248,244,239,.05);background:rgba(0,0,0,.25)}
.mob-dd-bar-label{font-family:'Barlow Condensed',sans-serif;font-size:.6rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(248,244,239,.22)}
.mob-dd-cta{font-family:'Barlow Condensed',sans-serif;font-size:.65rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:#000;background:var(--gold);
  padding:7px 14px;text-decoration:none;transition:background .15s}
.mob-dd-cta:hover{background:#dbba5f}
html.light .mobile-nav-drawer{background:rgba(0,8,28,.97)}
html.light .mobile-nav-link:hover,html.light .mobile-nav-link.active{color:#fff}

/* THEME TOGGLE ─────────────────────────────────────────── */
.theme-toggle{width:36px;height:36px;border-radius:50%;
  border:1px solid rgba(255,255,255,0.18);background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:16px;
  transition:all .2s;flex-shrink:0;color:rgba(255,255,255,0.7);padding:0}
.theme-toggle:hover{background:rgba(255,255,255,0.08);color:#fff;border-color:rgba(255,255,255,0.45)}

/* Smooth color transitions during theme swap */
html.theme-transitioning *{transition:background-color .25s ease,color .2s ease,border-color .2s ease !important}

/* RESPONSIVE — atlanta-matched breakpoint at 768px ──────── */
@media(max-width:768px){
  .nav-links{display:none !important}
  .hamburger{display:flex !important;visibility:visible !important;opacity:1 !important}
  nav#main-nav{padding:0 1.25rem}
}
@media(min-width:769px){
  .nav-links{display:flex !important}
  .hamburger{display:none !important}
  .nav-cat-btn{display:flex !important}
  .nav-dropdown{display:block}
}

/* ═══════════════════════════════════════════════════════════
   LIGHT MODE — variable overrides + targeted nav rules
   Activated by `html.light` class (set in head before paint to
   prevent FOUC).
   ═══════════════════════════════════════════════════════════ */
html.light{
  --bg:#F4F1EC;
  --mid:#E8E4DC;
  --card:#FFFFFF;
  --border:rgba(0,40,104,0.10);
  --text:#0D1828;
  --white:#1A2C50;        /* accent text flips to navy */
  --muted:#4A6080;
  --dim:#8AA0BC;
  --gold:#1A2C50;         /* gold links → navy in light mode */
  --ca-white:#0D1828;
}

/* Top nav stays dark even in light mode (preserves contrast) */
html.light nav#main-nav{background:rgba(6,9,15,0.92);border-bottom-color:rgba(255,255,255,0.10)}
html.light nav#main-nav .logo .g{color:#fff}
html.light nav#main-nav .logo .r{color:var(--ca-red)}
html.light .nav-cat-btn{color:rgba(255,255,255,0.7)}
html.light .nav-cat-btn:hover,html.light .active-cat .nav-cat-btn{color:#fff}
html.light .hub-link{color:rgba(255,255,255,0.7);border-color:rgba(255,255,255,0.18)}
html.light .hub-link:hover{color:#fff;border-color:rgba(255,255,255,0.45)}

html.light .theme-toggle{color:rgba(255,255,255,0.7);border-color:rgba(255,255,255,0.25)}
html.light .theme-toggle:hover{background:rgba(255,255,255,0.12);color:#fff}

/* Dropdown panel flips to white card in light mode */
html.light .nav-dropdown{background:#fff;border-color:rgba(0,40,104,0.12);box-shadow:0 8px 32px rgba(0,0,0,0.15)}
html.light .nav-dd-label{color:#0D1828}
html.light .nav-dd-sub{color:#4A6080}
html.light .nav-dd-item:hover{background:rgba(0,40,104,0.05)}
html.light .nav-dd-item.active{background:rgba(216,6,33,0.08)}

/* Mobile drawer stays dark for contrast */
html.light .mobile-nav-drawer{background:#06090F;border-top-color:rgba(255,255,255,0.10)}
html.light .mobile-nav-link{color:rgba(255,255,255,0.7)}
html.light .mobile-nav-link:hover,html.light .mobile-nav-link.active{color:#fff}