/* Left sidebar navigation, shared by index.html and bonus-hunts.html.
   Self-contained on purpose: the two pages keep their own <style> blocks, so
   anything the sidebar needs lives here and cannot drift between them. */

:root{ --side-w:250px; }
html{ scroll-behavior:smooth; }

.sidebar{
  position:fixed;
  top:0;left:0;bottom:0;
  width:var(--side-w);
  z-index:60;
  display:flex;
  flex-direction:column;
  gap:18px;
  padding:20px 14px;
  background:var(--surface);
  border-right:1px solid var(--border);
  overflow-y:auto;
  overscroll-behavior:contain;
}

/* ---- brand ---- */
.side-brand{display:block;padding:4px 8px 2px;}
.side-brand .brand-logo{display:block;width:100%;max-width:150px;height:auto;margin:0 auto;}

/* ---- highlight tiles ---- */
.side-promos{display:flex;flex-direction:column;gap:8px;}
.side-promo{
  display:flex;align-items:center;gap:11px;
  padding:12px 13px;border-radius:13px;
  text-decoration:none;position:relative;overflow:hidden;
  transition:transform .15s ease, filter .15s ease;
}
.side-promo:hover{transform:translateY(-1px);}
.side-promo .promo-icon{
  width:32px;height:32px;border-radius:9px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.side-promo .promo-icon svg{width:17px;height:17px;}
.side-promo .promo-label{display:block;font-size:10px;font-weight:700;letter-spacing:0.7px;text-transform:uppercase;opacity:0.75;}
.side-promo .promo-title{display:block;font-size:15px;font-weight:800;line-height:1.15;margin-top:1px;}

.side-promo.accent{
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#1a1206;
}
.side-promo.accent:hover{filter:brightness(1.05);}
.side-promo.accent .promo-icon{background:rgba(0,0,0,.16);}
.side-promo.accent .promo-icon svg{stroke:#1a1206;}

.side-promo.ghost{
  background:var(--surface-2);
  border:1px solid var(--border);
  color:var(--text);
}
.side-promo.ghost:hover{border-color:var(--accent);}
.side-promo.ghost .promo-icon{background:rgba(255,182,72,0.12);}
.side-promo.ghost .promo-icon svg{stroke:var(--accent);}
.side-promo.ghost .promo-label{color:var(--muted);opacity:1;}

/* ---- nav ---- */
.side-nav{display:flex;flex-direction:column;gap:3px;}
.side-group{
  font-size:10px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--muted);opacity:.65;padding:10px 12px 5px;
}
.side-nav a{
  display:flex;align-items:center;gap:11px;
  padding:10px 12px;border-radius:10px;
  color:var(--text);text-decoration:none;
  font-size:13.5px;font-weight:600;
  transition:background .15s ease, color .15s ease;
}
.side-nav a svg{width:17px;height:17px;flex-shrink:0;color:var(--muted);transition:color .15s ease;}
.side-nav a:hover{background:var(--surface-2);}
.side-nav a:hover svg{color:var(--accent);}
.side-nav a.is-active{background:rgba(255,182,72,0.11);color:var(--accent);}
.side-nav a.is-active svg{color:var(--accent);}
.side-nav a .ext{margin-left:auto;width:13px;height:13px;opacity:.45;}


/* ---- page offset ---- */
body.has-sidebar main,
body.has-sidebar footer{margin-left:var(--side-w);}
/* Use the full width beside the sidebar instead of a centred 1100px column. */
body.has-sidebar main{max-width:none;padding:0 40px;}

/* ---- mobile ---- */
.mobile-bar{display:none;}
.side-backdrop{display:none;}

@media (max-width:1024px){
  .sidebar{
    transform:translateX(-100%);
    transition:transform .22s ease;
    box-shadow:0 0 40px rgba(0,0,0,.5);
  }
  .sidebar.is-open{transform:translateX(0);}

  body.has-sidebar main,
  body.has-sidebar footer{margin-left:0;}
  body.has-sidebar main{padding:0 20px;}

  .mobile-bar{
    display:flex;align-items:center;gap:12px;
    position:sticky;top:0;z-index:55;
    padding:11px 16px;
    background:rgba(11,11,13,0.9);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--border);
  }
  .side-toggle{
    width:38px;height:38px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    border:1px solid var(--border);border-radius:10px;
    background:transparent;color:var(--text);cursor:pointer;
  }
  .side-toggle svg{width:19px;height:19px;}
  .mobile-brand{display:block;line-height:0;}
  .mobile-brand img{display:block;height:24px;width:auto;}

  .side-backdrop{
    display:block;position:fixed;inset:0;z-index:59;
    background:rgba(0,0,0,.55);
    opacity:0;pointer-events:none;transition:opacity .22s ease;
  }
  .side-backdrop.is-open{opacity:1;pointer-events:auto;}

  main > section{scroll-margin-top:72px;}
}