/*
 * Braincell Broadcast: the Prime Universe game-show look.
 * Mobile first. Colours are the theme.json palette (all pairs checked against WCAG AA).
 * Hero images arrive as --bcb-img-* custom properties set in functions.php (webp files in assets/img).
 */
:root {
	--bcb-stage: #0d1120;
	--bcb-panel: #161c33;
	--bcb-line: #34406b;
	--bcb-feed: #3df2ff;
	--bcb-spot: #ffd93d;
	--bcb-smooth: #8bd36a;
	--bcb-smart: #7ec8e3;
	--bcb-alarm: #ff6b86;
}
html { scroll-padding-top: 1rem; }
body { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
img { max-width: 100%; height: auto; }

/* A very faint scanline wash: it is decoration only and sits under all content. */
body::before {
	content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
	background:
		radial-gradient(1200px 500px at 50% -10%, rgba(61, 242, 255, .14), transparent 70%),
		repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 4px);
}

/* ---- Skip link and focus ---- */
.bcb-skip {
	position: absolute; left: .75rem; top: -4rem; z-index: 100; padding: .75rem 1rem; border-radius: 10px;
	background: var(--bcb-spot); color: #0d1120; font-weight: 900; text-decoration: none;
}
.bcb-skip:focus { top: .75rem; outline: 3px solid var(--bcb-feed); outline-offset: 2px; }
:where(a, button, summary, input, [tabindex]):focus-visible { outline: 3px solid var(--bcb-feed); outline-offset: 3px; border-radius: 4px; }
.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden;
	padding: 0; position: absolute; width: 1px; word-wrap: normal;
}

/* ---- Header ---- */
.bcb-site-header { position: relative; z-index: 20; }
.bcb-topbar {
	gap: .75rem; padding: .6rem 1rem; border-bottom: 3px solid var(--bcb-feed);
	background: rgba(13, 17, 32, .96); box-shadow: 0 6px 24px rgba(61, 242, 255, .18);
}
.bcb-brandwrap { gap: .6rem; align-items: center; margin: 0; }
.bcb-onair {
	margin: 0; font-size: .72rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--bcb-alarm);
	display: inline-flex; align-items: center; gap: .4rem; border: 2px solid var(--bcb-alarm); border-radius: 6px; padding: .1rem .45rem;
}
.bcb-onair::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--bcb-alarm); animation: bcb-blink 1.6s ease-in-out infinite; }
@keyframes bcb-blink { 50% { opacity: .25; } }
.bcb-brand { margin: 0; font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: 1.05rem; line-height: 1.1; text-transform: uppercase; letter-spacing: .01em; }
.bcb-brand a { color: var(--wp--preset--color--text); text-decoration: none; }
.bcb-nav .wp-block-navigation-item__content, .bcb-nav .wp-block-navigation-item a {
	color: var(--wp--preset--color--text); text-decoration: none; font-weight: 800; padding: .6rem .7rem; min-height: 44px;
	display: inline-flex; align-items: center; border-radius: 8px;
}
.bcb-nav .wp-block-navigation-item__content:hover { color: var(--bcb-spot); }
.bcb-nav .current-menu-item > a, .bcb-nav [aria-current="page"] { color: var(--bcb-spot); box-shadow: inset 0 -3px 0 var(--bcb-spot); }
.bcb-nav .wp-block-navigation__responsive-container-open, .bcb-nav .wp-block-navigation__responsive-container-close {
	min-width: 48px; min-height: 48px; color: var(--wp--preset--color--text);
}
.bcb-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--bcb-stage); color: var(--wp--preset--color--text); padding: 1.25rem; }
.bcb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 1.4rem; }

/* ---- Hero and page headers ---- */
.bcb-hero, .bcb-pagehero {
	position: relative; isolation: isolate; width: 100%; max-width: none; box-sizing: border-box;
	background-color: var(--bcb-panel); background-size: cover; background-position: center right;
	border-bottom: 3px solid var(--bcb-line);
}
.bcb-hero {
	padding: 3rem 1.25rem 3.5rem; min-height: 26rem; display: flex; flex-direction: column; justify-content: center;
	background-image: linear-gradient(180deg, rgba(13, 17, 32, .55), rgba(13, 17, 32, .92)), var(--bcb-img-hero-sm, linear-gradient(135deg, #1f2745, #0d1120));
}
.bcb-pagehero {
	padding: 2.25rem 1.25rem 2rem;
	background-image: linear-gradient(180deg, rgba(13, 17, 32, .55), rgba(13, 17, 32, .94)), linear-gradient(135deg, #1f2745, #0d1120);
}
.bcb-pagehero--fighters { background-image: linear-gradient(180deg, rgba(13, 17, 32, .55), rgba(13, 17, 32, .94)), var(--bcb-img-fighters-sm, linear-gradient(135deg, #1f3d1f, #0d1120 60%, #1f3d52)); }
.bcb-pagehero--story { background-image: linear-gradient(180deg, rgba(13, 17, 32, .55), rgba(13, 17, 32, .94)), var(--bcb-img-story-sm, linear-gradient(135deg, #2b1f45, #0d1120)); }
.bcb-pagehero--cinematics { background-image: linear-gradient(180deg, rgba(13, 17, 32, .55), rgba(13, 17, 32, .94)), var(--bcb-img-cinematics-sm, linear-gradient(135deg, #451f2f, #0d1120)); }
.bcb-hero > *, .bcb-pagehero > * { max-width: 72rem; margin-left: auto; margin-right: auto; width: 100%; box-sizing: border-box; }
.bcb-hero__kicker {
	margin: 0; display: inline-block; width: auto; align-self: flex-start; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; font-size: .85rem;
	color: #0d1120; background: var(--bcb-feed); padding: .25rem .8rem; border-radius: 6px; transform: rotate(-1deg);
}
.bcb-hero__title { font-size: clamp(2.4rem, 9vw, 5rem); text-transform: uppercase; margin: .6rem auto .25rem; text-shadow: 3px 3px 0 #0d1120, 0 0 22px rgba(61, 242, 255, .35); }
.bcb-hero__lede { font-size: var(--wp--preset--font-size--large); max-width: 38rem; margin-block: .5rem 1.25rem; }
.bcb-hero__second { margin: 0; align-self: center; }
.bcb-pagehero h1 { margin: 0; text-shadow: 2px 2px 0 #0d1120; }
.bcb-pagehero__lede { max-width: 40rem; margin: .5rem auto 0; font-size: var(--wp--preset--font-size--large); color: var(--wp--preset--color--text); }
.bcb-pagehero .wp-block-post-excerpt__excerpt { margin: 0; }
.bcb-pagehero .wp-block-post-excerpt { margin-block: .5rem 0; }
.bcb-backlink { margin: 0 auto .5rem; font-weight: 800; }
.bcb-backlink a { display: inline-block; padding: .4rem 0; }

@media (min-width: 701px) {
	.bcb-hero { padding: 5rem 2rem; min-height: 32rem; background-image: linear-gradient(90deg, rgba(13, 17, 32, .94) 0%, rgba(13, 17, 32, .7) 45%, rgba(13, 17, 32, .15) 100%), var(--bcb-img-hero, linear-gradient(135deg, #1f2745, #0d1120)); }
	.bcb-pagehero { padding: 3.25rem 2rem 2.5rem; background-image: linear-gradient(90deg, rgba(13, 17, 32, .94) 0%, rgba(13, 17, 32, .7) 55%, rgba(13, 17, 32, .25) 100%), linear-gradient(135deg, #1f2745, #0d1120); }
	.bcb-pagehero--fighters { background-image: linear-gradient(90deg, rgba(13, 17, 32, .94) 0%, rgba(13, 17, 32, .7) 55%, rgba(13, 17, 32, .25) 100%), var(--bcb-img-fighters, linear-gradient(135deg, #1f3d1f, #0d1120 60%, #1f3d52)); }
	.bcb-pagehero--story { background-image: linear-gradient(90deg, rgba(13, 17, 32, .94) 0%, rgba(13, 17, 32, .7) 55%, rgba(13, 17, 32, .25) 100%), var(--bcb-img-story, linear-gradient(135deg, #2b1f45, #0d1120)); }
	.bcb-pagehero--cinematics { background-image: linear-gradient(90deg, rgba(13, 17, 32, .94) 0%, rgba(13, 17, 32, .7) 55%, rgba(13, 17, 32, .25) 100%), var(--bcb-img-cinematics, linear-gradient(135deg, #451f2f, #0d1120)); }
	.bcb-topbar { padding: .75rem 2rem; }
	.bcb-brand { font-size: 1.3rem; }
}

/* ---- Content area ---- */
.bcb-content { padding: 2rem 1.25rem 4rem; }
.bcb-content .wp-block-post-content > * + h2, .bcb-content .wp-block-post-content > * + .wp-block-heading { margin-top: 2.5rem; }
.bcb-content :where(p, li) { max-width: 68ch; }
.bcb-content .alignwide :where(p, li) { max-width: none; }
.bcb-content .wp-block-code { overflow-x: auto; white-space: pre-wrap; }
.bcb-content .wp-block-table table { border-collapse: collapse; width: 100%; }
.bcb-content .wp-block-table :where(th, td) { border: 1px solid var(--bcb-line); padding: .5rem .7rem; }
.bcb-content .wp-block-table th { background: var(--bcb-panel); }
.bcb-main { overflow-x: clip; }

/* ---- Buttons and links ---- */
.bcb-button, .wp-block-button__link, .wp-element-button { transition: transform .12s ease; }
.bcb-button:hover, .wp-block-button__link:hover { transform: translateY(-2px); }
.bcb-link { color: var(--bcb-feed); font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; display: inline-block; padding-block: .6rem; }
.bcb-link:hover { color: var(--bcb-spot); }

/* ---- Factions ---- */
.bcb-factions { gap: 1rem; }
.bcb-faction { padding: 1.1rem 1.25rem; border-radius: 16px; background: var(--bcb-panel); border: 2px solid var(--bcb-line); border-top-width: 8px; }
.bcb-faction--smooth { border-top-color: var(--bcb-smooth); }
.bcb-faction--smart { border-top-color: var(--bcb-smart); }
.bcb-faction h3 { margin-top: 0; }
.bcb-faction--smooth h3 { color: var(--bcb-smooth); }
.bcb-faction--smart h3 { color: var(--bcb-smart); }

/* ---- News ---- */
.bcb-newsgrid { gap: 1.25rem; }
.bcb-newscard { background: var(--bcb-panel); border: 2px solid var(--bcb-line); border-radius: 16px; padding: 1rem; height: 100%; box-sizing: border-box; }
.bcb-newscard .wp-block-post-featured-image { margin: -1rem -1rem .75rem; }
.bcb-newscard .wp-block-post-featured-image img { border-radius: 14px 14px 0 0; width: 100%; }
.bcb-newscard__date, .wp-block-post-date { color: var(--wp--preset--color--muted); font-size: .9rem; margin: 0; }
.bcb-newscard .wp-block-post-title { margin: .25rem 0 .5rem; }
.bcb-newscard .wp-block-post-title a { text-decoration: none; display: inline-block; padding-block: 2px; }
.bcb-newscard .wp-block-post-title a:hover { text-decoration: underline; }
.wp-block-query-pagination { margin-top: 1.5rem; gap: 1rem; }
.wp-block-query-pagination a, .wp-block-query-pagination .page-numbers { padding: .6rem .8rem; min-height: 44px; display: inline-flex; align-items: center; }

/* ---- Footer ---- */
.bcb-footer { margin-top: 2rem; padding: 2rem 1.25rem 2.5rem; border-top: 3px solid var(--bcb-feed); background: #090c18; box-sizing: border-box; max-width: none; }
.bcb-footer > * { max-width: 72rem; margin-left: auto; margin-right: auto; }
.bcb-footer__row { gap: 1rem; align-items: center; }
.bcb-footer__tag { margin: 0; }
.bcb-footer__links { margin-block: 1.25rem .5rem; }
.bcb-footer__links a { display: inline-block; padding: .5rem .25rem; font-weight: 700; }
.bcb-footer__fine { margin: 0; color: var(--wp--preset--color--muted); font-size: .9rem; }

/* ---- Search form and misc ---- */
.wp-block-search__input { background: var(--bcb-panel); color: var(--wp--preset--color--text); border: 2px solid var(--bcb-line); border-radius: 10px; padding: .6rem .8rem; min-height: 44px; }
.wp-block-search__button { min-height: 44px; border-radius: 999px; background: var(--bcb-spot); color: #0d1120; border: 0; font-weight: 900; padding: .6rem 1.2rem; }
.wp-block-image img { border-radius: 12px; }

/* ---- Kid-voice pass (2026-10-07): playful, chunky, comic-book ---- */
.bcb-onair { white-space: nowrap; flex: none; }
.bcb-hero__lede { max-width: 72rem; padding-right: max(0px, calc(min(100%, 72rem) - 40rem)); }
.bcb-hero__title { transform: rotate(-1.5deg); transform-origin: left center; }

/* How to play: three numbered sticker cards. */
.bcb-steps { gap: 1rem; counter-reset: none; }
.bcb-step {
	position: relative; padding: 1.4rem 1.2rem 1.1rem; border-radius: 18px; background: var(--bcb-panel);
	border: 3px solid var(--bcb-line); box-shadow: 6px 6px 0 #05070f;
}
.bcb-step h3 { margin: .2rem 0 .4rem; color: var(--bcb-spot); }
.bcb-step p { margin: 0; }
.bcb-step .bcb-step__num {
	position: absolute; top: -1rem; left: 1rem; margin: 0; width: 2.4rem; height: 2.4rem; display: grid; place-items: center;
	border-radius: 50%; background: var(--bcb-feed); color: #0d1120; font-family: var(--wp--preset--font-family--display);
	font-weight: 900; font-size: 1.25rem; transform: rotate(-8deg); box-shadow: 3px 3px 0 #05070f;
}
.bcb-step:nth-child(2) .bcb-step__num { background: var(--bcb-smooth); transform: rotate(6deg); }
.bcb-step:nth-child(3) .bcb-step__num { background: var(--bcb-alarm); transform: rotate(-4deg); }

/* Factions: chunky offset shadow, tilted headings like stickers. */
.bcb-faction { border-width: 3px; border-top-width: 10px; box-shadow: 6px 6px 0 #05070f; }
.bcb-faction h3 { display: inline-block; transform: rotate(-2deg); }
.bcb-newscard { border-width: 3px; box-shadow: 6px 6px 0 #05070f; transition: transform .12s ease; }
.bcb-newscard:hover { transform: translate(-2px, -2px); }

/* "More fighters" teaser line. */
.bcb-more { font-weight: 700; color: var(--wp--preset--color--muted); }
.bcb-more a { font-size: 1.15rem; font-weight: 900; }

/* Section headings get a little highlighter swipe. */
.bcb-content h2.wp-block-heading { text-decoration: underline wavy var(--bcb-spot) 3px; text-underline-offset: .3em; text-decoration-skip-ink: none; }

@media (prefers-reduced-motion: reduce) {
	.bcb-onair::before { animation: none; }
	.bcb-newscard { transition: none; }
	.bcb-button, .wp-block-button__link { transition: none; }
	html { scroll-behavior: auto; }
}