/*
 * Give Food & Food Drives visual foundation. Every rule in this file is
 * scoped under body.hcfb-give-food-experience (added in functions.php only
 * when templates/template-give-food.html is the active page template —
 * see hcfb_is_give_food_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, editorial grid, closing CTA,
 * and strategic CTA banner all use the canonical shared classes directly.
 * What remains below is genuinely new page identity: the numbered
 * "How a Food Drive Works" steps, and the most-needed-items checkmark
 * list (same restrained-accent convention as
 * assets/css/volunteer-experience.css's own task list, reused here rather
 * than duplicated under a different name since both pages share the exact
 * same visual intent).
 *
 * Visual-polish pass (Ryan-directed, local only, 2026-09-09): added a
 * card treatment for the "How a Food Drive Works" steps, a tinted
 * multi-column panel for Most-Needed Items, a two-card grid pairing Food
 * Safety & Acceptance Guidance with Drop-off & Delivery, a two-column
 * grid pairing "Finished your drive?" with "Questions about hosting a
 * drive?" inside their one shared navy section, and a small decorative
 * accent on the closing strategic CTA. Every rule stays scoped to this
 * page's own body class; none of it touches a shared component's default
 * behavior.
 */

/*
 * Screen-reader-only utility for this page's one external, target="_blank"
 * link (the "After Your Drive" completion Microsoft Form) — same shape and
 * rationale as assets/css/volunteer-experience.css's identical rule,
 * scoped to this page's own body class since that file is conditionally
 * enqueued only on the Volunteer template.
 */
body.hcfb-give-food-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;
}

/*
 * Visual-polish refinement (2026-09-09, round 2): Ryan found the first
 * pass's panel + plain-text-in-columns treatment still read as too basic
 * in the actual rendered screenshot -- confirmed by direct computed-style
 * inspection: the panel itself (background/border/radius/padding below)
 * was rendering correctly, but every individual `<li>` had NO background,
 * border, or radius of its own (transparent, `padding: 0 0 0 24px` left
 * over from the plain checkmark-list convention) -- a tinted panel around
 * otherwise-unstyled list text, not the "compact individual tiles" this
 * needed. This pass gives each item real tile styling; the panel wrapper
 * itself is unchanged in structure, only gains a top orange accent for
 * clearer visual distinction from the white page.
 */
body.hcfb-give-food-experience .hcfb-give-food-panel {
	background: var(--wp--preset--color--hcfb-cream);
	border: 1px solid var(--wp--preset--color--hcfb-border);
	border-top: 4px solid var(--wp--preset--color--hcfb-orange);
	border-radius: 12px;
	padding: 1.75rem;
	margin-top: 1.25rem;
}

@media (max-width: 640px) {
	body.hcfb-give-food-experience .hcfb-give-food-panel {
		padding: 1.25rem;
	}
}

/*
 * Most-needed-items list — balanced columns (3 desktop, 2 tablet, 1
 * mobile) of compact tiles inside the tinted panel above. CSS Grid's own
 * row-major auto-placement keeps visual reading order identical to DOM/
 * tab order (unlike a CSS multi-column layout, which would not) — no
 * extra markup or ARIA needed for a logical reading order. `align-items:
 * stretch` (grid's own default) is deliberately NOT overridden to a fixed
 * height -- each tile's height follows its own content, so a short item
 * and a long, wrapping one ("Instant mashed potatoes (boxed)") both stay
 * comfortable without artificial equalization.
 */
body.hcfb-give-food-experience .hcfb-give-food-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 1024px) {
	body.hcfb-give-food-experience .hcfb-give-food-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	body.hcfb-give-food-experience .hcfb-give-food-list {
		grid-template-columns: 1fr;
	}
}

/*
 * Each item is its own compact tile: a near-white surface against the
 * panel's cream background gives real layered depth (not just tinted
 * panel + plain text), a thin theme border (same weight/color as every
 * other card in this shared system), and rounded corners matching
 * `.hcfb-editorial-grid__card`. No box-shadow, no hover/focus treatment,
 * no fixed height -- matches that same card's own restrained, static
 * (non-interactive) precedent exactly; these tiles are informational,
 * never links or buttons.
 */
body.hcfb-give-food-experience .hcfb-give-food-list li {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	list-style: none;
	background: var(--wp--preset--color--hcfb-surface);
	border: 1px solid var(--wp--preset--color--hcfb-border);
	border-radius: 10px;
	padding: 0.75rem 0.875rem;
	color: var(--wp--preset--color--hcfb-text);
	line-height: 1.4;
}

/*
 * Decorative check indicator -- a real, `aria-hidden` element (see
 * inc/give-food-sections.php's hcfb_give_food_shortcode_most_needed_section()
 * for why this moved off CSS `::before` content), not the plain inline
 * checkmark Volunteer's own task list uses -- a small solid green circle
 * reads more clearly as a distinct tile marker at this compact size.
 * `flex-shrink: 0` keeps it from being squeezed when the item text wraps
 * to a second line.
 */
body.hcfb-give-food-experience .hcfb-give-food-needed-item__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 1.375rem;
	height: 1.375rem;
	margin-top: 0.0625rem;
	border-radius: 50%;
	background: var(--wp--preset--color--hcfb-green, #7a9a3a);
	color: var(--wp--preset--color--hcfb-surface);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
}

body.hcfb-give-food-experience .hcfb-give-food-needed-item__text {
	font-size: 0.9375rem;
}

/*
 * How a Food Drive Works — four numbered steps, laid out in a responsive
 * grid (wraps to a single column at narrow widths, same breakpoint
 * approach as the shared `.hcfb-editorial-grid`). A simple numbered badge
 * (not a decorative icon set) keeps this consistent with the rest of the
 * shared system's restrained-accent visual language.
 */
body.hcfb-give-food-experience .hcfb-give-food-steps__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 782px) {
	body.hcfb-give-food-experience .hcfb-give-food-steps__list {
		grid-template-columns: 1fr;
	}
}

/*
 * Visual-polish pass (2026-09-09): each step is now a subtle, equal-height
 * card -- restrained warm/cream surface and a hairline border, same
 * component language as `.hcfb-editorial-grid__card` elsewhere in the
 * shared system, deliberately without that card's own hover/click
 * affordance (these aren't links). No shadow, no oversized icon -- only
 * the existing small green numbered circle. CSS Grid's own default
 * `align-items: stretch` already makes every card the same height across
 * a row with no extra rule needed.
 */
body.hcfb-give-food-experience .hcfb-give-food-steps__item {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	background: var(--wp--preset--color--hcfb-cream);
	border: 1px solid var(--wp--preset--color--hcfb-border);
	border-radius: 12px;
	padding: 1.5rem 1.25rem;
}

body.hcfb-give-food-experience .hcfb-give-food-steps__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--wp--preset--color--hcfb-green, #7a9a3a);
	color: var(--wp--preset--color--hcfb-navy, #1c2b4a);
	font-weight: 700;
	font-size: 1.125rem;
}

body.hcfb-give-food-experience .hcfb-give-food-steps__title {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 700;
}

body.hcfb-give-food-experience .hcfb-give-food-steps__body {
	margin: 0;
	color: var(--wp--preset--color--hcfb-text-muted);
	line-height: 1.5;
}

/*
 * Visual-polish pass (2026-09-09): Food Safety & Acceptance Guidance and
 * Drop-off & Delivery presented as two complementary cards side by side
 * on desktop, stacked on mobile. Each shortcode's own returned
 * `.hcfb-editorial-grid-section` markup is reused as-is (see
 * inc/give-food-sections.php's hcfb_give_food_render_guidance()) --
 * these overrides only replace its usual full-bleed section chrome with
 * a compact card treatment while it's nested inside this grid, higher
 * specificity (body class + two more classes) winning over the shared
 * full-bleed rules in assets/css/prominent-sections.css regardless of
 * load order.
 */
body.hcfb-give-food-experience .hcfb-give-food-guidance-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
	max-width: var(--hcfb-home-wide, 82rem);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--hcfb-lg, 2.5rem);
	/*
	 * Visual correction (2026-09-09): white-space buffer before the navy
	 * completion/contact section that follows. `padding-bottom` on this
	 * container -- not `margin-bottom` -- because padding never
	 * participates in margin collapsing, so the gap holds even though the
	 * Coordinator Toolkit shortcode between them is usually empty. Lives
	 * on the grid container, not inside `.hcfb-editorial-grid-section`,
	 * so the cards' own padding and equal-height grid-row stretch are
	 * untouched.
	 */
	padding-bottom: 3rem;
}

@media (max-width: 1024px) {
	body.hcfb-give-food-experience .hcfb-give-food-guidance-grid {
		padding-bottom: 2.5rem;
	}
}

@media (max-width: 782px) {
	body.hcfb-give-food-experience .hcfb-give-food-guidance-grid {
		grid-template-columns: 1fr;
		padding-inline: var(--wp--preset--spacing--hcfb-md, 1.5rem);
	}
}

@media (max-width: 640px) {
	body.hcfb-give-food-experience .hcfb-give-food-guidance-grid {
		padding-bottom: 2rem;
	}
}

body.hcfb-give-food-experience .hcfb-give-food-guidance-grid .hcfb-editorial-grid-section {
	max-width: none;
	width: 100%;
	padding: 0;
	background: var(--wp--preset--color--hcfb-cream);
	border: 1px solid var(--wp--preset--color--hcfb-border);
	border-radius: 12px;
}

body.hcfb-give-food-experience .hcfb-give-food-guidance-grid .hcfb-editorial-grid-section__inner {
	max-width: none;
	margin: 0;
	padding: 1.75rem 1.5rem;
}

/*
 * Visual-polish pass (2026-09-09): "Finished your drive?" and "Questions
 * about hosting a drive?" as two balanced columns inside the one shared
 * navy section (inc/give-food-sections.php's
 * hcfb_give_food_render_completion_contact()) rather than two separate
 * stacked navy bands. A hairline divider (existing surface color at low
 * opacity, no new color) marks the boundary on desktop; it moves to a
 * horizontal rule above the second column once stacked on mobile.
 */
body.hcfb-give-food-experience .hcfb-give-food-completion-contact__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2.5rem;
	max-width: 56rem;
}

body.hcfb-give-food-experience .hcfb-give-food-completion-contact__col + .hcfb-give-food-completion-contact__col {
	border-left: 1px solid rgba(255, 255, 255, 0.25);
	padding-left: 2.5rem;
}

@media (max-width: 640px) {
	body.hcfb-give-food-experience .hcfb-give-food-completion-contact__grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	body.hcfb-give-food-experience .hcfb-give-food-completion-contact__col + .hcfb-give-food-completion-contact__col {
		border-left: none;
		border-top: 1px solid rgba(255, 255, 255, 0.25);
		padding-left: 0;
		padding-top: 2rem;
	}
}