/* Policy pages — /portal/policies/*.html
   -------------------------------------------------------------------------
   Four documents a learner has to be able to read before enrolling, so the
   job here is legibility, not decoration: one column, generous measure,
   numbered sections that can be cited in a complaint ("section 4").

   Every colour comes from the theme tokens (--fg, --card, --muted), so the
   page follows the light/dark switch without a second set of rules. Nothing
   below hard-codes a text colour against a hard-coded background. */

.pol-head{padding-bottom:0}
.pol-head .kick{display:inline-block;font:600 12px/1 'Plus Jakarta Sans',sans-serif;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold-400);margin-bottom:18px}
.pol-head h1{font-size:clamp(34px,5.2vw,60px);line-height:1.04;margin:0 0 20px;max-width:16ch}
.pol-head .lead{font-size:clamp(16px,1.7vw,19px);line-height:1.62;color:var(--muted);
  max-width:62ch;margin:0 0 18px}
.pol-meta{font:500 13px/1.5 'Plus Jakarta Sans',sans-serif;color:var(--muted);
  padding-top:16px;border-top:1px solid var(--line);max-width:62ch;margin:0}

.pol-body{padding-top:clamp(36px,4vw,56px)}

/* The "for review" banner. Amber in both themes, with its own text colour
   stated next to its own background so neither half can drift. */
.pol-note{border-radius:14px;padding:15px 18px;margin:0 0 clamp(32px,4vw,48px);
  max-width:72ch;font-size:14px;line-height:1.6;
  background:rgba(240,196,107,.10);border:1px solid rgba(240,196,107,.34);
  color:rgb(var(--fg))}
[data-theme=light] .pol-note{background:#fdf6e6;border-color:#e4c478;color:#4a3708}

.pol-doc{max-width:72ch}

.pol-s{padding:0 0 clamp(28px,3.4vw,40px)}
.pol-s + .pol-s{border-top:1px solid var(--line);padding-top:clamp(28px,3.4vw,40px)}

.pol-s h2{display:flex;gap:14px;align-items:baseline;
  font-size:clamp(20px,2.3vw,26px);line-height:1.25;margin:0 0 16px;scroll-margin-top:100px}
.pol-n{flex:none;width:30px;height:30px;border-radius:9px;display:inline-flex;
  align-items:center;justify-content:center;font:700 13px/1 'JetBrains Mono',monospace;
  background:rgba(240,196,107,.14);color:var(--gold-300);translate:0 -2px}
[data-theme=light] .pol-n{background:#f3e9d2;color:#7d520a}

.pol-s p{font-size:15.5px;line-height:1.72;color:var(--muted);margin:0 0 14px}
.pol-s p:last-child{margin-bottom:0}
.pol-s b{color:rgb(var(--fg));font-weight:700}
[data-theme=light] .pol-s b{color:#0b1426}

.pol-s a{color:var(--gold-300);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;transition:opacity .2s}
.pol-s a:hover{opacity:.72}
[data-theme=light] .pol-s a{color:#8a5d0e}

.pol-s ul,.pol-s ol{margin:0 0 16px;padding-left:0;list-style:none;counter-reset:pol}
.pol-s li{position:relative;padding-left:26px;font-size:15.5px;line-height:1.7;
  color:var(--muted);margin-bottom:9px}
.pol-s ul li::before{content:'';position:absolute;left:7px;top:.72em;width:5px;height:5px;
  border-radius:50%;background:var(--gold-400)}
.pol-s ol li{counter-increment:pol;padding-left:30px}
.pol-s ol li::before{content:counter(pol);position:absolute;left:0;top:.08em;
  font:700 12px/1.6 'JetBrains Mono',monospace;color:var(--gold-400)}

/* Index page cards */
.pol-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.pol-card{display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:16px;
  background:var(--card);border:1px solid var(--line);text-decoration:none;
  transition:border-color .25s,transform .25s}
.pol-card:hover{border-color:rgba(240,196,107,.5);transform:translateY(-3px)}
.pol-card h3{font-size:18px;line-height:1.3;margin:0;color:rgb(var(--fg))}
[data-theme=light] .pol-card h3{color:#0b1426}
.pol-card p{font-size:14px;line-height:1.6;color:var(--muted);margin:0;flex:1}
.pol-card .pol-go{font:600 13px/1 'Plus Jakarta Sans',sans-serif;color:var(--gold-300)}
[data-theme=light] .pol-card .pol-go{color:#8a5d0e}
/* The card is the link, so its own underline would be noise. */
.pol-card,.pol-card:hover{text-decoration:none}

/* Footer policy column: same look as the Links column beside it. */
.ft .ftpol{display:block}

@media(max-width:700px){
  .pol-s h2{gap:11px}
  .pol-n{width:26px;height:26px;font-size:12px}
}