/* =========================================================
   BBYM Grade 12 — Shared Theme Styles (bbyouths3.css)
   Palette: near-black background, gold highlights, red accent
   Applies to: Career Readiness, College Prep, Peer Tutoring,
               Community Projects, Wealth Management, Graduation Support
   ========================================================= */

/* -----------------------------
   CSS Variables (Theme Tokens)
   ----------------------------- */
:root{
  --bg:#0f0f10;         /* near-black */
  --panel:#141417;      /* dark panel */
  --text:#f5f5f5;       /* light text */
  --muted:#cfcfcf;      /* muted text */
  --gold:#FFD700;       /* brand gold */
  --gold-70:#FFD700b3;  /* 70% opacity gold (focus ring) */
  --red:#FF4444;        /* brand red */
  --link:#FF4444;       /* links accent */
  --border:#2a2a2e;     /* panel border */
  --maxw:1200px;        /* site max width */
  --radius:16px;        /* default corner radius */
  --shadow: 0 10px 24px rgba(0,0,0,.35);
  --nav-h:64px;         /* sticky top nav height */
  --sidebar-w:280px;    /* desktop sidebar width */
}

/* -----------------------------
   Resets & Basics
   ----------------------------- */
*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans",
               "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  background: var(--bg);
  color: var(--text);
  line-height:1.55;
}
img{ max-width:100%; display:block }
a{ color:var(--link); text-decoration:none }
a:hover{ text-decoration:underline }

/* Focus visibility (keyboard) */
:focus-visible{ outline:2px solid var(--gold-70); outline-offset:2px }

/* -----------------------------
   Accessibility
   ----------------------------- */
.skip-link{
  position:absolute; left:-999px; top:-999px;
}
.skip-link:focus{
  left:12px; top:12px; background:#000; color:#fff;
  padding:10px 14px; border-radius:10px; z-index:9999;
}

/* -----------------------------
   Top Navigation
   ----------------------------- */
.topnav{
  position:sticky; top:0; z-index:50;
  height:var(--nav-h);
  display:flex; align-items:center; gap:10px;
  background:#111; border-bottom:1px solid var(--border);
  padding:0 16px;
}

.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:700; letter-spacing:.3px;
}
.brand .dot{
  width:10px; height:10px; border-radius:50%; background:var(--gold);
}
.brand a{ color:var(--text) }
.brand a:hover{ text-decoration:none }

.navlinks{
  display:flex; gap:8px; margin-left:16px;
  overflow:auto hidden; -webkit-overflow-scrolling:touch;
}
.navlinks a{
  padding:10px 14px; border-radius:999px; white-space:nowrap;
  color:var(--muted); border:1px solid transparent;
}
.navlinks a:hover{ color:var(--text); text-decoration:none }
.navlinks a.active{
  color:#111; background:var(--gold); border-color:transparent;
  font-weight:700; text-decoration:none;
}

/* Mobile menu button for sidebar toggle (JS handles toggle) */
.sidebar-toggle{
  margin-left:auto;
  appearance:none; border:1px solid var(--border); background:var(--panel);
  color:var(--text);
  padding:9px 12px; border-radius:10px; cursor:pointer;
}
@media (min-width:1024px){
  .sidebar-toggle{ display:none }
}

/* -----------------------------
   Page Shell & Grid
   ----------------------------- */
.shell{
  max-width:var(--maxw);
  margin:0 auto;
  padding:18px 16px 32px;
}

.grid{
  display:grid; gap:16px;
  grid-template-columns: 1fr;       /* mobile first */
}
@media (min-width:1024px){
  .grid{
    grid-template-columns: var(--sidebar-w) minmax(0,1fr);
    align-items:start;
  }
}

/* -----------------------------
   Sidebar (scrollable on small screens & sticky on desktop)
   ----------------------------- */
.sidebar{
  position:relative;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
  max-height:none;               /* mobile/tablet default */
}
@media (min-width:1024px){
  .sidebar{
    position:sticky;
    top: calc(var(--nav-h) + 16px);
    max-height: calc(100vh - var(--nav-h) - 32px);
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }
}

/* Helpful if long menus extend off-screen: ensure last items are reachable */
.sidebar:focus-within{ outline:2px solid transparent } /* keep layout stable */

.sidebar h2{
  margin:0 0 10px 0; font-size:1.1rem; color:var(--gold);
}
.side-links{
  display:flex; flex-direction:column; gap:6px;
}
.side-links a{
  padding:10px 12px; border-radius:10px; color:var(--text);
  border:1px solid transparent; background:transparent;
}
.side-links a:hover{ background:#1c1c21; text-decoration:none }
.side-links a:focus{ outline:2px solid var(--gold-70) }

/* -----------------------------
   Cards / Content
   ----------------------------- */
.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:20px;
}

.main h1, .main h2, .main h3{
  letter-spacing:.2px;
}

.eyebrow{
  color:var(--gold);
  text-transform:uppercase;
  font-size:.8rem;
  letter-spacing:.22em;
}

/* Hero block */
.hero{
  display:grid; gap:10px;
  padding:18px 18px 22px;
  border:1px dashed #2c2c33;
  border-radius:calc(var(--radius) - 4px);
  background:linear-gradient(180deg, rgba(255,215,0,.08), transparent 55%);
}
.hero h1{ margin:0; font-size:clamp(1.6rem, 2.5vw, 2rem) }
.hero p{ margin:0; color:var(--muted) }

/* Buttons */
.btnrow{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-radius:12px; font-weight:700; text-decoration:none;
  border:1px solid var(--border); background:#1a1a1f; color:var(--text);
}
.btn:hover{ background:#22222a; text-decoration:none }
.btn.primary{ background:var(--gold); color:#111; border-color:#e5c100 }
.btn.outline{ background:transparent; border-color:#2d2d35 }

/* Lists & Columns */
ul, ol{ padding-left:18px }
.two-col{
  display:grid; gap:16px;
  grid-template-columns: 1fr;
}
@media (min-width:800px){
  .two-col{ grid-template-columns: 1fr 1fr }
}

/* Quotes */
blockquote{
  margin:0; padding:14px 16px; border-left:4px solid var(--gold);
  background:#17171b; border-radius:8px;
}

/* Compensate for sticky nav when using #anchors */
section{ scroll-margin-top: calc(var(--nav-h) + 20px) }

/* -----------------------------
   Footer (aligned with main column)
   ----------------------------- */
#footerwrap{
  max-width:var(--maxw);
  margin:22px auto 40px;
  display:grid; grid-template-columns: 1fr; gap:16px;
}
@media (min-width:1024px){
  #footerwrap{ grid-template-columns: var(--sidebar-w) minmax(0,1fr) }
}

/* The actual footer card aligns with the main content column on desktop */
#footercard{
  grid-column: 1 / -1;     /* mobile/tablet: full width */
  background:#111; color:var(--text); text-align:center;
  font-size:1.02rem; padding:26px 10px 18px;
  border:1px solid var(--border); border-radius:var(--radius);
}
@media (min-width:1024px){
  #footercard{ grid-column: 2 }
}

#footercard a{ color:var(--link) }
#footercard a:hover{ color:var(--gold) }

/* -----------------------------
   Motion preferences
   ----------------------------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
}

/* -----------------------------
   Optional: Light scrollbar tweak
   ----------------------------- */
.sidebar::-webkit-scrollbar{
  width:10px;
}
.sidebar::-webkit-scrollbar-thumb{
  background:#2c2c33; border-radius:10px;
}
.sidebar::-webkit-scrollbar-track{
  background:#18181c;
}