/* The home page as a comic book you scroll. Search comes first: this file only restyles, so every word, heading and link stays in the page as it was.
   Any lettering added here (masthead, sound effects) is decoration in CSS, not content. scripts/seo-home-guard.mjs compares the page with what Google already sees. */
body.study-home{--ink:#1b1340;--hc-yellow:#ffd23f;--hc-pink:#ff5d8f;--hc-sky:#9fdfff;--hc-mint:#8fe8cb;--hc-violet:#6c4de6;--hc-paper:#fffdf5}
body.study-home main{background:radial-gradient(circle,rgba(27,19,64,.07) 1.3px,transparent 1.7px) 0 0/16px 16px,var(--hc-paper)}

/* The cover: a masthead across the top, like the front of an issue */
body.study-home .study-home-hero{border-bottom:5px solid var(--ink)}
body.study-home .study-home-hero::before{content:"LEARNFUN COMICS  ★  EVERY LESSON IS AN ADVENTURE  ★  FREE";position:relative;z-index:2;display:block;padding:6px 12px;background:var(--ink);color:#fff;font:400 clamp(14px,1.8vw,20px)/1.2 "Bangers",Impact,sans-serif;letter-spacing:.08em;text-align:center;white-space:pre-wrap}

/* Momo narrates every section: the section's own words become a speech bubble */
body.study-home .section-head{position:relative}
body.study-home .section-head>div>p:not(.eyebrow){position:relative;width:fit-content;max-width:min(62ch,calc(100% - 74px));margin:12px 0 4px 74px;padding:10px 16px;border:3px solid var(--ink);border-radius:18px;background:#fff;box-shadow:3px 3px 0 var(--ink);color:var(--ink);font-family:"Fredoka",system-ui,sans-serif;font-weight:500;line-height:1.35}
body.study-home .section-head>div>p:not(.eyebrow)::before{content:"";position:absolute;left:-76px;bottom:-6px;width:62px;height:62px;background:url(/img/momo.svg) center/contain no-repeat}
body.study-home .section-head>div>p:not(.eyebrow)::after{content:"";position:absolute;left:-11px;bottom:14px;width:16px;height:16px;background:#fff;border-left:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:rotate(45deg)}
body.study-home .section-head>div>p:not(.eyebrow) a{color:#4b32c3}

/* Sections are pages: a tinted page, then a plain one */
body.study-home .study-trails,body.study-home .study-programs,body.study-home .home-paths{border-block:5px solid var(--ink);background:radial-gradient(circle,rgba(255,255,255,.6) 2px,transparent 2.6px) 0 0/14px 14px,#ffe9a6}
body.study-home .study-programs{background:radial-gradient(circle,rgba(255,255,255,.6) 2px,transparent 2.6px) 0 0/14px 14px,#c9efff}
body.study-home .study-trails:not(.home-paths){background:radial-gradient(circle,rgba(255,255,255,.6) 2px,transparent 2.6px) 0 0/14px 14px,#d7f7ea}

/* Every card is a panel */
body.study-home :is(.study-skill-card,.study-program-card,.study-course-card,.study-guide-card,.study-character-card,.home-path,.hw-dir>a){border:3px solid var(--ink);border-radius:8px;background:#fff;box-shadow:5px 5px 0 var(--ink);transition:transform .16s cubic-bezier(.25,.46,.45,.94),background-color .16s cubic-bezier(.25,.46,.45,.94)}
body.study-home :is(.study-skill-card,.study-program-card,.study-course-card,.study-guide-card,.home-path,.hw-dir>a):nth-child(even){transform:rotate(.5deg)}
body.study-home :is(.study-skill-card,.study-program-card,.study-course-card,.study-guide-card,.home-path,.hw-dir>a):nth-child(odd){transform:rotate(-.4deg)}
body.study-home :is(.study-skill-card,.study-program-card,.study-course-card,.study-guide-card,.study-character-card,.home-path,.hw-dir>a):is(:hover,:focus-visible){z-index:1;background:#fff3b0;transform:translate(-2px,-3px) rotate(-1deg)}
body.study-home :is(.study-skill-card,.study-program-card,.study-course-card,.study-guide-card,.study-character-card,.home-path) h3{font-family:"Fredoka",system-ui,sans-serif;font-weight:700;color:var(--ink)}
body.study-home :is(.study-skill-card,.study-program-card,.study-course-card,.study-guide-card,.home-path) p{color:#3a3160}
body.study-home .study-guide-card span,body.study-home .study-character-label{display:inline-block;width:fit-content;padding:2px 8px;border:2px solid var(--ink);background:var(--hc-yellow);color:var(--ink);font-weight:700}
body.study-home .home-join{border:4px solid var(--ink);border-radius:8px;box-shadow:6px 6px 0 var(--ink)}

/* Sound effects in the margin of some pages, for wide screens only */
@media (min-width:1100px){
  body.study-home .section-head::after{position:absolute;right:210px;top:-6px;font:400 44px/1 "Bangers",Impact,sans-serif;letter-spacing:.03em;color:var(--hc-yellow);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:3px 3px 0 var(--ink);transform:rotate(7deg);pointer-events:none}
  body.study-home section:nth-of-type(4n+1) .section-head::after{content:"POW!"}
  body.study-home section:nth-of-type(4n+3) .section-head::after{content:"ZAP!";color:var(--hc-pink);transform:rotate(-6deg)}
}

/* The parent page and the last page */
body.study-home .study-parent-band{border-block:5px solid var(--ink);background:repeating-conic-gradient(from 0deg at 18% 50%,#ffd23f 0 10deg,#ffc61a 10deg 20deg)}
body.study-home .study-parent-copy{padding:20px 24px;border:4px solid var(--ink);border-radius:24px;background:#fff;box-shadow:6px 6px 0 var(--ink);color:var(--ink)}
body.study-home .study-parent-copy :is(p,h2){color:var(--ink)}
body.study-home .study-home-cta{border-top:5px solid var(--ink)}
body.study-home .w-faq details{border:3px solid var(--ink);border-radius:8px;background:#fff;box-shadow:4px 4px 0 var(--ink);margin-bottom:12px}
body.study-home .w-faq summary{font-family:"Fredoka",system-ui,sans-serif;font-weight:600;color:var(--ink)}
body.study-home .w-faq details[open]{background:#fffbe6}

/* The first page of the story */
.hc-strip{padding-block:26px 6px}
.hc-strip ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.hc-panel{position:relative;display:flex;flex-direction:column;gap:8px;min-height:252px;padding:12px;border:4px solid var(--ink);box-shadow:5px 5px 0 var(--ink);overflow:hidden;font-family:"Fredoka",system-ui,sans-serif;color:var(--ink)}
.hc-panel.a{background:radial-gradient(circle,rgba(255,255,255,.55) 3px,transparent 3.6px) 0 0/14px 14px,var(--hc-sky)}
.hc-panel.c{background:repeating-conic-gradient(from 0deg at 70% 70%,#ffd23f 0 12deg,#ffbf1f 12deg 24deg)}
.hc-panel.b{justify-content:flex-end}
.hc-panel>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hc-cap,.hc-say{position:relative;z-index:1;margin:0;font-family:inherit;color:var(--ink)}
.hc-cap{align-self:flex-start;padding:3px 10px;border:3px solid var(--ink);background:var(--hc-yellow);font-weight:700;font-size:16px}
.hc-say{align-self:flex-start;max-width:82%;padding:9px 14px;border:3px solid var(--ink);border-radius:18px;background:#fff;font-weight:500;font-size:17px;line-height:1.28}
.hc-say b{color:#c21c56;font-weight:700}
.hc-panel.b .hc-cap{position:absolute;top:12px;left:12px}
.hc-panel svg{position:absolute;right:8px;bottom:6px;width:112px;height:112px}
.hc-sfx{position:absolute;z-index:1;right:12px;top:10px;font:400 42px/1 "Bangers",Impact,sans-serif;color:var(--hc-yellow);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:3px 3px 0 var(--ink);transform:rotate(7deg)}
[data-comeback]:not([hidden]){margin-block:18px 0}

@media (max-width:760px){
  .hc-strip ol{grid-template-columns:minmax(0,1fr)}
  .hc-panel{min-height:190px}
  body.study-home .section-head>div>p:not(.eyebrow){max-width:calc(100% - 58px);margin-left:58px;padding:8px 12px;font-size:15px}
  body.study-home .section-head>div>p:not(.eyebrow)::before{left:-60px;width:50px;height:50px}
}
@media (prefers-reduced-motion:reduce){body.study-home :is(.study-skill-card,.study-program-card,.study-course-card,.study-guide-card,.study-character-card,.home-path,.hw-dir>a){transition:none}}