/* ═══════════════════════════════════════════════════════
   VOLUNTEER COVERAGE MAP — PAGE-SPECIFIC CSS
   css/volunteer-coverage-map.css
   Scoped under .page-id-12215 / .vcm-

   Uses vp-system.css for all shared components.
   This file contains ONLY page-specific additions.
   v1.0 — March 2026
   ═══════════════════════════════════════════════════════ */


/* === VP WRAP — nuclear override to ensure padding matches other pages === */
body.page-id-12215 .vp .vp-wrap,
.page-id-12215 .vp.vp-map-intro .vp-wrap,
.page-id-12215 .vp.vp-map-outro .vp-wrap,
.page-id-12215 .entry-content .vp .vp-wrap {
  max-width: 1060px !important; margin: 0 auto !important;
  padding: 0 24px !important; box-sizing: border-box !important;
}
/* Also tame Bootstrap's * reset and theme container breaking */
body.page-id-12215 .entry-content { padding: 0 !important; }
body.page-id-12215 .vp { width: 100% !important; }

/* === TIGHT HERO — keep map above the fold === */
.page-id-12215 .vp-hero--tight { padding: 18px 0 8px !important; }
.page-id-12215 .vp-hero--tight .vp-lead { margin-bottom: 0 !important; }
.page-id-12215 .vp-map-intro .vp-section:first-child { padding-top: 6px !important; }

/* === SHORTCODE CONTAINER — replace Bootstrap with vp-aligned layout === */
.page-id-12215 .entry-content > .container {
  max-width: 1060px !important; margin: 0 auto !important;
  padding: 0 24px !important; width: 100% !important;
}
.page-id-12215 .entry-content > .container > .row {
  display: block !important; margin: 0 !important;
  padding: 0 !important;
}
.page-id-12215 .col-md-9,
.page-id-12215 .col-md-12,
.page-id-12215 .col-md-3 {
  width: 100% !important; max-width: 100% !important;
  flex: none !important; padding: 0 !important; float: none !important;
}

/* === SEARCH BOX === */
.page-id-12215 .local-volunteer-section { width: 100% !important; margin: 0 !important; }
.page-id-12215 .local-volunteer-box {
  background: none !important; border: none !important; box-shadow: none !important;
  padding: 0 !important; max-width: 100% !important; width: 100% !important;
  margin: 0 !important; border-radius: 0 !important;
}
.page-id-12215 .local-volunteer-box form {
  display: flex !important; gap: 8px !important; max-width: 400px !important;
  margin: 0 auto !important; align-items: stretch !important;
  flex-wrap: wrap !important;
}
.page-id-12215 .local-volunteer-box .form-group {
  flex: 1 !important; width: auto !important; padding: 0 !important; margin: 0 !important;
  min-width: 0 !important;
}
.page-id-12215 .local-volunteer-box .form-group label {
  display: block !important; text-align: center !important;
  font-size: 15px !important; font-weight: 600 !important;
  color: #1c3a2a !important; margin-bottom: 8px !important;
  font-family: inherit !important;
}
.page-id-12215 .local-volunteer-box .form-control,
.page-id-12215 .local-volunteer-box input#vcm-zip-input {
  height: auto !important; padding: 10px 14px !important; font-size: 15px !important;
  border: 1px solid #dfe8e1 !important; border-radius: 6px !important;
  box-shadow: none !important; font-family: inherit !important;
  color: #2f2f2f !important; width: 100% !important; text-align: left !important;
  float: none !important; background: #fff !important;
}
.page-id-12215 .local-volunteer-box .form-control:focus,
.page-id-12215 .local-volunteer-box input#vcm-zip-input:focus {
  border-color: #2f7d4d !important; box-shadow: 0 0 0 3px rgba(47,125,77,.1) !important;
  outline: none !important;
}
.page-id-12215 .local-volunteer-box .form-control::placeholder,
.page-id-12215 .local-volunteer-box input#vcm-zip-input::placeholder { color: #5f6b63 !important; }
.page-id-12215 .local-volunteer-box [type="submit"],
.page-id-12215 .local-volunteer-box .btn.green-btn {
  background: #2f7d4d !important; color: #fff !important; border: none !important;
  border-radius: 6px !important; padding: 10px 20px !important;
  font-size: 14px !important; font-weight: 600 !important;
  cursor: pointer !important; font-family: inherit !important;
  width: auto !important; margin: 0 !important; line-height: 1.4 !important;
  white-space: nowrap !important; float: none !important;
}
.page-id-12215 .local-volunteer-box [type="submit"]:hover {
  background: #276741 !important;
}

/* === ZIP VALIDATION === */
.page-id-12215 .vcm-zip-help {
  color: #5f6b63 !important;
  font-size: 13px !important;
  font-family: inherit !important;
  display: block !important;
  margin-top: 4px !important;
  text-align: center !important;
  width: 100% !important;
  flex-basis: 100% !important;
}
.page-id-12215 .vcm-zip-error {
  color: #c0392b !important;
  font-size: 13px !important;
  font-family: inherit !important;
  margin-top: 6px !important;
  display: none !important;
  text-align: center !important;
  width: 100% !important;
  flex-basis: 100% !important;
}
.page-id-12215 .vcm-zip-error[style*="display: block"] {
  display: block !important;
}

/* === ZIP HELPER TEXT + CROSS-LINK === */
.page-id-12215 .vcm-search-helper {
  text-align: center !important;
  font-size: 13px !important;
  color: #5f6b63 !important;
  margin: 8px 0 4px !important;
  font-family: inherit !important;
}
.page-id-12215 .vcm-crosslink {
  text-align: center !important;
  font-size: 14px !important;
  margin: 4px 0 0 !important;
}
.page-id-12215 .vcm-crosslink a {
  color: #5f6b63 !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}
.page-id-12215 .vcm-crosslink a:hover {
  color: #2f7d4d !important;
  text-decoration: underline !important;
}

/* === EXPECTATIONS LINE (below hero lead) === */
.page-id-12215 .vcm-expectations {
  font-size: 14px !important;
  color: #5f6b63 !important;
  margin: 8px 0 0 !important;
  line-height: 1.5 !important;
  font-style: italic !important;
}

/* === CONDENSED EXPLAINER NOTE (above map) === */
.page-id-12215 .vcm-explainer-note {
  max-width: 680px !important;
  margin: 0 auto 6px !important;
  font-size: 14px !important;
  padding: 14px 18px !important;
}

/* === INSTITUTIONAL CALLOUT === */
.page-id-12215 .vcm-institutional-link {
  border-left: 4px solid #2f7d4d !important;
  background: #f7faf8 !important;
  padding: 16px 20px !important;
  border-radius: 0 8px 8px 0 !important;
  font-size: 14px !important;
  color: #48534c !important;
  line-height: 1.6 !important;
  margin-top: 18px !important;
}
.page-id-12215 .vcm-institutional-link a {
  color: #2f7d4d !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.page-id-12215 .vcm-institutional-link a:hover {
  text-decoration: underline !important;
}

/* === ACTIVELY ENLISTED COUNT — headline treatment === */
.page-id-12215 .entry-content .container .row:first-child > p {
  font-size: 26px !important; font-weight: 700 !important; color: #1c3a2a !important;
  margin: 12px 0 16px !important; text-align: center !important;
  letter-spacing: -0.3px !important; line-height: 1.2 !important;
}

/* === MAP === */
.page-id-12215 #map {
  height: 520px !important; border-radius: 10px !important;
  border: 1px solid #dfe8e1 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.03) !important;
}

/* === STATE PILLS === */
.page-id-12215 .filter_state {
  margin-top: 24px !important; padding-top: 24px !important;
  border-top: 1px solid #e5eae6 !important;
  font-size: 14px !important; font-weight: 700 !important;
  color: #1c3a2a !important; text-align: center !important;
}
.page-id-12215 .state_lists {
  display: flex !important; flex-wrap: wrap !important;
  justify-content: center !important; gap: 8px !important;
  margin: 12px 0 0 !important; padding: 0 !important; list-style: none !important;
}
.page-id-12215 .state_lists li {
  display: inline-block !important; border-right: none !important;
  margin: 0 !important; padding: 0 !important; line-height: normal !important;
}
.page-id-12215 .state_lists li:last-child { border-right: none !important; }
.page-id-12215 .state_lists li a {
  display: inline-block !important; padding: 6px 14px !important;
  border-radius: 999px !important; background: #eef6f0 !important;
  border: 1px solid #d8e7dc !important; color: #355842 !important;
  font-size: 13px !important; font-weight: 600 !important;
  text-decoration: none !important; transition: all .2s !important;
}
.page-id-12215 .state_lists li a:hover {
  background: #2f7d4d !important; color: #fff !important;
  border-color: #2f7d4d !important; transform: translateY(-1px) !important;
}

/* === SIDEBAR → 2-COLUMN PROOF CARDS === */
.page-id-12215 .col-md-3 {
  display: grid !important; grid-template-columns: 1fr 1fr !important;
  gap: 0 18px !important; margin-top: 24px !important;
}
.page-id-12215 .col-md-3 > br { display: none !important; }
.page-id-12215 .col-md-3 > h3:first-of-type { grid-column: 1 !important; grid-row: 1 !important; }
.page-id-12215 .col-md-3 > ul:first-of-type { grid-column: 1 !important; grid-row: 2 !important; }
.page-id-12215 .col-md-3 > h3:nth-of-type(2) { grid-column: 2 !important; grid-row: 1 !important; }
.page-id-12215 .col-md-3 > ul:nth-of-type(2) { grid-column: 2 !important; grid-row: 2 !important; }
/* Card appearance — h3 is card header, ul is card body */
.page-id-12215 .col-md-3 > h3 {
  font-size: 13px !important; font-weight: 700 !important; color: #3b7f59 !important;
  text-transform: uppercase !important; letter-spacing: .8px !important;
  margin: 0 !important; padding: 16px 18px 8px !important;
  border: 1px solid #dfe8e1 !important; border-bottom: none !important;
  border-radius: 10px 10px 0 0 !important; background: #fff !important;
}
.page-id-12215 .col-md-3 > ul {
  list-style: none !important; margin: 0 !important;
  padding: 4px 18px 16px !important;
  border: 1px solid #dfe8e1 !important; border-top: none !important;
  border-radius: 0 0 10px 10px !important; background: #fff !important;
}
.page-id-12215 .col-md-3 > ul li {
  padding: 5px 0 !important; font-size: 14px !important;
  border-bottom: 1px solid #f2f4f3 !important;
}
.page-id-12215 .col-md-3 > ul li:last-child { border-bottom: none !important; }
.page-id-12215 .col-md-3 > ul li a {
  color: #2f2f2f !important; font-weight: 500 !important; text-decoration: none !important;
}
.page-id-12215 .col-md-3 > ul li a:hover {
  color: #2f7d4d !important;
}
.page-id-12215 .col-md-3 > ul li a.topfivestate { cursor: pointer !important; }

/* === VOLUNTEER RESULTS (when searched) === */
.page-id-12215 .volunteer-result-section {
  margin-top: 20px !important; border-top: 1px solid #e5eae6 !important;
  padding-top: 20px !important;
}

/* === GHOST-BUST stray elements === */
.page-id-12215 .entry-content > .container > br,
.page-id-12215 .entry-content > .container > p:empty,
.page-id-12215 .entry-content > br,
.page-id-12215 .entry-content > p:empty { display: none !important; }


/* ═══════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .page-id-12215 .col-md-3 { grid-template-columns: 1fr !important; }
  .page-id-12215 .col-md-3 > h3:first-of-type { grid-column: 1 !important; grid-row: 1 !important; }
  .page-id-12215 .col-md-3 > ul:first-of-type { grid-column: 1 !important; grid-row: 2 !important; }
  .page-id-12215 .col-md-3 > h3:nth-of-type(2) { grid-column: 1 !important; grid-row: 3 !important; }
  .page-id-12215 .col-md-3 > ul:nth-of-type(2) { grid-column: 1 !important; grid-row: 4 !important; }
}
@media (max-width: 600px) {
  .page-id-12215 #map { height: 380px !important; }
  .page-id-12215 .entry-content > .container { padding: 0 14px !important; }
  .page-id-12215 .local-volunteer-box form { flex-direction: column !important; max-width: 100% !important; }
  .page-id-12215 .state_lists li a { padding: 5px 11px !important; font-size: 12px !important; }
  .page-id-12215 .vcm-institutional-link { padding: 14px 16px !important; font-size: 13px !important; }
}