/* YA Studio Support — site styles
 *
 * Implements the Resource Hub and single resource designs. Colours and metrics
 * below were sampled from the approved comps at a 1440px frame: a 1280px
 * content container (80px gutters), a 320px sidebar on the single template and
 * a 280px filter panel on the hub.
 */

/* ------------------------------------------------------------------ tokens */

:root {
	--ya-teal: #17678C;
	--ya-teal-dark: #11536f;
	--ya-teal-tint: #f1f7fa;
	--ya-purple: #5d006a;
	--ya-yellow: #fbda0c;

	--ya-ink: #2a2a2a;
	--ya-muted: #4a5568;
	--ya-soft: #626670;

	--ya-line: #e4e8ec;
	--ya-line-strong: #cbd8e1;

	/* Card hover washes, sampled from the hover comp. Deliberately not the same
	   values as the sidebar badge tints below, which are a shade lighter. */
	--ya-hover-video: #e8eeeb;
	--ya-hover-pdf: #f8e5e6;
	--ya-hover-audio: #fbe5ce;

	/* The gallery slider's height cap and how its images sit in the box. The
	   shape itself is per post: [ya_gallery] measures the images and writes
	   --ya-gallery-ar onto the wrapper, the way Video_Poster writes
	   --ya-video-ar. `contain` because these are photographs of an activity and
	   `cover` cuts the subject out of an upright one; set it to cover only for
	   a set that is uniform enough to fill the box. */
	--ya-gallery-max: 540px;
	--ya-gallery-fit: contain;

	/* How tall a portrait video may stand on a single page. A landscape video
	   fills the article column and comes out ~469px high, so this leaves an
	   upright one modestly taller than its neighbours rather than three times
	   their height. Turn it up here, not on the rule. */
	--ya-video-portrait-max: 540px;

	--ya-sans: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;
	--ya-serif: Lora, Georgia, "Times New Roman", serif;

	--ya-container: 1280px;
	--ya-gutter: 40px;
	--ya-radius: 6px;
	--ya-card-shadow: 0 2px 14px rgba(23, 103, 140, 0.1);
}

/* The comps put the header on the same 1280px measure as the page body. The
   header container is full-width, so cap its inner row rather than the section
   itself, which carries the white background across the viewport. */
.elementor-location-header > .e-con > .e-con-full,
.elementor-location-footer > .e-con > .e-con-full {
	max-width: var(--ya-container);
	margin-inline: auto;
	width: 100%;
}

/* Elementor's parent containers carry 10px of padding, which leaves a white
   sliver down both sides of anything meant to be full-bleed — the teal hero and
   the watercolour band both stopped short of the viewport edge. The comps run
   them edge to edge; the measure is held by the boxed container inside. */
.elementor-location-single > .e-con,
.e-con:has(> .ya-hero),
.e-con:has(> .ya-hub-row),
.e-con:has(> .ya-refl-body) {
	padding-inline: 0;
}

/* The same 10px also sits above and below each wrapper, which put a 20px white
   band between the teal hero and the watercolour section — two full-bleed
   blocks that are meant to meet. Only the block axis is zeroed here, and only on
   these two wrappers; the measure and the sections' own vertical padding are
   held inside, so nothing else moves. */
.e-con:has(> .ya-hero),
.e-con:has(> .ya-hub-row),
.e-con:has(> .ya-refl-body) {
	padding-block: 0;
}

/* --------------------------------------------------- single: breadcrumb */

/* [ya_breadcrumb] rather than a dynamic-terms widget — see Resource_Queries. */
.ya-breadcrumb .ya-breadcrumb-nav {
	display: flex;
	align-items: center;
	gap: 7px;
	font-family: var(--ya-sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ya-purple);
}

.ya-breadcrumb .ya-breadcrumb-nav a {
	color: inherit;
	text-decoration: none;
}

.ya-breadcrumb .ya-breadcrumb-nav a:hover,
.ya-breadcrumb .ya-breadcrumb-nav a:focus-visible {
	text-decoration: underline;
}

.ya-breadcrumb .ya-breadcrumb-sep {
	opacity: 0.6;
}

/* ------------------------------------------ single reflection: sidebar */

/* In the sidebar the badge is a quiet tint rather than the solid block used on
   a card over an image — the comps set it that way, and at this size a solid
   fill outweighs the title beneath it. */
.ya-similar .ya-badge-wrap--sm .ya-badge,
.ya-similar-card .ya-badge {
	padding: 3px 9px;
	border-radius: 3px;
	font-size: 10px;
	letter-spacing: 0.08em;
}

.ya-similar .ya-badge--video,
.ya-similar-card .ya-badge--video {
	background: #e4f0e6;
	color: #1a5930;
}

.ya-similar .ya-badge--pdf,
.ya-similar-card .ya-badge--pdf {
	background: #fbe6e6;
	color: #b40508;
}

.ya-similar .ya-badge--audio,
.ya-similar-card .ya-badge--audio {
	background: #fcefdc;
	color: #a85701;
}

/* Disable badges for now Sept 2026 */
.ya-resources-listing .ya-badge {
	display: none;
}

/* ------------------------------------- single reflection: body measure */

.ya-refl-lede .elementor-heading-title {
	font-family: var(--ya-serif);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ya-teal);
}

/* ------------------------------------------------------------------ badges */

.ya-badge {
	display: inline-block;
	padding: 5px 11px;
	border-radius: 3px;
	background: var(--ya-muted);
	color: #fff;
	font-family: var(--ya-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1;
	text-transform: uppercase;
}

.ya-badge--video { background: #1a5930; }
.ya-badge--pdf   { background: #b40508; }
.ya-badge--audio { background: #a85701; }

/* Badge sits over the card's featured image. */
.ya-card-media { position: relative; }

.ya-card-media .ya-badge-wrap {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
}

/* In the narrow sidebar the badge sits inline above the title instead. */
.ya-badge-wrap--sm .ya-badge {
	padding: 3px 8px;
	font-size: 10px;
}

/* =========================================================== RESOURCE HUB */

/* ------------------------------------------------------------------- hero */

.ya-hero {
	background-color: var(--ya-teal) !important;
}

.ya-hero .ya-hero-title h1,
.ya-hero .ya-hero-title .elementor-heading-title {
	margin: 0;
	color: #fff;
	font-family: var(--ya-serif);
	font-size: 48px;
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -0.005em;
}

.ya-hero .ya-hero-sub,
.ya-hero .ya-hero-sub p {
	color: #fff;
	font-family: var(--ya-sans);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.55;
}

.ya-hero .ya-hero-sub p { margin: 0; }

/* ------------------------------------------------------------ hub layout */

/* Without min-width:0 the grid's content floor pushes the column to a new row. */
.ya-hub-main,
.ya-single-main {
	flex: 1 1 auto;
	min-width: 0;
}

/* -------------------------------------------------------- filter panel */

/* Sticky in CSS rather than via Elementor's motion effect, which takes the
   column out of flow and lets it overlap the grid. */
.ya-filters-panel,
.ya-single-sidebar {
	position: sticky;
	top: 100px;
	align-self: flex-start;
}

.ya-filters-panel {
	border-radius: var(--ya-radius);
	box-shadow: var(--ya-card-shadow);
}

.ya-filters-head {
	border-bottom-color: var(--ya-line) !important;
}

/* The comps set "Filters" in the sans, unlike the serif headings elsewhere on
   the page — it labels a control, it is not page copy. The heading widget's own
   typography control was moved to Montserrat too, but Elementor's generated
   `.elementor-element-<id> .elementor-heading-title` rule ties this selector on
   specificity, so the panel class is carried here to win on weight regardless of
   which side is loaded last. */
.ya-filters-panel .ya-filters-title .elementor-heading-title {
	margin: 0;
	color: var(--ya-teal);
	font-family: var(--ya-sans);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.ya-filters-panel .jet-filter { margin-bottom: 0; }

/* Each filter group is separated by a hairline, matching the comp; the last
   one has no rule so the panel does not end on a stray line. */
.ya-filters-panel .ya-filter {
	padding: 18px 0 16px;
	border-bottom: 1px solid var(--ya-line);
}

.ya-filters-panel .ya-filter:last-of-type {
	border-bottom: 0;
	padding-bottom: 2px;
}

.ya-filters-panel .jet-filter-label,
.ya-filters-panel .jet-filter .jet-filter-label {
	display: block;
	margin-bottom: 12px;
	color: var(--ya-teal);
	font-family: var(--ya-sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.ya-filters-panel .jet-checkboxes-list__row { margin-bottom: 10px; }
.ya-filters-panel .jet-checkboxes-list__row:last-child { margin-bottom: 0; }

/* JetSmartFilters renders its own checkbox decorator, so style the row only. */
.ya-filters-panel .jet-checkboxes-list__item {
	display: flex;
	align-items: center;
	gap: 11px;
	color: var(--ya-ink);
	font-family: var(--ya-sans);
	font-size: 14px;
	/* Semibold, not regular: these are controls, and the comp sets them heavier
	   than the card body copy they sit beside. */
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
}

/* JetSmartFilters nests the decorator inside .jet-checkboxes-list__button and
   styles it through a four-class selector, so both the resting and checked
   states have to be matched the same way — targeting the decorator as an
   adjacent sibling of the input silently never matches, which left ticked boxes
   rendering JetSmartFilters' default grey instead of the comps' teal. */
.ya-filters-panel .jet-checkboxes-list .jet-checkboxes-list__item .jet-checkboxes-list__button .jet-checkboxes-list__decorator {
	border-color: #b6c6d2;
	border-radius: 3px;
	background: #fff;
}

/* Matched through .jet-checkboxes-list__button and prefixed with the panel
   class purely to out-weigh JetSmartFilters' own six-class rule, which paints a
   ticked box grey. Written as an adjacent sibling of the input — the shape the
   markup suggests but does not have — this silently never matches. */
.ya-filters-panel .jet-checkboxes-list .jet-checkboxes-list__item .jet-checkboxes-list__input:checked + .jet-checkboxes-list__button .jet-checkboxes-list__decorator,
.ya-filters-panel .jet-checkboxes-list .ya-all-row.is-on .jet-checkboxes-list__decorator {
	border-color: var(--ya-teal);
	background: var(--ya-teal);
}

/* The All row has no checkbox of its own, so its tick is shown by class. */
.ya-filters-panel .ya-all-row .jet-checkboxes-list__checked-icon { opacity: 0; }
.ya-filters-panel .ya-all-row.is-on .jet-checkboxes-list__checked-icon { opacity: 1; }
.ya-filters-panel .ya-all-row .jet-checkboxes-list__item { cursor: pointer; }

/* JetSmartFilters hides this control until a filter is active, which makes the
   panel head jump between one item and two. The comps show it at all times;
   with nothing selected the click is simply a no-op.

   Two separate hooks have to be undone: `hide-widget` lands on the Elementor
   widget wrapper, and `hide` on JetSmartFilters' own .jet-remove-all-filters
   inside it. Releasing only the outer one leaves a widget of zero height, which
   looks exactly like the CSS not having loaded. */
.ya-filters-head .ya-clear-all.hide-widget {
	display: block !important;
}

.ya-filters-head .ya-clear-all .jet-remove-all-filters.hide {
	display: block !important;
}

.ya-clear-all button,
.ya-clear-all .jet-remove-all-filters__button {
	padding: 0;
	border: 0;
	background: none;
	color: var(--ya-teal);
	font-family: var(--ya-sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
}

/* The comps show an "All" option at the top of every group, ticked whenever
   nothing else in that group is. JetSmartFilters has no such control, so
   yastudio-site.js clones a real row and relabels it — which means it needs no
   styling of its own and cannot drift away from its neighbours. */

/* ------------------------------------------------------------- toolbar */

.ya-toolbar { margin-bottom: 22px; }

.ya-count {
	font-family: var(--ya-sans);
	font-size: 15px;
	font-weight: 400;
	color: var(--ya-muted);
}

.ya-count b {
	color: var(--ya-teal);
	font-weight: 700;
}

.ya-sorting .jet-smart-filters-sorting {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* JetSmartFilters stacks the label above the control; the comps set them on
   one line. */
.ya-sorting .jet-sorting--flex-column {
	flex-direction: row !important;
	align-items: center;
	gap: 8px;
}

.ya-sorting { flex: 0 0 auto; }

.ya-sorting .jet-sorting-label,
.ya-sorting label {
	color: var(--ya-muted);
	font-family: var(--ya-sans);
	font-size: 15px;
	font-weight: 400;
	white-space: nowrap;
}

.ya-sorting select {
	padding: 2px 22px 2px 4px;
	border: 0;
	background-color: transparent;
	color: var(--ya-ink);
	font-family: var(--ya-sans);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

/* ------------------------------------------------------- resource cards */

/* JetEngine makes the grid gutter out of padding on each item, so the card
   surface has to be the element inside it — painting the item itself and
   zeroing the padding would collapse the gutter. */
.ya-resource-grid .jet-listing-grid__item {
	display: flex;
	padding: 14px !important;
}

.ya-resource-grid .jet-listing-grid__item > .elementor {
	display: flex;
	width: 100%;
}

.ya-resource-grid .jet-listing-grid__item > .elementor > .e-con {
	display: flex;
	width: 100%;
	background: #fff;
	border-radius: var(--ya-radius);
	overflow: hidden;
	box-shadow: var(--ya-card-shadow);
	padding: 0 !important;
}

/* Boxed containers put their children in an inner wrapper; the column has to
   run the full card height for the "View Resource" link to sit on the floor. */
.ya-resource-grid .jet-listing-grid__item > .elementor > .e-con > .e-con-inner {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
	gap: 0;
}

.ya-resource-grid .ya-card-media img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

/* Elementor wraps a linked featured image in an inline-block <a>, which sits on
   a text baseline and so leaves the strut's descender space — about 9px at this
   line-height — below the image inside .ya-card-media. It was invisible while
   the card was white from edge to edge; the hover wash turns it into a pale
   stripe between the image and the body. Blocking the anchor removes the inline
   formatting context and the gap with it. */
.ya-card-media .elementor-widget-image a {
	display: block;
}

.ya-card-media {
	flex: 0 0 auto;
	padding: 0 !important;
	gap: 0 !important;
}

.ya-card-body {
	display: flex;
	flex-direction: column;
	/* Elementor sets flex-grow on the container itself, so this has to win for
	   the "View Resource" link to reach the bottom of a short card. */
	flex: 1 1 auto !important;
	gap: 0;
	padding: 18px 20px 20px !important;
}

/* ------------------------------------------------------------ card hover */

/* The comps wash the card body — not the image, and with no lift or border
   change — in a tint keyed to the resource type.
 *
 * The type is read off the badge with :has() rather than added to the listing
 * as a second class: [ya_type_badge] already resolves which of a post's several
 * ya_resource_type terms to name, by priority, and duplicating that choice in
 * the card markup would let the wash and the badge disagree.
 *
 * Both hubs are covered by these selectors — the Reflections page carries
 * .ya-resource-grid too, and both card listings use the same .ya-card-* hooks.
 */
.ya-resource-grid .ya-card-body {
	transition: background-color 0.18s ease;
}

/* Fallback for a type with no wash of its own, so no card is inert on hover. */
.ya-resource-grid .jet-listing-grid__item:hover .ya-card-body {
	background: var(--ya-teal-tint);
}

.ya-resource-grid .jet-listing-grid__item:has(.ya-badge--video):hover .ya-card-body {
	background: var(--ya-hover-video);
}

.ya-resource-grid .jet-listing-grid__item:has(.ya-badge--pdf):hover .ya-card-body {
	background: var(--ya-hover-pdf);
}

.ya-resource-grid .jet-listing-grid__item:has(.ya-badge--audio):hover .ya-card-body {
	background: var(--ya-hover-audio);
}

/* ------------------------------------------------- title and breadcrumb */


/* JetEngine joins terms with its own delimiter; the comp uses a slash. */
.ya-breadcrumb .jet-listing-dynamic-terms__link + .jet-listing-dynamic-terms__link::before {
	content: "/ ";
	color: var(--ya-purple);
}

/* A resource that carries no terms in one of these vocabularies would otherwise
   render a heading and rule with nothing under them. */
.ya-single-sidebar .e-con:has(> .ya-chips):not(:has(.jet-listing-dynamic-terms__link)),
.ya-single-sidebar .e-con:has(> .e-con-inner > .ya-chips):not(:has(.jet-listing-dynamic-terms__link)) {
	display: none;
}

/* ------------------------------------------------- single: similar list */

.ya-similar-card {
	margin-bottom: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--ya-line);
}

.ya-similar-card:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

.ya-similar-card .ya-badge-wrap { margin-bottom: 6px; }

.ya-similar-title .elementor-heading-title {
	margin: 0;
	font-family: var(--ya-serif);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
}

.ya-similar-title .elementor-heading-title,
.ya-similar-title a {
	color: var(--ya-teal);
	text-decoration: none;
}

.ya-similar-excerpt,
.ya-similar-excerpt p {
	margin: 5px 0 0;
	color: var(--ya-muted);
	font-family: var(--ya-sans);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.45;
}

/* Sidebar rows have no card surface to wash, so the comps underline both lines
   instead. Hovering anywhere on the row underlines it — the excerpt is not a
   link of its own, and underlining only the title as the pointer crossed it
   would make the row read as two separate targets. Colours are inherited, so
   the title's rule stays teal and the excerpt's grey. */
.ya-similar-card:hover .ya-similar-title .elementor-heading-title,
.ya-similar-card:hover .ya-similar-title a,
.ya-similar-card:hover .ya-similar-excerpt,
.ya-similar-card:hover .ya-similar-excerpt p {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

/* --------------------------------------------------- single: term chips */

.ya-chips .jet-listing-dynamic-terms__link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 8px 8px 0;
	padding: 6px 11px;
	border: 1px solid var(--ya-line-strong);
	border-radius: 4px;
	background: #fff;
	color: var(--ya-ink);
	font-family: var(--ya-sans);
	font-size: 13px;
	font-weight: 400;
	text-decoration: none;
}

/* Decorative only — the comp draws a dismiss glyph on these chips, but they are
   taxonomy links, so it is not a control and stays out of the accessibility
   tree. It is pinned to the first line so a chip whose label wraps does not
   leave the glyph stranded at the bottom. */
.ya-chips .jet-listing-dynamic-terms__link::after {
	content: "\00d7";
	align-self: flex-start;
	margin-top: 3px;
	color: #9aa5b1;
	font-size: 13px;
	line-height: 1;
}

.ya-chips .jet-listing-dynamic-terms__link:hover {
	border-color: var(--ya-teal);
	background: var(--ya-teal-tint);
}

/* -------------------------------------------------- single: video + CTA */

.ya-video .elementor-wrapper {
	aspect-ratio: 16 / 9;
	border-radius: 2px;
	overflow: hidden;
}

.ya-video .elementor-custom-embed-image-overlay img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Portrait video.
 *
 * The single template holds one video widget shared by every resource, and its
 * aspect_ratio control is a single static value (169). Elementor uses that for
 * both the on-page poster box and, via modalOptions.videoAspectRatio, the
 * lightbox — so phone footage shot vertically is pillarboxed inside a wide
 * black rectangle, which is what the widget's own iframe background paints.
 *
 * Video_Poster publishes the real ratio as --ya-video-ar and flags the body,
 * because the lightbox is appended to the body, not to the widget. Two boxes
 * need reshaping and they size differently: the on-page box is width-driven
 * inside the article column, the lightbox is height-driven against the viewport.
 *
 * Both boxes are driven by re-pointing Elementor's own --video-aspect-ratio
 * rather than overriding each rule that reads it: the variable also feeds the
 * poster image's aspect-ratio, so setting only the wrapper's leaves a 16:9
 * image in a 9:16 box with the play button stranded below it. !important is
 * needed both times — the on-page value comes from Elementor's generated
 * per-element CSS, the lightbox's is set inline by its JS.
 */
/* Height, not width, is the control for an upright video: left to fill the
   article column a 9:16 clip stands over 1400px tall. Capped by the token above
   and by the viewport, so it never needs scrolling past on a short window
   either; `width: auto` lets the ratio decide the rest, and the player centres
   in the column the way the comps centre a portrait image. */
.ya-video-portrait .ya-video .elementor-wrapper {
	--video-aspect-ratio: var(--ya-video-ar) !important;
	aspect-ratio: var(--ya-video-ar, 16 / 9);
	max-height: min(var(--ya-video-portrait-max), 80vh);
	width: auto;
	margin-inline: auto;
}

/* Elementor leaves the overlay at its image's natural height; it has to stretch
   for the play button to stay centred on the poster. */
.ya-video-portrait .ya-video .elementor-custom-embed-image-overlay {
	height: 100%;
}

.ya-video-portrait .elementor-lightbox .elementor-video-container .elementor-video-wrapper {
	--video-aspect-ratio: var(--ya-video-ar) !important;
}

.ya-video-portrait .elementor-lightbox .elementor-video-container .elementor-video-wrapper iframe {
	display: block;
	width: auto;
	height: 88vh;
	max-height: 88vh;
	aspect-ratio: var(--ya-video-ar);
	margin-inline: auto;
}

/* The comp's play control is a solid white disc with a dark triangle, rather
   than Elementor's default glyph. */
/* No centring offset here: Elementor already pulls the control back with
   transform: translate(-50%, -50%), so the half-of-64px margin this rule used
   to carry was counted twice and sat the disc 32px up and to the left of the
   poster's centre on every video. */
.ya-video .elementor-custom-embed-play {
	width: 64px;
	height: 64px;
	margin: 0;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.18);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 1;
	transition: transform 0.15s ease;
}

.ya-video .elementor-custom-embed-play:hover {
	transform: scale(1.06);
}

/* Elementor's eicon-play is a ring *around* a triangle — one SVG path, so the
   ring cannot be recoloured or shadowed away, and sitting it on the white disc
   reads as an outlined button the comps do not have. Hide the glyph and draw
   the triangle here instead; it needs no asset and stays crisp at any size. */
.ya-video .elementor-custom-embed-play i,
.ya-video .elementor-custom-embed-play svg {
	display: none;
}

.ya-video .elementor-custom-embed-play::after {
	content: "";
	width: 0;
	height: 0;
	/* Nudged off centre: a triangle's optical centre is left of its bounding box. */
	margin-left: 5px;
	border-style: solid;
	border-width: 11px 0 11px 18px;
	border-color: transparent transparent transparent #16232e;
}


/* ---------------------------------------------------- single: audio */

/* Rendered by [ya_audio] (Audio_Player), not by an Elementor widget: Elementor
   Pro's Audio widget is SoundCloud-only and cannot play a self-hosted file at
   all. The transport controls themselves live in the browser's shadow DOM and
   are not reachable from here — the surface around them is. Chrome and Safari
   will draw different buttons; that is the accepted cost of not shipping a JS
   player for it. */

/* ----------------------------------------------- single: image gallery */

/* [ya_gallery] stands in for the video on a resource that has photographs
   instead of footage. Same empty-widget trap as the audio slot below: the
   shortcode returns '' but Elementor still emits its wrapper, and
   ya-single-main's 18px row gap turns that into a blank stripe. */
.ya-gallery-slot:has(.elementor-shortcode:empty) {
	display: none;
}

/* Height is the control, not width — the same argument as the portrait video
   above. Filling the article column with a 4:5 photograph stands it over 1000px
   tall; capped here and by the viewport, with `width: auto` letting the ratio
   take a narrower column intact. --ya-gallery-ar is written onto the element by
   the shortcode from the images' own dimensions. */
.ya-gallery {
	position: relative;
	aspect-ratio: var(--ya-gallery-ar, 16 / 9);
	max-height: min(var(--ya-gallery-max), 80vh);
	width: auto;
	border-radius: 2px;
	overflow: hidden;
	background: var(--ya-teal-tint);
}

/* The scroll container. scroll-snap is what makes this a slider at all: no
   script, swipe on touch, trackpad and shift-wheel on desktop, and each slide
   is a real focus stop for the keyboard. */
.ya-gallery-track {
	display: flex;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
}

/* Hidden only once the arrows exist to replace it. Without the script the bar
   is the only thing telling a desktop visitor there is more than one image. */
.ya-gallery.is-ready .ya-gallery-track {
	scrollbar-width: none;
}

.ya-gallery.is-ready .ya-gallery-track::-webkit-scrollbar {
	display: none;
}

.ya-gallery-slide {
	flex: 0 0 100%;
	height: 100%;
	scroll-snap-align: center;
	scroll-snap-stop: always;
}

.ya-gallery-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--ya-gallery-fit, contain);
}

/* Nothing drawn until the script wires the buttons up. */
.ya-gallery-nav,
.ya-gallery-status {
	display: none;
}

/* The white disc from the video's play control, at the size Elementor's own
   arrows use. The chevron is two borders on a rotated square rather than an
   icon font — the same reason the play triangle is drawn in CSS. */
.ya-gallery.is-ready .ya-gallery-nav {
	position: absolute;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	transform: translateY(-50%);
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 2px 10px rgba(23, 103, 140, 0.22);
	cursor: pointer;
	transition: background 0.15s ease;
}

.ya-gallery-nav::before {
	content: "";
	width: 10px;
	height: 10px;
	border-top: 2px solid var(--ya-teal);
	border-right: 2px solid var(--ya-teal);
}

.ya-gallery-prev { left: 12px; }
.ya-gallery-next { right: 12px; }

/* Rotated, so the two borders read as a chevron. The 1px nudge re-centres the
   glyph: a rotated square pivots about its own centre, not the stroke's. */
.ya-gallery-prev::before {
	transform: rotate(-135deg);
	margin-left: 3px;
}

.ya-gallery-next::before {
	transform: rotate(45deg);
	margin-right: 3px;
}

.ya-gallery-nav:hover,
.ya-gallery-nav:focus-visible {
	background: #fff;
}

/* Kept in the layout rather than hidden at the ends, so the controls do not
   jump about; the script sets disabled, which also takes them out of the tab
   order at the boundary. */
.ya-gallery-nav[disabled] {
	opacity: 0.35;
	cursor: default;
}

.ya-gallery.is-ready .ya-gallery-status {
	position: absolute;
	right: 12px;
	bottom: 12px;
	display: block;
	margin: 0;
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(42, 42, 42, 0.62);
	color: #fff;
	font-family: var(--ya-sans);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
}

@media (max-width: 767px) {
	.ya-gallery.is-ready .ya-gallery-nav {
		width: 34px;
		height: 34px;
	}

	.ya-gallery-prev { left: 8px; }
	.ya-gallery-next { right: 8px; }
}

/* [ya_audio] returns nothing when the field is empty, but Elementor still emits
   the widget wrapper around it — and ya-single-main is a flex container with a
   gap, so an empty child still costs one gap increment. That reads as a blank
   stripe between the video and the body on every post with no audio, which is
   the same trap the Clear All widget set: zero height is not the same as gone. */
.ya-audio-slot:has(.elementor-shortcode:empty) {
	display: none;
}

/* No margin here on purpose. ya-single-main is a flex container with an 18px
   row gap, which already spaces this against the video above and the body
   below — and Elementor's own reset,
   `.elementor .elementor-widget:not(...):not(...) figure { margin: 0 }`, scores
   0,4,1 and beats anything a single .ya-audio class could say anyway. Put
   spacing on .ya-audio-slot, the widget wrapper, if it is ever needed. */
.ya-audio {
	margin: 0;
}

.ya-audio-player {
	display: block;
	width: 100%;
	/* Chrome draws its bar at 54px and Safari at 31px if left alone, which puts
	   the control at two different weights against the card below it. Pinning
	   the height settles that; the browsers still differ inside the bar. */
	height: 54px;
	border-radius: var(--ya-radius);
	background: var(--ya-teal-tint);
}

/* Safari paints the default bar a flat grey that reads as disabled next to the
   teal tint, and ignores `background` on the element itself. */
.ya-audio-player::-webkit-media-controls-panel {
	background: var(--ya-teal-tint);
}

.ya-audio-download {
	margin-top: 10px;
	font-family: var(--ya-sans);
	font-size: 14px;
}

.ya-audio-download a {
	color: var(--ya-teal);
	text-decoration: none;
	border-bottom: 1px solid var(--ya-line-strong);
	padding-bottom: 1px;
}

.ya-audio-download a:hover,
.ya-audio-download a:focus {
	color: var(--ya-teal-dark);
	border-bottom-color: var(--ya-teal-dark);
}


/* ---------------------------------------------------- single: comments */

.ya-comments {
	padding-top: 34px;
	border-top: 2px solid var(--ya-teal);
	margin-top: 8px;
}

.ya-comments .comments-area { max-width: none; }

/* Hello Elementor nests the author and date inside <footer class="comment-meta">,
   so the avatar is lifted out of flow and the text column is indented past it
   rather than laying the whole block out as a grid. */
.ya-comments .title-comments,
.ya-comments .comments-title,
.ya-comments .comment-reply-title {
	margin: 0 0 22px;
	color: var(--ya-teal);
	font-family: var(--ya-serif);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.25;
}

.ya-comments .comment-reply-title small {
	margin-left: 12px;
	font-family: var(--ya-sans);
	font-size: 13px;
	font-weight: 400;
}

.ya-comments .comment-list {
	margin: 0 0 34px;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--ya-line);
}

.ya-comments .comment-list .children {
	margin: 18px 0 0 48px;
	padding: 0;
	list-style: none;
}

.ya-comments .comment-body {
	position: relative;
	padding: 0 0 18px 48px;
	margin-bottom: 18px;
	border-bottom: none !important;
	padding-block-start: 0 !important;
}

.ya-comments .comment-list > li:last-child > .comment-body {
	margin-bottom: 0;
	border-bottom: 0;
}

.ya-comments .comment-meta,
.ya-comments .comment-author {
	display: flex;
	/* The theme spaces these apart, which throws the date to the far right. */
	justify-content: flex-start !important;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
}

.ya-comments .comment-author img.avatar,
.ya-comments .ya-avatar {
	position: absolute;
	left: 0;
	top: 0;
	width: 34px;
	height: 34px;
	border-radius: 50%;
}

/* Initial-letter stand-in for commenters with no Gravatar, matching the comp. */
.ya-comments .ya-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ya-teal);
	color: #fff;
	font-family: var(--ya-serif);
	font-size: 18px;
	font-weight: 600;
	line-height: 1;
	text-transform: uppercase;
	width: 48px !important;
	height: 48px !important;
}

.ya-comments .comment-author .fn,
.ya-comments .comment-author cite {
	color: var(--ya-teal);
	font-family: var(--ya-sans);
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
}

.ya-comments .comment-author .says { display: none; }

.ya-comments .comment-metadata a,
.ya-comments .comment-meta a {
	color: var(--ya-soft);
	font-family: var(--ya-sans);
	font-size: 12px;
	font-weight: 500;
	text-decoration: none;
}

.ya-comments .comment-content p {
	margin: 6px 0 0;
	color: var(--ya-ink);
	font-family: var(--ya-sans);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.6;
}

.ya-comments .reply { margin-top: 8px; }

.ya-comments .reply a {
	color: var(--ya-teal);
	font-family: var(--ya-sans);
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
}

.ya-comments .comment-form label,
.ya-comments .logged-in-as,
.ya-comments .comment-notes {
	color: var(--ya-soft);
	font-family: var(--ya-sans);
	font-size: 13px;
	font-weight: 400;
}

.ya-comments .comment-form textarea,
.ya-comments .comment-form input[type="text"],
.ya-comments .comment-form input[type="email"],
.ya-comments .comment-form input[type="url"] {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var(--ya-line-strong);
	border-radius: 3px;
	background: #fff;
	color: var(--ya-ink);
	font-family: var(--ya-sans);
	font-size: 14px;
	font-weight: 400;
}

.ya-comments .comment-form textarea {
	min-height: 116px;
	resize: vertical;
}

.ya-comments .comment-form textarea::placeholder { color: #98a2ad; }

.ya-comments .form-submit input[type="submit"] {
	padding: 11px 20px;
	border: 0;
	border-radius: 3px;
	background: var(--ya-teal);
	color: #fff;
	font-family: var(--ya-sans);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.ya-comments .form-submit input[type="submit"]:hover { background: var(--ya-teal-dark); }

.ya-comments #respond {
	margin-top: 30px;
}

/* ------------------------------------------------------------------ footer */

/* Align the footer's columns with the page content above: the row carries 30px
   of its own inset on top of the 1280px measure. */
.elementor-location-footer > .e-con > .e-con-full {
	padding-inline: 0;
}

/* The comps set the Educator Tools and legal menus in sentence case, while the
   Initiatives menu stays uppercase because those entries are acronyms — so this
   is per-menu rather than a blanket rule. Elementor styles menu links per
   element, which outranks a plain class selector. */
.ya-footer-menu-sentence .elementor-nav-menu a,
.ya-footer-menu-sentence .elementor-item {
	font-family: var(--ya-sans);
	font-weight: 400;
	text-transform: none !important;
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 1024px) {

	/* Count and sort control collide well before the panel stacks. */
	.ya-toolbar,
	.ya-toolbar > .e-con-inner {
		flex-wrap: wrap !important;
		gap: 10px 20px;
	}

	.ya-hero .ya-hero-title h1,
	.ya-hero .ya-hero-title .elementor-heading-title { font-size: 40px; }

	.elementor-location-single .ya-single-title .elementor-heading-title { font-size: 36px; }
}

@media (max-width: 767px) {
	.ya-hero .ya-hero-title h1,
	.ya-hero .ya-hero-title .elementor-heading-title { font-size: 32px; }

	.elementor-location-single .ya-single-title .elementor-heading-title { font-size: 28px; }

	.ya-section .elementor-heading-title,
	.ya-comments .comments-title,
	.ya-comments .comment-reply-title { font-size: 22px; }

	.ya-toolbar { flex-wrap: wrap; gap: 10px; }
	.ya-comments .comment-body {
		padding: 0 0 18px 64px !important;
	}
	.ya-filters-panel {
		position: relative;
		top: auto;
	}
}

@media (max-width: 480px) {
	.ya-comments .ya-avatar {
		width: 32px !important;
		height: 32px !important;
		font-size: 16px;
		margin-left: -5px;
	}
	.ya-comments .comment-body {
		padding: 0 0 18px 36px !important;
	}
}