/* ============================================================
   PATCH CSS — add to the END of assets/css/style.css
   ============================================================ */

/* ── Phone icon fix — force dark navy, not pink ─────────────
   Some browsers render the ☎ / 📞 emoji with a pink tint.
   We override contact-detail icons to use navy SVG instead.  */
.contact-detail .icon {
  color: var(--navy) !important;
  filter: none !important;
}

/* ── Footer phone icon specifically ──────────────────────── */
.email-icon-box {
  background: var(--navy) !important;
  color: #fff !important;
  border-radius: 8px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

/* ── Cross-browser button fixes ──────────────────────────── */
.btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

/* ── Cross-browser form input resets ─────────────────────── */
input, select, textarea {
  -webkit-appearance: none;
  appearance: none;
  font-family: 'DM Sans', sans-serif;
  box-sizing: border-box;
}

/* ── Cross-browser flex fixes ────────────────────────────── */
.nav-links { display: -webkit-flex; display: flex; }
.footer-main { display: -webkit-flex; display: flex; }

/* ── Fix Safari navbar position ─────────────────────────── */
.navbar {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* ── Fix iOS Safari tap highlight ───────────────────────── */
a, button {
  -webkit-tap-highlight-color: transparent;
}

/* ── Quiz option buttons cross-browser ───────────────────── */
.qopt, .quiz-opt {
  -webkit-appearance: none;
  appearance: none;
  border: 2px solid var(--border);
  background: #fff;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
}

/* ── Newsletter popup cross-browser ─────────────────────── */
#nl-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(13,34,68,.7);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
#nl-overlay.open {
  display: -webkit-flex !important;
  display: flex !important;
}

/* ── Mobile responsive fixes ─────────────────────────────── */
@media (max-width: 900px) {
  /* ── CRITICAL FIX: inline 2-column grids (page heroes, partnership
     pages, "Our Programs" / services list, etc.) never collapse to a
     single column on mobile/tablet because they're written as inline
     style="display:grid;grid-template-columns:1fr 1fr" — inline styles
     can't be overridden by a normal class-based media query.

     This is deliberately implemented with display:flex + flex-direction:
     column rather than grid-template-columns:1fr. Overriding only the
     grid-template-columns property left some browsers (confirmed: iOS
     Safari) still rendering the second grid item squeezed into a thin
     column — likely a track-sizing/recalculation quirk specific to that
     engine. Switching display itself to flex avoids the grid layout
     algorithm entirely on mobile, which is a more reliable cross-browser
     way to force single-column stacking. ── */
  [style*="grid-template-columns:1fr 1fr;"],
  [style*="grid-template-columns: 1fr 1fr;"],
  [style*="grid-template-columns:1fr 1fr "],
  [style*="grid-template-columns: 1fr 1fr "] {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Direct children of the now-flex container must give up any grid-era
     width assumptions and take the full row width */
  [style*="grid-template-columns:1fr 1fr;"] > *,
  [style*="grid-template-columns: 1fr 1fr;"] > *,
  [style*="grid-template-columns:1fr 1fr "] > *,
  [style*="grid-template-columns: 1fr 1fr "] > * {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
  }

  /* Images inside those children must also be told explicitly to fill
     the now-full-width row — belt-and-suspenders alongside the parent
     fix above, since this is the exact element that was rendering as
     a thin sliver on iOS Safari */
  [style*="grid-template-columns:1fr 1fr;"] img,
  [style*="grid-template-columns: 1fr 1fr;"] img,
  [style*="grid-template-columns:1fr 1fr "] img,
  [style*="grid-template-columns: 1fr 1fr "] img {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* EXCLUSION: the rules above use substring matching, and the text
     "1fr 1fr " is also a substring of "1fr 1fr 1fr" — without this,
     3-column inline grids (e.g. book-call.php's time-slot picker)
     would incorrectly get switched to flex/stacked too. This restores
     them to their original 3-column grid layout, untouched. */
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 8px !important;
  }

  /* NOTE: gap is intentionally left as-is (not overridden) — each
     section already defines its own gap (12px for form field pairs
     up to 64px for hero sections), and those values read fine once
     stacked to a single column. Forcing one universal gap here made
     form pairs like First/Last Name look oddly spaced. */

  /* Hero images inside these grids: cap height so they don't look
     stretched once stacked full-width on a narrower screen */
  .page-hero [style*="grid-template-columns"] img {
    height: 280px !important;
  }
}


@media (max-width: 768px) {
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .form-row  { grid-template-columns: 1fr; }
  .partner-types { grid-template-columns: 1fr; }
  #packages-grid { grid-template-columns: 1fr !important; }

  /* Fix hero text on mobile */
  .page-hero h1 { font-size: clamp(1.8rem, 5vw, 2.5rem); }

  /* ── Mobile navbar: logo + hamburger only; login lives in mobile menu ── */
  .navbar { padding: 0 16px; }
  .nav-inner {
    height: 72px;
    gap: 12px;
  }
  .nav-logo img {
    height: 48px !important;
  }
  .nav-links,
  .nav-desktop-auth {
    display: none !important;
  }
  .nav-actions {
    margin-left: auto;
    gap: 0;
  }
  .hamburger {
    display: flex !important;
  }
  .mobile-menu {
    top: 72px;
    padding: 24px 20px 32px;
  }
  .mobile-menu .mobile-auth {
    margin-top: 8px;
    width: 100%;
    justify-content: center;
  }

  .page-hero [style*="grid-template-columns"] img {
    height: 240px !important;
  }

  /* services-list / service-item: turn off the hover-only background
     reveal pattern on touch devices and make sure text is always
     visible (hover states don't reliably fire on mobile, which is why
     the panel could appear empty) */
  .service-item-bg,
  .service-item-overlay {
    opacity: 0 !important;
  }
  .service-item {
    flex-wrap: wrap;
    padding: 24px 20px;
  }

  /* ── Fixed-width sidebar grids (book-call, gift) ─────────────
     "1fr 380px" never collapses to single column without this.  */
  [style*="grid-template-columns:1fr 380px"],
  [style*="grid-template-columns: 1fr 380px"] {
    display: flex !important;
    flex-direction: column !important;
  }
  [style*="grid-template-columns:1fr 380px"] > *,
  [style*="grid-template-columns: 1fr 380px"] > * {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ── 3-column inline grids → 2 columns on tablet ─────────── */
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── pkg-grid (quiz result packages) → 2 columns on tablet ── */
  #pkg-grid { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 480px) {
  .page-hero [style*="grid-template-columns"] img {
    height: 200px !important;
  }
  .section { padding: 48px 16px; }
  .container { padding: 0 16px; }
  .flow-card { padding: 20px 16px; }

  /* ── 3-column inline grids → 1 column on phone ───────────── */
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* ── 2-column inline grids → 1 column on phone ───────────── */
  [style*="grid-template-columns:repeat(2,1fr)"],
  [style*="grid-template-columns: repeat(2,1fr)"],
  [style*="grid-template-columns:repeat(2, 1fr)"],
  [style*="grid-template-columns: repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* ── stat-grid & pkg-grid → 1 column on small phones ─────── */
  .stat-grid  { grid-template-columns: 1fr !important; }
  #pkg-grid   { grid-template-columns: 1fr !important; }

  /* ── book-call calendar: reduce day-cell size so 7 cols fit ─ */
  .cal-day {
    font-size: .72rem !important;
    height: 30px !important;
  }
}

/* ── Password eye-toggle ─────────────────────────────────────
   JS in footer.php wraps every input[type=password] in
   .pwd-eye-wrap and appends a .pwd-eye-btn toggle button.    */
.pwd-eye-wrap {
  position: relative;
  display: block;
}
.pwd-eye-wrap input {
  padding-right: 44px !important;
  box-sizing: border-box;
  width: 100%;
}
.pwd-eye-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: #94a3b8;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.pwd-eye-btn:hover { color: var(--navy, #0d2244); }

/* ── Per-field inline validation errors ─────────────────────── */
.fe {
  display: none;
  font-size: 12px;
  color: #ff0000b3;
  margin-top: 4px;
  line-height: 1.4;
}
.fe.show { display: block; }
input.fe-invalid, textarea.fe-invalid, select.fe-invalid {
  border-color: #ff0000b3 !important;
  background: #fff8f8 !important;
}