/* ============================================================
   Vasanti Health — Custom Mobile & Nav Fixes
   ============================================================ */

/* 1. Header layout
   (Previously an inline <style> tag sitting inside the flex
    container, which could confuse some mobile browsers.)
   ------------------------------------------------------------ */
.site-header-wrapper {
  justify-content: center;
}
.site-logo {
  margin: 0 auto;
}

/* Mobile header: logo left, hamburger right
   On screens < 640px the desktop nav is hidden, leaving only
   .mobilenav-toggle and .site-logo as flex children. We swap
   their visual order with CSS `order` — no HTML changes needed.
   ------------------------------------------------------------ */
@media screen and (max-width: 639px) {
  .site-header-wrapper {
    justify-content: space-between;
  }
  .site-logo {
    order: 1;       /* render first → left */
    margin: 0;      /* remove the auto-centering margin */
  }
  .mobilenav-toggle {
    order: 2;       /* render second → right */
    margin-right: 0;
    margin-left: 12px; /* breathing room from the right edge */
  }
}


/* 2. Mobile nav drawer — CSS :target fallback (zero JS required)
   The hamburger button already has href="#site-mobilenav", so
   the browser sets :target automatically when it is tapped.
   JS in mobile-nav.js also adds the .mobile-nav-open body class
   for smoother control, but the drawer is usable either way.
   ------------------------------------------------------------ */
#site-mobilenav:target .mobilenav-panel,
body.mobile-nav-open .mobilenav-panel {
  left: 0;
  display: block;
  opacity: 1;
  transform: translateX(0) scale(1);
}

#site-mobilenav:target .mobilenav-overlay,
body.mobile-nav-open .mobilenav-overlay {
  display: block;
  opacity: 1;
}

/* Prevent background scrolling when the drawer is open */
body.mobile-nav-open {
  overflow: hidden;
}

/* Make the overlay visually correct as a close target */
.mobilenav-overlay {
  cursor: pointer;
}


/* 3. Mobile nav — submenu accordion
   Our JS adds .nav-item-open to the parent <li> when tapped.
   ------------------------------------------------------------ */
.mobilenav [data-nav-trigger].nav-item-open > .navmenu-submenu {
  display: block;
  color: #474c46;
}

.mobilenav [data-nav-trigger].nav-item-open > .navmenu-link-parent .navmenu-arrow {
  transform: rotate(90deg);
}

/* Also handle the class that handy.js adds, for compatibility */
.mobilenav .navmenu-submenu.visible {
  display: block;
  color: #474c46;
}


/* 4. Desktop nav — CSS :hover fallback
   Submenus now open on hover without any JavaScript at all.
   JS in mobile-nav.js adds .nav-item-open for keyboard/touch
   on hybrid (touch + pointer) desktop devices.
   ------------------------------------------------------------ */
@media screen and (min-width: 640px) {
  .site-navigation .navmenu-item-parent:hover > .navmenu-submenu,
  .site-navigation .navmenu-item-parent:focus-within > .navmenu-submenu,
  .site-navigation .navmenu-item-parent.nav-item-open > .navmenu-submenu {
    display: block;
    opacity: 1;
    transform: scaleY(1);
  }
}


/* 5. Ensure mobile nav submenu links are readable
   The default colour in theme.scss.css is #6b6b6b80 (very faint).
   ------------------------------------------------------------ */
.mobilenav .navmenu-depth-2 .navmenu-link {
  color: #474c46;
  opacity: 1;
}


/* 6. Mobile nav panel — auto-height instead of full viewport
   ------------------------------------------------------------ */

/* Panel: shrink to content, not full screen height */
#site-mobilenav .mobilenav-panel {
  bottom: auto;
  height: auto;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 0 0 4px 0;
}

/* Panel-content: switch from absolute (was pinned top→bottom-60px)
   to relative so the panel grows with its content */
#site-mobilenav .mobilenav-panel-content {
  position: relative;
  bottom: auto;
  height: auto;
  overflow-y: visible;
}

/* Hide the 60px contact-bar strip at the bottom (no longer needed) */
#site-mobilenav .mobilenav-contactbar {
  display: none;
}

/* Hide the X icon that was floating in the dark overlay at bottom-right.
   We've moved a proper close button inside the panel instead. */
.mobilenav-overlay > svg,
.mobilenav-overlay svg {
  display: none;
}


/* 7. Mobile nav — close button header (replaces search bar)
   ------------------------------------------------------------ */
.mobilenav-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 10px 14px;
  border-bottom: 1px solid #e2e2e2;
  background: #fbfbfb;
}

.mobilenav-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: #474c46;
  border-radius: 4px;
}

.mobilenav-close:hover,
.mobilenav-close:focus {
  color: #0a7f7a;
  outline: none;
}


/* 8. Blog article page layout
   These styles were previously inlined per-page inside .site-header-wrapper
   on every blog post, where they ran AFTER custom.css in document order and
   overrode the mobile logo-left / hamburger-right layout.
   Moved here so mobile behaviour is consistent with all other pages.
   ------------------------------------------------------------ */

/* Full-bleed hero image (breaks out of the content column) */
.article-image-positioned {
  position: relative !important;
  top: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-top: 0 !important;
  margin-left: calc(-50vw + 50%) !important;
  left: 0 !important;
  right: 0 !important;
}

.article-image-positioned img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* Remove extra spacing above article content */
.article-wrapper {
  padding-top: 0 !important;
  margin-top: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}


/* 9. Our Story page — side-by-side on desktop, stacked on mobile
   Desktop (≥640px): heading + flex row with image and text side-by-side.
     Sections alternate: image-right (text left / image right)
                     and image-left  (image left / text right).
   Mobile (<640px): flex-direction: column — items fall in HTML source order,
     which gives heading→image→text (sections 1 & 3)
     and heading→text→image (sections 2 & 4).
   ------------------------------------------------------------ */
.story-section {
  margin-bottom: 2.5rem;
}

/* ── Desktop layout ─────────────────────────────────────────── */
@media screen and (min-width: 640px) {
  .story-row {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
  }

  .story-image {
    flex: 0 0 35%;
  }

  .story-text {
    flex: 1;
  }

  /* image-right: HTML is [image][text] but image renders on the right */
  .story-row--image-right .story-image { order: 2; }
  .story-row--image-right .story-text  { order: 1; }

  /* image-left: HTML is [text][image] but image renders on the left */
  .story-row--image-left .story-image  { order: 1; }
  .story-row--image-left .story-text   { order: 2; }
}

/* ── Mobile layout ──────────────────────────────────────────── */
@media screen and (max-width: 639px) {
  .story-row {
    display: flex;
    flex-direction: column;
  }

  /* Undo any order set for desktop so items fall in HTML source order */
  .story-row .story-image,
  .story-row .story-text {
    order: 0;
  }
}

/* Images fill their column on desktop; centred and capped on mobile */
.story-image img {
  width: 100%;
  height: auto;
  display: block;
}

@media screen and (max-width: 639px) {
  .story-image img {
    max-width: 480px;
    margin: 0 auto;
  }
}


/* 10. Page content tables — responsive stacking on mobile
   Inline-styled <table> elements in .page-content.rte are used for
   image + text side-by-side layouts. On mobile, each <td> becomes a
   full-width block so images wrap above/below their peer text column
   rather than squeezing into a tiny side-by-side cell.
   !important is required to override the inline style= attributes.
   ------------------------------------------------------------ */
@media screen and (max-width: 639px) {
  .page-content.rte table,
  .page-content.rte tbody,
  .page-content.rte tr,
  .page-content.rte td {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }

  .page-content.rte td {
    padding: 6px 0;
  }

  /* Centre images and any wrapper divs that carry text-align: left */
  .page-content.rte td img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
  }

  .page-content.rte td div {
    text-align: center !important;
  }
}