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

/* ==========================================================================
   Mobile menu drawer (brandly-fe mobile rules #1, #2, #7). Phone/tablet only.
   ========================================================================== */
@media (max-width: 992px) {
  /* The drawer scrolls on its own and never drags the page along; it also keeps
     clear of the notch / home indicator (needs viewport-fit=cover, set in base.html). */
  .vs_navbar .vs_menu_middle {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: calc(40px + env(safe-area-inset-top)) env(safe-area-inset-right)
      calc(40px + env(safe-area-inset-bottom)) env(safe-area-inset-left);
  }

  /* Close (X): 44px tap target, clear of the notch when held sideways. */
  .vs_menu_middle .vs_cancel-btn {
    top: calc(12px + env(safe-area-inset-top));
    right: calc(16px + env(safe-area-inset-right));
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* On phones the drawer is full screen: a 340px drawer on a 360-420px phone leaves a
   useless sliver of page showing beside it. Tablets keep the 340px side panel. */
@media (max-width: 639.98px) {
  .vs_navbar .vs_menu_middle {
    max-width: none;
  }
}

/* Mobile menu text was 15px (Donate Now 13px) on a full-screen drawer: too small.
   Scaled up so the drawer reads at arm's length, with more room between items. */
@media (max-width: 992px) {
  .vs_navbar .vs_menu_middle li {
    margin-top: 22px;
  }

  .vs_navbar .vs_menu_middle li a {
    font-size: 24px;
    letter-spacing: 0.2px;
  }

  .vs_navbar .vs_menu_middle .vs_ctm_btn {
    min-height: 56px;
    padding: 12px 32px;
    font-size: 19px;
  }

  .vs_navbar .vs_menu_middle .vs_ctm_btn a,
  .vs_navbar .vs_menu_middle .vs_ctm_btn span {
    font-size: 19px;
  }
}