/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/* ==========================================================================
   FilmObserver modernization
   Brand palette pulled from the site's own nav bar / header — no new hues
   introduced, just applied where GP's stock blue (#1e73be) was still in use.
   ========================================================================== */

:root {
	--fo-accent: #48111b;
	--fo-accent-light: #6e1b29;
	--fo-accent-dark: #300b11;
	--fo-ink: #1a1d24;
	--fo-muted: #6b6b72;
	--fo-border: #e7e3e1;
	--fo-card-bg: #ffffff;
	--fo-page-bg: #f6f4f3;

	/* GeneratePress reads this variable for links/buttons site-wide */
	--accent: var(--fo-accent);
}

body {
	background-color: var(--fo-page-bg);
}

/* GP compiles link_color as a literal hardcoded "a{color:#1e73be}" rule,
   not through the --accent variable, so overriding --accent above doesn't
   touch it. Override it directly, site-wide. */
a {
	color: var(--fo-accent);
	transition: color 0.15s ease;
}
a:hover,
.entry-meta a:hover {
	color: var(--fo-accent-light);
}

p a {
	font-weight: bold;
}
/* ==========================================================================
   Header / logo + search icon (mirrors GameObserver's layout)

   The search-modal trigger is moved into the header via functions.php
   (generate_after_logo). Here we lay the header out so the logo stays
   centered and the search icon sits pinned to the right edge — the icon is
   absolutely positioned so it never pushes the logo off-center or wraps.

   Logo sizing uses max-height (not width) as the primary bound: this logo's
   stored attachment metadata reports width="0" height="0" (a WordPress/SVG
   quirk), so constraining height directly is the robust way to guarantee it
   can't grow tall enough to overlap the nav bar below.
   ========================================================================== */
header.site-header .inside-header {
	display: flex !important;
	justify-content: center;
	align-items: center;
	position: relative;
	flex-wrap: nowrap;
	padding-top: 22px;
	padding-bottom: 22px;
}

header.site-header .inside-header .site-logo {
	max-width: calc(100% - 90px);
	text-align: center;
	flex: 0 1 auto;
}
header.site-header .inside-header .site-logo img {
	/* This logo's stored attachment metadata is width="0" height="0" (a
	   WordPress/SVG quirk), so width:auto alone collapses to 0 and the logo
	   vanishes. Give it a DEFINITE height plus the real viewBox aspect-ratio
	   (904.167 x 402.062) — the browser then computes width from those two,
	   ignoring the broken intrinsic 0x0. ~76px tall on phones → ~132px on
	   wide desktops (squarer logo than GameObserver's, kept shorter to match
	   a comparable header height). */
	height: clamp(76px, 11vw, 132px);
	aspect-ratio: 904.167 / 402.062;
	width: auto;
	max-width: 100%;
	display: inline-block;
}

/* Search icon pinned to the right — absolute so the centered logo is
   unaffected by its presence. */
header.site-header .inside-header span.menu-bar-item {
	position: absolute !important;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	margin: 0 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: clamp(38px, 4.5vw, 54px);
	height: clamp(38px, 4.5vw, 54px);
	z-index: 5;
}
header.site-header .inside-header span.menu-bar-item a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	color: var(--base-3, #fff);
}
header.site-header .inside-header span.menu-bar-item .gp-icon {
	display: flex !important;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
/* The trigger contains TWO SVGs: a magnifier (modal closed) and an X
   (modal open). Show only the magnifier by default; swap to the X when the
   trigger's aria-expanded flips to true. */
header.site-header .inside-header span.menu-bar-item svg {
	display: block;
	width: clamp(20px, 2.2vw, 28px) !important;
	height: clamp(20px, 2.2vw, 28px) !important;
	flex-shrink: 0;
}
header.site-header .inside-header span.menu-bar-item svg + svg {
	display: none !important;
}
header.site-header .inside-header span.menu-bar-item a[aria-expanded="true"] svg:first-of-type {
	display: none !important;
}
header.site-header .inside-header span.menu-bar-item a[aria-expanded="true"] svg + svg {
	display: block !important;
}

@media (max-width: 768px) {
	header.site-header .inside-header {
		padding-left: 16px;
		padding-right: 16px;
		box-sizing: border-box;
	}
	header.site-header .inside-header span.menu-bar-item {
		right: 12px;
	}
}

/* ==========================================================================
   Archive / category / tag / search / author — card grid
   ========================================================================== */

/* Archive, search-results and author pages share the same post-list markup,
   so they get one identical card treatment. body:is(...) applies all of it to
   the three page types at once (specificity is the same as body.archive). */
body:is(.archive, .search-results, .author) .site-main {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem;
	padding: 0 1.25rem;
}

@media (max-width: 600px) {
	body:is(.archive, .search-results, .author) .site-main {
		grid-template-columns: 1fr;
		gap: 1.5rem;
		padding: 0 1rem;
	}
}

/* Anything that isn't a post card (pagination, search page header) spans the
   full row instead of being squeezed into one grid cell. */
body:is(.archive, .search-results, .author) .site-main > *:not(article) {
	grid-column: 1 / -1;
}

body:is(.archive, .search-results, .author) article.post {
	background: var(--fo-card-bg);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(26, 29, 36, 0.08);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body:is(.archive, .search-results, .author) article.post:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 24px rgba(26, 29, 36, 0.14);
}

body:is(.archive, .search-results, .author) article.post .inside-article {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 0;
}

/* Source order is title/meta first, then image — flex order flips it visually
   so the image reads first without touching the underlying markup. */
body:is(.archive, .search-results, .author) article .entry-header {
	order: 2;
	padding: 1.1rem 1.25rem 0;
}
body:is(.archive, .search-results, .author) article .post-image {
	order: 1;
	margin: 0;
}
body:is(.archive, .search-results, .author) article .entry-summary {
	order: 3;
	padding: 0.5rem 1.25rem 1.25rem;
	flex-grow: 1;
}

/* Card footer (category link, tags, "Leave a comment") dropped entirely —
   too much clutter at card size. Category still shows on the single post. */
body:is(.archive, .search-results, .author) footer.entry-meta {
	display: none;
}

body:is(.archive, .search-results, .author) .post-image img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
	width: 100%;
	display: block;
}

body:is(.archive, .search-results, .author) .entry-title {
	font-size: 1.15rem;
	line-height: 1.35;
	margin: 0 0 0.4rem;
}
body:is(.archive, .search-results, .author) .entry-title a {
	color: var(--fo-ink);
}
body:is(.archive, .search-results, .author) .entry-title a:hover {
	color: var(--fo-accent);
}

body:is(.archive, .search-results, .author) header .entry-meta {
	font-size: 0.8rem;
	color: var(--fo-muted);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

body:is(.archive, .search-results, .author) .entry-summary p {
	font-size: 0.93rem;
	color: #43434a;
}
body:is(.archive, .search-results, .author) .read-more {
	color: var(--fo-accent);
	font-weight: 600;
}

/* ==========================================================================
   Single post
   ========================================================================== */

body.single .entry-title {
	font-size: 2.1rem;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

body.single .featured-image img,
body.single .post-image img,
body.single .entry-content img:not(.gop-section, .gop-section *) {
	border-radius: 16px;
	box-shadow: 0 8px 24px rgba(26, 29, 36, 0.15);
}

body.single .entry-meta {
	color: var(--fo-muted);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

body.single .entry-content {
	font-size: 1.08rem;
	line-height: 1.75;
	color: #2a2a2f;
}
body.single .entry-content p {
	margin-bottom: 1.4em;
}
body.single .entry-content h2:not(.gop-section, .gop-section *),
body.single .entry-content h3:not(.gop-section, .gop-section *) {
	color: var(--fo-ink);
	margin-top: 1.8em;
}
body.single .entry-content a:not(.gop-section, .gop-section *) {
	color: var(--fo-accent);
}
body.single .entry-content a:not(.gop-section, .gop-section *):hover {
	color: var(--fo-accent-light);
}

body.single .entry-content blockquote:not(.gop-section, .gop-section *) {
	border-left: 4px solid var(--fo-accent);
	background: var(--fo-page-bg);
	padding: 1rem 1.5rem;
	border-radius: 0 10px 10px 0;
	font-style: italic;
	color: var(--fo-ink);
}

/* Pill badge for both categories and tags, matching. GeneratePress's own
   icon font injects a folder/tag glyph via .cat-links:before /
   .tags-links:before — that's a separate pseudo-element from the link
   text, invisible in raw HTML, so kill it explicitly. Now that the site
   uses GP's SVG icon mode (needed for the search modal trigger to work),
   the same icon shows up as an actual inline <span class="gp-icon"> SVG
   instead — hide that too. */
body.single footer.entry-meta .cat-links:before,
body.single footer.entry-meta .tags-links:before {
	content: none;
}
body.single footer.entry-meta .cat-links .gp-icon,
body.single footer.entry-meta .tags-links .gp-icon {
	display: none;
}
/* WP separates each category/tag link with a literal ", " text node —
   fine for plain text, cramped for pills. font-size:0 on the wrapper
   collapses those text nodes to nothing; the pills restore their own
   font-size and get real breathing room from flex gap instead. */
body.single footer.entry-meta .cat-links,
body.single footer.entry-meta .tags-links {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-size: 0;
}
/* Space between the category group and the tag group themselves — the
   nav (prev/next links) also lives inside this footer, so we're leaving
   footer.entry-meta's own layout alone and only spacing the link groups. */
body.single footer.entry-meta .cat-links {
	margin-right: 0.5rem;
	margin-bottom: 0.5rem;
}
body.single footer.entry-meta .cat-links a,
body.single footer.entry-meta .tags-links a {
	display: inline-block;
	background: var(--fo-accent);
	color: #fff;
	padding: 0.2rem 0.7rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
}
body.single footer.entry-meta .cat-links a:hover,
body.single footer.entry-meta .tags-links a:hover {
	background: var(--fo-accent-light);
}

/* Prev/next post navigation — was two plain stacked text links.
   "Previous"/"Next" labels are injected via ::before so nothing in the
   markup needs to change. */
body.single .post-navigation {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
	margin: 2.5rem 0 0.5rem;
}

@media (max-width: 600px) {
	body.single .post-navigation {
		grid-template-columns: 1fr;
	}
}

body.single .post-navigation .nav-next {
	text-align: right;
}

/* GeneratePress's icon font also adds its own chevron before .prev/.next
   (content:"\f104"/"\f105") — separate from the ::before label we're
   adding below on .nav-previous/.nav-next. Kill it so we don't get both. */
body.single .post-navigation .prev::before,
body.single .post-navigation .next::before {
	content: none;
}

body.single .post-navigation .nav-previous::before,
body.single .post-navigation .nav-next::before {
	display: block;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--fo-accent);
	margin-bottom: 0.4rem;
}
body.single .post-navigation .nav-previous::before {
	content: "← Previous";
}
body.single .post-navigation .nav-next::before {
	content: "Next →";
}

body.single .post-navigation .prev,
body.single .post-navigation .next {
	display: block;
}
body.single .post-navigation a {
	display: block;
	color: var(--fo-ink);
	font-weight: 600;
	font-size: 0.98rem;
	line-height: 1.4;
}
body.single .post-navigation a:hover {
	color: var(--fo-accent);
}

/* The "More From GameObserver" cross-promo widget renders inside
   .entry-content but is self-themed via its own inline custom properties
   (--gop-bg-start, --gop-fg, --gop-accent, etc). The h2/h3/a/blockquote
   rules above already exclude it via :not(). What's left is inherited
   (not directly overridden) properties like line-height leaking down from
   .entry-content into small elements (badges, kicker label) that don't
   set their own — reset the inheritance chain right at the boundary. */
body.single .entry-content .gop-section {
	font-size: initial;
	line-height: initial;
	color: initial;
}


/* Fix: SVG icon mode injects an actual <span class="gp-icon"> element for
   the prev/next chevron (not just ::before content like the font system),
   so the earlier content:none rule didn't catch it. */
body.single .post-navigation .nav-previous .gp-icon,
body.single .post-navigation .nav-next .gp-icon {
	display: none;
}


/* filmobserver-filmstrip-v2 */
/* ---- FilmObserver film-strip cards --------------------------------------

   The card itself is the strip. Geometry is measured off Film.svg in its own
   904x402 space: sprocket holes 10 x 14, pitch 28, inset 11 from the strip
   edge, over a maroon gradient running #6D444A -> #3D1317.

   The holes are a repeating inline-SVG tile rather than a slice of the logo:
   the pattern is perfectly regular, so rebuilding it costs no asset, stays
   crisp at any size, and rotating it for the vertical cards is just a
   different tile plus repeat-y.

   Two orientations, because the strip runs along each card's long axis:
     .fo-film--h   holes top and bottom   (wide post author box)
     .fo-film--v   holes left and right   (tall About Us staff cards)
   ------------------------------------------------------------------------ */

:root {
	--fo-strip-light: #6d444a;
	--fo-strip-dark: #3d1317;
	--fo-strip-ink: #f5e2c1;
	--fo-strip-muted: rgba(245, 226, 193, 0.72);
	--fo-strip-rule: rgba(245, 226, 193, 0.22);
}

.fo-film {
	position: relative;
	background: linear-gradient(135deg, var(--fo-strip-light) 0%, var(--fo-strip-dark) 100%);
	border-radius: 5px;
	color: var(--fo-strip-ink);
	overflow: hidden;
}

/* Perforations. background-position is centred so a card of any width cuts
   the end holes symmetrically instead of leaving one stub on the right. */
.fo-film::before,
.fo-film::after {
	content: "";
	position: absolute;
	pointer-events: none;
}

.fo-film--h::before,
.fo-film--h::after {
	left: 0;
	right: 0;
	height: 14px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14'%3E%3Crect width='10' height='14' rx='3' fill='%23fff'/%3E%3C/svg%3E");
	background-repeat: repeat-x;
	background-position: center top;
}

.fo-film--h::before { top: 11px; }
.fo-film--h::after  { bottom: 11px; }

.fo-film--v::before,
.fo-film--v::after {
	top: 0;
	bottom: 0;
	width: 14px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='28'%3E%3Crect width='14' height='10' rx='3' fill='%23fff'/%3E%3C/svg%3E");
	background-repeat: repeat-y;
	background-position: left center;
}

.fo-film--v::before { left: 11px; }
.fo-film--v::after  { right: 11px; }

/* Padding clears the perforation lanes: 11 inset + 14 hole + breathing room. */
.fo-film--h { padding: 38px 30px; }
.fo-film--v { padding: 26px 42px; }

/* ---- Post author box ----------------------------------------------------

   The box is the GenerateBlocks Element from content.json (uniqueId f6bb5a30,
   hooked to generate_after_content), so its markup lives in the database and
   only the skin is ours. Those gb-*-<id> selectors are the one place here
   coupled to that Element.
   ------------------------------------------------------------------------ */

.gb-container-f6bb5a30 {
	background: linear-gradient(135deg, var(--fo-strip-light) 0%, var(--fo-strip-dark) 100%) !important;
	border: 0 !important;
	border-radius: 5px;
	margin-top: 36px !important;
	padding: 38px 30px !important;
	color: var(--fo-strip-ink) !important;
	position: relative;
	overflow: hidden;
}

.gb-container-f6bb5a30 > .gb-inside-container {
	padding: 0 !important;
	max-width: none !important;
}

.gb-container-f6bb5a30 .gb-grid-wrapper-34cbeae9 {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: 24px;
	margin-left: 0 !important;
}

.gb-container-f6bb5a30 .gb-grid-column-85b282e0 {
	flex: 0 0 auto !important;
	width: auto !important;
	padding-left: 0 !important;
}

.gb-container-f6bb5a30 .gb-grid-column-a94fbc86 {
	flex: 1 1 auto !important;
	width: auto !important;
	padding-left: 0 !important;
	min-width: 0;
}

/* The avatar stays a plain round photo — the strip is the frame here, not
   something the picture sits inside. */
.gb-container-f6bb5a30 img.dynamic-author-image {
	width: 104px;
	height: 104px;
	border-radius: 50% !important;
	object-fit: cover;
	display: block;
	border: 2px solid rgba(245, 226, 193, 0.35);
}

/* The Element reserves a 50% column for social buttons that GenerateBlocks
   omits when the author has no social meta, leaving half the box empty.
   Collapse it; it reappears on its own if a button renders. */
.gb-container-f6bb5a30 .gb-grid-wrapper-e1860b0a {
	display: block !important;
	margin-left: 0 !important;
}

.gb-container-f6bb5a30 .gb-grid-column-8ff377db {
	width: 100% !important;
	padding-left: 0 !important;
}

.gb-container-f6bb5a30 .gb-grid-column-0e0989ff:not(:has(a.gb-button)) {
	display: none !important;
}

.gb-headline-0d5ba9b3 {
	color: var(--fo-strip-muted) !important;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 11px !important;
	font-weight: 700 !important;
	margin: 0 0 4px !important;
}

.gb-headline-c69ebc2f {
	color: var(--fo-strip-ink) !important;
	font-size: 26px !important;
	line-height: 1.2 !important;
	margin: 0 !important;
}

.gb-headline-44d3ac19 {
	color: var(--fo-strip-muted) !important;
	font-size: 14px !important;
	line-height: 1.65 !important;
	margin: 10px 0 0 !important;
	max-width: 62ch;
}

.gb-container-f6bb5a30 a.gb-button {
	color: var(--fo-strip-ink) !important;
}

.gb-container-f6bb5a30::before,
.gb-container-f6bb5a30::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 14px;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14'%3E%3Crect width='10' height='14' rx='3' fill='%23fff'/%3E%3C/svg%3E");
	background-repeat: repeat-x;
	background-position: center top;
}

.gb-container-f6bb5a30::before { top: 11px; }
.gb-container-f6bb5a30::after  { bottom: 11px; }

@media (max-width: 600px) {
	.gb-container-f6bb5a30 .gb-grid-wrapper-34cbeae9 {
		flex-direction: column !important;
		align-items: center !important;
		text-align: center;
		gap: 14px;
	}
	.gb-headline-44d3ac19 { max-width: none; }
}

/* ---- About Us staff directory -------------------------------------------

   Same ACF shape as GameObserver's page: staff_types -> staff_type heading
   plus an authors repeater. Each card is a vertical length of film.
   ------------------------------------------------------------------------ */

.fo-staff-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.75rem;
	margin: 0 0 2.75rem;
}

h3.author_list {
	margin: 2.6rem 0 1.2rem;
	font-size: clamp(1.15rem, 3.2vw, 1.5rem);
	text-transform: uppercase;
	/* Tracking eases off as the size goes up — 0.16em reads as a small label,
	   but at heading size it just pulls the word apart. */
	letter-spacing: 0.08em;
	font-weight: 700;
	line-height: 1.2;
	color: #48111b;
}

.author_grid {
	text-align: center;
	height: 100%;
}

.author_grid .avatar-link {
	display: block;
	width: 104px;
	margin: 0 auto 0.9rem;
}

.author_grid .avatar-link img.avatar {
	width: 104px;
	height: 104px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	border: 2px solid rgba(245, 226, 193, 0.35);
}

.author_grid .author-content h5 {
	margin: 0 0 4px;
	font-size: 1rem;
	font-weight: 700;
}

.author_grid .author-content h5 a {
	color: var(--fo-strip-ink);
	text-decoration: none;
}

.author_grid .author-content h5 a:hover {
	text-decoration: underline;
}

.author_grid .author-content h4 {
	margin: 0 0 10px;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 600;
	color: var(--fo-strip-muted);
}

.author_grid .author-content span.highlight {
	display: inline-block;
	background: rgba(245, 226, 193, 0.12);
	color: var(--fo-strip-ink);
	border: 1px solid var(--fo-strip-rule);
	padding: 4px 10px;
	margin: 0 4px 10px 0;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
	border-radius: 20px;
}

.author_grid .author-content p {
	margin: 0 0 0.75rem;
	font-size: 0.85rem;
	line-height: 1.55;
	color: var(--fo-strip-muted);
}

.fo-staff-links {
	display: flex;
	justify-content: center;
	gap: 12px;
}

.fo-staff-links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	color: var(--fo-strip-muted);
	border: 1px solid var(--fo-strip-rule);
	transition: color 0.15s ease, border-color 0.15s ease;
}

.fo-staff-links a:hover {
	color: var(--fo-strip-ink);
	border-color: var(--fo-strip-ink);
}

.fo-staff-links svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
	display: block;
}

/* Grid items default to min-width:auto, so one long unbroken word in a bio
   can push a column past its share and overflow the row. */
.fo-staff-grid > * {
	min-width: 0;
}

@media (max-width: 768px) {
	.fo-staff-grid {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}
}

/* ==========================================================================
   GOOGLE PREFERRED SOURCES
   Two entry points on single posts, both rendered by inc/preferred-source.php:
   a compact bar under the featured image, and a callout closing the article.
   Google's own button is suppressed (manual mode), so these are ours to style.
   ========================================================================== */

/* --- compact bar, under the featured image -------------------------------- */

/* A smaller sibling of the end-of-post CTA below, not a variant of the
   .fo-film strip. The strip motif belongs to the author box, where the
   perforations frame a card; at button size they only crowd the label, and
   reusing it here would make two identical actions look unrelated. */

.fo-source-bar {
	display: flex;
	justify-content: center;
	margin: 1.5em 0 0;
}

.fo-source-btn,
.fo-source-btn:link,
.fo-source-btn:visited {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border-radius: 6px;
	/* !important for the same reason the callout CTA needs it — the
	   in-content link colour would otherwise win. */
	background: var(--fo-accent) !important;
	color: #fff !important;
	font-size: .85rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none !important;
	white-space: nowrap;
	transition: background-color .15s ease;
}

.fo-source-btn span {
	color: #fff !important;
}

.fo-source-btn:hover,
.fo-source-btn:focus-visible {
	background: var(--fo-accent-light) !important;
	color: #fff !important;
}

.fo-source-g {
	flex-shrink: 0;
	display: block;
}

/* The G keeps its brand colours, so it needs a light chip to sit on against
   the maroon button. */
.fo-source-btn .fo-source-g {
	width: 16px;
	height: 16px;
	padding: 2px;
	border-radius: 50%;
	background: #fff;
}

/* --- callout, closing the article ---------------------------------------- */

/* The callout is appended inside .entry-content, so its CTA is competing with
   the in-content link colour. !important on the CTA's own colours is the same
   approach GameObserver's .go-support-callout__cta takes, for the same reason:
   without it the label renders maroon on maroon and disappears. */

.fo-source-callout {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	margin: 2.5em 0 0;
	padding: 22px 26px;
	border: 1px solid var(--fo-border);
	border-left: 4px solid var(--fo-accent);
	border-radius: 6px;
	background: var(--fo-card-bg);
}

/* Sized so the text keeps its place beside the CTA in FilmObserver's ~620px
   column; below this basis it takes the full row and the CTA drops under it. */
.fo-source-callout .fo-source-callout__text {
	flex: 1 1 300px;
	/* Flex children default to min-width:auto, so one long unbroken word would
	   push the CTA off the row. */
	min-width: 0;
}

.fo-source-callout .fo-source-callout__title {
	/* !important because the article body's own h2/p margins win otherwise and
	   inject ~51px of dead space inside the card. */
	margin: 0 0 .3rem !important;
	color: var(--fo-accent);
	font-size: 1.05rem;
	line-height: 1.25;
}

.fo-source-callout .fo-source-callout__body {
	margin: 0 !important;
	color: var(--fo-muted);
	font-size: .92rem;
	line-height: 1.45;
}

.fo-source-callout__cta,
.fo-source-callout__cta:link,
.fo-source-callout__cta:visited {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	padding: .75rem 1rem;
	border-radius: 6px;
	background: var(--fo-accent) !important;
	color: #fff !important;
	font-size: .88rem;
	text-align: left;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none !important;
	transition: background-color .15s;
}

.fo-source-callout__cta span {
	color: #fff !important;
}

.fo-source-callout__cta:hover,
.fo-source-callout__cta:focus-visible {
	background: var(--fo-accent-light) !important;
	color: #fff !important;
}

/* The G mark keeps its own brand colours, so it needs a light chip to sit on
   once the button goes maroon. */
.fo-source-callout__cta .fo-source-g {
	padding: 3px;
	border-radius: 50%;
	background: #fff;
}

@media (max-width: 768px) {
	.fo-source-btn {
		justify-content: center;
		width: 100%;
		white-space: normal;
		text-align: center;
	}

	.fo-source-callout__cta {
		width: 100%;
		justify-content: center;
	}
}