/* ═══════════════════════════════════════════════════════════════════════
   VP SHELL — Canonical Interior Page Shell (Single Source of Truth)
   ═══════════════════════════════════════════════════════════════════════

   This is the ONLY file that defines the shared .vp page shell used by
   all canonical interior pages on the site. Every rule here applies to
   any page that uses the <div class="vp"><div class="vp-wrap"> pattern.

   CANONICAL PAGES USING THIS SHELL:
   - /about/
   - /how-it-works/
   - /volunteer/
   - /partners/           (partners-hub.css adds page-specific rules)
   - /partners/resource/  (resource-partners.css adds page-specific rules)
   - /veterans/           (veterans-page.css adds page-specific rules)
   - /military-volunteers/ (military-volunteers-page.css adds page-specific rules)

   HOW TO ADD A NEW PAGE:
   1. Use <div class="vp"><div class="vp-wrap"> as your root
   2. This file gives you the full shell for free
   3. Only create a page-specific CSS file for truly unique content
   4. See templates/vp-starter.php for the full markup pattern

   DO NOT:
   - Duplicate these rules in page-specific CSS files
   - Create new full-width hero patterns for interior pages
   - Invent parallel layout systems (.xyz-wrap, .xyz-section, etc.)
   - Override these values in page-specific files unless truly necessary

   COMPONENT INVENTORY:
   .vp-wrap         — 1060px centered rail
   .vp-authority    — dark green rounded top stripe
   .vp-section      — content section with top-border divider
   .vp-hero         — pale green rounded hero card (use with .vp-section)
   .vp-kicker       — uppercase label above headings
   .vp-lead         — larger intro/subhead paragraph
   .vp-card         — white bordered card
   .vp-grid-2       — 2-column CSS grid
   .vp-grid-3       — 3-column CSS grid
   .vp-steps-card   — numbered step list wrapper
   .vp-step         — individual step row
   .vp-step-num     — green numbered circle
   .vp-note         — left-bordered callout box
   .vp-chip         — rounded pill tag
   .vp-emoji        — large emoji block
   .vp-btn          — base button
   .vp-btn--primary — green filled button
   .vp-btn--secondary — light green button
   .vp-btn--ghost   — transparent button (for dark backgrounds)
   .vp-btn-lg       — larger button size
   .vp-btn-mt       — margin-top utility for buttons
   .vp-row          — flex row
   .vp-row--center  — centered flex row
   .vp-final        — dark green CTA block
   .vp-final-footer — small footer text inside .vp-final

   ═══════════════════════════════════════════════════════════════════════ */


/* ── Page-Level Theme Overrides ──
   Reset Twenty Twenty-One defaults for any page using the .vp shell.
   Custom templates bypass page.php but still render inside .site-main
   and .entry-content — both carry default padding and max-width that
   conflict with the .vp-wrap rail. These overrides ensure consistent
   spacing on every .vp page without needing per-page duplication.
   ─────────────────────────────────────────────────────────── */

/* Hide WP-generated title and footer (shell handles its own heading) */
.vp .entry-title { display: none !important; }
.vp ~ .entry-footer { display: none !important; }

/* Kill Twenty Twenty-One constraints for .vp template pages.
   Classic Editor pages zero .site-main via Additional CSS and get 15px
   top spacing from .container-new-con (page.php wrapper). Template pages
   skip page.php entirely, so we zero .site-main here and let .vp-wrap's
   15px top padding provide the equivalent spacing. Result: both paths
   produce exactly 15px between header and content. */
.page-template-templates-veterans-page-php .entry-content,
.page-template-templates-military-volunteers-page-php .entry-content,
.page-template-templatesvolunteer-search-results-php .entry-content,
.page-template-templatesclient-posted-request-php .entry-content {
	max-width: 100% !important;
	padding: 0 !important;
}
.page-template-templates-veterans-page-php .site-main,
.page-template-templates-military-volunteers-page-php .site-main,
.page-template-templatesvolunteer-search-results-php .site-main,
.page-template-templatesclient-posted-request-php .site-main {
	padding-top: 0 !important;
}


/* ── Wrapper ── */
/* Top padding matches .container-new-con (15px) from page.php, which
   Classic Editor pages get automatically but custom templates skip. */
.vp-wrap {
	max-width: 1060px !important;
	margin: 0 auto !important;
	padding: 15px 24px 48px !important;
}

/* ── Stray WP Tag Fix (Classic Editor injects <p> and <br> between elements) ── */
.vp > p,
.vp > br,
.vp-wrap > p,
.vp-wrap > br {
	display: none !important;
}

/* ── SVG Fix (Bootstrap 4 / theme global svg{width:100%}) ── */
.vp svg { width: auto !important; }


/* ═══════════════════════════════════════════════════════
   AUTHORITY BAR — Dark green rounded top stripe
   ═══════════════════════════════════════════════════════ */
.vp-authority {
	background: #1c3a2a !important;
	color: #95d5b2 !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: .03em !important;
	padding: 9px 16px !important;
	border-radius: 6px !important;
	margin-bottom: 24px !important;
	text-align: center !important;
}
.vp-authority strong { color: #fff !important; }


/* ═══════════════════════════════════════════════════════
   SECTIONS — Content blocks with top-border dividers
   ═══════════════════════════════════════════════════════ */
.vp-section {
	padding: 38px 0 !important;
	border-top: 1px solid #e5eae6 !important;
}
.vp-section:first-child {
	border-top: none !important;
	padding-top: 12px !important;
}


/* ═══════════════════════════════════════════════════════
   HERO — Pale green rounded hero card
   Always used as .vp-section.vp-hero
   ═══════════════════════════════════════════════════════ */
.vp-hero {
	background: linear-gradient(180deg, #f4f9f5 0%, #fff 100%) !important;
	border: 1px solid #dce9df !important;
	border-radius: 10px !important;
	padding: 32px 28px !important;
}


/* ═══════════════════════════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════════════════════════ */
.vp-kicker {
	display: block !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: .08em !important;
	color: #3b7f59 !important;
	margin-bottom: 6px !important;
}

.vp h1 {
	font-size: clamp(28px, 4vw, 40px) !important;
	font-weight: 700 !important;
	color: #1c3a2a !important;
	line-height: 1.2 !important;
	margin: 0 0 12px !important;
}

.vp h2 {
	font-size: clamp(22px, 3vw, 28px) !important;
	font-weight: 700 !important;
	color: #1c3a2a !important;
	line-height: 1.25 !important;
	margin: 0 0 10px !important;
}

.vp h3 {
	font-size: 18px !important;
	font-weight: 700 !important;
	color: #1c3a2a !important;
	margin: 0 0 6px !important;
}

.vp-lead {
	font-size: 17px !important;
	color: #48534c !important;
	line-height: 1.6 !important;
	margin-bottom: 18px !important;
}

.vp p {
	font-size: 16px !important;
	color: #2f2f2f !important;
	line-height: 1.6 !important;
}


/* ═══════════════════════════════════════════════════════
   GRIDS
   ═══════════════════════════════════════════════════════ */
.vp-grid-2 {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 18px !important;
}
.vp-grid-3 {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 18px !important;
}

/* Hide WP stray tags inside grids */
.vp-grid-2 > p, .vp-grid-2 > br,
.vp-grid-3 > p, .vp-grid-3 > br {
	display: none !important;
}


/* ═══════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════ */
.vp-card {
	background: #fff !important;
	border: 1px solid #dfe8e1 !important;
	border-radius: 10px !important;
	padding: 20px !important;
	box-shadow: 0 1px 3px rgba(0,0,0,.03) !important;
}


/* ═══════════════════════════════════════════════════════
   EMOJI
   ═══════════════════════════════════════════════════════ */
.vp-emoji {
	font-size: 28px !important;
	display: block !important;
	margin-bottom: 10px !important;
}


/* ═══════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════ */
.vp-btn {
	display: inline-block !important;
	padding: 12px 20px !important;
	border-radius: 6px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	cursor: pointer !important;
	transition: transform .15s, box-shadow .15s !important;
	text-align: center !important;
	line-height: 1.4 !important;
}
.vp-btn:hover {
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 12px rgba(0,0,0,.1) !important;
}

.vp-btn--primary {
	background: #2f7d4d !important;
	color: #fff !important;
	border: none !important;
}
.vp-btn--primary:hover {
	background: #276741 !important;
	color: #fff !important;
}

.vp-btn--secondary {
	background: #eef6f0 !important;
	color: #2f7d4d !important;
	border: 1px solid #cfe2d3 !important;
}
.vp-btn--secondary:hover {
	background: #e0ede4 !important;
	color: #2f7d4d !important;
}

.vp-btn--ghost {
	background: transparent !important;
	color: #fff !important;
	border: 2px solid rgba(255,255,255,.5) !important;
}
.vp-btn--ghost:hover {
	background: rgba(255,255,255,.1) !important;
	color: #fff !important;
}

.vp-btn-lg {
	font-size: 17px !important;
	padding: 14px 32px !important;
}

.vp-btn-mt {
	margin-top: 16px !important;
}


/* ═══════════════════════════════════════════════════════
   ROW LAYOUT
   ═══════════════════════════════════════════════════════ */
.vp-row {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
}
.vp-row--center {
	justify-content: center !important;
}


/* ═══════════════════════════════════════════════════════
   STEPS — Numbered step list
   ═══════════════════════════════════════════════════════ */
.vp-steps-card {
	background: #fff !important;
	border: 1px solid #dfe8e1 !important;
	border-radius: 10px !important;
	padding: 20px !important;
	box-shadow: 0 1px 3px rgba(0,0,0,.03) !important;
}

.vp-step {
	display: grid !important;
	grid-template-columns: 42px 1fr !important;
	gap: 16px !important;
	align-items: flex-start !important;
	padding: 18px 0 !important;
	border-bottom: 1px solid #e8ece7 !important;
}
.vp-step:last-child {
	border-bottom: none !important;
}

.vp-step-num {
	width: 36px !important;
	height: 36px !important;
	border-radius: 50% !important;
	background: #2f7d4d !important;
	color: #fff !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/* Hide WP stray tags in steps */
.vp-steps-card > p, .vp-steps-card > br,
.vp-step > p, .vp-step > br {
	display: none !important;
}


/* ═══════════════════════════════════════════════════════
   NOTE — Left-bordered callout box
   ═══════════════════════════════════════════════════════ */
.vp-note {
	background: #f7faf8 !important;
	border-left: 4px solid #2f7d4d !important;
	padding: 14px 16px !important;
	border-radius: 0 8px 8px 0 !important;
	font-size: 15px !important;
	color: #48534c !important;
	margin-top: 16px !important;
}
.vp-note a:not(.vp-btn) {
	color: #2f7d4d !important;
	font-weight: 600 !important;
}


/* ═══════════════════════════════════════════════════════
   CHIP — Rounded pill tag
   ═══════════════════════════════════════════════════════ */
.vp-chip {
	display: inline-block !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: #48534c !important;
	padding: 5px 12px !important;
	background: #f7faf8 !important;
	border: 1px solid #e5eae6 !important;
	border-radius: 16px !important;
}


/* ═══════════════════════════════════════════════════════
   FINAL CTA — Dark green CTA block
   ═══════════════════════════════════════════════════════ */
.vp-final {
	text-align: center !important;
	background: #1c3a2a !important;
	color: #fff !important;
	border-radius: 10px !important;
	padding: 36px 28px !important;
	margin-top: 38px !important;
}
.vp-final h2 {
	color: #fff !important;
}
.vp-final h2 em {
	color: #95d5b2 !important;
	font-style: italic !important;
}
.vp-final p {
	color: rgba(255,255,255,.8) !important;
}
.vp-final a {
	color: #95d5b2 !important;
}
.vp-final .vp-kicker {
	color: #95d5b2 !important;
}
.vp-final-footer {
	margin-top: 20px !important;
	font-size: 12px !important;
	color: rgba(255,255,255,.4) !important;
}


/* ═══════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════ */
@media (max-width: 900px) {
	.vp-grid-2,
	.vp-grid-3 {
		grid-template-columns: 1fr !important;
	}
}

@media (max-width: 600px) {
	.vp-wrap {
		padding: 15px 14px 32px !important;
	}
	.vp-hero {
		padding: 20px !important;
	}
	.vp-section {
		padding: 28px 0 !important;
	}
	.vp-final {
		padding: 28px 20px !important;
	}
}