/*
 * Site-specific overrides.
 * Loaded after tailwind.css - add small CSS tweaks here without rebuilding the Tailwind pipeline.
 */

/* The original site relies on the default white canvas; pin it so dark-mode
   browsers never paint a dark background behind the layout. */
html, body {
	background-color: #fff;
	color-scheme: light;
}

/* Pull-quotes inside migrated rich text (Bard "quote" sets) - replicates the
   original coloured box from resources/views/sets/_quote.antlers.html.
   Orange by default, blue via data-colour="blue". */
.bard-content blockquote.bard-quote {
	position: relative;
	overflow: hidden;
	margin: 1rem 0 2.5rem;
	padding: 3.5rem 3rem;
	border-radius: 1.5rem;
	background-color: #de6240;
	color: #fff;
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.375;
}
.bard-content blockquote.bard-quote[data-colour="blue"] {
	background-color: #1D4A61;
}
/* !important: the global rich-text rules paint p/cite blue with !important */
.bard-content blockquote.bard-quote,
.bard-content blockquote.bard-quote p,
.bard-content blockquote.bard-quote cite {
	color: #fff !important;
}
.bard-content blockquote.bard-quote p {
	margin: 0;
}
.bard-content blockquote.bard-quote::before {
	content: "\201C";
	position: absolute;
	top: -0.5rem;
	left: 1rem;
	z-index: 0;
	opacity: 0.25;
	font-family: Hind, sans-serif;
	font-size: 150px;
	line-height: 1;
}
.bard-content blockquote.bard-quote cite {
	display: block;
	margin-top: 1.5rem;
	font-style: normal;
	font-weight: 700;
	font-size: 1.125rem;
}
@media (min-width: 1024px) {
	.bard-content blockquote.bard-quote {
		margin-bottom: 5rem;
		padding: 3.5rem 5rem;
		font-size: 1.75rem;
	}
	.bard-content blockquote.bard-quote::before {
		font-size: 200px;
	}
	.bard-content blockquote.bard-quote cite {
		font-size: 1.375rem;
	}
}

/* Editor-made quotes (inc/quote-format.php): match the migrated boxes - no
   italics, spaced paragraphs, and a "Name, role" attribution line. */
.bard-content blockquote.bard-quote em {
	font-style: normal;
}
.bard-content blockquote.bard-quote p + p {
	margin-top: 1rem;
}
.bard-content blockquote.bard-quote .bard-quote__role {
	font-weight: 400;
}

/* Quote with a photo - a large rounded photo floated into the top corner,
   with the quote wrapping down its right side and on underneath (the box's
   overflow:hidden contains the float). Full width above the text on phones.
   Slightly smaller text than a plain quote as it shares the width. */
.bard-content blockquote.bard-quote--with-image {
	font-size: 1.25rem;
}
.bard-content blockquote.bard-quote--with-image .bard-quote__photo,
.bard-content blockquote.bard-quote--with-image .bard-quote__body {
	position: relative;
	z-index: 1;
}
.bard-content blockquote.bard-quote--with-image .bard-quote__photo {
	width: 100%;
	aspect-ratio: 4 / 3;
	margin-bottom: 1.5rem;
	overflow: hidden;
	border-radius: 0.75rem;
}
.bard-content blockquote.bard-quote--with-image .bard-quote__photo a {
	display: block;
	height: 100%;
}
.bard-content blockquote.bard-quote--with-image .bard-quote__photo img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
}
@media (min-width: 640px) {
	.bard-content blockquote.bard-quote--with-image {
		padding: 3rem;
	}
	.bard-content blockquote.bard-quote--with-image .bard-quote__photo {
		float: left;
		width: 45%;
		aspect-ratio: 1;
		margin: 0.35rem 1.75rem 1rem 0;
	}
	/* Photo size picked in the editor's "Quote style" button */
	.bard-content blockquote.bard-quote--photo-small .bard-quote__photo {
		width: 35%;
	}
	.bard-content blockquote.bard-quote--photo-large .bard-quote__photo {
		width: 55%;
	}
}
@media (min-width: 1024px) {
	.bard-content blockquote.bard-quote--with-image {
		padding: 3.5rem 3rem;
		font-size: 1.375rem;
	}
}

/* Inline images from migrated rich text (Bard "image" sets) - replicates
   resources/views/sets/_image.antlers.html */
.bard-content img.bard-image {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 1rem;
	margin: 0 0 2.5rem;
}
@media (min-width: 1024px) {
	.bard-content img.bard-image {
		margin-bottom: 5rem;
	}
}

/* Funder logos: cap the height so the carousel row is only as tall as the
   logos themselves (otherwise a tall logo like Sunrise stretches the row and
   the short logos float with big gaps). Set here in plain CSS because the
   arbitrary Tailwind `max-h-[90px]` utility isn't in the compiled build. */
.funders .js-carousel__track img {
	max-height: 90px;
	width: auto;
	margin-left: auto;
	margin-right: auto;
	object-fit: contain;
}

/* Media Embed block. Plain CSS (not Tailwind's aspect-video/max-w-3xl
   utilities) since neither is in the compiled build - avoids needing
   npm run build:css for this block to work. */
.sv-media-embed {
	max-width: 48rem;
	margin-left: auto;
	margin-right: auto;
}
.sv-media-embed__video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 1rem;
}
.sv-media-embed__video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.sv-media-embed video {
	width: 100%;
	border-radius: 1rem;
}
.sv-media-embed audio {
	width: 100%;
}

/* Full CTA "triangle" images. The clip-path containers have a fixed height but
   no width, so the photo can't cover the clip. Give them the clip's width and
   let the image cover-crop to fill it (the original site used Glide-cropped
   images sized to the clip). */
.full-cta__image--1 {
	width: 414px;
}
.full-cta__image--2 {
	width: 289px;
	height: 349px;
}
.full-cta__image--1 > img,
.full-cta__image--2 > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Pop Out block portrait: a fixed, cover-cropped square so the whole subject
   shows (the original site used a Glide 448x448 square crop). */
.sv-popout-img {
	width: 190px;
	height: 190px;
	max-width: 100%;
	object-fit: cover;
}

/* Team/person card photo: a plain portrait rectangle (replaces the old
   triangle clip-path shared with case-study cards). Fixed size so every
   card matches regardless of the source photo's shape; white background
   shows through any transparent-background photo instead of the card's
   blue tone. Not in the compiled build - see resources/scss/components/
   _person-card.scss for the same rule, applied on next `npm run build:css`. */
.person-card__photo {
	position: relative;
	width: 220px;
	height: 280px;
	border-radius: 1.5rem;
	overflow: hidden;
	background-color: #fff;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* Rich-text fields rendered on a coloured card (case-study quote, pop-out
   copy, full-cta caption) - these inherit the surrounding white text colour
   rather than the .bard-content blue/orange treatment, which would clash
   with the card background. Underline is the only link affordance needed
   since colour can't distinguish a link here. */
.rich-copy a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
}
.rich-copy a:hover {
	opacity: 0.8;
}
.rich-copy p:not(:last-child) {
	margin-bottom: 0.5rem;
}

/* Homepage case-study carousel card: whole-card hover-to-orange (matches
   the live site). The overlay div + the sibling-hover rule for it already
   existed (compiled into tailwind.css) for the team bio cards - this just
   widens the trigger to the whole card, not only the small CTA link, and
   is needed here too since this selector isn't in the compiled build. */
.case_study:hover .case-study__overlay {
	opacity: 1 !important;
}

/* Custom-skinned audio player (Media Embed block, "Audio (Uploaded File)").
   The <audio> element stays in the DOM with native `controls` as a no-JS
   fallback; audio-player.js hides it and reveals this UI once it's wired up.
   Brand blue bar, orange play button and range fill - matches the rest of
   the site's blue/orange palette instead of the OS's native player chrome. */
.sv-audio-player.is-enhanced .sv-audio-player__element {
	display: none;
}
.sv-audio-player__element {
	width: 100%;
}
.sv-audio-player__ui {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
	padding: 0.75rem 1.25rem;
	border-radius: 999px;
	background-color: var(--blue);
	color: #fff;
}
.sv-audio-player__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	background-color: var(--orange);
	color: #fff;
	cursor: pointer;
	transition: opacity 0.15s ease-in-out;
}
.sv-audio-player__toggle:hover {
	opacity: 0.85;
}
.sv-audio-player__toggle i {
	font-size: 0.9rem;
}
.sv-audio-player__range {
	flex: 1;
	-webkit-appearance: none;
	appearance: none;
	height: 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.35);
	outline: none;
	cursor: pointer;
}
.sv-audio-player__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.sv-audio-player__range::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: none;
	background: #fff;
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.sv-audio-player__range::-moz-range-track {
	height: 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.35);
}
.sv-audio-player__range::-moz-range-progress {
	height: 6px;
	border-radius: 999px;
	background: var(--orange);
}
.sv-audio-player__time {
	flex-shrink: 0;
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.sv-audio-player__time-sep {
	margin: 0 0.25rem;
	opacity: 0.6;
}

/* Team card title/caption: reserve room on the right so the text never runs
   under the photo's top-right overlap. The photo UNscales at md: (768px) -
   scale-75 -> scale-100 - so it actually intrudes further into the card
   from that point on (~156px deep vs ~101px on mobile), not less. And the
   card itself doesn't reliably get wider at that point either: the grid
   goes 2-column at lg: (1024px), and a lone card in a list with an odd
   number of people only fills one of those two column tracks either way.
   So this reservation is never fully removed - just sized per breakpoint
   to clear how far the photo reaches in at that size. */
.person-card__heading {
	padding-right: 110px;
}
@media (min-width: 768px) {
	.person-card__heading {
		padding-right: 170px;
	}
}

/* Person bio-page hero photo: plain rounded rectangle (replaces the old
   triangle-clipped, negative-margin photo that overflowed far below the
   banner and down the page). Matches the team landing page's card photo
   treatment instead of a separate, more dramatic style. */
.sv-top-banner__photo {
	aspect-ratio: 524 / 632;
	border-radius: 1.5rem;
	overflow: hidden;
	background-color: #fff;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.15);
}

/* Rich-text links: replace the old absolutely-positioned ::after underline
   bar (compiled into tailwind.css) with a native text-decoration underline.
   The old bar was sized to the link's own width and only rendered under the
   LAST line of a link that wraps across multiple lines - which migrated
   content does often, when a link ends up spanning more of a sentence than
   intended. Native underline draws correctly under every wrapped line. */
.bard-content a {
	text-decoration: underline;
	text-decoration-color: var(--orange);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}
.bard-content a::after {
	content: none;
}

/* Header block caption: adds gaps between wrapped paragraphs (Tailwind's
   space-y-4 isn't in the compiled tailwind.css, so it's done manually here
   instead of triggering a full rebuild for one utility). */
.sv-header-block__caption > * + * {
	margin-top: 1rem;
}

/* ------------------------------------------------------------------
   News articles & bios (.sv-article - formatted by inc/content-format.php)
   ------------------------------------------------------------------ */

/* Photos added with Add Media: full article width with rounded corners,
   like the migrated .bard-image photos (but keeping each photo's own
   shape). Thumbnail/medium sizes stay at their natural size. Photos inside
   quotes have their own rules above. */
.sv-article > img,
.sv-article > p > img,
.sv-article > p > a > img,
.sv-article > figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 1rem;
}
.sv-article > p > img.size-thumbnail,
.sv-article > p > img.size-medium,
.sv-article > p > a > img.size-thumbnail,
.sv-article > p > a > img.size-medium {
	width: auto;
	max-width: 100%;
}
.sv-article > figure {
	width: 100% !important; /* WordPress sets a fixed pixel width on captions */
	max-width: 100%;
	margin: 0 0 2rem;
}
.sv-article figcaption {
	margin-top: 0.75rem;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--blue);
	opacity: 0.8;
}
/* Left/right-aligned photos sit beside the text on wider screens */
@media (min-width: 640px) {
	.sv-article > p > img.alignleft,
	.sv-article > p > a > img.alignleft,
	.sv-article > figure.alignleft {
		float: left;
		width: 45% !important;
		margin: 0.35rem 1.75rem 1rem 0;
	}
	.sv-article > p > img.alignright,
	.sv-article > p > a > img.alignright,
	.sv-article > figure.alignright {
		float: right;
		width: 45% !important;
		margin: 0.35rem 0 1rem 1.75rem;
	}
}
.sv-article > p > img.aligncenter {
	margin-left: auto;
	margin-right: auto;
}
.sv-article h2,
.sv-article h3,
.sv-article h4,
.sv-article blockquote,
.sv-article .sv-media-embed,
.sv-article .sv-audio-player {
	clear: both;
}

/* Pasted YouTube/Vimeo links and uploaded videos - same rounded 16:9 frame
   as the Media Embed block, at article width */
.sv-article .sv-media-embed--article {
	max-width: none;
	margin: 0 0 2rem;
}
.sv-article .sv-media-embed--article video {
	display: block;
	height: auto;
}
/* SoundCloud / Spotify / podcast players keep their own height */
.sv-media-embed--audio iframe {
	display: block;
	width: 100%;
	border: 0;
	border-radius: 0.75rem;
}

/* Audio files - the site's blue/orange player */
.sv-article > .sv-audio-player {
	margin: 0 0 2rem;
}
.bard-content blockquote.bard-quote .sv-audio-player {
	position: relative;
	z-index: 1;
	margin-top: 1.5rem;
}
/* The player bar is blue - lighten it so it shows up on a blue quote box */
.bard-content blockquote.bard-quote[data-colour="blue"] .sv-audio-player__ui {
	background-color: rgba(255, 255, 255, 0.14);
}

/* "Share This Story" copy-link button + its "Link copied" message
   (toggled by the .js-copy-button code in site.js) */
.sv-share-copy {
	position: relative;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
.sv-share-copy__tooltip {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	padding: 0.3rem 0.6rem;
	border-radius: 0.4rem;
	background-color: var(--blue);
	color: #fff;
	font-size: 0.8rem;
	font-weight: 700;
	white-space: nowrap;
	pointer-events: none;
	transition: opacity 0.2s ease-in-out;
}
/* Let the seek bar shrink (range inputs won't by default) and tighten the
   player inside a quote box, so the time never gets clipped on phones */
.sv-audio-player__range {
	min-width: 0;
}
.bard-content blockquote.bard-quote .sv-audio-player__ui {
	gap: 0.6rem;
	padding: 0.5rem 0.9rem 0.5rem 0.5rem;
}
.bard-content blockquote.bard-quote .sv-audio-player__time {
	font-size: 0.8rem;
	white-space: nowrap;
}