/* ==========================================================================
   Styles for editor-written rich text (admin "body" fields).
   Mirrors the hand-written page styles so CMS content looks the same.
   ========================================================================== */

/* Program overview text: matches .vs_about_text in style.css */
.vs_about_body p {
  color: var(--vs-text-muted);
  margin-bottom: 22px;
  line-height: 1.8;
}

.vs_about_body ul,
.vs_about_body ol {
  color: var(--vs-text-muted);
  margin-bottom: 22px;
  line-height: 1.8;
}

/* Rich text inside articles and legal pages */
.vs_article_body ul,
.vs_article_body ol {
  margin-bottom: 18px;
  line-height: 1.8;
}

.vs_article_body img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

/* Form honeypot: off-screen for people, still in the DOM for bots */
.vs_hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.vs_field_error {
  color: var(--vs-red);
  font-size: 0.85rem;
  margin-top: 4px;
}

/* Flash messages after a form submit */
.vs_flash_messages {
  position: fixed;
  top: 90px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  width: min(560px, calc(100% - 32px));
}

/* ==========================================================================
   Mobile fixes (2026-10 audit). Phone/tablet only — desktop is unchanged.
   The original rules live in the static site's CSS, which is kept as-is.
   ========================================================================== */

/* Touch screens: iOS Safari zooms the page when a focused input is under 16px.
   (style.css sets the contact form to 0.94rem = 15px.) */
@media (max-width: 991.98px) {
  .vs_contact2_form .form-control,
  .vs_contact2_form .form-select {
    font-size: 16px;
  }
}

@media (max-width: 767.98px) {
  /* `.row.g-5` has -24px side margins but containers only pad 12px, so the row
     stuck out and the page scrolled sideways on 360px phones. Use the g-4
     horizontal gutter on small screens; the vertical gutter stays. */
  .row.g-5 {
    --bs-gutter-x: 1.5rem;
  }

  /* Bigger tap targets in the slide-in menu without moving anything:
     padding grows the hit area, the matching negative margin keeps the layout. */
  .vs_navbar .vs_menu_middle > li > a {
    display: inline-block;
    padding: 13px 16px;
    margin-top: -13px;
    margin-bottom: -13px;
  }

}

/* Phones and tablets: bigger tap targets, readable tags. */
@media (max-width: 991.98px) {
  /* Category tags on the home programs grid and news cards (were ~11px). */
  .vs_bento_tag,
  .vs_blog_cat {
    font-size: 12px;
  }

  /* Footer social icons were 35px. */
  footer .vs_social_icon li a {
    width: 44px;
    height: 44px;
  }

  /* Gallery filter buttons were 38px tall. */
  .vs_gallery_filters button {
    min-height: 44px;
  }

  /* Footer email / phone / website links were 22px tall. Same trick as the menu:
     the padding grows the hit area, the negative margin keeps the spacing. */
  .vs_ftr_list ul a {
    padding-top: 11px;
    padding-bottom: 11px;
    margin-top: -11px;
    margin-bottom: -11px;
  }
}

/* The floating WhatsApp / Facebook / Instagram buttons sat on top of the open
   mobile menu. The menu script adds body.disabled while the menu is open. */
@media (max-width: 992px) {
  body.disabled .vs_fix_btn {
    display: none;
  }
}

@media (max-width: 576px) {
  /* responsive_style.css shrinks every .vs_ctm_btn to 10px text / ~29px tall
     on phones — too small for the main calls to action. 44px is the usual minimum. */
  /* (The floating back-to-top circle keeps its own styling.) */
  .vs_ctm_btn:not(.vs_last_btn *) {
    min-height: 44px;
    padding: 10px 18px;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

}

/* Some buttons are a <button class="vs_ctm_btn"> wrapping an <a> (e.g. the header
   "Donate Now"). Only the link navigates, so taps on the button's padding did
   nothing. Stretch the link over the whole button. No visual change. */
.vs_ctm_btn > a::after {
  content: "";
  position: absolute;
  inset: 0;
}