/* Inter loaded here so the chrome font is consistent on every page that
   includes chrome.css — even pages whose body uses system-ui. (Most pages
   also link Inter themselves; the browser dedupes by URL.) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* Reserve scrollbar space so centred chrome lands at the same X
   on short (no-scrollbar) and long (scrollbar) pages alike. */
html { scrollbar-gutter: stable; }

/* ============================================================
   chrome.css — shared site chrome (topbar + breadcrumb)
   Single source of truth for Just Practice page headers.

   Relies on these CSS vars being defined by each page's :root —
   they are part of the mainline design system (Economics is the
   reference): --text --muted --brand --brand-soft --surface2.

   STRUCTURE is universal across the whole site. The mainline
   skin lives here. Sections with a distinct visual identity
   (e.g. YoungMath) re-declare ONLY the visual properties of
   these same selectors in their own stylesheet, loaded after.
   ============================================================ */

/* Brand colour: subjects name it differently (Economics/SAT use --brand,
   Accountancy --acc, Business Studies --bst, Entrepreneurship --entr,
   English --eng). Resolve whichever the page defines so the wordmark
   accent + feedback button look identical across the whole site. */
:root {
  --jp-brand: var(--brand, var(--acc, var(--bst, var(--entr, var(--eng, #4f46e5)))));
  --jp-brand-soft: var(--brand-soft, var(--acc-soft, var(--bst-soft, var(--entr-soft, var(--eng-soft, #eef2ff)))));
}

/* ——— Global site header ———
   The JustPractice wordmark, rendered identically on EVERY page and
   pinned to one fixed inner width so it sits at the same XY regardless
   of each page's content width. Lives OUTSIDE the page content .wrap.
   Markup:
     <header class="site-header">
       <div class="chrome-row">
         <a class="brand-mark" href="/">Just<span>Practice</span></a>
         <div class="topbar-right">
           <span class="brand-domain">justpractice.in</span>
           <a class="feedback-link" href="/feedback.html">Give Feedback</a>
         </div>
       </div>
     </header>  */
.site-header, .breadcrumb {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.site-header { width: 100%; margin: 0; padding: 0; border: 0; background: none; }
.site-header .chrome-row,
.topbar {
  max-width: 1080px; margin: 0 auto;
  width: 100%; box-sizing: border-box;
  padding: 18px 20px 0;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px;
  flex-wrap: wrap; gap: 10px;
}
.brand-mark {
  font-weight: 700; color: var(--text);
  letter-spacing: -0.3px; text-decoration: none;
}
.brand-mark span { color: var(--jp-brand); }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.brand-domain { color: var(--muted); font-size: 12px; }
.feedback-link {
  color: var(--jp-brand); text-decoration: none;
  font-weight: 600; font-size: 12.5px;
  padding: 6px 12px; border-radius: 8px;
  background: var(--jp-brand-soft);
  transition: background 0.12s, color 0.12s;
}
.feedback-link:hover { background: var(--jp-brand); color: #fff; }

/* ——— Breadcrumb (every page except the homepage) ———
   Canonical markup:
     <nav class="breadcrumb" aria-label="Breadcrumb">
       <div class="breadcrumb-path">
         <a href="/">Just Practice</a>
         <span class="sep">›</span>
         <a href="/sat/maths/">SAT Maths</a>
         <span class="sep">›</span>
         <span class="current">Algebra</span>
       </div>
     </nav>
   Optional right-aligned actions:
     <div class="breadcrumb-actions"> … </div>  */
.breadcrumb {
  width: 100%; margin: 0; padding: 0; border: 0;
}
.breadcrumb-path {
  max-width: 1080px; margin: 0 auto;
  padding: 10px 20px 14px 10px;  /* left 10px so the first crumb's text aligns under the wordmark */
  width: 100%; box-sizing: border-box;
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0;
  font-size: 13px;
}
.breadcrumb-path a {
  color: var(--muted); text-decoration: none;
  padding: 6px 10px; border-radius: 6px;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
}
.breadcrumb-path a:hover { background: var(--surface2); color: var(--text); }
.breadcrumb-path .sep { color: #cbd5e1; padding: 0 2px; font-size: 14px; line-height: 1; }
.breadcrumb-path .sub { color: var(--muted); padding: 6px 4px; white-space: nowrap; }
.breadcrumb-path .current { color: var(--text); font-weight: 600; padding: 6px 10px; }
/* Optional action links (e.g. Switch to Revise) on test/flashcard pages —
   aligned to the same centred 1080 box as the breadcrumb chain, as a row below it. */
.breadcrumb-actions {
  max-width: 1080px; margin: 0 auto; padding: 0 20px 10px 10px;
  width: 100%; box-sizing: border-box;
  display: flex; gap: 8px; flex-wrap: wrap;
}

/* ——— Global site footer ———
   Same single source as the header. Present on EVERY page.
   Canonical markup:
     <footer class="site-footer">
       <div class="site-footer-inner">
         <a href="/feedback.html">Give Feedback</a>
         <span class="sep">·</span>
         <a href="/about/">About</a>
         <span class="sep">·</span>
         <a href="/contact/">Contact Us</a>
         <span class="sep">·</span>
         <a href="/terms/">Terms of Use</a>
       </div>
     </footer>  */
.site-footer {
  width: 100%; margin: 48px 0 0; padding: 0; border: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.site-footer-inner {
  max-width: 1080px; margin: 0 auto;
  padding: 20px 20px 30px;
  border-top: 1px solid var(--border, #e1e4ea);
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 2px; font-size: 13px;
}
.site-footer a {
  color: var(--muted, #6b7280); text-decoration: none;
  padding: 5px 10px; border-radius: 6px;
  transition: color 0.12s, background 0.12s;
  white-space: nowrap;
}
.site-footer a:hover { color: var(--jp-brand); background: var(--surface2, #f0f2f5); }
.site-footer .sep { color: #cbd5e1; padding: 0 2px; }