/*
 * SEN2gether website look, version 3: every page (layout.php adds class "v3" to <html> and this file over the others
 * while the hub's "Website look (version 3)" design is previewed or live). The homepage has its own markup
 * (home3.css); everywhere else the same pages and markup get the homepage's feel: Lexend headings, page banners as
 * colour bands with a slanted edge, brush-shaped buttons, sticker-style pills, cards with a little depth, a navy
 * footer. Same colours (s2.css tokens). Text contrast stays AA; motion only when not asked for less.
 */
html.v3 {
  --v3-display: 'Lexend', var(--s2-font);
  --v3-lemon: var(--s2-calm-yellow-bg);
  --v3-sl: clamp(18px, 3vw, 44px);
  --v3-shadow: 0 14px 34px rgba(31, 42, 91, .13);
  --v3-shadow-sm: 0 6px 18px rgba(31, 42, 91, .10);
  --v3-brush: 13px 26px 15px 24px / 24px 14px 26px 13px;
}
html.v3 body { overflow-x: clip; }

/* ── Type ──────────────────────────────────────────────────────────────── */
/* Low priority (:where), so a page's own heading styles (the homepage's, home3.css) still win. */
:where(html.v3) :where(h1, h2, h3, .card-title, .tile-title, .brand, .faq summary, .row-title, .ccard-title, .sec-title, .faq-h, .mega-intro b) { font-family: var(--v3-display); }
:where(html.v3) :where(h1, h2) { font-weight: 800; letter-spacing: -.03em; }
:where(html.v3) h1 { line-height: 1.06; }
:where(html.v3) h2 { line-height: 1.1; }
:where(html.v3) :where(h3, .card-title) { letter-spacing: -.02em; }
html.v3 .sec-head h2, html.v3 .sec-title, html.v3 .faq-h { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); }
html.v3 .prose h2 { font-size: clamp(1.35rem, 1.2rem + .6vw, 1.7rem); }
html.v3 .prose h3 { font-size: 1.2rem; }

/* ── Header ────────────────────────────────────────────────────────────── */
html.v3 .brand { font-weight: 800; letter-spacing: -.03em; }
html.v3 .nav-link[aria-current="page"] { background: var(--s2-ink); color: #fff; }

/* ── Dropdown menus (header, every page): the homepage's colours and shapes ── */
html.v3 .nav-btn[aria-expanded="true"] { background: var(--s2-calm-yellow-bg); color: var(--s2-ink); }
html.v3 .mega { padding: 16px; border-radius: 28px; box-shadow: 0 24px 60px rgba(31, 42, 91, .2), 0 0 0 1px var(--s2-card-edge); gap: 16px; }
html.v3 .mega-intro[style*="soft-green"]    { --bg: var(--s2-calm-green-bg) !important;    --fg: var(--s2-calm-green-fg) !important; }
html.v3 .mega-intro[style*="soft-yellow"]   { --bg: var(--s2-calm-yellow-bg) !important;   --fg: var(--s2-calm-yellow-fg) !important; }
html.v3 .mega-intro[style*="soft-blue"]     { --bg: var(--s2-calm-blue-bg) !important;     --fg: var(--s2-calm-blue-fg) !important; }
html.v3 .mega-intro[style*="soft-pink"]     { --bg: var(--s2-calm-pink-bg) !important;     --fg: var(--s2-calm-pink-fg) !important; }
html.v3 .mega-intro[style*="soft-mint"]     { --bg: var(--s2-calm-mint-bg) !important;     --fg: var(--s2-calm-mint-fg) !important; }
html.v3 .mega-intro[style*="soft-peach"]    { --bg: var(--s2-calm-peach-bg) !important;    --fg: var(--s2-calm-peach-fg) !important; }
html.v3 .mega-intro[style*="soft-lavender"] { --bg: var(--s2-calm-lavender-bg) !important; --fg: var(--s2-calm-lavender-fg) !important; }
html.v3 .mega-intro { position: relative; overflow: hidden; padding: 18px; border-radius: 22px 26px 20px 28px; rotate: -1deg; }
html.v3 .mega-intro::after { content: ''; position: absolute; right: -36px; bottom: -36px; width: 110px; aspect-ratio: 1; border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%; background: #fff; opacity: .35; pointer-events: none; }
html.v3 .mega-intro b { position: relative; z-index: 1; font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; }
html.v3 .mega-intro p { position: relative; z-index: 1; opacity: 1; line-height: 1.45; }
html.v3 .mega-intro a { position: relative; z-index: 1; align-self: flex-start; gap: 6px; padding: 8px 14px; border-radius: var(--v3-brush); background: var(--s2-ink); color: #fff; font-family: var(--v3-display); box-shadow: 0 3px 0 rgba(31, 42, 91, .2); }
html.v3 .mega-intro a:hover { transform: translateY(-1px); }
html.v3 .mega-group { font-family: var(--v3-display); color: #B04E14; letter-spacing: .08em; }
html.v3 .mega-links a { gap: 12px; padding: 9px 10px; border-radius: 16px; font-weight: 650; transition: background .15s, transform .15s; }
html.v3 .mega-links a:hover { background: var(--s2-soft-yellow-bg); transform: translateX(3px); }
html.v3 .mega-links .disc, html.v3 .menu-group .disc, html.v3 .menu-plain .disc { width: 34px; height: 34px; }
html.v3 .mega-links .disc .ms { font-size: 19px; }
/* The phone menu */
html.v3 .menu-group, html.v3 .menu-plain { background: #fff; box-shadow: inset 0 0 0 1.5px var(--s2-card-edge), 0 3px 0 rgba(31, 42, 91, .05); }
html.v3 .menu-group summary { font-family: var(--v3-display); font-weight: 700; }
html.v3 .menu-group[open] summary { color: var(--s2-ink); }
html.v3 .menu-group li a:hover, html.v3 .menu-plain a:hover { background: var(--s2-soft-yellow-bg); }

/* ── Buttons, pills, tags ──────────────────────────────────────────────── */
html.v3 .btn { border-radius: var(--v3-brush); font-family: var(--v3-display); letter-spacing: -.01em; box-shadow: 0 3px 0 rgba(31, 42, 91, .16); transition: transform var(--s2-dur-press) var(--s2-ease-bounce), box-shadow .15s, background .15s; }
html.v3 .btn:not(.btn--block):not(.btn--sm) { transform: rotate(-1deg); }
html.v3 .btn:hover { transform: rotate(0) translateY(-2px); box-shadow: 0 5px 0 rgba(31, 42, 91, .16); }
html.v3 .btn:active { transform: rotate(0) translateY(1px); box-shadow: 0 1px 0 rgba(31, 42, 91, .16); }
html.v3 .btn--white { box-shadow: inset 0 0 0 1.5px var(--s2-card-edge), 0 3px 0 rgba(31, 42, 91, .1); }
html.v3 .btn--white:hover { box-shadow: inset 0 0 0 1.5px var(--s2-card-edge), 0 5px 0 rgba(31, 42, 91, .1); }
html.v3 .hdr .btn { transform: none; box-shadow: none; }
html.v3 .hdr .btn:hover { transform: translateY(-1px); }

html.v3 .pill { padding: 6px 16px 6px 6px; background: var(--s2-white); font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--s2-card-edge), 0 2px 0 rgba(31, 42, 91, .06); transition: transform .18s var(--s2-ease-bounce); }
html.v3 .pill:nth-child(odd) { transform: rotate(-1deg); }
html.v3 .pill:nth-child(even) { transform: rotate(.8deg); }
html.v3 .pill:hover { transform: rotate(0) translateY(-2px); }
html.v3 .link-pills li:nth-child(odd) .pill { transform: rotate(-1deg); }
html.v3 .link-pills li:nth-child(even) .pill { transform: rotate(.8deg); }
html.v3 .link-pills li .pill:hover { transform: rotate(0) translateY(-2px); }
html.v3 .pill .disc { width: 30px; height: 30px; }
html.v3 .rail { padding: 6px 4px; margin: -6px -4px; }
html.v3 .tag { font-family: var(--v3-display); letter-spacing: .01em; }
html.v3 .disc, html.v3 .ink-disc { border-radius: 46% 54% 50% 50% / 55% 45% 55% 45%; }

/* ── Page banners: a colour band with a slanted edge ───────────────────── */
html.v3 .banner { border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--v3-sl)), 0 100%); }
html.v3 .banner-in { padding-bottom: calc(var(--v3-sl) + 34px); }
@media (min-width: 720px) { html.v3 .banner-in { padding-top: 54px; padding-bottom: calc(var(--v3-sl) + 56px); } }
html.v3 .banner::before { content: ''; position: absolute; z-index: 0; right: -70px; top: -70px; width: clamp(160px, 26vw, 340px); aspect-ratio: 1; border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%; background: #fff; opacity: .26; pointer-events: none; } /* lighter, so dark banner text only gains contrast */
@media (min-width: 900px) { html.v3 .banner::before { right: 6%; } }
html.v3 .banner h1 { font-size: clamp(2rem, 1.5rem + 2.4vw, 3.3rem); max-width: 18ch; }
html.v3 .banner .sub { font-size: clamp(1.0625rem, 1rem + .3vw, 1.2rem); line-height: 1.55; }
html.v3 .banner .orn { opacity: .9; transform: rotate(-8deg); }
html.v3 .banner .crumbs { font-family: var(--v3-display); font-weight: 600; letter-spacing: .01em; }
/* Solid text on the colour bands (today's see-through crumbs, sub-lines and closing text fall below 4.5:1 on some hues). */
html.v3 .banner .sub, html.v3 .crumbs a, html.v3 .crumbs [aria-current], html.v3 .closing p { opacity: 1; }
html.v3 .banner-kicker .tag { background: #fff; box-shadow: 0 2px 0 rgba(31, 42, 91, .1); }
html.v3 .banner-search, html.v3 .banner .search-pill { box-shadow: var(--v3-shadow); }

/* ── Cards: a little depth, a lift on hover ────────────────────────────── */
html.v3 .card--white, html.v3 .link-card, html.v3 .row-card, html.v3 .ccard, html.v3 .person-card, html.v3 .quote-card, html.v3 .guide-card, html.v3 .tool-card, html.v3 .gl-card, html.v3 .bcard,
html.v3 .letter, html.v3 .scard, html.v3 .kind-card, html.v3 .side-card, html.v3 .rcard, html.v3 .ls-card {
  box-shadow: inset 0 0 0 1.5px var(--s2-card-edge), var(--v3-shadow-sm);
}
html.v3 .row-card, html.v3 .faq details, html.v3 .notice { background: var(--s2-white); box-shadow: inset 0 0 0 1.5px var(--s2-card-edge); }
html.v3 a.card, html.v3 .row-card, html.v3 a.ccard, html.v3 a.guide-card, html.v3 a.tool-card, html.v3 a.gl-card, html.v3 a.scard, html.v3 a.kind-card, html.v3 a.person-card, html.v3 a.rcard, html.v3 a.ls-card {
  transition: transform .22s var(--s2-ease-spring), box-shadow .2s;
}
html.v3 a.card:hover, html.v3 .row-card:hover, html.v3 a.ccard:hover, html.v3 a.guide-card:hover, html.v3 a.tool-card:hover, html.v3 a.gl-card:hover, html.v3 a.scard:hover, html.v3 a.kind-card:hover, html.v3 a.person-card:hover, html.v3 a.rcard:hover, html.v3 a.ls-card:hover {
  transform: translateY(-4px) rotate(-.6deg); box-shadow: inset 0 0 0 1.5px var(--s2-card-edge), var(--v3-shadow);
}
html.v3 a.card:hover .card-title { text-decoration: none; }
html.v3 .card--tool { background: var(--s2-white); box-shadow: inset 0 0 0 1.5px var(--s2-card-edge), var(--v3-shadow-sm); }
html.v3 .row-thumb { box-shadow: 4px 4px 0 var(--s2-calm-yellow-bg); }
html.v3 .row-card .ink-disc { background: var(--v3-lemon); color: var(--s2-ink); }
html.v3 .date-disc { rotate: -4deg; font-family: var(--v3-display); }

/* Tiles: alternate tilts, straighten on hover */
html.v3 .tile { box-shadow: var(--v3-shadow-sm); rotate: -1deg; transition: rotate .25s var(--s2-ease-spring), translate .25s var(--s2-ease-spring), box-shadow .2s; }
html.v3 .tile:nth-child(even) { rotate: 1deg; }
html.v3 .tile:hover { rotate: 0deg; translate: 0 -4px; box-shadow: var(--v3-shadow); }
html.v3 .tile-title { letter-spacing: -.03em; }

/* FAQ */
html.v3 .faq details { transition: box-shadow .2s; }
html.v3 .faq details[open] { box-shadow: inset 0 0 0 2px var(--s2-ink); }
html.v3 .faq summary { font-weight: 700; }
html.v3 .faq summary .ms { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--s2-card); }

/* Notices and the story card */
html.v3 .notice .ink-disc { background: var(--v3-lemon); color: var(--s2-ink); }
html.v3 .story-card { background: var(--s2-calm-peach-bg); color: var(--s2-calm-peach-fg); border-radius: 30px 38px 28px 40px; }
html.v3 .story-card h2, html.v3 .story-card .lead { color: inherit; }
html.v3 .faces li { box-shadow: var(--v3-shadow-sm); }

/* The closing card: bolder, a brush-edged shape */
html.v3 .closing { border-radius: 32px 40px 30px 44px; box-shadow: var(--v3-shadow-sm); }
html.v3 .closing h2 { font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.9rem); }
html.v3 .closing .orn { opacity: .95; transform: rotate(-10deg); }

/* Forms */
html.v3 .input { border-radius: 18px; }
html.v3 .input:focus { border-color: var(--s2-ink); box-shadow: 0 0 0 4px var(--s2-soft-lavender-bg); }
html.v3 .search-pill { height: 58px; box-shadow: inset 0 0 0 1.5px var(--s2-card-edge), var(--v3-shadow-sm); }
html.v3 .search-pill:focus-within { box-shadow: 0 0 0 3px var(--s2-ink), var(--v3-shadow-sm); }
html.v3 .search-pill .btn { transform: none; box-shadow: none; }

/* Checks: a mint disc */
html.v3 .checks .ms { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--s2-calm-mint-bg); color: var(--s2-calm-mint-fg); font-size: 17px; }

/* ── Footer: a navy band with a slanted top ────────────────────────────── */
html.v3 .foot { margin-top: calc(56px + var(--v3-sl)); border-radius: 0; background: var(--s2-ink); color: #fff; clip-path: polygon(0 var(--v3-sl), 100% 0, 100% 100%, 0 100%); padding-top: var(--v3-sl); }
html.v3 .foot h2, html.v3 .foot h3, html.v3 .foot .brand { color: #fff; }
html.v3 .foot-get p, html.v3 .foot-brand p, html.v3 .foot-legal { color: rgba(255, 255, 255, .8); }
html.v3 .foot ul a, html.v3 .foot-legal a, html.v3 .foot-legal button { color: #fff; }
html.v3 .foot-get, html.v3 .foot-legal { border-color: rgba(255, 255, 255, .16); }
html.v3 .foot .brand-disc { box-shadow: 0 0 0 3px rgba(255, 255, 255, .18); }
html.v3 .foot-social a { background: rgba(255, 255, 255, .12); color: #fff; }
html.v3 .foot-social a:hover { background: var(--v3-lemon); color: var(--s2-ink); }
html.v3 .foot .store { background: #fff; color: var(--s2-ink); }
html.v3 .foot-get h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); }

/* The staff preview bar (as in schools.css, here for every page). */
html.v3 .design-bar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 50; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; max-width: 760px; margin: 0 auto; padding: 12px 16px; border-radius: 18px; background: var(--s2-ink); color: var(--s2-on-ink); font-size: var(--s2-fs-footnote); box-shadow: var(--s2-shadow-raised); }
html.v3 .design-bar a { margin-left: auto; color: inherit; font-weight: 800; }
@media (max-width: 640px) { html.v3 .design-bar { left: 8px; right: 8px; bottom: 8px; padding: 10px 12px; font-size: var(--s2-fs-caption); } }

/* Less motion, if asked for: no tilting back and forth or lifting. */
@media (prefers-reduced-motion: reduce) {
  html.v3 .btn, html.v3 .pill, html.v3 .tile, html.v3 a.card, html.v3 .row-card { transition: none !important; }
  html.v3 .btn:hover, html.v3 .pill:hover, html.v3 .tile:hover, html.v3 a.card:hover, html.v3 .row-card:hover { translate: none; }
}