/* =========================================================
   STYLE GUIDE: quick index
   0) ROOT TOKENS
   1) RESET & BASE TYPOGRAPHY
   2) LAYOUT: GRID SHELL + REGIONS
   3) CARDS & COMMON COMPONENTS
   4) DETAILS/SUMMARY (content)
   5) LEFT NAV: INDENTS, WEIGHTS & CARDS
   ========================================================= */


/* =========================================================
   0) ROOT TOKENS (site-wide)
   ========================================================= */
:root{
  --border: #e5e7eb;
  --hover-bg: #eef6ff;         /* used for left-nav hover */
}

/* =========================================================
   1) RESET & BASE TYPOGRAPHY
   ========================================================= */
body{
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f4f7f9;
  color: #333;
  margin: 40px;
  padding: 0;
  line-height: 1.6;
}

h1{
  font-size: 2em;
  color: #2c3e50;
  border-bottom: 2px solid #3498db;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

p, li{ font-size: 1rem; }

/* default content lists: show bullets */
ul{
  list-style: circle outside;   /* use disc if you prefer solid bullets */
  padding-left: 1.25rem;
  margin: 0 0 1rem 0;
}

li{ margin: 10px 0; }

a{
  color: #3498db;
  text-decoration: none;
  font-weight: 600;            /* global links semi-bold (overridden in sidebar) */
}
a:hover{ color: #1abc9c; text-decoration: underline; }

code{
  background-color: #ecf0f1;
  padding: 3px 6px;
  border-radius: 4px;
  font-family: Consolas, monospace;
}

img{
  max-width: 100%;
  height: auto;
  margin: 20px 0;
  border-radius: 8px;
}

.page-context {
  margin: .5rem 0 1.25rem;     /* sits nicely under the h1 underline */
  color: #2563eb;              /* same blue vibe as links */
  font-weight: 600;
}

/* =========================================================
   2) LAYOUT: GRID SHELL + REGIONS
   ========================================================= */
.unit-shell{ display:grid; grid-template-columns: 280px 1fr; min-height:100vh; }
.unit-shell.layout-3{ grid-template-columns: 280px 1fr 280px; gap:16px; }

/* Left sidebar */
#sidebar{
  position: sticky; top: 0; height: 100vh; overflow-y:auto;
  padding: 1.25rem; border-right: 1px solid var(--border); background: #fafafa;
}
#sidebar > * + *{ margin-top: .6rem; }
#sidebar .unit-title{ margin: 0 0 .5rem; font-size: 1.25rem; }
#sidebar .unit-sub{ margin: 0 0 .75rem; opacity:.8; font-size:.95rem; }
#sidebar .navlist{ list-style:none; margin:.75rem 0 0; padding:0; }
#sidebar .navlist li + li{ margin-top:.25rem; }
#sidebar .navlist a{
  display:block; padding:.5rem .6rem; border-radius:.5rem; color:inherit; text-decoration:none;
}
#sidebar .navlist a:hover{ background: var(--hover-bg); }
#sidebar .navlist a.active{ background:#e5f1ff; font-weight:700; } /* active = boldest */

/* Main content */
#content{
  padding: 1.25rem 1.5rem 4rem; /* was 2rem top */
  max-width: 1000px;
  display: grid; gap: 1rem; grid-auto-rows:max-content;
}

/* Right sidebar */
#sidebar-right{
  position: sticky; top: 0; max-height: 100vh; overflow-y:auto;
  padding: 1.25rem; border-left: 1px solid var(--border); background:#fafafa;
  display:grid; gap:1rem; grid-auto-rows:max-content;
  align-content:start; align-items:start; justify-content:start; justify-items:stretch;
}

/* Responsive collapse to single column */
@media (max-width:900px){
  .unit-shell, .unit-shell.layout-3{ grid-template-columns: 1fr; }
  #sidebar, #sidebar-right{ position: static; height:auto; border:0; }
}

/* =========================================================
   3) CARDS & COMMON COMPONENTS
   ========================================================= */
.card{
  background:#fff; border:1px solid #eef2f7; border-radius:12px; padding:16px; align-self:start;
}
.card h1, .card h2, .card h3{ margin-top:0; }

#content > .card { margin-top: 0; }
#content > .card + .card { margin-top: 1rem; }  /* only between successive cards */


/* Inline code + keyboard keys (for lesson instructions) */
/* Allow inline code to wrap within paragraphs/lists */
code:not(pre code) {
  white-space: normal;       /* was nowrap */
  overflow-wrap: anywhere;   /* break long tokens if needed */
}

/* Optional: wrap long blocks too */
pre { white-space: pre-wrap; word-wrap: break-word; }


/* Compact schedule/grade tables */
.table-wrap{ overflow:auto; margin-bottom:12px; }
.schedule-table{
  width:100%; border-collapse:collapse; font-size:.9rem; border:1px solid #e5e7eb; background:#fff;
}
.schedule-table thead th{
  text-align:left; padding:8px 10px; background:#f3f4f6; border-bottom:1px solid #e5e7eb;
}
.schedule-table td{ padding:8px 10px; border-bottom:1px solid #e5e7eb; vertical-align:top; }
.schedule-table tbody tr:nth-child(even){ background:#fcfdff; }
.schedule-table .row-break td,
.schedule-table .row-lunch td{
  text-align:center; font-style:italic; color:#555; background:#f9fafb;
}

/* Media/compare + submit row */
.compare-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; }
.compare-grid figure{ margin:0; text-align:center; }
.compare-grid img{ width:100%; border-radius:12px; box-shadow:0 2px 6px rgba(0,0,0,.1); }
.submit-row .btn{
  padding:.5rem 1rem; border-radius:10px; border:1px solid #e5e7eb; background:#fff;
  cursor:pointer; text-decoration:none;
}

/* Two-column utility (collapses on small screens) */
.two-col{
  display:grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; align-items:start;
}
@media (max-width:900px){ .two-col{ grid-template-columns:1fr; } }

/* Optional tighter lists inside cards */
.list-tight{ margin:0; padding-left:1.1rem; }
.list-tight li + li{ margin-top:.25rem; }

/* Lesson pager (prev/next) */
.lesson-pager{
  display: flex;
  align-items: center;
  justify-content: space-between;   /* prev left, next right */
  gap: .75rem;
  margin-top: 1rem;
}
.lesson-pager .prev{ margin-right: auto; }
.lesson-pager .next{ margin-left: auto; }

/* (optional) make them look like subtle buttons */
.lesson-pager a{
  display: inline-block;
  padding: .5rem .75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  text-decoration: none;
}
.lesson-pager a:hover{ background: var(--hover-bg); }


/* =========================================================
   4) DETAILS/SUMMARY (global content carats)
   ========================================================= */
details > summary{
  display:flex; align-items:center; gap:.5rem; font-weight:normal; color:#334155; cursor:pointer; list-style:none;
}
details > summary::-webkit-details-marker{ display:none; }
details > summary::before{
  content:"▸"; display:inline-block; font-size:1.25em; line-height:1;
  color:#64748b; transition: transform 160ms ease, color 160ms ease;
}
details[open] > summary::before{ transform: rotate(90deg); }
details > summary:hover::before,
details > summary:focus::before{ color:#475569; }

/* =========================================================
   5) LEFT NAV: INDENTS, WEIGHTS & CARDS
   ========================================================= */

/* 5a) Hide caret ONLY inside the left sidebar tree */
#sidebar details > summary::before,
#sidebar details > summary::-webkit-details-marker{
  display:none !important; content:none !important;
}

/* 5b) Indentation — Section → ICT 8 (Level 1), ICT 8 → Unit (Level 2) */
#sidebar .navlist > details > ul.navlist{
  margin-left:.25rem; padding-left:.75rem; border-left:2px solid #eef2f7;
}
#sidebar .navlist > details > ul.navlist > details > ul.navlist{
  margin-left:.25rem; padding-left:.75rem; border-left:2px solid #eef2f7;
}
/* Level 3+ (lessons) — no extra indent */
#sidebar .navlist ul ul ul{ margin-left:0; padding-left:0; border-left:0; }

/* 5c) Weights — normal everywhere in tree, active = bold; top-level semi-bold */
#sidebar details > summary,
#sidebar details > summary a,
#sidebar .navlist a{ font-weight:400; }       /* override global a{600} */
#sidebar .navlist a.active{ font-weight:700; } /* active lesson/link bold */
#sidebar .nav-card details:has(.active) > summary > a{ font-weight:700; } /* active UNIT bold */

/* 5d) Top-level cards (Home / Code / Math / Bike) */
#sidebar .nav-card{
  background:#fff; border:1px solid #eef2f7; border-radius:12px; padding:10px; margin:0 0 10px 0;
}
#sidebar .nav-card > .toplink{
  display:block; padding:8px 10px; border-radius:8px; text-decoration:none;
  font-weight:600;                         /* top-level semi-bold by default */
}
#sidebar .nav-card > .toplink:hover{ background: var(--hover-bg); }
#sidebar .nav-card > .toplink.active{
  font-weight:700; background: var(--hover-bg);
}

/* Children inside cards */
#sidebar .nav-card .navlist{ margin-top:6px; }
#sidebar .nav-card:not(.open) .navlist{ display:none; }
#sidebar .nav-card .navlist a{ display:block; padding:6px 8px; border-radius:8px; }

/* 5e) Simpler Home card */
#sidebar .nav-card[data-href="/"]{
  background:transparent; border:0; padding:0; margin:0 0 10px 0;
}
#sidebar .nav-card[data-href="/"] > .toplink{
  display:inline-block; padding:6px 0; border-radius:0; font-weight:600;
}
#sidebar .nav-card[data-href="/"] > .toplink:hover{
  background:transparent; text-decoration:underline;
}
#sidebar .nav-card[data-href="/"] > .toplink.active{
  background:transparent; font-weight:700;
}
#sidebar .nav-card[data-href="/"] .navlist{ display:none !important; }

/* ==========================================================
6) Breadcrumbs
=============================================================*/ 

/* Breadcrumb line under H1 (auto) */
.crumbs { margin: .25rem 0 .75rem; }  /* was .5rem 0 1.25rem */
.crumbs a { color: #111827; font-weight: 400; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs .sep { opacity: .5; margin: 0 .35rem; }
.crumbs .active { color: #3498db; font-weight: 700; }