/*
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; }

.clip-resource__header { padding: 20px 24px 0; }
.clip-resource__excerpt { color: #5a6a72; }
.clip-resource__meta-row { display: flex; gap: 12px; font-size: 14px; color: #5a6a72; padding: 8px 24px; }
.clip-resource__time { display: inline-flex; align-items: center; gap: 4px; }

.clip-resource__body { padding: 0 24px 24px; }
.clip-resource__body--with-sidebar { display: grid; grid-template-columns: 1fr 260px; gap: 24px; }

/* 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; }
.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; }
.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;
	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; }
	.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; }
}