/* ==========================================================================
   Local-rebuild fixes (loaded last in <head> so these win the cascade).
   ========================================================================== */

/* Reveal decorative SVG icons inside buttons.
   The source CSS ships an aggressive rule — [aria-hidden="true"]{visibility:hidden}
   — which visually hides EVERY aria-hidden element, including the decorative
   arrow/icon SVGs in buttons (they carry data-role="presentation" aria-hidden="true").
   The icon markup is fully present; it's just hidden. This override restores it.
   Scoped to button icons so genuinely-hidden UI (inactive tabs, closed dialogs,
   off-screen slides) stays hidden. Specificity (0,1,2) beats the source (0,1,0);
   no !important, so any intentional inline toggling still works. */
.btn svg[aria-hidden="true"],
.btn svg[data-role="presentation"] {
  visibility: visible;
}

/* Family-first + Apply Now pages: give the contact-form fields visible borders.
   The source renders these inputs borderless with a transparent background,
   so on the form's cream card they're hard to tell apart from the background.
   Scoped to #ContactS2Form (only on those two pages) so no other form changes. */
#ContactS2Form .ui-cms-input,
#ContactS2Form input.ui-cms-input,
#ContactS2Form textarea.ui-cms-input,
#ContactS2Form select.ui-cms-input {
  border: 1px solid rgba(2, 50, 40, 0.4);
  border-radius: 6px;
  background-color: #fff;
  padding: 0.6rem 0.8rem;
}
#ContactS2Form .ui-cms-input:focus {
  border-color: #62a956;
  outline: 2px solid rgba(98, 169, 86, 0.35);
  outline-offset: 0;
}

/* Restore the pointer cursor on phone (tel:) links.
   The source ships `a[href^=tel]{cursor:default}` in TWO places: the inline
   per-page <head> reset AND the CMS stylesheets under /cms/includes/*.css,
   which are <link>ed from the <body> and therefore load AFTER this file — so a
   plain override loses the cascade to them on source order. !important wins
   over both regardless of order without touching any verbatim CMS clone.
   Phone links should always read as clickable, so forcing pointer is safe. */
a[href^="tel"] {
  cursor: pointer !important;
}

/* Reviews page — "Read More" modal (wired up by /reviews-modal.js).
   The source ships the "Read More" buttons as dead anchors; the script opens
   this modal with the full review. Styled with the brand tokens so it reads as
   native chrome. Scoped to .rv-modal* so nothing else on the site is touched. */
.rv-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(2, 50, 40, 0.6); /* --inner-bg-alt at 60% */
  opacity: 0;
  transition: opacity 0.2s ease;
}
.rv-modal-overlay[hidden] {
  display: none;
}
.rv-modal-overlay.is-open {
  opacity: 1;
}
.rv-modal {
  position: relative;
  width: 100%;
  max-width: 720px;
  max-height: 85vh;
  overflow-y: auto;
  padding: 3rem 3rem 2.5rem;
  background: var(--main-bg, #fff6ed);
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
  transform: translateY(12px);
  transition: transform 0.2s ease;
}
.rv-modal-overlay.is-open .rv-modal {
  transform: translateY(0);
}
.rv-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text, #343434);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}
.rv-modal-close:hover,
.rv-modal-close:focus {
  background: rgba(2, 50, 40, 0.08);
}
.rv-modal-title {
  margin: 0 2rem 1.25rem 0;
  color: var(--text, #343434);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
}
.rv-modal-body {
  margin: 0;
  color: var(--text, #343434);
  font-size: 1.0625rem;
  line-height: 1.7;
}
.rv-modal-author {
  margin: 1.5rem 0 0;
  color: var(--text, #343434);
  font-size: 1rem;
  font-style: normal;
}
body.rv-modal-open {
  overflow: hidden;
}
@media (max-width: 600px) {
  .rv-modal {
    padding: 2.25rem 1.5rem 1.75rem;
  }
}

/* Sticky header (desktop + mobile), driven by the inline script in BaseLayout.
   The script measures the header's natural (un-compacted) height into --hdr-h
   and toggles html.hdr-stuck once the page scrolls.
   - #HeaderZone becomes sticky with a fixed box of --hdr-h, so compacting the
     bar inside it never changes page flow (no scroll jump). The empty part of
     that box lets clicks through to the page below.
   - "Overlap" pages (header over the hero image, desktop only) pull the header
     out of flow with a negative margin and pad the hero by --hdr-h instead of
     the source's absolute positioning + JS padding. site-header.js only pads
     when it sees absolute/fixed, so it now leaves the hero alone.
   - Once stuck, the bar gets the dark brand background and a compact size. */
#HeaderZone {
  position: sticky !important;
  top: 0;
  z-index: 100;
  height: var(--hdr-h, auto);
  pointer-events: none;
}
#HeaderZone > * {
  pointer-events: auto;
}
#HeaderZone .hdr {
  position: relative;
  transition: box-shadow 0.25s ease;
}
html.hdr-stuck #HeaderZone .hdr {
  background: linear-gradient(to bottom right, var(--main-bg-alt), var(--inner-bg-alt)) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}
#HeaderZone .hdr .tp-lg img {
  transition: max-height 0.25s ease;
}
/* The homepage's promo strip ("Family's First Program") sits above the bar;
   drop it while pinned so the stuck header stays compact. */
html.hdr-stuck #HeaderZone > section.bnr {
  display: none;
}
#HeaderZone .hdr .mn_ > .flx,
#HeaderZone .hdr .nv > ul > li,
#HeaderZone #HeaderS1Button > div {
  transition: padding 0.25s ease;
}
/* Measuring the natural height must not be skewed by in-flight transitions. */
html.hdr-measuring #HeaderZone,
html.hdr-measuring #HeaderZone * {
  transition: none !important;
}
/* Back-to-top button: the source pins it to the viewport's top-right corner,
   which now sits on top of the pinned header. Hang it just below the bar. */
#HeaderZone .hdr .btn-tp {
  position: absolute;
  top: 100%;
}
html.mnu-opn #HeaderZone .hdr .btn-tp,
body.mnu-opn #HeaderZone .hdr .btn-tp {
  display: none;
}

@media screen and (min-width: 1280px) {
  body.overlap #HeaderZone {
    margin-bottom: calc(-1 * var(--hdr-h, 0px));
  }
  body.overlap main > section:first-child,
  body.overlap main > form:first-child > section:first-of-type {
    padding-top: var(--hdr-h) !important;
  }
  html.hdr-stuck #HeaderZone .hdr .mn_ > .flx {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
  }
  html.hdr-stuck #HeaderZone .hdr .tp-lg img {
    max-height: 72px;
  }
  html.hdr-stuck #HeaderZone .hdr .nv > ul > li,
  html.hdr-stuck #HeaderZone #HeaderS1Button > div {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
  }
}

/* Mobile "Book Now" bar (inserted by the BaseLayout header script). */
#HeaderZone .hdr .mbl-bk {
  display: none;
}

@media screen and (max-width: 1279px) {
  #HeaderZone .hdr .mbl-bk {
    display: block;
    padding: 0.65rem 1rem;
    text-align: center;
    font-size: 1.15rem;
    line-height: 1.2;
  }
  /* The source leaves the mobile header transparent on "overlap" pages, so its
     white menu/phone icons vanish on the white page. A pinned bar needs a solid
     background anyway; use the same dark brand fill the other pages have. */
  #HeaderZone .hdr {
    background: linear-gradient(to bottom right, var(--main-bg-alt), var(--inner-bg-alt)) !important;
  }
  html.hdr-stuck #HeaderZone .hdr .mn_ > .flx {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
  }
  html.hdr-stuck #HeaderZone .hdr .tp-lg img {
    max-height: 60px;
  }
}