/*
 * Volunteer visual foundation. Every rule in this file is scoped under
 * body.hcfb-volunteer-experience (added in functions.php only when
 * templates/template-volunteer.html is the active page template — see
 * hcfb_is_volunteer_template() there), so nothing here can affect the
 * homepage, any other landing template, or a normal interior page.
 *
 * This page is built NATIVELY on the consolidated prominent-page system
 * (docs/PROMINENT_PAGE_COMPONENTS.md) — hero, impact band, editorial grid,
 * and closing CTA all use the canonical shared classes directly, already
 * unconditionally enqueued and already in that shared file's full-bleed/
 * inner-container selector lists. What remains below is genuinely new page
 * identity: the shift-schedule table, the mobile-distribution calendar
 * callout, the requirements two-column layout, the real (non-placeholder)
 * video embed, the task-list checkmarks, and the shared "opens in a new
 * tab" screen-reader-only utility this page is the first to need.
 */

/*
 * Screen-reader-only suffix for this page's external, target="_blank"
 * links (Volgistics x3, Microsoft Forms, the mobile-distribution
 * calendar) — visually hidden but announced by assistive technology, per
 * inc/volunteer-sections.php's hcfb_volunteer_new_tab_suffix(). Standard
 * clip-based hidden-but-accessible technique, scoped to this page since no
 * prior page needed it.
 */
body.hcfb-volunteer-experience .hcfb-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/*
 * Checkmark task list — reused by the Ways to Serve opportunity cards and
 * the Before You Serve requirements card. Same restrained-accent
 * convention as the rest of this shared system (a colored mark, not a
 * decorative icon set).
 */
body.hcfb-volunteer-experience .hcfb-volunteer-task-list {
	display: grid;
	gap: 0.625rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

body.hcfb-volunteer-experience .hcfb-volunteer-task-list li {
	position: relative;
	padding-left: 1.5rem;
	color: var(--wp--preset--color--hcfb-text-muted);
	line-height: 1.5;
}

body.hcfb-volunteer-experience .hcfb-volunteer-task-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--wp--preset--color--hcfb-green-text, #627425);
	font-weight: 700;
}

/*
 * Shift-times table — the one genuinely new content shape on this page
 * (no shared component covers tabular data). Card-style wrapper matches
 * the editorial-grid card surface/border/radius already used elsewhere on
 * this page for visual consistency.
 */
body.hcfb-volunteer-experience .hcfb-volunteer-schedule-wrap {
	margin-top: 2rem;
	overflow-x: auto;
	border: 1px solid var(--wp--preset--color--hcfb-border);
	border-radius: 12px;
}

body.hcfb-volunteer-experience .hcfb-volunteer-schedule {
	width: 100%;
	min-width: 40rem;
	border-collapse: collapse;
}

body.hcfb-volunteer-experience .hcfb-volunteer-schedule th {
	padding: 1rem 1.25rem;
	background: var(--wp--preset--color--hcfb-navy);
	color: var(--wp--preset--color--hcfb-surface);
	font-size: 0.875rem;
	text-align: left;
}

body.hcfb-volunteer-experience .hcfb-volunteer-schedule td {
	padding: 1.1rem 1.25rem;
	border-bottom: 1px solid var(--wp--preset--color--hcfb-border);
	background: var(--wp--preset--color--hcfb-surface);
	color: var(--wp--preset--color--hcfb-text);
	vertical-align: top;
}

body.hcfb-volunteer-experience .hcfb-volunteer-schedule tr:last-child td {
	border-bottom: none;
}

/*
 * Mobile schedule readability: below 680px, stack each row into a labeled
 * card instead of a horizontally-scrolling table -- same breakpoint and
 * `data-label` attr()-driven technique already used, and already approved,
 * on the current live public Volunteer page (content source for this
 * page), not a new invention.
 */
@media (max-width: 680px) {
	body.hcfb-volunteer-experience .hcfb-volunteer-schedule,
	body.hcfb-volunteer-experience .hcfb-volunteer-schedule thead,
	body.hcfb-volunteer-experience .hcfb-volunteer-schedule tbody,
	body.hcfb-volunteer-experience .hcfb-volunteer-schedule th,
	body.hcfb-volunteer-experience .hcfb-volunteer-schedule td,
	body.hcfb-volunteer-experience .hcfb-volunteer-schedule tr {
		display: block;
	}

	body.hcfb-volunteer-experience .hcfb-volunteer-schedule-wrap {
		overflow-x: visible;
	}

	body.hcfb-volunteer-experience .hcfb-volunteer-schedule {
		min-width: 0;
	}

	body.hcfb-volunteer-experience .hcfb-volunteer-schedule thead {
		display: none;
	}

	body.hcfb-volunteer-experience .hcfb-volunteer-schedule tr {
		padding: 1.1rem 1.25rem;
		border-bottom: 1px solid var(--wp--preset--color--hcfb-border);
	}

	body.hcfb-volunteer-experience .hcfb-volunteer-schedule tr:last-child {
		border-bottom: none;
	}

	body.hcfb-volunteer-experience .hcfb-volunteer-schedule td {
		padding: 0.4rem 0;
		border-bottom: none;
	}

	body.hcfb-volunteer-experience .hcfb-volunteer-schedule td::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 0.25rem;
		color: var(--wp--preset--color--hcfb-navy);
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
	}
}

/*
 * Mobile Distribution Calendar callout — links out to the existing Glide
 * calendar (never recreated). Reuses the shared
 * .hcfb-prominent-cta__link--secondary pill-button visual (assets/css/
 * prominent-sections.css) rather than inventing a new button treatment,
 * same "no new button visual introduced" convention as inc/give-form.php.
 */
body.hcfb-volunteer-experience .hcfb-volunteer-calendar-callout {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	margin-top: 2rem;
	padding: 1.75rem 2rem;
	background: var(--wp--preset--color--hcfb-cream);
	border-radius: 12px;
}

body.hcfb-volunteer-experience .hcfb-volunteer-calendar-callout__heading {
	color: var(--wp--preset--color--hcfb-navy);
	margin: 0 0 0.4rem;
}

body.hcfb-volunteer-experience .hcfb-volunteer-calendar-callout__body {
	color: var(--wp--preset--color--hcfb-text-muted);
	margin: 0;
	max-width: 34rem;
}

body.hcfb-volunteer-experience .hcfb-volunteer-calendar-callout__link {
	color: var(--wp--preset--color--hcfb-navy);
	border-color: var(--wp--preset--color--hcfb-navy);
	flex-shrink: 0;
}

body.hcfb-volunteer-experience .hcfb-volunteer-calendar-callout__link:hover,
body.hcfb-volunteer-experience .hcfb-volunteer-calendar-callout__link:focus-visible {
	background: var(--wp--preset--color--hcfb-navy);
	color: var(--wp--preset--color--hcfb-surface);
}

/*
 * Before You Serve — a small two-column layout (intro text | requirements
 * card) genuinely new to this page; no shared component matches this
 * text+callout-card shape.
 */
body.hcfb-volunteer-experience .hcfb-volunteer-requirements__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
	gap: 2.5rem;
	align-items: start;
}

/*
 * Restrained color rhythm pass: existing HCFB tokens only, no new hex
 * values anywhere below — every background is `color-mix()` of the
 * already-defined --wp--preset--color--hcfb-orange/hcfb-green swatches
 * into the page's own existing hcfb-cream, at a light enough mix (4%)
 * that it reads as a tint, not a colored section. Every text element that
 * sits directly on these bands (the eyebrow, heading, and intro paragraph)
 * already carries its own explicit, previously-accessibility-fixed color
 * from assets/css/prominent-sections.css (see that file's own eyebrow
 * comment). Measured directly against the actual rendered background
 * (not hand-calculated): the eyebrow -- the tightest case, small bold
 * text needing the full 4.5:1 -- came out to only 4.56:1/4.61:1 at an
 * earlier 6% mix, uncomfortably close to failing; 4% keeps every checked
 * pairing safely clear (eyebrow ~4.8:1, heading >11:1, intro >14:1) while
 * still reading as a real, visible tint. Only `background` is set below;
 * every other property (padding, layout, card geometry) is inherited
 * unchanged from the shared .hcfb-editorial-grid-section/.hcfb-editorial-grid__card
 * rules (assets/css/prominent-sections.css) this file already depends on
 * for cascade ordering.
 */
body.hcfb-volunteer-experience .hcfb-volunteer-opportunities {
	background: color-mix(in srgb, var(--wp--preset--color--hcfb-orange) 4%, var(--wp--preset--color--hcfb-cream));
}

/*
 * The two "Ways to Serve" photo cards stay white (not the section's own
 * cream default) so they read as distinct surfaces against the new tinted
 * band, per direct instruction — this only touches
 * .hcfb-volunteer-opportunities' own two cards (hcfb-editorial-grid__card--with-image),
 * never the other editorial-grid cards elsewhere on this page.
 */
body.hcfb-volunteer-experience .hcfb-volunteer-opportunities .hcfb-editorial-grid__card {
	background: var(--wp--preset--color--hcfb-surface);
}

body.hcfb-volunteer-experience .hcfb-volunteer-requirements {
	background: color-mix(in srgb, var(--wp--preset--color--hcfb-green) 4%, var(--wp--preset--color--hcfb-cream));
}

/*
 * Other Volunteer Resources — a restrained, decorative-only top-edge
 * accent (not a full recolor) on the two existing cards. Purely
 * decorative: no information is conveyed by color alone, so this needs no
 * additional forced-colors/contrast handling beyond the browser's own
 * default forced-colors flattening of decorative borders.
 */
body.hcfb-volunteer-experience .hcfb-volunteer-resources .hcfb-editorial-grid__card {
	border-top: 4px solid var(--wp--preset--color--hcfb-orange);
}

/*
 * Real (non-placeholder) video embed — reuses the shared feature-media
 * offset navy/orange frame accent (assets/css/prominent-sections.css) but
 * replaces that component's dashed-border placeholder-photo treatment
 * with a solid, real 16:9 video frame, since this is a real, already-live
 * video, not a photo awaiting approval.
 */
body.hcfb-volunteer-experience .hcfb-volunteer-video {
	position: relative;
	z-index: 2;
	width: 100%;
	aspect-ratio: var(--hcfb-feature-aspect, 16 / 9);
	overflow: hidden;
	border-radius: 14px;
	background: var(--wp--preset--color--hcfb-navy);
}

body.hcfb-volunteer-experience .hcfb-volunteer-video iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (max-width: 900px) {
	body.hcfb-volunteer-experience .hcfb-volunteer-requirements__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	body.hcfb-volunteer-experience .hcfb-volunteer-calendar-callout {
		flex-direction: column;
		align-items: flex-start;
	}
}