/* Beat a 5th Grader: header, footer, homepage. Mobile-first. */

:root {
	--ink: #1d1b3a;
	--ink-soft: #55526e;
	--paper: #fffaf0;
	--line: #cfe2fb;
	--margin: #f5a3a3;
	--white: #ffffff;

	/* Crayon box */
	--red: #ff5a5f;
	--blue: #4d8dff;
	--yellow: #ffc93c;
	--green: #2ec26b;
	--purple: #9b6bff;
	--orange: #ff9f43;

	/* Gel pen pastels */
	--sky: #a4dcfb;
	--pink: #ffc6d9;
	--lilac: #ddd0ff;
	--mint: #c4f2dc;
	--lemon: #fff3a8;

	--font: "Nunito", ui-rounded, system-ui, sans-serif;
	--hand: "Caveat", "Comic Sans MS", cursive;
	--radius: 20px;
	--shadow: 5px 5px 0 var(--ink);
	--gutter: 16px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--font);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--ink);
	background: var(--paper);
	overflow-x: clip;
}

/* Resets only inside our own sections, so normal WordPress posts and pages keep their spacing and bullets */
:where(.site-header, .site-footer, .b5g-home) :where(h1, h2, h3, p, ul, ol) { margin: 0; padding: 0; }
:where(.site-header, .site-footer, .b5g-home) :where(ul, ol) { list-style: none; }
:where(.site-header, .site-footer, .b5g-home) a { color: inherit; }
:where(.site-header, .site-footer, .b5g-home) :where(img, svg) { max-width: 100%; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

.skip { position: absolute; left: -999px; top: 8px; z-index: 10; padding: 8px 14px; background: var(--yellow); border: 2px solid var(--ink); border-radius: 999px; font-weight: 800; }
.skip:focus { left: 8px; }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
.hand { font-family: var(--hand); font-weight: 700; line-height: 1.1; }

/* ---------- Buttons, chips, tape ---------- */

.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 48px; padding: 0.6rem 1.4rem;
	font: 800 1.05rem/1.2 var(--font); color: var(--ink); text-decoration: none; text-align: center;
	background: var(--white); border: 3px solid var(--ink); border-radius: 999px;
	box-shadow: 4px 4px 0 var(--ink);
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.btn-red { background: var(--red); }
.btn-big { min-height: 58px; padding: 0.8rem 1.8rem; font-size: 1.15rem; }
.btn-soon { color: var(--ink-soft); background: transparent; border-style: dashed; box-shadow: none; }
.btn-soon:hover { transform: none; box-shadow: none; }

.chip { display: inline-block; padding: 0.15rem 0.7rem; font-size: 0.75rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; border: 2px solid var(--ink); border-radius: 999px; }
.chip-yellow { background: var(--yellow); }
.chip-pink { background: var(--pink); }
.chip-sky { background: var(--sky); }
.chip-mint { background: var(--mint); }

/* Washi tape: translucent striped strip */
.tape { position: absolute; top: -14px; left: 50%; width: 110px; height: 28px; transform: translateX(-50%) rotate(-4deg); opacity: 0.85; border-left: 2px dashed rgba(255,255,255,0.6); border-right: 2px dashed rgba(255,255,255,0.6); z-index: 2; }
.tape-pink { background: repeating-linear-gradient(45deg, #ff9ec0 0 8px, #ffc6d9 8px 16px); }
.tape-yellow { background: repeating-linear-gradient(45deg, #ffd95e 0 8px, #fff0a8 8px 16px); }
.tape-mint { background: repeating-linear-gradient(45deg, #7fe0b0 0 8px, #c4f2dc 8px 16px); }
.tape-sky { background: repeating-linear-gradient(45deg, #79c6f7 0 8px, #c8eafd 8px 16px); }

.bg-red { background: var(--red); }
.bg-yellow { background: var(--yellow); }
.bg-green { background: var(--green); }

/* ---------- Header ---------- */

.site-header {
	position: sticky; top: 0; z-index: 5;
	background: var(--sky);
	border-bottom: 3px solid var(--ink);
	/* Scalloped edge like a party banner */
	box-shadow: 0 4px 0 rgba(29, 27, 58, 0.08);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 72px; }

.logo { display: inline-flex; align-items: center; gap: 8px; min-width: 0; text-decoration: none; }
.logo-badge {
	display: grid; place-items: center; flex: none;
	width: 40px; height: 40px; font-size: 0.9rem; font-weight: 900;
	background: var(--yellow); border: 3px solid var(--ink); border-radius: 50%;
	box-shadow: 3px 3px 0 var(--ink); transform: rotate(-10deg);
}
/* Phones: the longer name wraps onto two lines so the Menu button still fits */
.logo-word { max-width: 9em; font-size: clamp(0.95rem, 4.2vw, 1.15rem); font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; }
@media (min-width: 600px) { .logo-word { max-width: none; white-space: nowrap; } }
.logo-pop { color: var(--red); -webkit-text-stroke: 0; }

/* Mobile menu: dropdown opened by the Menu button. Without JavaScript the links simply show. */
.nav { position: relative; }
.nav-toggle {
	display: none; align-items: center; min-height: 44px; padding: 0 0.85rem;
	font: 900 1rem var(--font); flex: none; color: var(--ink); cursor: pointer;
	background: var(--white); border: 3px solid var(--ink); border-radius: 999px; box-shadow: 3px 3px 0 var(--ink);
}
.nav-toggle::after { content: "☰"; margin-left: 8px; }
.nav-toggle[aria-expanded="true"]::after { content: "✕"; }
.has-js .nav-toggle { display: inline-flex; }

.nav-list {
	display: flex; flex-direction: column; gap: 10px; width: min(260px, calc(100vw - 32px));
	padding: 14px; background: var(--paper); border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow);
}
.has-js .nav-list { position: absolute; right: 0; top: calc(100% + 12px); display: none; }
.has-js .nav-toggle[aria-expanded="true"] + .nav-list { display: flex; }
.nav-tab {
	display: flex; align-items: center; min-height: 48px; padding: 0 1rem;
	font-weight: 900; text-decoration: none; border: 3px solid var(--ink); border-radius: 14px;
}
.tab-pink { background: var(--pink); }
.tab-mint { background: var(--mint); }
.nav-tab[aria-current="page"] { text-decoration: underline wavy var(--red) 2px; text-underline-offset: 6px; }
.nav-list .btn { width: 100%; }

@media (min-width: 900px) {
	.header-inner { min-height: 88px; }
	.logo-word { font-size: 1.5rem; }
	.logo-badge { width: 52px; height: 52px; font-size: 1.1rem; }
	.has-js .nav-toggle { display: none; }
	.has-js .nav-list, .nav-list { position: static; display: flex; }
	.nav-list { flex-direction: row; align-items: center; gap: 14px; width: auto; padding: 0; background: none; border: 0; box-shadow: none; }
	.nav-tab { min-height: 46px; padding: 0 1.2rem; border-radius: 14px 14px 14px 14px; box-shadow: 3px 3px 0 var(--ink); transform: rotate(-1.5deg); }
	.nav-tab.tab-mint { transform: rotate(1.5deg); }
	.nav-list .btn { width: auto; }
}

/* ---------- Hero (notebook page) ---------- */

.hero {
	position: relative; overflow: hidden;
	padding: 48px 0 64px;
	background-color: var(--paper);
	background-image:
		linear-gradient(to right, transparent 46px, var(--margin) 46px, var(--margin) 48px, transparent 48px),
		repeating-linear-gradient(to bottom, transparent 0 35px, var(--line) 35px 36px);
	border-bottom: 3px solid var(--ink);
}
.holes { position: absolute; left: 14px; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: space-around; }
.holes i { width: 18px; height: 18px; background: var(--sky); border: 2px solid rgba(29,27,58,0.25); border-radius: 50%; box-shadow: inset 2px 2px 0 rgba(29,27,58,0.15); }

.hero-inner { position: relative; display: grid; gap: 48px; padding-left: 44px; }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }

.sticker-chip {
	padding: 0.35rem 0.9rem; font-weight: 900; font-size: 0.9rem;
	background: var(--pink); border: 3px solid var(--ink); border-radius: 999px; box-shadow: 3px 3px 0 var(--ink);
	transform: rotate(-2deg);
}

.hero h1 { font-size: clamp(2.1rem, 9.5vw, 5.4rem); font-weight: 900; line-height: 1; letter-spacing: -0.035em; }
.hero h1 em { font-style: normal; color: var(--blue); text-decoration: underline wavy var(--orange) 4px; text-underline-offset: 8px; }
.marker { white-space: nowrap; padding: 0 0.15em; background: linear-gradient(transparent 12%, var(--yellow) 12%, var(--yellow) 88%, transparent 88%); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.note { font-size: clamp(1.7rem, 5vw, 2.3rem); color: var(--red); transform: rotate(-4deg); margin-top: -6px; }
.lede { max-width: 32rem; font-size: clamp(1.05rem, 2.4vw, 1.35rem); color: var(--ink-soft); }
/* Phones: buttons and facts centred; from 600px they line up with the left-aligned text */
.ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; width: 100%; }
.facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; width: 100%; font-weight: 800; color: var(--ink-soft); }
@media (min-width: 600px) {
	.ctas, .facts { justify-content: flex-start; }
}

/* Doodles in gel pen colours */
.doodle { position: absolute; pointer-events: none; }
.d-star1 { width: 40px; right: 10px; top: 6px; fill: var(--yellow); stroke: var(--ink); stroke-width: 1.2; transform: rotate(14deg); }
.d-star2 { width: 30px; left: 46%; bottom: 40px; fill: var(--pink); stroke: var(--ink); stroke-width: 1.4; transform: rotate(-12deg); }
.d-swirl { width: 120px; right: 38%; top: 30px; stroke: var(--purple); display: none; }
.d-heart { width: 34px; left: 62px; bottom: 22px; fill: var(--red); stroke: var(--ink); stroke-width: 1.2; transform: rotate(-14deg); }

/* Mini quiz card taped to the page */
.hero-art { position: relative; max-width: 480px; width: 100%; padding: 24px 12px 56px; justify-self: center; }
.mini {
	position: relative; display: flex; flex-direction: column; gap: 14px; padding: 22px;
	background: var(--white); border: 3px solid var(--ink); border-radius: 22px; box-shadow: 9px 9px 0 var(--ink);
	transform: rotate(2.5deg);
}
.mini-top { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 0.95rem; }
.mini-timer { display: grid; place-items: center; width: 44px; height: 44px; font-weight: 900; border: 3px solid var(--ink); border-radius: 50%; background: conic-gradient(var(--blue) 0 80%, var(--line) 0); }
.mini-timer { background: radial-gradient(circle, var(--white) 56%, transparent 58%), conic-gradient(var(--blue) 0 80%, var(--line) 0); }
.mini-bar { height: 12px; border: 2px solid var(--ink); border-radius: 999px; overflow: hidden; }
.mini-bar span { display: block; width: 30%; height: 100%; background: repeating-linear-gradient(45deg, var(--green) 0 8px, #27ad5f 8px 16px); }
.mini-q { font-size: clamp(1.6rem, 6vw, 2.1rem); font-weight: 900; }
.mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ans { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 10px; font-weight: 800; font-size: 1.05rem; background: var(--white); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 3px 3px 0 var(--ink); }
.ans b { display: grid; place-items: center; width: 32px; height: 32px; border: 2px solid var(--ink); border-radius: 9px; }
.ans.is-correct { background: var(--green); }
.ans.is-correct b { background: var(--white); }

.gold-star {
	position: absolute; right: -14px; top: -40px; width: 96px; height: 96px; z-index: 3;
	display: grid; place-items: center;
	background: var(--yellow);
	clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
	transform: rotate(12deg);
	filter: drop-shadow(3px 3px 0 var(--ink));
	animation: wobble 3s ease-in-out infinite;
}
.gold-star span { margin-top: 10px; font-size: 1.5rem; font-weight: 900; color: var(--red); }
.bubble {
	position: absolute; left: 0; bottom: 4px; padding: 10px 18px;
	font-size: 1.15rem; font-weight: 900; background: var(--pink);
	border: 3px solid var(--ink); border-radius: 22px 22px 22px 4px; box-shadow: 4px 4px 0 var(--ink);
	transform: rotate(-6deg);
}
.smiley {
	position: absolute; right: 18px; bottom: 0; width: 64px; height: 64px;
	display: grid; place-items: center; font-size: 2.6rem; line-height: 1;
	background: var(--yellow); border: 3px solid var(--ink); border-radius: 50%; box-shadow: 3px 3px 0 var(--ink);
	transform: rotate(10deg);
}

@media (min-width: 1024px) {
	.hero { padding: 88px 0 104px; }
	.hero-inner { grid-template-columns: 1.15fr 1fr; align-items: center; padding-left: 40px; }
	.d-swirl { display: block; }
	.holes i { width: 22px; height: 22px; }
}

/* ---------- Ticker ---------- */

.ticker { overflow: hidden; background: var(--ink); color: var(--yellow); border-bottom: 3px solid var(--ink); }
.ticker-track { display: flex; gap: 24px; width: max-content; padding: 16px 0; font-size: 1.1rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; animation: scroll 28s linear infinite; }
.ticker-track i { font-style: normal; color: var(--pink); }
.ticker-track i:nth-of-type(3n) { color: var(--sky); }
.ticker-track i:nth-of-type(3n+1) { color: var(--mint); }

/* ---------- Sections ---------- */

.section { padding: 64px 0; border-bottom: 3px solid var(--ink); }
.bg-pink { background: var(--pink) radial-gradient(rgba(255,255,255,0.55) 2px, transparent 2.5px) 0 0 / 22px 22px; }
.bg-lilac { background: var(--lilac) radial-gradient(rgba(255,255,255,0.55) 2px, transparent 2.5px) 0 0 / 22px 22px; }
.bg-mint { background: var(--mint) radial-gradient(rgba(255,255,255,0.6) 2px, transparent 2.5px) 0 0 / 22px 22px; }

.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 24px; margin-bottom: 36px; }
.section-head h2 { font-size: clamp(2.2rem, 6vw, 3.4rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1; }
.section-head .hand { font-size: clamp(1.5rem, 4vw, 2rem); transform: rotate(-3deg); }
.scribble-blue { color: var(--blue); }
.scribble-red { color: var(--red); }

/* Sticky notes */
.notes { display: grid; gap: 28px; }
.note-card {
	position: relative; display: flex; flex-direction: column; gap: 10px; padding: 34px 26px 28px;
	border: 3px solid var(--ink); border-radius: 6px 6px 26px 6px; box-shadow: var(--shadow);
}
.note-card:nth-child(1) { transform: rotate(-1.5deg); }
.note-card:nth-child(2) { transform: rotate(1deg); }
.note-card:nth-child(3) { transform: rotate(-0.5deg); }
.note-yellow { background: var(--lemon); }
.note-mint { background: var(--mint); }
.note-sky { background: var(--sky); }
.pin { position: absolute; top: -12px; left: 50%; width: 24px; height: 24px; margin-left: -12px; border: 3px solid var(--ink); border-radius: 50%; box-shadow: 2px 2px 0 var(--ink); }
.pin-red { background: var(--red); }
.pin-blue { background: var(--blue); }
.pin-purple { background: var(--purple); }
.note-num { font-family: var(--hand); font-size: 3rem; font-weight: 700; line-height: 0.8; color: var(--ink-soft); }
.note-card h3 { font-size: 1.5rem; font-weight: 900; }
.note-card p { font-size: 1.05rem; color: var(--ink-soft); }

@media (min-width: 768px) {
	.notes { grid-template-columns: repeat(3, 1fr); }
}

/* Quiz cards */
.cards { display: grid; gap: 32px; }
.card {
	position: relative; display: flex; flex-direction: column;
	background: var(--white); border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow);
	transition: transform 0.15s ease;
}
.card:hover { transform: rotate(-1deg) translateY(-4px); }
.card-art { display: grid; place-items: center; height: 150px; font-size: 4.2rem; border-bottom: 3px solid var(--ink); border-radius: 17px 17px 0 0; }
.art-sky { background: var(--sky) radial-gradient(rgba(255,255,255,0.6) 3px, transparent 3.5px) 0 0 / 20px 20px; }
.art-pink { background: var(--pink) radial-gradient(rgba(255,255,255,0.6) 3px, transparent 3.5px) 0 0 / 20px 20px; }
.art-purple { background: var(--lilac) radial-gradient(rgba(255,255,255,0.6) 3px, transparent 3.5px) 0 0 / 20px 20px; }
.art-yellow { background: var(--lemon) radial-gradient(rgba(255,255,255,0.7) 3px, transparent 3.5px) 0 0 / 20px 20px; }
.card-body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px; flex: 1; }
.card h3 { font-size: 1.4rem; font-weight: 900; line-height: 1.15; }
.card .meta { font-weight: 700; color: var(--ink-soft); }
.card .btn { margin-top: auto; }
.card-body .btn { margin-top: 10px; }
.card.is-soon .card-art { filter: saturate(0.6); }

@media (min-width: 600px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cards { grid-template-columns: repeat(4, 1fr); } }

/* Report card leaderboard + dare */
.split { display: grid; gap: 40px; }
.report {
	padding: 26px; background: var(--white);
	background-image: repeating-linear-gradient(to bottom, transparent 0 59px, var(--line) 59px 60px);
	border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow);
}
.report-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 14px; }
.report-head h2 { font-size: clamp(1.5rem, 4vw, 1.9rem); font-weight: 900; }
.sample { font-size: 0.75rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.board li { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 0 10px; font-size: 1.15rem; font-weight: 800; }
.board .rank { display: grid; place-items: center; flex: none; width: 36px; height: 36px; font-weight: 900; background: var(--white); border: 2px solid var(--ink); border-radius: 50%; }
.rank-gold { background: var(--yellow) !important; }
.rank-silver { background: #e3e3ef !important; }
.rank-bronze { background: #f6c7a1 !important; }
.board .name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.board .pts { font-weight: 900; }
.board .grade { width: 44px; font-family: var(--hand); font-size: 1.9rem; color: var(--red); text-align: center; transform: rotate(-8deg); }
.board .is-you { background: var(--lemon); border: 2px dashed var(--ink); border-radius: 12px; }

.dare {
	position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 36px 28px;
	background: var(--yellow); border: 3px solid var(--ink); border-radius: 6px 6px 30px 6px; box-shadow: var(--shadow);
	transform: rotate(-1.5deg);
}
.dare h2 { font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 900; line-height: 1.02; letter-spacing: -0.02em; }
.dare p { font-size: 1.15rem; }
.dare-psst { font-size: 1.8rem; color: var(--red); }

/* Referral link box inside the dare note */
.ref-box { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; width: 100%; }
.ref-box .ref-share { margin-bottom: 6px; }
.ref-label { font-weight: 900; font-size: 0.95rem; }
.ref-row { display: flex; flex-wrap: wrap; gap: 12px; width: 100%; }
.ref-input {
	flex: 1 1 14rem; min-width: 0; min-height: 52px; padding: 0 14px;
	font: 700 0.95rem var(--font); color: var(--ink-soft); text-overflow: ellipsis;
	background: var(--white); border: 3px dashed var(--ink); border-radius: 14px;
}
.ref-row .btn { flex: none; }
.ref-status { min-height: 1.5em; font-weight: 800; }

@media (min-width: 1024px) {
	.split { grid-template-columns: 1.1fr 1fr; align-items: center; }
	.dare { padding: 44px 40px; }
}

/* ---------- Footer ---------- */

.site-footer { background: var(--ink); color: var(--white); }
.crayons { height: 14px; background: linear-gradient(to right, var(--red) 0 16.6%, var(--orange) 16.6% 33.3%, var(--yellow) 33.3% 50%, var(--green) 50% 66.6%, var(--blue) 66.6% 83.3%, var(--purple) 83.3%); border-top: 3px solid var(--ink); }
.site-footer .wrap { padding-top: 48px; padding-bottom: 28px; }
.footer-top { display: grid; gap: 40px; padding-bottom: 36px; border-bottom: 2px dashed #4a4774; }
.footer-brand p { max-width: 22rem; margin-top: 14px; font-size: 1.05rem; color: #cfcce6; }
.site-footer .logo-badge { border-color: var(--white); box-shadow: 3px 3px 0 var(--pink); color: var(--ink); }
.footer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.footer-cols > div:last-child { grid-column: 1 / -1; }
.footer-cols h2 { margin-bottom: 14px; font-size: 0.85rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: var(--yellow); }
.footer-cols ul { display: flex; flex-direction: column; gap: 4px; }
.footer-cols ul a { display: inline-flex; align-items: center; min-height: 40px; font-weight: 700; text-decoration: none; }
.footer-cols ul a:hover { color: var(--pink); text-decoration: underline wavy; }
.site-footer .btn { border-color: var(--white); box-shadow: 4px 4px 0 var(--pink); color: var(--ink); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 24px; font-size: 0.95rem; color: #cfcce6; }

@media (min-width: 900px) {
	.footer-top { grid-template-columns: 1fr auto; }
	.footer-cols { grid-template-columns: repeat(3, auto); gap: 72px; }
	.footer-cols > div:last-child { grid-column: auto; }
}

/* ---------- Motion ---------- */

@keyframes scroll { to { transform: translateX(-50%); } }
@keyframes wobble { 0%, 100% { transform: rotate(12deg); } 50% { transform: rotate(4deg) scale(1.05); } }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (min-width: 1024px) {
	.d-star1 { width: 54px; right: 6%; top: 24px; }
}
@media (min-width: 900px) {
	.logo-badge { width: 52px; height: 52px; font-size: 1.1rem; }
}

/* ---------- WordPress ---------- */

/* No gaps between header, page and footer */
.wp-site-blocks > * { margin-block-start: 0; }
.b5g-home > * { margin-block: 0; }

/* Sticky header: the template part wrapper is what sticks, below the admin bar when logged in */
header.wp-block-template-part:has(.site-header) {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
}
.wp-block-template-part .site-header { position: static; }

/* Quiz pages: paper background, room on the sides */
.b5g-page-main { padding: 32px var(--gutter) 64px; }

/* ---------- WordPress blocks: the homepage is a real, editable page ---------- */

/* Our own gaps handle spacing, so drop WordPress's default spacing between blocks */
.b5g-home > *,
.b5g-home .wp-block-group > *,
.b5g-home .wp-block-buttons > *,
.quiz-about > * { margin-block: 0; }

.b5g-home mark.marker { color: inherit; }
.b5g-home ul.facts { margin: 0; padding: 0; list-style: none; }

/* Button blocks styled like our chunky buttons */
.b5g-home .wp-block-button .wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 48px; padding: 0.6rem 1.4rem;
	font: 800 1.05rem/1.2 var(--font); color: var(--ink); text-decoration: none;
	background: var(--white); border: 3px solid var(--ink); border-radius: 999px;
	box-shadow: 4px 4px 0 var(--ink);
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.b5g-home .wp-block-button .wp-block-button__link:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.b5g-home .wp-block-button .wp-block-button__link:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.b5g-home .wp-block-button.is-b5g-red .wp-block-button__link { background: var(--red); }
.b5g-home .wp-block-button.is-b5g-big .wp-block-button__link { min-height: 58px; padding: 0.8rem 1.8rem; font-size: 1.15rem; }
.b5g-home .card-body .wp-block-buttons { margin-top: 10px; }

/* Pins on the sticky notes */
.note-card[class*="pinned-"]::before {
	content: ""; position: absolute; top: -12px; left: 50%; width: 24px; height: 24px; margin-left: -12px;
	border: 3px solid var(--ink); border-radius: 50%; box-shadow: 2px 2px 0 var(--ink);
}
.pinned-red::before { background: var(--red); }
.pinned-blue::before { background: var(--blue); }
.pinned-purple::before { background: var(--purple); }

/* Washi tape on cards and the dare note */
.taped::before {
	content: ""; position: absolute; top: -14px; left: 50%; z-index: 2; width: 110px; height: 28px;
	transform: translateX(-50%) rotate(-4deg); opacity: 0.85;
	border-left: 2px dashed rgba(255, 255, 255, 0.6); border-right: 2px dashed rgba(255, 255, 255, 0.6);
}
.taped-pink::before { background: repeating-linear-gradient(45deg, #ff9ec0 0 8px, #ffc6d9 8px 16px); }
.taped-yellow::before { background: repeating-linear-gradient(45deg, #ffd95e 0 8px, #fff0a8 8px 16px); }
.taped-mint::before { background: repeating-linear-gradient(45deg, #7fe0b0 0 8px, #c4f2dc 8px 16px); }
.taped-sky::before { background: repeating-linear-gradient(45deg, #79c6f7 0 8px, #c8eafd 8px 16px); }

/* About section: ruled notebook paper */
.about {
	background-color: var(--paper);
	background-image: repeating-linear-gradient(to bottom, transparent 0 35px, var(--line) 35px 36px);
}
.about-inner { display: flex; flex-direction: column; gap: 18px; max-width: 800px; }
.about h2 { font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; }
.about p { font-size: 1.1rem; line-height: 1.65; color: var(--ink-soft); }
.about a, .quiz-about p a { font-weight: 800; color: var(--blue); text-decoration: underline wavy var(--orange) 2px; text-underline-offset: 4px; }
.about .about-credit { font-size: 0.95rem; }

/* Quiz pages: About this quiz + links to the other quizzes and home */
.quiz-about {
	display: flex; flex-direction: column; gap: 14px; margin-top: 48px; padding: 28px clamp(18px, 4vw, 32px);
	background: var(--white); border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow);
}
.quiz-about h2 { font-size: clamp(1.6rem, 4.5vw, 2.1rem); font-weight: 900; line-height: 1.1; }
.quiz-about h3 { margin-top: 8px !important; font-size: 1.25rem; font-weight: 900; }
.quiz-about p { font-size: 1.05rem; line-height: 1.65; color: var(--ink-soft); }
.quiz-about ul.quiz-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.quiz-links a, .back-home a {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
	font-weight: 800; color: var(--ink); text-decoration: none;
	border: 3px solid var(--ink); border-radius: 999px; box-shadow: 3px 3px 0 var(--ink);
}
.quiz-links a { background: var(--lemon); }
.back-home a { background: var(--sky); }
.quiz-links a:hover, .back-home a:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }

/* Preview only: WordPress centres quiz pages with its own layout settings */
.b5g-page-inner { max-width: 820px; margin: 0 auto; }

/* Block versions of spacing that WordPress's own spacing reset would otherwise remove */
.b5g-home .wrap > .section-head { margin-block: 0 36px; }
.b5g-home .note-card .note-num { font-size: 3rem; color: var(--ink-soft); }
.quiz-about .back-home a { color: var(--ink); text-decoration: none; }

/* Editor only: let the homepage use the full editor width, like the real page */
.editor-styles-wrapper .wp-block.b5g-home { max-width: none; margin-left: 0; margin-right: 0; }

/* ---------- Website C: BrainwillRot ---------- */

/* Logo: "BrainwillRot | Online Quiz". Phones stack "Online Quiz" under the name. */
.logo-brain { font-size: 1.3rem; }
.logo-tag { display: block; font-size: 0.78em; font-weight: 800; color: var(--ink-soft); }
.logo-sep { display: none; }
@media (min-width: 600px) {
	.logo-tag { display: inline; font-size: inherit; }
	.logo-sep { display: inline; white-space: pre; }
}
.site-footer .logo-tag { color: #cfcce6; }

/* Hero carousel: one full hero per quiz. Swipe, arrows or dots; site.js adds the controls. */
.hero-carousel { position: relative; max-width: 1200px; margin: 0 auto; }
.hero-track { display: flex; align-items: center; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.hero-track::-webkit-scrollbar { display: none; }
.b5g-home .hero-track > .hero-slide { flex: 0 0 100%; min-width: 0; max-width: none; margin: 0; scroll-snap-align: start; }
.hero .hero-title { font-size: clamp(2.1rem, 9.5vw, 4.6rem); font-weight: 900; line-height: 1; letter-spacing: -0.035em; }
.hero .hero-title em { font-style: normal; color: var(--blue); text-decoration: underline wavy var(--orange) 4px; text-underline-offset: 8px; }
@media (min-width: 600px) and (max-width: 1023px) {
	.hero .hero-title { font-size: 7.4vw; }
}

/* Quiz picture taped on at a tilt */
.b5g-home .hero-pic { position: relative; justify-self: center; width: 100%; max-width: 440px; margin: 24px 12px 12px; transform: rotate(2deg); }
.hero-pic img, .hero-pic-soon {
	display: block; width: 100%; height: auto; aspect-ratio: 1;
	border: 3px solid var(--ink); border-radius: 22px; box-shadow: 9px 9px 0 var(--ink); object-fit: cover;
}
.hero-pic::before {
	content: ""; position: absolute; top: -14px; left: 50%; z-index: 2; width: 110px; height: 28px;
	transform: translateX(-50%) rotate(-4deg); opacity: 0.85;
	background: repeating-linear-gradient(45deg, #ff9ec0 0 8px, #ffc6d9 8px 16px);
	border-left: 2px dashed rgba(255,255,255,0.6); border-right: 2px dashed rgba(255,255,255,0.6);
}
.b5g-home .hero-pic-soon { display: grid; place-items: center; font-size: 7rem; background: var(--sky) radial-gradient(rgba(255,255,255,0.6) 3px, transparent 3.5px) 0 0 / 20px 20px; }

.hero-controls { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 32px; }
.hero-arrow {
	display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
	font: 900 1.25rem/1 var(--font); color: var(--ink); cursor: pointer;
	background: var(--white); border: 3px solid var(--ink); border-radius: 50%; box-shadow: 3px 3px 0 var(--ink);
}
.hero-arrow:hover { background: var(--yellow); }
.hero-dots { display: flex; }
.hero-dot { display: grid; place-items: center; width: 30px; height: 48px; padding: 0; background: none; border: 0; cursor: pointer; }
.hero-dot::before { content: ""; width: 14px; height: 14px; background: var(--white); border: 2px solid var(--ink); border-radius: 999px; transition: width 0.2s ease; }
.hero-dot[aria-current="true"]::before { width: 26px; background: var(--red); }

/* Editor: show the slides one under another so each is easy to edit */
.editor-styles-wrapper .hero-track { display: block; overflow: visible; }
.editor-styles-wrapper .hero-track > .hero-slide { margin-bottom: 48px; }

/* Dare note on its own, centred */
.solo { display: flex; justify-content: center; }
.solo .dare { width: 100%; max-width: 640px; }
.ref-box .ref-share { margin-bottom: 0; }

/* Quizzes page */
.quizzes-page h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1; }
.b5g-home .wrap > .quizzes-intro { max-width: 40rem; margin-block: -16px 36px; font-size: 1.15rem; color: var(--ink-soft); }
.card h2 { font-size: 1.4rem; font-weight: 900; line-height: 1.15; }
.b5g-home .card-img { margin: 0; padding: 12px 12px 0; }
.card-img img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border: 3px solid var(--ink); border-radius: 16px; }
.card .card-art { margin: 12px 12px 0; height: auto; aspect-ratio: 1; border: 3px solid var(--ink); border-radius: 16px; }

/* Tablets: the longer "Online Quiz:" headline needs a little less size to fit */
@media (min-width: 600px) and (max-width: 1023px) {
	.hero h1 { font-size: 7.4vw; }
}
@media (max-width: 599px) {
	.b5g-home .hero-pic { max-width: 280px; }
}
@media (min-width: 1024px) {
	.hero-track > .hero-slide { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}
.hero .hero-title .marker { white-space: normal; }