/* ===========================================================================
   Arcadia — shared stylesheet
   Part of Cognito Coding. Light only, on purpose: there is no dark mode here
   and none should be added.

   Every page links this one file, so a change here changes the whole site.

   COLOUR RULE, do not break it:
   #FF6600 is the Cognito brand orange but it is only 2.9:1 against white.
   Use it ONLY as a fill behind near-black text, or as decoration. For orange
   TEXT on a light background use --brand-deep (#C2410C, 5.2:1). Buttons are
   near-black on orange (6.0:1), never white on orange. Every pairing below
   passes WCAG AA at body size — the club is used by SEND students and this
   matters more than it looking punchy.
   ======================================================================== */

:root{
  --brand:#FF6600;
  --brand-hover:#E55C00;
  --brand-deep:#C2410C;
  --brand-light:#FFB347;
  --brand-pale:#FFF3E9;
  --brand-edge:#FFE0B2;

  --bg:#FFFAF5;
  --surface:#FFFFFF;
  --ink:#18181B;
  --ink-soft:#52525B;
  --line:#E4E4E7;

  --radius:16px;
  --radius-sm:10px;
  --shadow:0 1px 2px rgba(24,24,27,.05), 0 8px 24px -12px rgba(194,65,12,.18);
  --shadow-lift:0 2px 4px rgba(24,24,27,.06), 0 18px 40px -16px rgba(194,65,12,.30);

  --font-display:"Outfit",ui-sans-serif,system-ui,sans-serif;
  --font-sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:ui-monospace,"Cascadia Code",SFMono-Regular,Consolas,Menlo,monospace;
}

*{box-sizing:border-box;}
html{color-scheme:light only;}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-sans);font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  display:flex;flex-direction:column;min-height:100vh;
}
h1,h2,h3,.brandmark{font-family:var(--font-display);letter-spacing:-.02em;}
a{color:var(--brand-deep);text-decoration-thickness:2px;text-underline-offset:3px;}
a:hover{color:var(--brand-hover);}
img{max-width:100%;height:auto;}
main{flex:1;}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px;}

a:focus-visible,button:focus-visible{
  outline:3px solid var(--brand-deep);outline-offset:3px;border-radius:6px;
}
.skip{
  position:absolute;left:-9999px;top:0;background:var(--surface);color:var(--ink);
  padding:12px 20px;border-radius:0 0 var(--radius-sm) 0;font-weight:600;z-index:100;
}
.skip:focus{left:0;}

/* ------------------------------------------------ parent brand bar ---- */
.topbar{
  background:var(--surface);border-bottom:1px solid var(--brand-edge);
}
.topbar .wrap{display:flex;align-items:center;gap:14px;min-height:62px;flex-wrap:wrap;}
.brandmark{
  font-weight:800;font-size:1.05rem;color:var(--ink);
  text-decoration:none;display:inline-flex;align-items:center;gap:9px;
}
.brandmark .dot{
  width:11px;height:11px;border-radius:3px;background:var(--brand);
  box-shadow:0 0 0 3px var(--brand-pale);flex:none;
}
.brandmark:hover{color:var(--brand-deep);}
.sep{color:var(--brand-edge);font-size:1.2rem;line-height:1;}
.subbrand{
  font-family:var(--font-display);font-weight:700;font-size:.95rem;
  color:var(--brand-deep);background:var(--brand-pale);
  border:1px solid var(--brand-edge);border-radius:999px;padding:4px 13px;
  text-decoration:none;
}
.subbrand:hover{background:var(--brand-edge);color:var(--brand-deep);}
.topbar nav{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;}
.topbar nav a{
  color:var(--ink-soft);text-decoration:none;font-weight:600;font-size:.95rem;
  padding:7px 13px;border-radius:8px;
}
.topbar nav a:hover{color:var(--brand-deep);background:var(--brand-pale);}
.topbar nav a[aria-current="page"]{
  color:var(--brand-deep);background:var(--brand-pale);
  box-shadow:inset 0 -3px 0 var(--brand);
}
@media (max-width:760px){
  .topbar .wrap{padding-top:10px;padding-bottom:10px;}
  .topbar nav{margin-left:0;width:100%;}
}

/* ---------------------------------------------------------- hero ------ */
header.hero{
  text-align:center;padding:60px 0 0;
  background:
    radial-gradient(680px 300px at 50% -8%, #FFE9D5 0%, transparent 68%),
    linear-gradient(180deg,var(--brand-pale) 0%,var(--bg) 78%);
  border-bottom:1px solid var(--brand-edge);
}

/* The pixel-art band closes the hero: it runs the full width and its orange
   ground line becomes the edge of the section. Regenerate it with
   /opt/arcadia/site-tools/hero-scene.py — do not hand-edit the SVG. */
.heroscene{
  display:block;width:100%;height:auto;margin:40px 0 0;
  image-rendering:pixelated;
}
@media (max-width:700px){ .heroscene{margin-top:28px;} }
.eyebrow{
  display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brand-deep);
  background:var(--surface);border:1px solid var(--brand-edge);
  border-radius:999px;padding:7px 16px;margin-bottom:22px;
}
.hero-logo{display:block;width:76%;max-width:380px;margin:0 auto 18px;}
/* Pixel wordmark — replaces the old joystick logo, which carried a
   teal-to-purple gradient from the previous palette. Generated by
   /opt/arcadia/site-tools/wordmark.py; do not hand-edit the SVG. */
.hero-wordmark{
  display:block;width:88%;max-width:470px;margin:0 auto 22px;
  image-rendering:pixelated;
}
.tagline{font-size:1.2rem;color:var(--ink-soft);margin:0 auto 30px;max-width:620px;}
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

/* Slimmer hero for the inner pages */
header.pagehead{
  padding:46px 24px 42px;border-bottom:1px solid var(--brand-edge);
  background:linear-gradient(180deg,var(--brand-pale) 0%,var(--bg) 100%);
}
header.pagehead h1{
  font-size:clamp(2rem,5vw,2.9rem);margin:0 0 10px;font-weight:800;
}
header.pagehead .tagline{margin:0;max-width:680px;font-size:1.1rem;}
.crumb{
  font-size:.9rem;font-weight:600;color:var(--ink-soft);
  margin:0 0 14px;display:flex;align-items:center;gap:8px;
}
.crumb a{text-decoration:none;}
.crumb a:hover{text-decoration:underline;}

/* ------------------------------------------------------- buttons ------ */
.btn{
  display:inline-block;text-decoration:none;font-family:var(--font-display);
  font-weight:700;font-size:1.02rem;padding:14px 26px;
  border-radius:var(--radius-sm);border:2px solid transparent;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--brand);color:var(--ink);box-shadow:var(--shadow);}
.btn-primary:hover{background:var(--brand-light);color:var(--ink);box-shadow:var(--shadow-lift);}
.btn-ghost{background:var(--surface);color:var(--brand-deep);border-color:var(--brand-edge);}
.btn-ghost:hover{background:var(--brand-pale);color:var(--brand-deep);border-color:var(--brand-light);}

/* ------------------------------------------------------ sections ------ */
section{padding:52px 0;}
section.band{background:var(--brand-pale);border-block:1px solid var(--brand-edge);}
.sec-head{max-width:660px;margin-bottom:30px;}
h2{
  font-size:clamp(1.55rem,3.2vw,2rem);margin:0 0 8px;font-weight:800;
  display:flex;align-items:center;gap:12px;
}
h2::before{content:"";width:8px;height:28px;border-radius:4px;background:var(--brand);flex:none;}
.lead{color:var(--ink-soft);margin:0;font-size:1.05rem;}

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

/* Four-card sections lay out as an even 2x2. Left to auto-fit they land as a
   row of three with a single orphan underneath, which looks unfinished.
   Six-card sections are fine on auto-fit — six divides evenly by both 3 and 2. */
.grid.g4{grid-template-columns:1fr;}
@media (min-width:660px){ .grid.g4{grid-template-columns:repeat(2,1fr);} }
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;display:flex;flex-direction:column;box-shadow:var(--shadow);
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--brand-edge);}
.card .icon{
  width:50px;height:50px;border-radius:13px;background:var(--brand-pale);
  border:1px solid var(--brand-edge);
  display:flex;align-items:center;justify-content:center;font-size:1.55rem;margin-bottom:15px;
}
.card h3{margin:0 0 7px;font-size:1.2rem;font-weight:700;}
.card p{margin:0 0 18px;color:var(--ink-soft);flex:1;font-size:.99rem;}
.card .btn{font-size:.95rem;padding:11px 20px;align-self:flex-start;}
.card .btn + .btn{margin-top:10px;}

/* Whole-card links, used for the hub tiles on the home page */
a.card{text-decoration:none;color:inherit;}
a.card:hover{color:inherit;}
a.card .go{
  font-family:var(--font-display);font-weight:700;color:var(--brand-deep);
  display:inline-flex;align-items:center;gap:7px;font-size:.98rem;
}
a.card:hover .go{gap:11px;}
a.card .go span{transition:transform .14s ease;}

/* ---------------------------------------------- server addresses ------ */
.addr{
  font-family:var(--font-mono);font-size:.95rem;
  background:var(--bg);border:1px solid var(--brand-edge);border-radius:var(--radius-sm);
  padding:11px 14px;color:#3F3F46;display:block;margin-bottom:12px;word-break:break-all;
}
.copy-btn{
  font-family:var(--font-display);background:var(--brand);color:var(--ink);
  border:2px solid transparent;border-radius:var(--radius-sm);
  padding:11px 20px;font-size:.95rem;font-weight:700;cursor:pointer;
  align-self:flex-start;box-shadow:var(--shadow);
}
.copy-btn:hover{background:var(--brand-light);}
.copy-btn.done{background:#166534;color:#FFFFFF;}

/* ----------------------------------------------------- key note ------- */
.note{
  background:var(--surface);border:1px solid var(--brand-edge);
  border-left:6px solid var(--brand);border-radius:var(--radius);
  padding:22px 26px;color:var(--ink-soft);box-shadow:var(--shadow);
}
.note strong{color:var(--ink);}

/* --------------------------------------------------------- steps ------ */
ol.steps{margin:0 0 26px;padding:0;list-style:none;counter-reset:step;}
ol.steps li{
  counter-increment:step;position:relative;padding:2px 0 22px 52px;
  border-left:2px solid var(--brand-edge);margin-left:16px;
}
ol.steps li:last-child{border-left-color:transparent;padding-bottom:0;}
ol.steps li::before{
  content:counter(step);position:absolute;left:-17px;top:0;
  width:32px;height:32px;border-radius:50%;
  background:var(--brand);color:var(--ink);
  font-family:var(--font-display);font-weight:800;font-size:.95rem;
  display:flex;align-items:center;justify-content:center;
}
code.inline{
  font-family:var(--font-mono);font-size:.9rem;background:var(--brand-pale);
  border:1px solid var(--brand-edge);border-radius:6px;padding:2px 7px;color:#3F3F46;
  word-break:break-all;
}

/* --------------------------------------------------------- rules ------ */
ul.rules{
  list-style:none;margin:0;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
}
ul.rules li{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:16px 20px;display:flex;gap:14px;align-items:flex-start;box-shadow:var(--shadow);
}
ul.rules li b{
  font-family:var(--font-display);color:var(--ink);background:var(--brand-light);
  width:28px;height:28px;border-radius:8px;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:.9rem;
}
/* Session times: the day itself is the thing people came to read, so it is set
   big; the qualifier sits underneath in soft ink. */
.when{
  font-family:var(--font-display);font-weight:800;font-size:1.55rem;
  color:var(--ink);line-height:1.2;margin:0 0 6px;display:block;
}
.chip{
  font-family:var(--font-display);font-weight:700;font-size:.74rem;
  letter-spacing:.05em;text-transform:uppercase;
  background:var(--brand-pale);color:var(--brand-deep);
  border:1px solid var(--brand-edge);border-radius:999px;padding:3px 11px;
  display:inline-block;vertical-align:middle;margin-left:2px;
}

/* --------------------------------------------------- guide list ------ */
/* A stacked list rather than a card grid: the A-Z guides are a growing
   collection, and a list reads the same whether there is one of them or
   twenty. A grid would leave an orphan on the last row at most counts. */
.guidelist{display:flex;flex-direction:column;gap:16px;}
.guide{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 26px;box-shadow:var(--shadow);
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.guide:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);border-color:var(--brand-edge);}
.guide .icon{
  width:56px;height:56px;border-radius:14px;background:var(--brand-pale);
  border:1px solid var(--brand-edge);flex:none;
  display:flex;align-items:center;justify-content:center;font-size:1.7rem;margin:0;
}
.guide .body{flex:1 1 300px;min-width:0;}
.guide h3{margin:0 0 5px;font-size:1.2rem;font-weight:700;}
.guide p{margin:0;color:var(--ink-soft);font-size:.99rem;}
.guide .btn{flex:none;}
@media (max-width:620px){
  .guide{align-items:flex-start;}
  .guide .btn{width:100%;text-align:center;}
}
.guide.soon{
  background:var(--brand-pale);border-style:dashed;border-color:var(--brand-light);
  box-shadow:none;
}
.guide.soon:hover{transform:none;box-shadow:none;}
.guide.soon .icon{background:var(--surface);}

/* ------------------------------------------------- next-page strip ---- */
.nextup{
  display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:space-between;
  background:var(--surface);border:1px solid var(--brand-edge);border-radius:var(--radius);
  padding:22px 26px;box-shadow:var(--shadow);
}
.nextup p{margin:0;color:var(--ink-soft);}
.nextup strong{color:var(--ink);font-family:var(--font-display);}

/* -------------------------------------------------------- footer ------ */
footer{
  padding:44px 24px 52px;text-align:center;color:var(--ink-soft);font-size:.95rem;
  background:var(--surface);border-top:1px solid var(--brand-edge);
}
footer .lockup{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:12px;
  font-family:var(--font-display);font-weight:800;font-size:1.15rem;color:var(--ink);
  text-decoration:none;
}
footer .lockup .dot{
  width:12px;height:12px;border-radius:3px;background:var(--brand);
  box-shadow:0 0 0 3px var(--brand-pale);
}
footer nav{
  display:flex;gap:8px 20px;justify-content:center;flex-wrap:wrap;margin:16px 0 4px;
}
footer nav a{font-weight:600;text-decoration:none;}
footer nav a:hover{text-decoration:underline;}
footer .small{font-size:.87rem;margin-top:10px;}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
}

/* ============================================================
   POLICY & DOCUMENT PAGES  (policies.html, safeguarding.html, ...)
   Long-form prose in a card. Deliberately wide line-height and
   generous spacing -- these are read by parents and schools.
   ============================================================ */

.doc{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:34px 38px;
  max-width:820px;
  margin:0 auto;
}
.doc > :first-child{margin-top:0;}
.doc h2{
  font-family:var(--font-display);font-weight:700;font-size:1.32rem;color:var(--ink);
  margin:34px 0 10px;padding-top:26px;border-top:1px solid var(--line);
}
.doc h2:first-child{padding-top:0;border-top:0;}
.doc h3{
  font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:var(--ink);
  margin:24px 0 6px;
}
.doc p{color:var(--ink-soft);line-height:1.7;margin:0 0 12px;}
.doc ul,.doc ol{margin:10px 0 16px 22px;padding:0;}
.doc li{color:var(--ink-soft);line-height:1.7;margin:6px 0;}
.doc strong{color:var(--ink);font-weight:600;}
.doc a{color:var(--brand-deep);font-weight:600;}
.doc hr{border:0;border-top:1px solid var(--line);margin:28px 0;}

.doc table{width:100%;border-collapse:collapse;margin:14px 0 18px;font-size:.95rem;}
.doc th,.doc td{border:1px solid var(--line);padding:9px 11px;text-align:left;vertical-align:top;color:var(--ink-soft);line-height:1.55;}
.doc th{background:var(--brand-pale);color:var(--ink);font-family:var(--font-display);font-weight:600;}
.doc .tablescroll{overflow-x:auto;}

.docmeta{
  display:flex;flex-wrap:wrap;gap:8px 26px;
  background:var(--brand-pale);border:1px solid var(--brand-edge);
  border-radius:var(--radius-sm);padding:12px 16px;margin:0 0 24px;
  font-size:.9rem;color:var(--ink-soft);
}
.docmeta b{color:var(--ink);font-weight:600;}

.callout{
  background:var(--brand-pale);border:1px solid var(--brand-edge);
  border-left:4px solid var(--brand);
  border-radius:var(--radius-sm);padding:14px 18px;margin:18px 0;
}
.callout p{margin:0 0 8px;}
.callout p:last-child{margin-bottom:0;}

.fill{
  color:var(--brand-deep);font-weight:600;
  border-bottom:2px dotted var(--brand);
}

.toc{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 18px 14px 38px;margin:0 0 26px;}
.toc li{margin:4px 0;}

/* Printable forms (consent form, concern form) */
.signbox{border:2px dashed var(--brand-edge);border-radius:var(--radius-sm);padding:16px 18px;margin:18px 0;}
.sigline{display:block;border-bottom:1px solid var(--ink-soft);height:34px;margin:6px 0 16px;}
.sigrow{display:flex;gap:22px;flex-wrap:wrap;}
.sigrow > div{flex:1 1 220px;}
.tick{list-style:none;margin-left:0;}
.tick li{position:relative;padding-left:34px;margin:12px 0;}
.tick li::before{
  content:"";position:absolute;left:0;top:2px;width:20px;height:20px;
  border:2px solid var(--ink-soft);border-radius:4px;
}

/* Big-type version for the children's pages */
.kid .doc p,.kid .doc li{font-size:1.12rem;line-height:1.85;color:var(--ink);}
.kid .doc h2{font-size:1.45rem;}

@media (max-width:640px){
  .doc{padding:22px 20px;}
}
@media print{
  .topbar,.skip,footer nav,.nextup{display:none!important;}
  .doc{box-shadow:none;border:0;padding:0;max-width:none;}
  body{background:#fff;}
  a{color:#000!important;}
}