/* ==========================================================================
   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;
}

/* ==========================================================================
   Mobile fixes (2026-11). Phone/tablet only — desktop is unchanged.
   ========================================================================== */

/* Every text field on a touch screen: iOS zooms the page on focus under 16px.
   Keyed on the pointer, not the width, so a landscape iPhone is covered too. */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]),
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* The slide-in menu used 100vh, which is taller than the visible area while
   the mobile browser toolbar is showing (the last links hid under it). */
@media (max-width: 992px) {
  @supports (height: 100dvh) {
    .vs_navbar .vs_menu_middle {
      height: 100dvh;
    }
  }
}

/* Floating buttons: with WhatsApp + Facebook + Instagram (+ X) stacked on the
   right edge they covered text and cards on phones (e.g. the Our Impact
   timeline). The footer already links every social profile, so on phones keep
   only WhatsApp and back-to-top, sit them above the home indicator / clear of a
   landscape notch, and give them a 44px tap target. */
@media (max-width: 767.98px) {
  .vs_fix_btn {
    bottom: calc(16px + env(safe-area-inset-bottom));
    right: env(safe-area-inset-right);
    padding: 0 12px;
    align-items: flex-end;
  }

  .vs_fix_whatsup_btn {
    padding-right: 0;
  }

  /* Only the first link (WhatsApp) stays; the others are in the footer. */
  .vs_fix_whatsup_btn a:not(:first-child) {
    display: none;
  }

  .vs_fix_whatsup_btn a {
    display: block;
    min-width: 44px;
    min-height: 44px;
  }

  .vs_fix_whatsup_btn img {
    width: 48px;
    height: 48px;
  }

  .vs_last_btn {
    padding-left: 0;
  }
}

/* Keep content in the footer clear of the home indicator on notched phones. */
@media (max-width: 767.98px) {
  footer {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* The video modal: use the full width on phones. */
@media (max-width: 575.98px) {
  #vsVideoModal .modal-dialog {
    margin: 0.5rem;
    max-width: none;
  }
}