/* ExamNotesPDF — shared Hub design system (Course/Exam hub, Subject, Unit pages).
   Soft OKLCH palette, one hue per exam/course via --h on .acc, set server-side. */
@property --h{syntax:'<number>';inherits:true;initial-value:290}

/* Scoped to .enp-hub (not :root): --ink etc. share a name with style.css's
   global --ink, which the sitewide navbar/footer use as a BACKGROUND color.
   Declaring these on :root let the dark-mode block below flip the global
   --ink to near-white, turning the navbar/footer near-invisible on every
   page that loads this file (exam/course/subject hubs, free-notes archive)
   whenever a visitor's OS is in dark mode. Scoping to .enp-hub keeps the
   override contained to this component's own subtree. */
.enp-hub{
  --bg:#F8F9FC; --surface:#FFFFFF; --surface-2:#EFF1F7;
  --ink:#1B2133; --ink-soft:#4B546C; --ink-faint:#656E86;
  --border:#E4E7F0; --focus:#1B2133;
  --fill-l:.89;   --fill-c:.06;
  --onfill-l:.30; --onfill-c:.07;
  --tint-l:.965;  --tint-c:.02;
  --soft-l:.925;  --soft-c:.045;
  --ink-a-l:.40;  --ink-a-c:.10;
  --strong-l:.64; --strong-c:.11;
}
/* The automatic `@media (prefers-color-scheme: dark)` switch was removed
   2026-10-18: .enp-hub itself never sets its own background (only its child
   cards/surfaces do, via --tint/--fill/--surface), and it's embedded inside
   this WordPress site's always-light page chrome, which has no dark-mode
   support at all. So any plain text rendered straight into the hub markup
   with no card wrapper of its own — e.g. the "Free Notes by Subject" <h2>
   in enp_render_taxonomy_hub(), or breadcrumb text using style.css's own
   (always-light) --ink3 — inherited the light-on-dark body color from here
   while its actual background stayed the page's normal light white, making
   it near-invisible for any visitor whose OS is set to dark mode. Since the
   site isn't designed with a real end-to-end dark theme (no dark <body>),
   this component shouldn't react to OS preference either; it just always
   renders its light palette now. The explicit [data-theme="dark"] override
   below is left in place, unused, for if a real opt-in dark mode is ever
   built with matching page-level support. */
.enp-hub[data-theme="dark"]{
  --bg:#0B0F1B; --surface:#141B2D; --surface-2:#1D253A;
  --ink:#EEF1F8; --ink-soft:#B3BBCF; --ink-faint:#8B94B1;
  --border:#262F47; --focus:#EEF1F8;
  --fill-l:.34; --fill-c:.05; --onfill-l:.92; --onfill-c:.04;
  --tint-l:.24; --tint-c:.03; --soft-l:.31; --soft-c:.045;
  --ink-a-l:.82; --ink-a-c:.08; --strong-l:.70; --strong-c:.10;
  color-scheme:dark;
}
.acc{
  --fill:oklch(var(--fill-l) var(--fill-c) var(--h));
  --onfill:oklch(var(--onfill-l) var(--onfill-c) var(--h));
  --tint:oklch(var(--tint-l) var(--tint-c) var(--h));
  --soft:oklch(var(--soft-l) var(--soft-c) var(--h));
  --a-ink:oklch(var(--ink-a-l) var(--ink-a-c) var(--h));
  --strong:oklch(var(--strong-l) var(--strong-c) var(--h));
  --glass:color-mix(in oklch,var(--surface) 58%,transparent);
  --rule:color-mix(in oklch,var(--strong) 22%,transparent);
}
.enp-hub,.enp-hub *{box-sizing:border-box}
.enp-hub{font-family:'Mukta','Noto Sans Devanagari',ui-sans-serif,system-ui,sans-serif;color:var(--ink);line-height:1.6}
.enp-hub h1,.enp-hub h2,.enp-hub h3,.enp-hub h4{font-family:'Baloo 2','Mukta','Noto Sans Devanagari',ui-sans-serif,sans-serif;margin:0;text-wrap:balance}
/* No horizontal padding here on purpose: this sits inside the site's own
   <main class="enp-page-main"> (from header.php), which already adds 20px
   of horizontal padding. Adding more here double-pads every page, eating
   ~40px of a phone's width for nothing. */
.enp-hub .wrap{max-width:720px;margin:0 auto;padding:0 0 56px}

/* cover + breadcrumb path — plain rounded tile, no ruled lines */
.enp-hub .cover{
  position:relative;background-color:var(--fill);color:var(--onfill);
  margin:12px 0 0;padding:18px 20px 22px;display:flex;flex-direction:column;gap:10px;
  border-radius:28px;background-image:none;overflow:hidden;
}
.enp-hub .cover h1{font-size:clamp(26px,5vw,34px);font-weight:800;line-height:1.3}
.enp-hub .cover .sub{font-size:15.5px;line-height:1.6;opacity:.92}
.enp-hub .cover-stats{display:flex;flex-wrap:wrap;gap:8px}
.enp-hub .cover-stats span{font-size:13.5px;font-weight:700;padding:3px 12px;border-radius:99px;background:var(--glass)}
.enp-hub .path{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 4px}
.enp-hub .path li{display:flex;align-items:center;gap:4px;min-width:0}
.enp-hub .path li+li::before{content:"›";color:var(--onfill);opacity:.7;font-weight:700;margin-right:2px}
.enp-hub .path a{display:inline-flex;align-items:center;min-height:30px;padding:0 11px;border-radius:99px;background:var(--glass);color:var(--onfill);font:700 13px/1 inherit;text-decoration:none}
.enp-hub .path li:first-child a{background:var(--surface);color:var(--a-ink)}
.enp-hub .path li:last-child a{background:transparent;border:1.5px solid var(--strong);color:var(--onfill)}

.enp-hub .body{padding:18px 0 0;display:flex;flex-direction:column;gap:22px}

/* subject / paper cards (hub grid) */
.enp-hub .card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.enp-hub .subject-card{
  display:flex;flex-direction:column;gap:9px;padding:16px;border-radius:18px;
  background:var(--tint);text-decoration:none;color:var(--ink);
}
.enp-hub .subject-card .tag{font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--a-ink)}
.enp-hub .subject-card .name{font-size:15.5px;font-weight:700;line-height:1.4}
.enp-hub .subject-card .count{font-size:12.5px;font-weight:600;color:var(--ink-faint);margin-top:auto}

/* paper / course-unit summary card */
.enp-hub .paper{
  position:relative;display:flex;flex-direction:column;gap:10px;padding:18px 16px;border-radius:20px;
  background:var(--tint);text-decoration:none;color:var(--ink);
}
.enp-hub .paper .code{align-self:flex-start;font-size:13px;font-weight:700;padding:2px 11px;border-radius:99px;background:var(--fill);color:var(--onfill)}
.enp-hub .paper h3{font-size:19px;font-weight:700;line-height:1.4}
.enp-hub .paper .stats{display:flex;gap:8px;flex-wrap:wrap}
.enp-hub .paper .stats span{font-size:12.5px;font-weight:700;padding:2px 11px;border-radius:99px;background:var(--surface);color:var(--a-ink)}

/* subject sub-filter chips */
.enp-hub .chips{display:flex;flex-wrap:wrap;gap:8px}
.enp-hub .cchip{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 14px;border-radius:99px;background:var(--tint);color:var(--ink);font-size:13.5px;font-weight:700;text-decoration:none}
.enp-hub .cchip::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--strong)}
.enp-hub .cchip[aria-current="true"]{background:var(--fill);color:var(--onfill)}

/* unit accordion */
.enp-hub .unit{background:var(--surface);border:1px solid var(--border);border-radius:18px;overflow:clip}
.enp-hub .unit+.unit{margin-top:10px}
.enp-hub .unit summary{display:flex;align-items:center;gap:12px;min-height:58px;padding:10px 14px;cursor:pointer;list-style:none}
.enp-hub .unit summary::-webkit-details-marker{display:none}
.enp-hub .u-n{width:38px;height:38px;border-radius:12px;background:var(--fill);color:var(--onfill);display:grid;place-items:center;font:800 16px 'Baloo 2',sans-serif;flex-shrink:0}
.enp-hub .u-t{flex:1;display:flex;flex-direction:column;line-height:1.35}
.enp-hub .u-t b{font-size:15.5px;font-weight:700}
.enp-hub .u-t span{font-size:12px;color:var(--ink-faint);font-weight:600}
.enp-hub .unit summary .chev{color:var(--ink-faint);transition:transform .2s;font-size:13px}
.enp-hub .unit[open] summary .chev{transform:rotate(90deg)}
.enp-hub .unit-list{padding:2px 12px 14px;display:flex;flex-direction:column;gap:9px}

/* note card */
.enp-hub .note-card{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;
  background:var(--surface);border:1px solid var(--border);border-radius:18px;
  padding:16px;text-decoration:none;color:var(--ink);
}
/* sized to match .subject-card's proportions (15.5px/700 name, 12.5px meta)
   so note cards and topic cards don't look like two different systems. */
.enp-hub .note-card .title{font-size:15.5px;font-weight:700;line-height:1.4}
.enp-hub .note-card .meta{font-size:12.5px;color:var(--ink-faint);font-weight:600;margin-top:6px}
.enp-hub .note-card .marks{font-size:11px;font-weight:700;color:var(--a-ink);background:var(--tint);border-radius:99px;padding:3px 10px;white-space:nowrap}

.enp-hub .empty{
  padding:20px 16px;border-radius:16px;border:1.5px dashed color-mix(in oklch,var(--strong) 45%,transparent);
  color:var(--ink-soft);font-size:13.5px;line-height:1.7;text-align:center;
}

@media (max-width:480px){ .enp-hub .card-grid{grid-template-columns:1fr} }