/* Virelora Academy theme: exercise-book look. Ballpoint blue, highlighter yellow, red-pen margin.
   Loaded after site.css so it restyles every page without touching markup or scripts. */
@font-face{font-family:'Caladea';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/caladea-regular.woff) format('woff')}
@font-face{font-family:'Caladea';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/caladea-bold.woff) format('woff')}

:root{
  --brand-50:238 242 252; --brand-100:221 229 248; --brand-200:190 204 238; --brand-300:140 160 226;
  --brand-500:52 82 200; --brand-600:38 62 168; --brand-700:30 48 140; --brand-800:20 33 104; --brand-900:13 21 66;
  --accent-300:255 236 130; --accent-400:255 214 51; --accent-500:240 190 20;
  --pop-100:253 232 234; --pop-400:226 66 80;
  --alert:178 24 48;
  --paper:247 248 251; --ink:15 20 45; --shadow:15 20 45;
}

/* Type: a bookish serif for headings, Lexend (easy to read for learners) for everything else */
body{font-family:'Lexend',system-ui,sans-serif;background:rgb(var(--paper));color:rgb(var(--ink))}
h1,h2,h3,h4,.font-display{font-family:'Caladea',Georgia,'Times New Roman',serif;font-weight:700;letter-spacing:-.01em}
h1{line-height:1.05}
.dyslexia-font h1,.dyslexia-font h2,.dyslexia-font h3,.dyslexia-font h4,.dyslexia-font .font-display{font-family:'Lexend',sans-serif!important}

/* Shape: tighter corners across the board */
.rounded-xl{border-radius:.5rem}
.rounded-2xl{border-radius:.625rem}
.rounded-3xl{border-radius:.875rem}

/* Cards read like book pages with a spine on the left */
.sticker,.sticker-sm{background:#fff;border:1px solid rgb(var(--ink)/.18);border-left:6px solid rgb(var(--brand-700));
  border-radius:.25rem .75rem .75rem .25rem;box-shadow:0 1px 2px rgb(var(--ink)/.08)}
.sticker-sm{border-left-width:4px;border-radius:.2rem .5rem .5rem .2rem}

/* Buttons are flat and rectangular; pressing moves them down a line */
.btn{font-family:'Lexend',sans-serif;font-weight:600;letter-spacing:-.005em;border:2px solid rgb(var(--ink));
  border-radius:.45rem;box-shadow:none;transition:background-color .15s,transform .1s}
.btn:hover{transform:translateY(-1px);box-shadow:none}
.btn:active{transform:translateY(1px);box-shadow:none}
.btn-primary{background:rgb(var(--brand-700));border-color:rgb(var(--brand-700));color:#fff}
.btn-primary:hover{background:rgb(var(--brand-800))}
.btn-accent{background:rgb(var(--accent-400));color:rgb(var(--ink))}
.btn-accent:hover{background:rgb(var(--accent-300))}
.btn-light{background:#fff;color:rgb(var(--ink))}
.btn-light:hover{background:rgb(var(--brand-50))}

/* Inputs sit on a writing line */
.field{background:rgb(var(--brand-50));border:0;border-bottom:2px solid rgb(var(--ink));border-radius:.3rem .3rem 0 0;
  padding:.7rem .75rem;font-size:1rem}
.field:focus{background:#fff;border-bottom-color:rgb(var(--brand-600))}
.chip-check{background:#fff;border:1.5px solid rgb(var(--ink)/.35);border-radius:.4rem}
.chip-check:has(input:checked){background:rgb(var(--accent-300));border-color:rgb(var(--ink))}

/* No highlighter on single words, no floating blobs */
.marker,#welcome .marker{background:none;padding:0;border-radius:0;color:inherit}
.floaty{display:none!important}
.dots-bg{background-image:repeating-linear-gradient(to bottom,transparent 0 1.9rem,rgb(var(--ink)/.07) 1.9rem calc(1.9rem + 1px));background-size:auto}

/* The memorable moment: the welcome page is a ruled page with a red margin line */
#welcome{background-color:rgb(var(--brand-900))!important;
  background-image:repeating-linear-gradient(to bottom,transparent 0 2.4rem,rgb(255 255 255/.08) 2.4rem calc(2.4rem + 1px))!important}
#welcome::before{content:"";position:absolute;top:0;bottom:0;left:max(.5rem,calc(50% - 31.6rem));width:2px;background:rgb(var(--pop-400));opacity:.85;z-index:1}
#welcome h1{font-size:clamp(2.5rem,7vw,4.5rem)}
#welcome :focus-visible{outline-color:rgb(var(--accent-300))}

/* Focus, errors, legal pages */
:focus-visible{outline:3px solid rgb(var(--brand-500));outline-offset:2px}
.legal th,.legal td{border:1px solid rgb(var(--ink)/.3)}
.legal th{background:rgb(var(--brand-100))}
.legal a{color:rgb(var(--brand-700))}

/* Virelora Academy logo badge */
img[src$="logo-192.png"]{background:#fff;border-radius:.5rem;padding:2px;object-fit:contain}