/* ===========================================================
   Chess Classrooms — the bright look of the public site.
   Laid over site.css, which still provides the layout; this file
   changes the colours, surfaces and the home page's opening.
   Applies to pages whose <body> has class "alt" (site/inc/head.php).
   =========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

.alt{
  --a-ink:#0B1F3A;        /* headings, body text */
  --a-ink-2:#465A75;      /* secondary text */
  --a-ink-3:#6B7D95;
  --a-blue:#0E6BD8;       /* primary action */
  --a-blue-2:#0A5BBC;
  --a-sky:#EAF2FE;
  --a-gold:#F7C33C;
  --a-line:#E2E9F3;
  --a-bg:#F7FAFE;
  --a-card:#FFFFFF;
  --a-shadow:0 10px 30px rgba(16,42,84,.07);
  background:var(--a-bg);color:var(--a-ink);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:16.5px;
}
.alt h1,.alt h2,.alt h3{color:var(--a-ink)}
.alt a{color:var(--a-blue)}
.alt .lead{color:var(--a-ink-2)}
.alt .move-no{color:var(--a-blue);font-weight:700}
.alt .move-no::after{background:var(--a-line)}
.alt :focus-visible{outline-color:var(--a-blue)}

/* ── header ───────────────────────────────────── */
.alt .brand{color:var(--a-ink);font-family:'Inter',sans-serif;font-weight:800;letter-spacing:-.02em}
.alt .brand-tag{color:var(--a-blue)}
.alt .nav a{color:#24364F;font-weight:500}
.alt .nav a:hover{color:var(--a-ink);background:#EFF4FB}
.alt .nav a.on{color:var(--a-blue);font-weight:600}
.alt .nav a.btn-p{color:#fff;margin-left:4px}
.alt .nav a.btn-p:hover{background:var(--a-blue-2);color:#fff}
.alt .nav a[href*="/admin/login"]{border:1.5px solid #CCD6E4;border-radius:10px;background:#fff;color:var(--a-ink);
  font-weight:600;padding:9px 18px;margin-left:12px}
.alt .nav a[href*="/admin/login"]:hover{border-color:var(--a-ink)}
.alt .burger{border-color:#CCD6E4;color:var(--a-ink);background:#fff}

/* ── buttons ──────────────────────────────────── */
.alt .btn{border-radius:10px;font-family:'Inter',sans-serif;font-weight:600}
.alt .btn-p{background:var(--a-blue);border-color:var(--a-blue);color:#fff;box-shadow:0 6px 16px rgba(14,107,216,.25)}
.alt .btn-p:hover{background:var(--a-blue-2);border-color:var(--a-blue-2)}
.alt .btn-o{background:#fff;border-color:#CCD6E4;color:var(--a-ink)}
.alt .btn-o:hover{border-color:var(--a-ink);background:#fff}
.alt .btn-stu,.alt .nav a.btn-stu{background:var(--a-gold);border-color:var(--a-gold);color:var(--a-ink)!important}
.alt .btn-stu:hover,.alt .nav a.btn-stu:hover{background:#F1B51D;border-color:#F1B51D}
.alt .btn svg{width:18px;height:18px}

/* ── sections ─────────────────────────────────── */
.alt section{background:#fff}
.alt section + section{border-top:1px solid var(--a-line)}
.alt .sec-paper{background:var(--a-bg);color:var(--a-ink)}
.alt .sec-paper .lead,.alt .sec-paper .card p,.alt .sec-paper .pair p,.alt .sec-paper .faq p{color:var(--a-ink-2)}
.alt .sec-paper .move-no,.alt .sec-paper a{color:var(--a-blue)}
.alt .sec-paper a.btn-p{color:#fff}
.alt .sec-paper a.btn-o{color:var(--a-ink);border-color:#CCD6E4}
.alt p{color:inherit}

/* cards become separate white tiles */
.alt .cards,.alt .sec-paper .cards{background:none;border:0;gap:18px;overflow:visible}
.alt .card,.alt .sec-paper .card{background:var(--a-card);border:1px solid var(--a-line);border-radius:16px;box-shadow:var(--a-shadow)}
.alt .card p{color:var(--a-ink-2)}
.alt .card .ico,.alt .sec-paper .card .ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:var(--a-sky);color:var(--a-blue);font-size:1.3rem}
.alt .cards .card:nth-child(6n+2) .ico{background:#ECE9FE;color:#6E56CF}
.alt .cards .card:nth-child(6n+3) .ico{background:#E3F6EE;color:#18A06B}
.alt .cards .card:nth-child(6n+4) .ico{background:#FEF3D7;color:#C98A04}
.alt .cards .card:nth-child(6n+5) .ico{background:#FDE8EC;color:#E5484D}
.alt .cards .card:nth-child(6n+6) .ico{background:#FCE7F3;color:#C2297A}

.alt .pair p{color:var(--a-ink-2)}
.alt .quote{border-left-color:var(--a-blue)}
.alt .quote cite{color:var(--a-ink-3)}

/* faq */
.alt .faq,.alt .faq details{border-color:var(--a-line)}
.alt .faq details{background:#fff;border:1px solid var(--a-line);border-radius:12px;margin-bottom:10px;padding:0 18px}
.alt .faq{border-top:0}
.alt .faq summary::before{color:var(--a-blue)}
.alt .faq p,.alt .faq ul{color:var(--a-ink-2)}
.alt .faq ul{margin:0 0 16px 48px}

/* plans */
.alt .plan{border-color:var(--a-line);border-radius:16px;box-shadow:var(--a-shadow)}
.alt .plan.pick{border-color:var(--a-blue);box-shadow:0 14px 36px rgba(14,107,216,.18)}
.alt .plan-tag{background:var(--a-blue)}
.alt .offer-strip{color:var(--a-ink)}
.alt .offer-strip b{color:#9A6B00}

/* forms */
.alt label{color:var(--a-ink)}
.alt input,.alt select,.alt textarea{background:#fff;border-color:#CCD6E4;color:var(--a-ink)}
.alt select{color-scheme:light}
.alt select option{background:#fff;color:var(--a-ink)}
.alt .hint{color:var(--a-ink-3)}
.alt .note-ok{background:#E4F2E7;border-color:#8CC49A;color:#2C6B3F}
.alt .note-err{background:#FBE6E1;border-color:#DCA294;color:#9B3A22}
.alt .legal p,.alt .legal li{color:var(--a-ink-2)}

/* the footer stays dark, as an anchor at the end of a bright page */
.alt footer{background:#0B1F3A;border-top:0}
.alt footer p{color:#A9BACB}
.alt footer a{color:#A9BACB}
.alt footer a:hover{color:#fff}

/* the home page's own dark sections, brightened */
.alt-index .hero-stu{border-color:rgba(247,195,60,.6);background:#FFF8E5;color:var(--a-ink)}
.alt-index .hero-stu b{color:#9A6B00}

/* ── the home page opening ────────────────────── */
.alt .ahero{position:relative;overflow:hidden;padding:clamp(34px,4vw,54px) 0 clamp(36px,4vw,52px);
  background:linear-gradient(110deg,#F6FAFE 0%,#EEF5FD 45%,#E2EEFB 100%);border-top:0}
.alt .ahero::before{display:none}
.ahero-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.ahero-bg::before{content:'';position:absolute;width:760px;height:760px;right:-160px;top:-220px;border-radius:50%;
  background:radial-gradient(circle,rgba(14,107,216,.10),transparent 65%)}
.ahero-pawn{position:absolute;left:0;top:44%;width:112px;height:auto;
  -webkit-mask-image:radial-gradient(ellipse 46% 48% at 45% 55%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 46% 48% at 45% 55%,#000 55%,transparent 100%)}
.ahero-dots{position:absolute;left:14px;top:22%;width:40px;height:120px;opacity:.5;
  background:radial-gradient(circle,#B9CBE3 2px,transparent 2.5px) 0 0/20px 20px}
.alt .ahero .wrap{width:min(1300px,94vw)}
.ahero-grid{position:relative;z-index:1;display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(20px,3vw,40px);align-items:center}
.alt .ahero h1{font-size:clamp(2.6rem,5.2vw,4.5rem);line-height:1.02;letter-spacing:-.025em;color:var(--a-ink);font-weight:800}
.alt .ahero h1 em{font-style:normal;color:var(--a-blue)}
.alt .ahero .lead{margin:18px 0 26px;font-size:clamp(1.02rem,1.45vw,1.16rem);color:#26384F;max-width:52ch;line-height:1.5}
.ahero-cta svg{margin-left:6px}
.alt .ahero .btns{flex-wrap:nowrap}
.alt .ahero .btns .btn{padding:15px 24px;font-size:1.04rem;white-space:nowrap}

/* eight features, four to a row, with a hairline between columns */
.afeat{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);row-gap:18px;margin-top:30px;max-width:540px}
.afeat li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;font-size:.86rem;font-weight:600;
  color:var(--a-ink);line-height:1.2;padding:0 6px;border-left:1px solid #DCE5F1}
.afeat li:nth-child(4n+1){border-left:0}
.afeat-ic{width:56px;height:56px;border-radius:15px;display:grid;place-items:center;box-shadow:0 6px 14px rgba(16,42,84,.07)}
.afeat-ic svg{width:28px;height:28px;stroke-width:2.2}

/* the laptop: a picture, with the live board laid over its board */
.laptop{position:relative;width:calc(100% + 40px);margin-right:-30px}
.lap-pic{position:relative;
  /* soft edges on all four sides, so the picture's own background melts into the page */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 92%,transparent 100%),linear-gradient(180deg,transparent 0,#000 8%,#000 90%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 92%,transparent 100%),linear-gradient(180deg,transparent 0,#000 8%,#000 90%,transparent 100%);
          mask-composite:intersect}
.lap-pic img{width:100%;height:auto;display:block}
/* the board's place in the picture, in its own pixels: x 258.6, y 87.2, 453.6 square, of 1106 × 672 */
.lap-pic{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.lap-live-board{position:absolute;left:23.38%;top:12.98%;width:41.01%;height:67.49%;overflow:hidden;
  container-type:inline-size}
.alt .lap-live-board .demo{display:block;width:100%}
.alt .lap-live-board .demo-stage{position:relative}
.alt .lap-live-board .demo-board{border-width:2px;box-shadow:0 6px 18px rgba(0,0,0,.35);border-radius:3px}
.lap-cap{margin-top:8px;font-size:.78rem;color:var(--a-ink-3);text-align:center;max-width:none}

/* The engine's card sits on a small board, so its type is sized to the board
   (cqw = 1% of the board's width), on a phone as on a desktop. */
.lap-live-board .an-ov{inset:3%;justify-content:center}
.lap-live-board .an-card{font-size:clamp(6px,3.3cqw,13px);padding:3.5cqw 4cqw;line-height:1.3;border-radius:2.5cqw;
  max-height:100%;overflow:hidden}
.lap-live-board .an-card h4{font-size:1.12em;line-height:1.2}
.lap-live-board .an-steps{font-size:1em;margin-top:.4em}
.lap-live-board .an-bar{height:.45em;margin-top:.5em}
.lap-live-board .an-now{font-size:1em;margin-top:.4em}
.lap-live-board .an-tag{font-size:.9em}
.lap-live-board .an-rep table{font-size:1em;margin-top:.35em}
.lap-live-board .an-rep td{padding:.12em .3em}
.lap-live-board .an-rep .big{font-size:1.3em}
.lap-live-board .an-keys{font-size:.95em;margin-top:.35em}
.lap-live-board .an-foot{font-size:.85em;margin-top:.35em;display:block}
.lap-live-board .an-rep tr.minor{display:table-row}
.lap-live-board .an-rep > div[style]{font-size:.92em!important}
.lap-live-board .an-go{font-size:clamp(7px,4cqw,15px);padding:.7em 1.3em}
@container (max-width:230px){
  .lap-live-board .an-rep tr.minor,.lap-live-board .an-foot{display:none}
}

/* who it is for: one white strip of four */
.awho{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);margin-top:30px;background:#fff;
  border:1px solid var(--a-line);border-radius:18px;box-shadow:var(--a-shadow);padding:16px 10px}
.awho-i{display:flex;align-items:center;gap:14px;padding:6px 18px;border-left:1px solid var(--a-line);color:var(--a-ink)!important}
.awho-i:first-child{border-left:0}
.awho-i:hover{text-decoration:none}
.awho-i:hover b{color:var(--a-blue)}
.awho-ic{flex:none;width:58px;height:58px;border-radius:50%;display:grid;place-items:center}
.awho-ic svg{width:28px;height:28px}
.awho-i b{display:block;font-size:1rem;font-weight:700;line-height:1.25}
.awho-i small{display:block;font-size:.86rem;color:var(--a-ink-2);line-height:1.35;margin-top:3px}
.ahero-stu{margin-top:16px;text-align:center;font-size:.92rem;color:var(--a-ink-2);max-width:none}
.ahero-stu b{color:var(--a-ink)}

/* ── the header: a floating white bar ─────────── */
.alt .top{background:linear-gradient(#F6FAFE,rgba(246,250,254,.85));border-bottom:0;box-shadow:none;padding:10px 0 4px;backdrop-filter:none}
.alt .top-in{background:#fff;border-radius:16px;box-shadow:0 6px 22px rgba(16,42,84,.08);padding:10px 22px;width:min(1240px,95vw)}
.alt .brand-logo{height:58px}
@media (max-width:1599px) and (min-width:1001px){ .alt .nav a.nav-demo{display:none} }
.alt .top-in{gap:24px}

/* ── responsive ───────────────────────────────── */
@media (max-width:1439px){ .ahero-pawn,.ahero-dots{display:none} }
@media (max-width:1180px){
  .afeat{grid-template-columns:repeat(4,1fr)}
  .awho{grid-template-columns:repeat(2,1fr);row-gap:10px}
  .awho-i:nth-child(3){border-left:0}
}
@media (max-width:1000px){
  .alt .nav{border-top-color:var(--a-line);background:#fff}
  .alt .nav a[href*="/admin/login"]{margin:6px 0 0;text-align:center;justify-content:center}
  /* logo, Student Login and the menu button on one line */
  .alt .top-in{padding:8px 12px;gap:10px;flex-wrap:wrap;width:calc(100vw - 16px)}
  .alt .top{padding:8px 0 4px}
  .alt .brand{min-width:0;flex:1 1 auto}
  .alt .stu-quick{margin-left:auto;flex:none}
  .alt .burger{flex:none;margin-left:0}
  .ahero-grid{grid-template-columns:1fr}
  .laptop{margin:6px auto 0;max-width:760px;width:100%}
  .alt .ahero .btns{flex-wrap:wrap}
  .afeat{max-width:none}
  .ahero-pawn,.ahero-dots{display:none}
}
@media (max-width:640px){
  .afeat{grid-template-columns:repeat(4,1fr);row-gap:14px}
  .afeat li{font-size:.72rem;padding:0 2px}
  .afeat-ic{width:46px;height:46px;border-radius:12px}
  .afeat-ic svg{width:23px;height:23px}
  .laptop{width:calc(100% + 28px);margin:6px -14px 0;max-width:none}
  .lap-cap{padding:0 16px}
  .awho{grid-template-columns:1fr;padding:6px 10px}
  .awho-i{border-left:0;border-top:1px solid var(--a-line);padding:12px 6px}
  .awho-i:first-child{border-top:0}
  .alt .brand-logo{height:40px}
  .alt .top-in{gap:7px;padding:7px 10px}
  .alt .brand-tag{display:none}
  .alt .brand-nm{font-size:1rem}
}

/* inline colours written for the dark site */
.alt main [style*="--paper-dim"],.alt section [style*="--paper-dim"]{color:var(--a-ink-2)!important}
.alt section [style*="color:#9FB2C4"],.alt section [style*="color:#DCE6EF"]{color:var(--a-ink-3)!important}

/* the narrowest phones: everything a little smaller so the menu keeps its place */
@media (max-width:374px){
  .alt .brand-logo{height:30px}
  .alt .brand{font-size:.84rem;gap:6px}
  .alt .stu-quick{padding:6px 8px;font-size:.76rem}
  .alt .burger{padding:4px 8px}
  .alt .top-in{gap:5px;padding:6px 8px}
}

/* Inside the bright sections, the dark site's "light ink" colours become dark
   ink, so every page's own inline styles read correctly (the footer keeps them). */
.alt section{--paper:#0B1F3A;--paper-dim:#465A75}
.alt .sec-paper{background:var(--a-bg)}

/* The engine's card on the board: light, so the moves and the report read clearly. */
.lap-live-board .an-card{background:rgba(255,255,255,.97);color:#0B1F3A;box-shadow:0 8px 24px rgba(11,31,58,.35);border:1px solid #E2E9F3}
.lap-live-board .an-card h4{color:#0B1F3A}
.lap-live-board .an-steps li{color:#7A8BA1}
.lap-live-board .an-steps li.on{color:#0B1F3A}
.lap-live-board .an-steps li.done{color:#16935F}
.lap-live-board .an-bar{background:#E2E9F3}
.lap-live-board .an-bar i{background:#0E6BD8}
.lap-live-board .an-now{color:#0B1F3A;font-weight:600}
.lap-live-board .an-rep td{border-top-color:#E2E9F3}
.lap-live-board .an-rep .big{color:#0E6BD8}
.lap-live-board .an-keys{color:#33465F}
.lap-live-board .an-foot{color:#6B7D95}
.lap-live-board .an-card [style*="color:#9FB2C4"]{color:#6B7D95!important}

/* The scoresheet under a demo board stays paper-white with dark moves. */
.alt .sheet{background:#fff;color:#0B1F3A;border:1px solid #E2E9F3;box-shadow:0 8px 22px rgba(11,31,58,.10)}
.alt .sheet-row span:first-child{color:#6B7D95}
.alt .sheet-cap{color:#6B7D95}