/* ==========================================================================
   SyllabusHub — Shared Design System
   Used by every page under /syllabus/ (hub + individual exam pages)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

:root{
  /* ---- Palette: "Gazette" — official-notice navy + seal gold, on cool paper ---- */
  --sh-navy-950:#0c1424;
  --sh-navy-900:#101c33;
  --sh-navy-800:#16233f;
  --sh-navy-700:#1b2a4a;
  --sh-navy-600:#28395e;
  --sh-navy-400:#5b6d92;

  --sh-gold-700:#9c7423;
  --sh-gold-600:#c89b3c;
  --sh-gold-500:#dcb256;
  --sh-gold-100:#faf1dd;

  --sh-green-700:#1e5f45;
  --sh-green-600:#2e7d5b;
  --sh-green-100:#e2f3ea;

  --sh-paper-0:#ffffff;
  --sh-paper-50:#f7f8fa;
  --sh-paper-100:#eef1f5;
  --sh-paper-200:#e2e6ed;

  --sh-ink-900:#1b1f2a;
  --sh-ink-700:#2b2f38;
  --sh-ink-500:#5b6270;
  --sh-ink-400:#828a99;

  --sh-danger:#b3432b;

  /* ---- semantic tokens (light) ---- */
  --bg-page:var(--sh-paper-50);
  --bg-surface:var(--sh-paper-0);
  --bg-surface-alt:var(--sh-paper-100);
  --bg-sunken:var(--sh-paper-200);
  --text-primary:var(--sh-ink-900);
  --text-secondary:var(--sh-ink-500);
  --text-muted:var(--sh-ink-400);
  --text-on-navy:#eef1f7;
  --border-hairline:#dde1e8;
  --border-dashed:#c7cddb;
  --accent-navy:var(--sh-navy-700);
  --accent-gold:var(--sh-gold-600);
  --accent-green:var(--sh-green-600);
  --shadow-card:0 1px 2px rgba(16,28,51,.04), 0 8px 24px -12px rgba(16,28,51,.14);
  --shadow-card-hover:0 4px 10px rgba(16,28,51,.06), 0 20px 40px -16px rgba(16,28,51,.22);
  --shadow-pop:0 12px 32px -8px rgba(16,28,51,.28);

  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:20px;
  --radius-pill:999px;

  --font-head:'Poppins',ui-sans-serif,system-ui,sans-serif;
  --font-body:'Inter',ui-sans-serif,system-ui,sans-serif;
  --font-nav:'Plus Jakarta Sans',ui-sans-serif,system-ui,sans-serif;

  --container:1240px;
  color-scheme:light;
}

[data-theme="dark"]{
  --bg-page:var(--sh-navy-950);
  --bg-surface:var(--sh-navy-900);
  --bg-surface-alt:var(--sh-navy-800);
  --bg-sunken:#0a1120;
  --text-primary:#eef1f7;
  --text-secondary:#aab4c8;
  --text-muted:#7c88a1;
  --text-on-navy:#eef1f7;
  --border-hairline:#26314c;
  --border-dashed:#31405f;
  --accent-navy:#5b7bc4;
  --accent-gold:var(--sh-gold-500);
  --accent-green:#49a880;
  --shadow-card:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
  --shadow-card-hover:0 4px 10px rgba(0,0,0,.35), 0 20px 44px -16px rgba(0,0,0,.6);
  --shadow-pop:0 16px 40px -8px rgba(0,0,0,.6);
  color-scheme:dark;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg-page);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background .35s ease, color .35s ease;
}
h1,h2,h3,h4{font-family:var(--font-head);color:var(--text-primary);margin:0 0 .5em;line-height:1.22;letter-spacing:-.01em;}
p{margin:0 0 1em;color:var(--text-secondary);}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{font-family:var(--font-nav);}
:focus-visible{outline:3px solid var(--accent-gold);outline-offset:2px;border-radius:4px;}
.container{max-width:var(--container);margin-inline:auto;padding-inline:24px;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.skip-link{position:fixed;top:-60px;left:12px;background:var(--sh-navy-700);color:#fff;padding:10px 18px;border-radius:var(--radius-sm);z-index:999;transition:top .2s ease;}
.skip-link:focus{top:12px;}

/* ---- Top utility / site header shared shell ---- */
.sh-header{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb, var(--bg-surface) 88%, transparent);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--border-hairline);
}
.sh-header__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px;}
.sh-brand{display:flex;align-items:center;gap:10px;font-family:var(--font-nav);font-weight:800;font-size:1.05rem;color:var(--text-primary);}
.sh-brand__mark{
  width:38px;height:38px;border-radius:10px;
  background:linear-gradient(155deg,var(--sh-navy-700),var(--sh-navy-900));
  display:grid;place-items:center;color:var(--sh-gold-500);font-weight:800;font-family:var(--font-head);
  box-shadow: inset 0 0 0 1px rgba(220,178,86,.35);
  flex-shrink:0;
}
.sh-nav{display:flex;align-items:center;gap:22px;font-family:var(--font-nav);font-weight:600;font-size:.92rem;}
.sh-nav a{color:var(--text-secondary);padding:8px 2px;border-bottom:2px solid transparent;transition:color .2s, border-color .2s;}
.sh-nav a:hover, .sh-nav a[aria-current="page"]{color:var(--text-primary);border-color:var(--accent-gold);}
.sh-header__actions{display:flex;align-items:center;gap:10px;}

.theme-toggle{
  width:40px;height:40px;border-radius:var(--radius-pill);border:1px solid var(--border-hairline);
  background:var(--bg-surface-alt);color:var(--text-primary);cursor:pointer;display:grid;place-items:center;
  transition:transform .2s ease, background .2s ease;
}
.theme-toggle:hover{transform:translateY(-1px);}
.theme-toggle svg{width:18px;height:18px;}
.theme-toggle .icon-moon{display:none;}
[data-theme="dark"] .theme-toggle .icon-sun{display:none;}
[data-theme="dark"] .theme-toggle .icon-moon{display:block;}

.menu-toggle{display:none;width:40px;height:40px;border-radius:var(--radius-sm);border:1px solid var(--border-hairline);background:var(--bg-surface-alt);cursor:pointer;color:var(--text-primary);}

/* ---- Breadcrumb ---- */
.sh-breadcrumb{padding-block:14px 4px;}
.sh-breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:0;font-family:var(--font-nav);font-size:.83rem;color:var(--text-muted);}
.sh-breadcrumb li{display:flex;align-items:center;gap:6px;}
.sh-breadcrumb li:not(:last-child)::after{content:"›";color:var(--border-dashed);}
.sh-breadcrumb a{color:var(--text-secondary);transition:color .15s;}
.sh-breadcrumb a:hover{color:var(--accent-gold);}
.sh-breadcrumb li[aria-current="page"]{color:var(--text-primary);font-weight:600;}

/* ---- Footer shared shell ---- */
.sh-footer{background:var(--sh-navy-950);color:#c3ccdd;margin-top:80px;}
.sh-footer a{color:#c3ccdd;}
.sh-footer a:hover{color:var(--sh-gold-500);}
.sh-footer__grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px;padding-block:56px 32px;}
.sh-footer h3{color:#fff;font-size:.92rem;letter-spacing:.02em;text-transform:uppercase;margin-bottom:14px;}
.sh-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:.9rem;}
.sh-footer__bottom{border-top:1px solid rgba(255,255,255,.1);padding-block:20px;font-size:.82rem;color:#8b95ab;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}
.sh-footer__brand p{color:#98a3ba;font-size:.9rem;max-width:32ch;}

@media (max-width:900px){
  .sh-nav{display:none;}
  .menu-toggle{display:grid;place-items:center;}
  .sh-footer__grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .sh-footer__grid{grid-template-columns:1fr;}
}


/* Global safety */
html, body{
  overflow-x: clip;
  overflow-y: visible;
}

/* Make sure the whole section can show */
.search-zone,
.stats-strip,
.stats-strip *,
.section,
.section .container{
  overflow: visible !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Force the stats area to render */
.stats-strip{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 1px !important;
  width: 100% !important;
  position: relative !important;
  z-index: 2 !important;
  margin: 0 auto !important;
}

.stats-strip > div,
.stat-tile{
  display: block !important;
  min-width: 0 !important;
  width: 100% !important;
  position: relative !important;
  z-index: 2 !important;
}

@media (max-width: 1100px){
  .stats-strip{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px){
  .stats-strip{
    grid-template-columns: 1fr !important;
  }
}


/* ================================
   SyllabusHub responsive override
   Put this at the end of CSS
================================ */

:root{
  --container: 1200px;
  --gutter: clamp(14px, 2vw, 24px);
}

*,*::before,*::after{ box-sizing:border-box; }

html, body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

body{
  margin:0;
}

img, svg, video, canvas{
  max-width:100%;
  height:auto;
}

.container{
  width:min(var(--container), calc(100% - (var(--gutter) * 2)));
  margin-inline:auto;
  padding-inline:0;
}

.sh-header,
.sticky-search{
  width:100%;
  left:0;
  right:0;
}

.sh-header{
  z-index:1000;
}

.sticky-search{
  z-index:900;
}

.sh-header__inner,
.sticky-search__inner{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

main{
  width:100%;
}

.hero,
.section,
.search-zone,
.download-banner,
.newsletter{
  width:100%;
}

.search-zone{
  margin-top:clamp(-52px, -4vw, -32px);
}

.stats-strip{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:1px;
  width:100%;
}

.rail{
  width:100%;
  display:flex;
  gap:16px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  padding:4px 0 12px;
  scroll-snap-type:x mandatory;
}

.rail > *{
  flex:0 0 clamp(240px, 28vw, 320px);
  scroll-snap-align:start;
}

.grid{
  width:100%;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:20px;
}

.filter-row,
.select-group,
.search-bar,
.download-banner,
.newsletter,
.sh-footer__grid,
.sh-footer__bottom{
  width:100%;
  min-width:0;
}

.filter-row{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  align-items:flex-start;
}

.filter-scroll{
  min-width:0;
  overflow-x:auto;
}

.select-group{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  min-width:0;
}

.search-bar{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
}

.search-bar input{
  min-width:0;
  width:100%;
}

.quicklinks{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  width:100%;
}

.quicklinks a{
  max-width:100%;
  white-space:normal;
}

.download-banner,
.newsletter{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  align-items:center;
}

.sh-footer__grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:32px;
}

.sh-footer__bottom{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:12px;
}

@media (max-width: 1200px){
  .sh-footer__grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px){
  .sh-nav{ display:none; }
  .menu-toggle{ display:grid; place-items:center; }
  .container{
    width:min(var(--container), calc(100% - (var(--gutter) * 1.5)));
  }
  .stats-strip{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .grid{
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  }
  .sh-footer__grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .search-zone{
    margin-top:clamp(-44px, -3.5vw, -28px);
  }
}

@media (max-width: 640px){
  .container{
    width:calc(100% - 28px);
  }
  .stats-strip{
    grid-template-columns:1fr;
  }
  .grid{
    grid-template-columns:1fr;
  }
  .sh-footer__grid{
    grid-template-columns:1fr;
  }
  .newsletter form{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .newsletter input,
  .newsletter button{
    width:100%;
  }
  .filter-row,
  .select-group{
    flex-direction:column;
    align-items:stretch;
  }
  .sh-header__inner,
  .sticky-search__inner{
    padding-inline:14px;
  }
  .search-zone{
    margin-top:clamp(-34px, -3vw, -22px);
  }
}

@media (max-width: 420px){
  .rail > *{
    flex-basis:86%;
  }
  .search-bar{
    gap:8px;
  }
}