/* ============================================================
   IB Prep — shared styles for resource template pages
   Mirrors the design language of the main site (IB Prep.html):
   Nexa type, cyan + amber accents, soft-paper field, white cards.
   ============================================================ */

@font-face{font-family:'Nexa';src:url('../fonts/Nexa-Heavy.ttf') format('truetype');font-weight:800;font-style:normal;font-display:swap;}
@font-face{font-family:'Nexa';src:url('../fonts/Nexa-ExtraLight.ttf') format('truetype');font-weight:200;font-style:normal;font-display:swap;}

:root{
  --bg:#ffffff;
  --bg-soft:#f6f4ef;
  --ink:#231f20;
  --ink-soft:#3a3536;
  --mut:#6f6a6b;
  --mut-2:#9a948d;
  --hair:rgba(35,31,32,.12);
  --hair-2:rgba(35,31,32,.24);
  --paper:#f5f2ec;
  --dark:#231f20;
  --blue:#0cc0df;
  --blue-deep:#0aa6c2;
  --orange:#ffb703;
  --orange-deep:#f0a800;
  --nexa:'Nexa','Jost',sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--nexa);
  font-weight:200;letter-spacing:-.01em;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
::selection{background:var(--blue);color:var(--ink);}
a{color:inherit;text-decoration:none;}

.wrap{max-width:1080px;margin:0 auto;padding:0 40px;}
.eyebrow{font-family:var(--nexa);font-weight:200;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--blue-deep);display:inline-block;}
h1,h2,h3{font-family:var(--nexa);font-weight:800;letter-spacing:-.045em;line-height:1;margin:0;}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--nexa);font-weight:800;
  font-size:15px;letter-spacing:-.01em;cursor:pointer;border:0;padding:15px 28px;border-radius:999px;
  transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s ease,background .2s ease,color .2s ease;}
.btn i{width:17px;height:17px;}
.btn-cta{background:var(--orange);color:var(--ink);}
.btn-cta:hover{transform:translateY(-3px);background:var(--orange-deep);box-shadow:0 16px 36px -14px rgba(255,183,3,.7);}

/* ============ NAV (solid / sub-page variant) ============ */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(255,255,255,.82);backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);border-bottom:1px solid var(--hair);
  box-shadow:0 8px 30px -22px rgba(35,31,32,.4);}
.nav-inner{max-width:1080px;margin:0 auto;padding:14px 40px;display:flex;align-items:center;gap:28px;}
.logo{display:inline-flex;align-items:center;gap:6px;font-family:var(--nexa);font-weight:800;font-size:23px;letter-spacing:-.05em;color:var(--ink);}
.logo .brand-mark{width:55px;height:auto;margin:-18px;flex:none;}
.logo b{color:var(--blue-deep);}
.nav-links{display:flex;gap:36px;position:absolute;left:50%;transform:translateX(-50%);}
.nav-links a{font-weight:200;font-size:15px;letter-spacing:-.005em;color:var(--mut);position:relative;padding:4px 0;transition:color .2s;}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--blue);transition:width .28s cubic-bezier(.2,.7,.3,1);}
.nav-links a:hover{color:var(--ink);}
.nav-links a:hover::after{width:100%;}
.nav .btn-cta{margin-left:auto;padding:11px 22px;white-space:nowrap;}
.burger{display:none;margin-left:auto;background:transparent;border:1px solid var(--hair-2);color:var(--ink);
  border-radius:12px;width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;}
.burger i{width:20px;height:20px;}
.mobile-menu{display:none;}

/* ============ PAGE HEADER BAND ============ */
.page-head{position:relative;overflow:hidden;
  background:
    linear-gradient(0deg, rgba(35,31,32,.16) 0%, rgba(35,31,32,.05) 9%, transparent 22%),
    radial-gradient(140% 165% at 8% -6%, rgba(12,192,223,.20), rgba(12,192,223,.05) 46%, transparent 72%),
    radial-gradient(120% 130% at 100% 8%, rgba(255,183,3,.10), transparent 55%),
    linear-gradient(180deg, #fbfaf7 0%, var(--bg-soft) 70%, var(--bg-soft) 100%);
  padding:150px 0 64px;border-bottom:1px solid var(--hair);}
/* faint line-grid texture behind the header content */
.page-head::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:
    linear-gradient(rgba(35,31,32,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35,31,32,.05) 1px, transparent 1px);
  background-size:58px 58px;background-position:center top;
  -webkit-mask:radial-gradient(130% 120% at 30% 0%, #000 0%, rgba(0,0,0,.55) 48%, transparent 78%);
          mask:radial-gradient(130% 120% at 30% 0%, #000 0%, rgba(0,0,0,.55) 48%, transparent 78%);}
.page-head .wrap{position:relative;z-index:2;}
.bg-deco{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.bg-deco>*{position:absolute;}
.deco-dots{inset:0;
  background-image:radial-gradient(rgba(35,31,32,.05) 1px,transparent 1.6px);
  background-size:30px 30px;
  -webkit-mask:radial-gradient(135% 110% at 50% -20%,#000 0%,transparent 72%);
          mask:radial-gradient(135% 110% at 50% -20%,#000 0%,transparent 72%);}
.deco-bloom{width:560px;height:560px;border-radius:50%;filter:blur(4px);
  background:radial-gradient(circle,rgba(12,192,223,.12),transparent 62%);}
.deco-bloom.tl{top:-300px;left:-180px;}
.deco-bloom.br{bottom:-360px;right:-200px;width:520px;height:520px;
  background:radial-gradient(circle,rgba(255,183,3,.07),transparent 62%);}

.crumb{display:inline-flex;align-items:center;gap:8px;font-weight:200;font-size:14px;letter-spacing:0;
  color:var(--mut);margin-bottom:24px;transition:gap .2s ease,color .2s ease;}
.crumb i{width:16px;height:16px;}
.crumb:hover{color:var(--blue-deep);gap:12px;}
.page-head .eyebrow{display:block;margin-bottom:16px;}
.page-head h1{font-size:clamp(40px,6.4vw,72px);}
.page-head h1 .accent{color:var(--blue);}
.page-head .lead{margin:22px 0 0;max-width:560px;color:var(--mut);font-weight:200;font-size:18px;letter-spacing:0;}

/* ============ MAIN / TOOLBAR ============ */
.page-body{padding:54px 0 110px;}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin-bottom:40px;}
.filter-group{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.filter-label{font-family:var(--nexa);font-weight:200;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut-2);}
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip-btn{font-family:var(--nexa);font-weight:200;font-size:14px;letter-spacing:0;color:var(--mut);
  padding:8px 16px;border-radius:999px;border:1px solid var(--hair);background:var(--bg);cursor:pointer;
  transition:background .2s,color .2s,border-color .2s,transform .2s;}
.chip-btn:hover{border-color:var(--hair-2);color:var(--ink);}
.chip-btn.active{background:var(--ink);color:var(--paper);border-color:var(--ink);font-weight:800;}
.seg{display:inline-flex;border:1px solid var(--hair);border-radius:999px;overflow:hidden;background:var(--bg);}
.seg button{font-family:var(--nexa);font-weight:200;font-size:14px;color:var(--mut);
  padding:8px 18px;border:0;background:transparent;cursor:pointer;transition:background .2s,color .2s;}
.seg button.active{background:var(--blue);color:var(--ink);font-weight:800;}
.toolbar .count{margin-left:auto;font-weight:200;font-size:14px;letter-spacing:0;color:var(--mut-2);}
.toolbar .count b{color:var(--ink);font-weight:800;}

.search{position:relative;display:flex;align-items:center;}
.search i{position:absolute;left:16px;width:17px;height:17px;color:var(--mut-2);pointer-events:none;}
.search input{font-family:var(--nexa);font-weight:200;font-size:15px;color:var(--ink);
  padding:11px 18px 11px 42px;border-radius:999px;border:1px solid var(--hair);background:var(--bg);
  width:260px;max-width:100%;outline:none;transition:border-color .2s,box-shadow .2s;}
.search input::placeholder{color:var(--mut-2);}
.search input:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(12,192,223,.14);}

/* ============ DOCUMENT GRID + CARDS ============ */
.doc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(264px,1fr));gap:20px;}
/* hidden attribute must win over the card's display:flex / course display */
.rdoc[hidden],.course[hidden]{display:none !important;}
.rdoc{position:relative;border:1px solid var(--hair);border-radius:20px;padding:26px 26px 24px;
  background:var(--bg);display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 1px 0 rgba(35,31,32,.03);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),border-color .3s,box-shadow .3s;}
.rdoc::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(120% 80% at 80% 0%,rgba(12,192,223,.10),transparent 60%);}
.rdoc:hover{transform:translateY(-6px);border-color:transparent;box-shadow:0 28px 56px -30px rgba(35,31,32,.35);}
.rdoc:hover::before{opacity:1;}
.rdoc-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px;}
.rdoc-ic{width:46px;height:46px;border-radius:13px;border:1px solid var(--hair);display:flex;
  align-items:center;justify-content:center;background:var(--bg-soft);flex:none;}
.rdoc-ic i{width:21px;height:21px;color:var(--orange-deep);}
.lvl{font-family:var(--nexa);font-weight:800;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;border:1px solid transparent;}
.lvl-HL{color:var(--orange-deep);background:rgba(240,168,0,.12);border-color:rgba(240,168,0,.4);}
.lvl-SL{color:var(--blue-deep);background:rgba(12,192,223,.12);border-color:rgba(12,192,223,.4);}
.lvl-both{color:var(--ink);background:var(--bg-soft);border-color:var(--hair-2);}
.rdoc-subject{font-family:var(--nexa);font-weight:200;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut-2);margin-bottom:6px;}
.rdoc-title{font-family:var(--nexa);font-weight:800;letter-spacing:-.04em;font-size:21px;line-height:1.08;color:var(--ink);}
.rdoc-meta{color:var(--mut);font-weight:200;font-size:13.5px;letter-spacing:0;margin-top:8px;}
.rdoc-actions{display:flex;gap:10px;margin-top:auto;padding-top:24px;}

/* small action buttons */
.rbtn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-family:var(--nexa);
  font-weight:800;font-size:13px;letter-spacing:-.005em;padding:10px 14px;border-radius:999px;cursor:pointer;
  border:1px solid transparent;flex:1;white-space:nowrap;
  transition:transform .22s cubic-bezier(.2,.7,.3,1),background .2s,color .2s,border-color .2s,box-shadow .2s;}
.rbtn i{width:15px;height:15px;}
.rbtn.ghost{background:var(--bg);color:var(--ink);border-color:var(--hair-2);}
.rbtn.ghost:hover{transform:translateY(-2px);border-color:var(--blue);color:var(--blue-deep);}
.rbtn.solid{background:var(--orange);color:var(--ink);}
.rbtn.solid:hover{transform:translateY(-2px);background:var(--orange-deep);box-shadow:0 12px 26px -14px rgba(255,183,3,.75);}

.empty{grid-column:1/-1;text-align:center;padding:70px 20px;color:var(--mut);font-weight:200;font-size:16px;}
.empty i{width:34px;height:34px;color:var(--mut-2);display:block;margin:0 auto 14px;}

/* ============ COURSE → TOPIC ACCORDION ============ */
.course-list{display:flex;flex-direction:column;gap:16px;}
.course{border:1px solid var(--hair);border-radius:20px;background:var(--bg);overflow:hidden;
  transition:border-color .3s,box-shadow .3s;}
.course.open{border-color:transparent;box-shadow:0 28px 56px -34px rgba(35,31,32,.4);}
.course-head{width:100%;display:flex;align-items:center;gap:18px;padding:24px 28px;background:transparent;
  border:0;cursor:pointer;text-align:left;font-family:var(--nexa);transition:background .2s;}
.course-head:hover{background:var(--bg-soft);}
.course-ic{width:46px;height:46px;border-radius:13px;border:1px solid var(--hair);display:flex;
  align-items:center;justify-content:center;background:var(--bg-soft);flex:none;}
.course-ic i{width:21px;height:21px;color:var(--orange-deep);}
.course-name{font-family:var(--nexa);font-weight:800;letter-spacing:-.04em;font-size:23px;color:var(--ink);}
.course-sub{font-weight:200;font-size:13px;letter-spacing:0;color:var(--mut);margin-top:2px;}
.course-meta{margin-left:auto;display:flex;align-items:center;gap:14px;font-weight:200;font-size:14px;letter-spacing:0;color:var(--mut-2);}
.course-meta .chev{width:20px;height:20px;color:var(--mut);transition:transform .3s cubic-bezier(.2,.7,.3,1);}
.course.open .course-meta .chev{transform:rotate(180deg);}
.course-body{display:none;}
.course.open .course-body{display:block;}
@media (prefers-reduced-motion:no-preference){
  @keyframes accOpen{from{transform:translateY(-6px);}to{transform:none;}}
  html.anim .course.open .course-body-pad{animation:accOpen .3s cubic-bezier(.2,.7,.3,1);}
}
.course-body-pad{padding:4px 28px 22px;}
.topic{display:flex;align-items:center;gap:18px;padding:16px 0;border-top:1px solid var(--hair);}
.topic:first-child{border-top:0;}
.topic-num{font-family:var(--nexa);font-weight:800;font-size:13px;color:var(--blue-deep);
  width:34px;height:34px;border-radius:10px;background:var(--bg-soft);border:1px solid var(--hair);
  display:inline-flex;align-items:center;justify-content:center;flex:none;}
.topic-name{font-family:var(--nexa);font-weight:200;font-size:17px;letter-spacing:-.01em;color:var(--ink);flex:1;min-width:0;}
.topic-actions{display:flex;gap:10px;flex:none;}
.topic-actions .rbtn{flex:none;padding:9px 16px;}

/* ============ FOOTER ============ */
footer{background:var(--dark);border-top:1px solid rgba(255,255,255,.1);padding:48px 0;}
.foot{display:flex;align-items:center;gap:30px;flex-wrap:wrap;justify-content:center;text-align:center;}
.foot .logo{font-size:20px;color:var(--paper);}
.foot .logo b{color:var(--blue);}
.foot-links{display:flex;gap:28px;flex-wrap:wrap;justify-content:center;}
.foot-links a{color:rgba(245,242,236,.6);font-weight:200;font-size:14.5px;transition:color .2s;}
.foot-links a:hover{color:var(--blue);}
.copy{color:rgba(245,242,236,.4);font-size:13px;font-weight:200;width:100%;letter-spacing:0;}

/* ============ REVEAL ============
   Static by design — content is always visible and does NOT animate on
   scroll (kept snappy on long grids). Hover/cursor reactions are handled
   separately on .rdoc / .card / .rbtn and are intentionally preserved. */
[data-reveal]{opacity:1;transform:none;}

/* ============ RESPONSIVE ============ */
@media(max-width:760px){
  .wrap{padding:0 24px;}
  .nav-inner{padding:12px 24px;}
  .nav-links,.nav .btn-cta{display:none;}
  .burger{display:flex;}
  .mobile-menu{display:block;max-height:0;overflow:hidden;transition:max-height .4s ease;
    background:rgba(255,255,255,.97);backdrop-filter:blur(14px);border-bottom:1px solid var(--hair);}
  .mobile-menu.open{max-height:340px;}
  .mobile-menu .mm-in{padding:14px 24px 26px;display:flex;flex-direction:column;gap:6px;}
  .mobile-menu a{padding:13px 4px;color:var(--mut);font-weight:200;border-bottom:1px solid var(--hair);}
  .mobile-menu .btn-cta{margin-top:14px;justify-content:center;}
  .page-head{padding:120px 0 50px;}
  .page-body{padding:40px 0 80px;}
  .toolbar .count{margin-left:0;width:100%;}
  .course-head{padding:20px;gap:14px;}
  .course-name{font-size:20px;}
  .topic{flex-wrap:wrap;gap:12px;}
  .topic-actions{width:100%;}
  .topic-actions .rbtn{flex:1;}
  .foot-links{gap:18px;}
}