/*
Theme Name: RE:Quest
Description: RE:Quest child theme (parent: Twenty Twenty-Five). One theme, four audience-tonal variants driven by resource_level.
Template: twentytwentyfive
Version: 0.2.0
Text Domain: requestquest
*/

/* ---------------------------------------------------------------
   1. Header / nav — white, bright active states (no longer the
   dark-ink bar). Region + stage labels swap colour to stay
   readable on white; "selected" states get a bright fill instead
   of a dark one so the site reads as colourful, not corporate.
   ------------------------------------------------------------- */
.rq-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 16px 24px;
	background: #fff;
	border-bottom: 3px solid var(--wp--preset--color--accent);
	flex-wrap: wrap;
}

.rq-logo {
	font-size: 20px;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.rq-logo span { color: var(--wp--preset--color--accent); }

.rq-region-switch { display: flex; gap: 6px; }
.rq-region-pill {
	font-size: 14px;
	padding: 7px 14px;
	border-radius: 16px;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.rq-region-pill:hover { background: #f1f1f1; }
.rq-region-pill.is-active { background: var(--wp--preset--color--ink); color: #fff; }

.rq-stage-nav {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	padding: 12px 24px;
	background: #fff;
	border-bottom: 0.5px solid #ececec;
}
.rq-stage-nav a {
	font-size: 15px;
	font-weight: 700;
	padding: 8px 16px;
	border-radius: 16px;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.rq-stage-nav a:hover { background: #f1f1f1; }
.rq-stage-nav a.is-active:hover { opacity: 0.9; }

/* ---------------------------------------------------------------
   2. Hero / banner
   ------------------------------------------------------------- */
.rq-hero {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 24px;
	align-items: center;
	padding: 20px 24px;
	background: var(--wp--preset--color--paper);
}
.rq-hero h1 { margin: 0 0 8px; }
.rq-hero p.rq-hero-sub { color: #5a6a72; margin: 0 0 14px; max-width: 420px; font-size: 1.125rem; }
/* Homepage: random palette colour as hero background — force white text regardless of which colour lands */
.rq-hero.rq-hero--palette h1,
.rq-hero.rq-hero--palette p.rq-hero-sub { color: #fff; }
/* Extra breathing room for the text column */
.rq-hero > div:first-child { padding-left: 16px; }

.rq-hero-photo {
	border-radius: 16px;
	/* ~3/5 of the old 4:3 box height at the same column width (1 / (0.75 * 0.6) ≈ 20/9) */
	aspect-ratio: 20/9;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.rq-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Only the empty/placeholder state gets the dashed "no photo yet" treatment —
   once a real banner is picked, .rq-hero-photo should just look like a photo. */
.rq-hero-photo--empty {
	border: 1.5px dashed #c9c0ac;
	background: #F1EAD9;
}

/* Full-width area below the hero for page content — mainly the
   [resource_search] shortcode, which brings its own component styles. */
.rq-content-area { padding: 0 24px 24px; }

.rq-search {
	display: flex;
	align-items: center;
	background: #fff;
	border-radius: 24px;
	padding: 12px 20px;
	gap: 8px;
	font-size: 16px;
	font-weight: 700;
}

/* Tonal variant: KS1 & 2 — warm, rounded, playful */
body.rq-section-ks1-2 .rq-hero { background: #FBF6EC; border-radius: 0 0 24px 24px; }
body.rq-section-ks1-2 .rq-hero h1 { font-size: 2.2rem; }

/* Tonal variant: KS3 — bold, purple hero */
body.rq-section-ks3 .rq-hero { background: #5B4B9E; }
body.rq-section-ks3 .rq-hero h1,
body.rq-section-ks3 .rq-hero p { color: #fff; text-transform: uppercase; letter-spacing: 0.3px; }

/* Tonal variant: GCSE & A-Level — blue hero */
body.rq-section-gcse-a-level .rq-hero { background: #1D6FA5; }
body.rq-section-gcse-a-level .rq-hero h1,
body.rq-section-gcse-a-level .rq-hero p { color: #fff; font-size: 1.7rem; font-weight: 400; }

/* Tonal variant: Teachers — dark hero, matches the ink stage colour */
body.rq-section-teachers .rq-hero { background: #22303A; }
body.rq-section-teachers .rq-hero h1,
body.rq-section-teachers .rq-hero p { color: #fff; }

/* ---------------------------------------------------------------
   3. Section headings — shared across homepage + stage pages
   ------------------------------------------------------------- */
.rq-section-heading { padding: 0 24px; font-size: 1.35rem; font-weight: 700; color: var(--wp--preset--color--ink); margin: 0 0 4px; }
.rq-section-subheading { padding: 0 24px; font-size: 1.05rem; color: #5a6a72; margin: 0 0 16px; }
.rq-section-heading--large { font-size: 1.9rem; margin-top: 36px; }
/* Gap between hero and the first section heading on every page */
.rq-hero + .rq-section-heading { margin-top: 36px; }

/* ---------------------------------------------------------------
   4. Topic bubbles / pills — used on stage pages once a stage is
   picked, sized up so "browse by topic" feels like a real second
   way in, not an afterthought.
   ------------------------------------------------------------- */
.rq-topics { display: flex; flex-wrap: wrap; gap: 20px; padding: 8px 24px 28px; }
.rq-topic-bubble { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 96px; text-decoration: none; }
.rq-topic-bubble .rq-dot { width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; }
.rq-topic-bubble span { font-size: 14px; font-weight: 700; color: var(--wp--preset--color--ink); text-align: center; line-height: 1.25; }

.rq-topic-pills { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 24px 20px; }
.rq-topic-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: #fff; padding: 8px 16px; border-radius: 16px; text-decoration: none; }

/* ---------------------------------------------------------------
   5. Stage cards — the primary "choose your stage" moment: big,
   icon-led, brightly coloured, one distinct colour per stage.
   ------------------------------------------------------------- */
.rq-stage-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; padding: 0 24px 28px; }
.rq-stage-card {
	background: #fff;
	border: 0.5px solid #e5e5e5;
	border-radius: 16px;
	padding: 22px;
	text-decoration: none;
	display: block;
	text-align: center;
}
.rq-stage-card:hover { border-color: var(--wp--preset--color--accent); }
.rq-stage-card .rq-icon {
	width: 64px;
	height: 64px;
	border-radius: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 14px;
	color: #fff;
}
.rq-stage-card strong { display: block; font-size: 19px; font-weight: 700; color: var(--wp--preset--color--ink); }
.rq-stage-card small { display: block; font-size: 14px; color: #5a6a72; margin-top: 4px; }

/* ---------------------------------------------------------------
   6. Resource cards — used for search results and the "not sure
   where to start" random picks.
   ------------------------------------------------------------- */
.rq-resource-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; padding: 0 24px 24px; }
.rq-card { border: 0.5px solid #e5e5e5; border-radius: 12px; overflow: hidden; text-decoration: none; display: block; }
.rq-card-media { aspect-ratio: 4/3; position: relative; }
.rq-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rq-card-body { padding: 12px; }
.rq-card-body strong { display: block; font-size: 15px; color: var(--wp--preset--color--ink); }
.rq-card-body small { font-size: 13px; color: #5a6a72; }

/* ---------------------------------------------------------------
   7. Teachers list / filter bar
   ------------------------------------------------------------- */
.rq-filter-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 16px 24px 0; }
.rq-filter-chip { display: flex; align-items: center; gap: 4px; font-size: 14px; color: var(--wp--preset--color--ink); border: 0.5px solid #e5e5e5; border-radius: 8px; padding: 8px 12px; text-decoration: none; }
.rq-filter-chip.is-active { background: var(--wp--preset--color--ink); border-color: var(--wp--preset--color--ink); color: #fff; font-weight: 700; }

.rq-resource-list { padding: 18px 24px; }
.rq-resource-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 0.5px solid #e5e5e5; text-decoration: none; }
.rq-resource-row .rq-tag-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.rq-resource-row .rq-row-title { font-size: 15px; font-weight: 700; color: var(--wp--preset--color--ink); margin: 0; }
.rq-resource-row .rq-row-desc { font-size: 13px; color: #5a6a72; margin: 2px 0 0; }
.rq-resource-row .rq-row-meta { font-size: 12px; color: #5a6a72; white-space: nowrap; }

.rq-quick-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; padding: 0 24px 20px; }
.rq-quick-link { border: 0.5px solid #e5e5e5; border-radius: 10px; padding: 14px; display: flex; align-items: center; gap: 8px; color: var(--wp--preset--color--ink); text-decoration: none; font-size: 14px; font-weight: 700; }

/* ---------------------------------------------------------------
   8. Footer — larger, more present
   ------------------------------------------------------------- */
.rq-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 28px 24px;
	border-top: 0.5px solid #e5e5e5;
	font-size: 15px;
	color: #5a6a72;
	flex-wrap: wrap;
	gap: 12px;
}
.rq-footer a { color: #5a6a72; }
.rq-footer a:hover { color: var(--wp--preset--color--accent); }

/* ---------------------------------------------------------------
   9. Resource detail (single-resource.php) — ported from Divi-Child,
   recoloured off the new palette (no more YFC hex values).
   ------------------------------------------------------------- */
.clip-resource__hero {
	position: relative;
	min-height: 320px;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: flex-end;
}
.clip-resource__hero-overlay {
	background: linear-gradient(0deg, rgba(34,48,58,0.75) 0%, rgba(34,48,58,0) 60%);
	width: 100%;
	padding: 24px;
	color: #fff;
}
.clip-resource__badge {
	display: inline-block;
	font-size: 13px;
	color: #fff;
	padding: 5px 12px;
	border-radius: 12px;
	margin-right: 6px;
}
.clip-resource__badge--type     { background: var(--wp--preset--color--people); }
.clip-resource__badge--featured { background: var(--wp--preset--color--ethics-and-issues); color: #3a2c04; }

/* clamp so the gap eases down on narrow screens rather than staying a
   flat 30px everywhere — scales with viewport width, capped at 30px. */
.clip-resource__header { padding: 20px 24px 0; margin-bottom: clamp(16px, 5vw, 30px); }
/* Subtitle + type/featured tags + time estimate, one row. These used to
   stack (subtitle, then tags on their own line below) — and the tags'
   row had its own left/right padding on top of the header's, which is
   why the tags looked shoved in from the edge relative to the title. */
.clip-resource__subrow { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.clip-resource__excerpt { color: #5a6a72; margin: 0; }
.clip-resource__meta-row { display: flex; align-items: center; gap: 12px; font-size: 14px; color: #5a6a72; }
.clip-resource__time { display: inline-flex; align-items: center; gap: 4px; }

.clip-resource__body { padding: 28px 24px 32px; }
.clip-resource__body--with-sidebar { display: grid; grid-template-columns: 1fr 260px; gap: 24px; }
@media (min-width: 900px) {
	.clip-resource__body { padding: 50px 24px 50px; }
}

/* ── Text-type reading column ───────────────────────────────────────────
   Text resources are long-form articles, so everything below the
   full-bleed hero sits in one centred column instead of stretching to the
   viewport. Width comes from theme.json's contentSize (960px) via the
   variable core already publishes, so the front end, the block editor
   canvas and the constrained blocks inside the body all agree on one
   number — change it in theme.json, not here.

   Narrower viewports need no media query: max-width simply stops applying
   and the existing 24px padding becomes the gutter.

   Only the Text type is constrained. Video/Image split panels, galleries,
   timelines and game bands are deliberately full-bleed. */
.clip-resource--text .clip-resource__header,
.clip-resource--text .clip-resource__meta-row,
.clip-resource--text .clip-resource__body,
.clip-resource--text .clip-resource__categories {
	max-width: var(--wp--style--global--content-size, 960px);
	margin-inline: auto;
}

/* Text-type article body — migrated content already uses the standard
   WP alignleft/alignright/aligncenter classes (confirmed against real
   post_content), so this just needs to actually float them with room
   for text to wrap, which they didn't have before. */
.clip-resource__content::after { content: ""; display: table; clear: both; }
.clip-resource__content img { max-width: 100%; height: auto; border-radius: 8px; }
.clip-resource__content img.alignleft { float: left; margin: 4px 20px 16px 0; }
.clip-resource__content img.alignright { float: right; margin: 4px 0 16px 20px; }
.clip-resource__content img.aligncenter { display: block; float: none; margin: 16px auto; }
.clip-resource__sidebar-inner {
	border-left: 4px solid var(--wp--preset--color--accent);
	padding-left: 14px;
}

.clip-resource__embed-wrap { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.clip-resource__embed-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.clip-resource__video { width: 100%; border-radius: 10px; }

/* Image Gallery — same 1/2/3 responsive card treatment as Video Gallery:
   white bg, full border, rounded corners, image flush at the top. */
.clip-resource__gallery { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: clamp(28px, 6vw, 50px); }
.clip-resource__gallery-item {
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 14px;
	overflow: hidden;
	margin: 0;
}
.clip-resource__gallery-item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 0; display: block; }
.clip-resource__gallery-item figcaption { padding: 12px 14px 14px; }
.clip-resource__gallery-item figcaption strong { display: block; color: var(--wp--preset--color--ink); margin-bottom: 4px; }
.clip-resource__gallery-item figcaption span { display: block; font-size: 0.9rem; color: #5a6a72; }

@media (min-width: 700px) {
	.clip-resource__gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
	.clip-resource__gallery { grid-template-columns: repeat(3, 1fr); }
}

/* Video Gallery — 1 col mobile / 2 tablet / 3 desktop. Each video gets
   its own card: white bg, full border, rounded corners, video flush
   against the top (overflow:hidden clips its own radius so it doesn't
   double up with the card's), text below. */
.clip-resource__video-gallery { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: clamp(28px, 6vw, 50px); }
.clip-resource__video-gallery-item {
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 14px;
	overflow: hidden;
}
.clip-resource__video-gallery-item .clip-resource__video { display: block; width: 100%; border-radius: 0; }
.clip-resource__video-gallery-item .clip-resource__el-title { margin: 12px 14px 4px; font-weight: 700; color: var(--wp--preset--color--ink); }
.clip-resource__video-gallery-item .clip-resource__el-desc { margin: 0 14px 14px; font-size: 0.9rem; color: #5a6a72; }

@media (min-width: 700px) {
	.clip-resource__video-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
	.clip-resource__video-gallery { grid-template-columns: repeat(3, 1fr); }
}

/* Timeline carousel — always full page width (the band's own container
   has no max-width, matching .rq-hero elsewhere on the site). Horizontal
   scroll + scroll-snap gives touch-swipe for free; Back/Next (JS) just
   nudge the scroll position by one slide. How many slides show at once
   is pure CSS via flex-basis at each breakpoint — 2 narrow / 3 medium /
   4 wide, per the brief. */
.clip-resource__timeline-band { padding: 32px 24px; }
.clip-resource__timeline-viewport {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.clip-resource__timeline-viewport::-webkit-scrollbar { display: none; }
.clip-resource__timeline-track { display: flex; gap: 16px; }
.clip-resource__timeline-slide {
	flex: 0 0 calc((100% - 16px) / 2);
	scroll-snap-align: start;
	background: #fff;
	border-radius: 14px;
	overflow: hidden;
}
.clip-resource__timeline-img { aspect-ratio: 4/3; background: var(--wp--preset--color--ink); }
.clip-resource__timeline-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.clip-resource__timeline-text { padding: 14px; }
.clip-resource__timeline-text h3 { font-size: 1rem; margin: 0 0 6px; color: var(--wp--preset--color--ink); }
.clip-resource__timeline-text p { font-size: 0.9rem; margin: 0; color: #5a6a72; }

.clip-resource__timeline-nav { display: flex; justify-content: center; gap: 12px; margin-top: 20px; }
.clip-resource__timeline-btn {
	background: #fff;
	color: var(--wp--preset--color--ink);
	border: none;
	border-radius: 20px;
	padding: 10px 20px;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
}
.clip-resource__timeline-btn:hover:not(:disabled) { opacity: 0.85; }
.clip-resource__timeline-btn:disabled { opacity: 0.4; cursor: default; }

@media (min-width: 700px) {
	.clip-resource__timeline-slide { flex-basis: calc((100% - 32px) / 3); }
}
@media (min-width: 1100px) {
	.clip-resource__timeline-slide { flex-basis: calc((100% - 48px) / 4); }
}

/* Game — always a full-width coloured block (no split, on any screen
   size). Iframe aspect ratio comes from the embed's own width/height
   (set inline via PHP), not a hardcoded 16:9, since real game embeds
   are 770x460, not widescreen. */
.clip-resource__game-band { padding: 32px 24px; }
.clip-resource__game-embed {
	position: relative;
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	border-radius: 14px;
	overflow: hidden;
	background: #000;
}
.clip-resource__game-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.clip-resource__game-element { margin-top: 16px; text-align: center; }
.clip-resource__game-element img { max-width: 100%; border-radius: 10px; display: block; margin: 0 auto; }
.clip-resource__game-link {
	display: inline-block;
	background: #fff;
	color: var(--wp--preset--color--ink);
	font-weight: 700;
	padding: 10px 20px;
	border-radius: 20px;
	text-decoration: none;
}
.clip-resource__game-link:hover { opacity: 0.85; }

/* File — coloured block sitting below the body text (see the PHP: it's
   placed after .clip-resource__body closes, not before). One row per
   file: icon left, title/description right, extension badge at the
   far end. */
.clip-resource__file-band { padding: 24px; }
.clip-resource__files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.clip-resource__file-item { margin: 0; }
.clip-resource__file-link {
	display: flex;
	align-items: center;
	gap: 16px;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 12px;
	padding: 14px 16px;
	text-decoration: none;
}
.clip-resource__file-link:hover { background: rgba(255, 255, 255, 0.25); }
.clip-resource__file-icon { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: #fff; }
.clip-resource__file-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.clip-resource__file-name { font-weight: 700; color: #fff; }
.clip-resource__file-desc { font-size: 0.9rem; color: rgba(255, 255, 255, 0.85); }
.clip-resource__file-ext { flex-shrink: 0; background: #fff; color: var(--wp--preset--color--ink); font-weight: 700; font-size: 11px; padding: 4px 8px; border-radius: 4px; }

.clip-resource__text-file a { color: var(--wp--preset--color--accent); }

/* Footer — topic tags (colour-coded per topic, same as everywhere else
   on the site, clickable through to that topic's page) + a proper
   Back button rather than a plain text link. */
.clip-resource__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 24px;
	border-top: 1px solid #e5e5e5;
	margin-top: 8px;
}
.clip-resource__categories { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.clip-resource__meta-label { font-weight: 700; color: var(--wp--preset--color--ink); font-size: 14px; margin-right: 2px; }
.clip-resource__category {
	display: inline-block;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	padding: 6px 14px;
	border-radius: 14px;
	text-decoration: none;
}
.clip-resource__category:hover { opacity: 0.85; }

.clip-resource__back-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	font-weight: 700;
	font-size: 14px;
	padding: 10px 20px;
	border: 2px solid var(--wp--preset--color--ink);
	border-radius: 20px;
	white-space: nowrap;
}
.clip-resource__back-link:hover { background: var(--wp--preset--color--ink); color: #fff; }

/* Video-type split layout — coloured media panel + white content panel.
   Media panel is first in the DOM, so on narrow screens (single column)
   it naturally lands on top with no reordering needed; on desktop it's
   moved to the right visually via `order` while staying first in the
   DOM (so "video on top on mobile" doesn't need a separate rule). */
.clip-resource__split { display: grid; grid-template-columns: 1fr; }
.clip-resource__split-media {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 28px 24px;
	margin: 0 12px;
	border-radius: 20px;
	overflow: hidden;
}
.clip-resource__split-media .clip-resource__embed-wrap,
.clip-resource__split-media .clip-resource__video-wrap,
.clip-resource__split-media .clip-resource__split-image { width: 100%; margin: 0; }
.clip-resource__split-media .clip-resource__split-image img { width: 100%; border-radius: 10px; display: block; }
.clip-resource__split-media .clip-resource__el-title,
.clip-resource__split-media .clip-resource__el-desc { color: #fff; }
.clip-resource__split-content { background: #fff; }

@media (min-width: 900px) {
	.clip-resource__split {
		grid-template-columns: 1fr 1fr;
		align-items: start;
		gap: 32px;
		padding: 32px 32px 32px 0;
		background: #fff;
	}
	.clip-resource__split-media { order: 2; padding: 40px; margin: 0; }
	.clip-resource__split-content { order: 1; }
}

@media (max-width: 700px) {
	.clip-resource__hero { min-height: 180px; }
	.clip-resource__body--with-sidebar { grid-template-columns: 1fr; }
	.rq-hero { grid-template-columns: 1fr; }
}