@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

/* =========================================================================
   Teaching about Grenfell: shared design system
   One token set, one type pairing (Fraunces + Inter), reusable components.
   ========================================================================= */

:root{
  --brand:#008a59;
  --brand-dark:#046a47;
  --brand-deep:#0a3b2b;
  --accent:#13a66b;
  --ink:#17241d;
  --muted:#5c6b63;
  --bg:#f5f7f3;
  --surface:#ffffff;
  --line:#e3e8e0;
  --line-strong:#d2dacd;
  --tint:#eef6f0;
  --tint-2:#e7f3ec;
  --warn:#a4443a;
  --warn-deep:#7a2e27;
  --warn-bg:#f7ebe9;
  --warn-line:#e0b9b4;
  --radius:16px;
  --radius-sm:12px;
  --radius-xs:9px;
  --shadow-sm:0 1px 2px rgba(16,32,25,.06),0 1px 3px rgba(16,32,25,.07);
  --shadow-md:0 6px 18px rgba(16,32,25,.07),0 16px 40px rgba(16,32,25,.06);
  --font-body:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  --font-display:'Fraunces','Iowan Old Style',Georgia,serif;
  --measure:68ch;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:var(--font-body);color:var(--ink);background:var(--bg);line-height:1.75;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.18;letter-spacing:-.01em;color:var(--brand-deep);}
h1{font-size:clamp(1.8rem,3.4vw,2.5rem);margin:.1rem 0 1rem;}
h2{font-size:1.4rem;}
h3{font-size:1.15rem;}
p{margin:0 0 1.2rem;}
a{color:var(--brand-dark);text-decoration:none;}
a:hover{text-decoration:underline;text-underline-offset:2px;}
img,iframe{max-width:100%;}
img{display:block;}
strong{font-weight:600;}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px;}

.skip-link{position:absolute;left:-999px;top:auto;}
.skip-link:focus{left:1rem;top:1rem;background:#fff;padding:.6rem .9rem;border-radius:8px;z-index:100;box-shadow:var(--shadow-md);}

/* ---------- Layout ---------- */
.layout{display:grid;grid-template-columns:300px minmax(0,1fr);min-height:100vh;}
.sidebar{background:var(--surface);border-right:1px solid var(--line);padding:1.15rem 1rem 2rem;overflow:auto;position:sticky;top:0;height:100vh;}
.sidebar .brand{display:block;padding:.15rem .35rem 1rem;border-bottom:1px solid var(--line);margin-bottom:.6rem;text-decoration:none;}
.sidebar .brand .b-title{font-family:var(--font-display);font-weight:600;font-size:1.02rem;color:var(--brand-deep);line-height:1.2;display:block;}
.sidebar .brand .b-sub{font-size:.72rem;color:var(--muted);display:block;margin-top:.15rem;}
.sidebar .home-link{display:inline-flex;align-items:center;gap:.35rem;font-size:.82rem;font-weight:600;color:var(--brand-dark);margin-bottom:.9rem;text-decoration:none;}
.sidebar .home-link::before{content:"\2190";}
.sidebar .home-link:hover{text-decoration:underline;}
.sidebar h2{font-family:var(--font-body);font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:1.15rem 0 .3rem;padding:0 .35rem;border:0;}
.sidebar ul{list-style:none;padding:0;margin:0 0 .35rem;}
.sidebar li{margin:.05rem 0;}
.sidebar a:not(.home-link):not(.brand){display:block;text-decoration:none;padding:.4rem .55rem;border-radius:8px;color:var(--ink);font-size:.86rem;line-height:1.35;transition:background .12s ease,color .12s ease;}
.sidebar a:not(.home-link):hover{background:var(--tint);color:var(--brand-dark);}
.sidebar a.active{background:var(--tint-2);color:var(--brand-dark);font-weight:600;}
.sidebar .subheader{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;margin:.8rem .55rem .2rem;padding-top:.55rem;border-top:1px dashed var(--line-strong);}
.sidebar .disabled{color:#a7aca4;}
.nav-toggle{display:none;}

.content{max-width:1000px;width:100%;padding:2.4rem clamp(1.25rem,3.5vw,3rem) 3rem;margin:0 auto;background:var(--surface);}
.course-kicker{text-transform:uppercase;letter-spacing:.08em;font-size:.74rem;font-weight:700;color:var(--brand);margin-bottom:.35rem;}
.content h1{color:var(--brand-deep);}
.measure{max-width:860px;margin-inline:auto;}
article{border-top:1px solid var(--line);padding-top:2.4rem;margin-top:.6rem;}
article > .measure > p,article > p{max-width:var(--measure);}

/* ---------- Prev / next ---------- */
.page-nav{display:flex;justify-content:space-between;gap:1rem;margin:3rem 0 .5rem;padding-top:1.5rem;border-top:1px solid var(--line);flex-wrap:wrap;}
.page-nav a{display:inline-flex;align-items:center;gap:.45rem;max-width:47%;background:var(--tint);border:1px solid var(--line);padding:.75rem 1.15rem;border-radius:12px;text-decoration:none;font-weight:600;font-size:.92rem;color:var(--brand-dark);transition:border-color .15s ease,background .15s ease,box-shadow .15s ease,transform .15s ease;}
.page-nav a:hover{border-color:var(--brand);background:var(--tint-2);text-decoration:none;transform:translateY(-1px);box-shadow:var(--shadow-sm);}
.page-nav .next{margin-left:auto;}
.page-nav a .nav-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.page-nav a .nav-ar{flex:none;font-weight:600;}
.page-nav .prev{justify-content:flex-start;}.page-nav .next{justify-content:flex-end;}

/* ---------- Callouts ---------- */
.note,.notice,.callout{background:var(--tint);border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:var(--radius-sm);padding:1rem 1.25rem;margin:1.6rem 0;color:#274a3b;}
.note p:last-child,.notice p:last-child,.callout p:last-child{margin-bottom:0;}
.notice--plain{border-left-width:1px;}
.callout.caution{background:var(--warn-bg);border-color:var(--warn-line);border-left-color:var(--warn);color:var(--warn-deep);}

/* ---------- Cards ---------- */
.ccard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;margin:0 0 1.25rem;}
.card-head{background:var(--tint);border-bottom:1px solid var(--line);color:var(--brand-deep);font-family:var(--font-display);font-weight:600;font-size:1.05rem;padding:.85rem 1.3rem;}
.ccard-body{padding:1.15rem 1.35rem;}
.ccard-body > *:last-child{margin-bottom:0;}
.sec-h{font-family:var(--font-display);font-size:1.3rem;color:var(--brand-deep);font-weight:600;margin:1.6rem 0 .9rem;padding-bottom:.4rem;border-bottom:2px solid var(--brand);}

/* ---------- Quiz / self-check (de-boxed) ---------- */
.activity-card{border:0;background:transparent;padding:0;margin:2.9rem 0;border-top:1px solid var(--line);padding-top:1.9rem;}
.activity-card:first-of-type{border-top:0;padding-top:.4rem;}
.activity-card h3{font-family:var(--font-display);font-size:1.12rem;color:var(--brand-deep);margin:0 0 .2rem;}
.activity-card > div > p{margin:.2rem 0 .9rem;}
.choice-list{list-style:none;background:transparent;border:0;padding:0;margin:.5rem 0 1.1rem;display:grid;gap:.55rem;counter-reset:choice;}
.choice-list li{position:relative;padding:.65rem 2.4rem .65rem 2.6rem;border:1px solid var(--line);border-radius:var(--radius-xs);background:var(--surface);counter-increment:choice;line-height:1.5;}
.choice-list li::before{content:counter(choice,upper-alpha);position:absolute;left:.7rem;top:50%;transform:translateY(-50%);width:1.55rem;height:1.55rem;display:grid;place-items:center;font-size:.78rem;font-weight:700;color:var(--brand-dark);background:var(--tint-2);border-radius:50%;}
.choice-list li{cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .12s ease,border-color .12s ease;}
.choice-list li:hover{border-color:var(--brand);background:var(--tint);}
.choice-list li:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}
.choice-list li.correct{border-color:#1d9e75;background:var(--tint-2);}
.choice-list li.incorrect{border-color:var(--warn);background:var(--warn-bg);}
.choice-list li.correct::after,.choice-list li.incorrect::after{position:absolute;right:.85rem;top:50%;transform:translateY(-50%);font-weight:700;font-size:1rem;}
.choice-list li.correct::after{content:"\2713";color:#0f6e56;}
.choice-list li.incorrect::after{content:"\2717";color:var(--warn);}

.activity-card details,article > details{margin:.7rem 0 0;border:0;border-top:1px dashed var(--line-strong);padding-top:.7rem;}
.activity-card summary,article > details > summary{cursor:pointer;font-size:.86rem;font-weight:600;color:var(--brand-dark);list-style:none;display:inline-flex;align-items:center;gap:.4rem;padding:.15rem 0;}
.activity-card summary::-webkit-details-marker,article summary::-webkit-details-marker{display:none;}
.activity-card summary::before,article > details > summary::before{content:"\25B8";transition:transform .15s ease;color:var(--brand);}
.activity-card details[open] summary::before,article > details[open] > summary::before{transform:rotate(90deg);}
.activity-card details > div,article > details > div{margin-top:.5rem;color:var(--muted);font-size:.95rem;}
.activity-card details > div p:last-child{margin-bottom:0;}

/* ---------- Media & embeds ---------- */
figure{margin:1.5rem 0;}
figure img{border-radius:var(--radius-sm);}
figcaption{font-size:.82rem;color:var(--muted);margin-top:.5rem;text-align:center;}
.embed{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:var(--radius-sm);background:#0b0b0b;margin:1.5rem 0;}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* ---------- Tables & quotes ---------- */
table{border-collapse:collapse;width:100%;margin:1.25rem 0;font-size:.95rem;}
td,th{border:1px solid var(--line-strong);padding:.6rem .7rem;text-align:left;vertical-align:top;line-height:1.55;}
th{background:var(--tint);color:var(--brand-deep);font-family:var(--font-body);font-weight:600;}
blockquote{border-left:4px solid var(--brand);background:var(--tint);margin:1.25rem 0;padding:.6rem 1.1rem;border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:#2b3a32;}
blockquote p:last-child{margin-bottom:0;}

/* ---------- Footer ---------- */
.content > footer,footer{color:var(--muted);font-size:.85rem;margin-top:2.5rem;border-top:1px solid var(--line);padding-top:1.15rem;}
footer p{margin:0 0 .4rem;}
#project-website-signpost{margin-top:2rem;}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .layout{display:block;}
  .nav-toggle{display:flex;align-items:center;gap:.5rem;position:sticky;top:0;z-index:40;width:100%;background:var(--surface);border:0;border-bottom:1px solid var(--line);padding:.8rem 1.1rem;font:600 .92rem/1 var(--font-body);color:var(--brand-deep);cursor:pointer;}
  .nav-toggle::before{content:"\2630";font-size:1.1rem;color:var(--brand);}
  .sidebar{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line);display:none;}
  .sidebar.open{display:block;}
  .content{padding:1.4rem 1.25rem 2.5rem;}
  .page-nav{gap:.6rem;}
  .page-nav a{flex:1;max-width:none;justify-content:center;}
}

/* ---------- CPD feedback form ---------- */
.visually-hidden{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
.feedback-intro{margin-inline:auto;}
.feedback-form{max-width:860px;margin:2rem auto 0;display:grid;gap:1.35rem;}
.feedback-section{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:clamp(1.15rem,3vw,1.75rem);box-shadow:var(--shadow-sm);}
.feedback-section-head{display:flex;gap:.9rem;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:1rem;margin-bottom:1.25rem;}
.feedback-section-head h2{margin:0 0 .25rem;font-size:1.35rem;}
.feedback-section-head p{margin:0;color:var(--muted);font-size:.92rem;}
.feedback-step{display:grid;place-items:center;flex:0 0 2rem;width:2rem;height:2rem;border-radius:50%;background:var(--brand);color:#fff;font-weight:700;font-size:.9rem;margin-top:.05rem;}
.rating-question{border:0;padding:0;margin:0;}
.rating-question + .rating-question{border-top:1px dashed var(--line-strong);margin-top:1.4rem;padding-top:1.4rem;}
.rating-question legend{font-weight:600;line-height:1.45;padding:0;margin:0 0 .45rem;max-width:var(--measure);}
.star-rating{position:relative;display:inline-flex;flex-direction:row-reverse;justify-content:flex-end;gap:.12rem;}
.star-rating input{position:absolute;opacity:0;pointer-events:none;}
.star-rating label{font-size:2.35rem;line-height:1;color:#c9d0c8;cursor:pointer;padding:.08rem .1rem;transition:color .12s ease,transform .12s ease;}
.star-rating label:hover,.star-rating label:hover ~ label,.star-rating input:checked ~ label{color:#d78c00;}
.star-rating label:hover{transform:translateY(-1px);}
.star-rating input:focus-visible + label{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px;}
.optional-marker{font-family:var(--font-body);font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-left:.35rem;vertical-align:.08rem;color:var(--muted);}
.form-grid{display:grid;gap:1rem;}
.form-grid.two-columns{grid-template-columns:repeat(2,minmax(0,1fr));}
.form-field{display:grid;gap:.4rem;align-content:start;}
.form-field--full{grid-column:1/-1;}
.form-field label{font-weight:600;font-size:.92rem;line-height:1.4;}
.form-field input,.form-field select,.form-field textarea,.feedback-form textarea{
  width:100%;font:inherit;color:var(--ink);background:#fff;border:1px solid var(--line-strong);border-radius:var(--radius-xs);padding:.72rem .82rem;line-height:1.45;
}
.form-field textarea,.feedback-form textarea{resize:vertical;min-height:9rem;}
.form-field input:hover,.form-field select:hover,.form-field textarea:hover,.feedback-form textarea:hover{border-color:#aebbaa;}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus,.feedback-form textarea:focus{outline:3px solid rgba(19,166,107,.22);border-color:var(--brand);}

.form-field [aria-invalid="true"]{border-color:var(--warn);background:#fffafa;box-shadow:0 0 0 2px rgba(164,68,58,.12);}
.field-error-message{margin:.15rem 0 0;color:var(--warn-deep);font-size:.8rem;line-height:1.4;font-weight:600;}
.form-field.is-invalid > label{color:var(--warn-deep);}
.rating-question.is-invalid{border:1px solid var(--warn-line);background:var(--warn-bg);border-radius:var(--radius-xs);padding:.85rem 1rem;margin-left:-1rem;margin-right:-1rem;}
.rating-question + .rating-question.is-invalid{border-top:1px solid var(--warn-line);padding-top:.85rem;}
.rating-question.is-invalid legend{color:var(--warn-deep);}
.turnstile-validation{justify-self:start;}
.turnstile-validation.is-invalid{background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:var(--radius-xs);padding:.65rem;}
.feedback-submit-panel .turnstile-validation .field-error-message{color:var(--warn-deep)!important;margin-top:.45rem;}

.field-hint{display:flex;justify-content:space-between;gap:1rem;color:var(--muted);font-size:.78rem;line-height:1.4;}
.consent-box{background:var(--tint);border:1px solid var(--line);border-radius:var(--radius-sm);padding:1rem 1.1rem;}
.check-label{display:flex;gap:.7rem;align-items:flex-start;font-weight:600;line-height:1.5;cursor:pointer;}
.check-label input{width:1.15rem;height:1.15rem;flex:none;margin-top:.22rem;accent-color:var(--brand);}
.consent-box p{margin:.55rem 0 0 1.85rem;color:var(--muted);font-size:.84rem;}
.contact-details{margin-top:1rem;}

/* Keep JavaScript-controlled feedback fields hidden even when grid rules set display. */
.feedback-form [hidden]{display:none!important;}
.form-honeypot{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden;}
.feedback-submit-panel{background:var(--brand-deep);color:#fff;border-radius:var(--radius);padding:clamp(1.15rem,3vw,1.7rem);display:grid;gap:1rem;box-shadow:var(--shadow-md);}
.feedback-submit-panel h2{color:#fff;margin:0 0 .25rem;}
.feedback-submit-panel p{margin:0;color:#d6e5de;font-size:.9rem;}
.feedback-submit-panel a{color:#fff;text-decoration:underline;text-underline-offset:2px;}
.feedback-submit{justify-self:start;border:0;border-radius:999px;background:#fff;color:var(--brand-deep);font:700 .94rem/1 var(--font-body);padding:.9rem 1.3rem;cursor:pointer;box-shadow:var(--shadow-sm);}
.feedback-submit:hover{background:var(--tint-2);}
.feedback-submit:disabled{opacity:.65;cursor:wait;}
.feedback-status{padding:.85rem 1rem;border-radius:var(--radius-xs);font-size:.9rem!important;font-weight:600;}
.feedback-status[hidden]{display:none;}
.feedback-status--pending{background:#e8f3ee;color:var(--brand-deep)!important;}
.feedback-status--success{background:#d9f2e6;color:#084c35!important;}
.feedback-status--error{background:var(--warn-bg);color:var(--warn-deep)!important;}
.feedback-submit-panel .cf-turnstile{min-height:65px;}

@media (max-width:680px){
  .form-grid.two-columns{grid-template-columns:1fr;}
  .form-field--full{grid-column:auto;}
  .feedback-section{padding:1.05rem;}
  .star-rating label{font-size:2.15rem;}
  .field-hint{display:block;}
  .field-hint span{display:block;margin-top:.2rem;}
  .feedback-submit{width:100%;}
}