/* ==========================================================================
   bsmmp-responsive.css
   Single menu markup -> desktop horizontal / mobile offcanvas transform
   ========================================================================== */

/* ---------- MOBILE / TABLET (< 992px): true right-to-left offcanvas ----------
   Every layout-critical property is hardened with !important so this
   can never be silently overridden — the drawer must always be a
   fixed, full-height, right-aligned, opaque panel regardless of scroll
   position or any other rule that might otherwise interfere. */
@media (max-width: 991.98px){

  .bsmmp-menu-panel{
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    height: 100vh !important;
    height: 100dvh !important;
    width: 86vw !important;
    max-width: 380px !important;
    background: var(--bsmmp-cream) !important;
    box-shadow: -12px 0 40px rgba(42,24,16,.28);
    z-index: 1045 !important;
    display: flex !important;
    flex-direction: column !important;
    visibility: visible;
  }
  .bsmmp-menu-panel .offcanvas-body{
    overflow-y: auto !important;
    flex: 1 1 auto !important;
  }

  .bsmmp-menu{
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .bsmmp-menu-item{ width:100%; border-bottom: 1px solid rgba(184,147,63,.18); }
  .bsmmp-menu-link, .bsmmp-menu-toggle{
    width:100%;
    padding: 1rem .2rem;
    font-size: 1rem;
    justify-content: space-between;
  }

  /* accordion behaviour for submenus */
  .bsmmp-submenu{
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease;
    padding-left: .9rem;
    border-left: 2px solid var(--bsmmp-gold-light);
    margin-left: .2rem;
  }
  .bsmmp-has-submenu.bsmmp-open > .bsmmp-submenu{
    max-height: 800px;
  }
  .bsmmp-has-submenu.bsmmp-open > .bsmmp-menu-toggle .bi{
    transform: rotate(180deg);
  }
  .bsmmp-submenu .bsmmp-has-submenu > .bsmmp-submenu{
    background: rgba(184,147,63,.05);
    border-radius: 6px;
  }

  .bsmmp-menu-panel .bsmmp-btn-donate{
    width:100%;
    justify-content:center;
    margin-top: 1.6rem;
  }
}

/* Bootstrap's own offcanvas backdrop must sit above the fixed
   topbar+navbar (z-index:1030) but below the drawer itself (1045),
   and always cover the full viewport regardless of scroll position */
.offcanvas-backdrop{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 1040 !important;
}

/* ---------- DESKTOP (>= 992px): un-offcanvas the same single menu
   markup into an ordinary inline horizontal nav ---------- */
@media (min-width: 992px){

  /* Neutralise Bootstrap offcanvas mechanics so the panel behaves as an
     ordinary inline horizontal nav using the exact same HTML.
     IMPORTANT: visibility must be forced visible — Bootstrap's own
     .offcanvas CSS defaults to visibility:hidden until the .show class
     is added, which never happens here since it's never triggered. */
  .bsmmp-menu-panel{
    position: static !important;
    transform: none !important;
    visibility: visible !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    z-index: auto !important;
  }
  .bsmmp-menu-panel .offcanvas-header{ display:none !important; }
  .bsmmp-menu-panel .offcanvas-body{
    padding: 0;
    overflow: visible;
    display:flex;
    align-items:center;
  }
  .bsmmp-menu-panel .bsmmp-btn-donate{ display:none; } /* shown separately in header on desktop */

  /* Level 2 dropdown */
  .bsmmp-has-submenu > .bsmmp-submenu{
    position:absolute;
    top: calc(100% + 10px);
    left:0;
    min-width: 240px;
    background: var(--bsmmp-white);
    border: 1px solid rgba(184,147,63,.3);
    border-top: 3px solid var(--bsmmp-gold);
    border-radius: 8px;
    box-shadow: var(--bsmmp-shadow-strong);
    padding: .6rem;
    opacity:0;
    visibility:hidden;
    transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
  }
  .bsmmp-menu-item.bsmmp-has-submenu:hover > .bsmmp-submenu,
  .bsmmp-menu-item.bsmmp-has-submenu:focus-within > .bsmmp-submenu,
  .bsmmp-menu-item.bsmmp-has-submenu.bsmmp-force-open > .bsmmp-submenu{
    opacity:1;
    visibility:visible;
    transform:none;
  }

  /* Rightmost items' dropdowns sit near the viewport edge; align them
     right instead of left so they never overflow off-screen */
  .bsmmp-submenu-align-right{ left:auto; right:0; }

  /* Level 3 flyout, opens to the right of level 2 by default... */
  .bsmmp-submenu .bsmmp-has-submenu{ position:relative; }
  .bsmmp-submenu .bsmmp-has-submenu > .bsmmp-submenu{
    top: -.6rem;
    left: calc(100% + 8px);
  }
  .bsmmp-submenu .bsmmp-has-submenu > .bsmmp-submenu-link .bi{
    transform: rotate(-90deg);
  }
  /* ...except inside a right-aligned parent, where it opens leftward */
  .bsmmp-submenu-flyout-left{
    left:auto !important;
    right: calc(100% + 8px);
  }
  .bsmmp-submenu-align-right .bsmmp-has-submenu > .bsmmp-submenu-link .bi{
    transform: rotate(90deg);
  }

  .bsmmp-menu-toggle .bi{ font-size:.6rem; }
}
/* ---------- Hero split: stack image over text below desktop ---------- */
@media (max-width: 991.98px){
  .bsmmp-hero-split{ flex-direction:column; }
  .bsmmp-hero-split-image,
  .bsmmp-hero-split-text{
    flex: 0 0 auto;
    max-width:100%;
  }
  .bsmmp-hero-split-image{  padding: 1.2rem 1.2rem .6rem; }
  .bsmmp-hero-image-frame{ width:100%; height:100%; max-height:none; }
  .bsmmp-hero-arrow{ width:32px; height:32px; font-size:.85rem; }
  .bsmmp-hero-split-text{
    padding: 1rem 2rem 1.6rem;
  }
  .bsmmp-hero-split-text .bsmmp-hero-yantra{
    right:0; width:200px; height:200px;
  }
  .bsmmp-hero-scroll-split{ left:50%; right:auto; transform:translateX(-50%); }
}

/* ---------- Fine breakpoint tuning ---------- */
@media (max-width: 575.98px){
  .bsmmp-full-container{ padding-left:1.1rem; padding-right:1.1rem; }
  .bsmmp-section{ padding: 3.5rem 0; }
  .bsmmp-stat-chip{ right: 0; bottom: -1.2rem; padding: .9rem 1.1rem; }
  .bsmmp-stat-chip .bsmmp-stat-num{ font-size:1.5rem; }
  .bsmmp-ask-card{ padding: 2rem 1.3rem; }
  .bsmmp-event-card{ flex-direction:column; }
  .bsmmp-event-date{ flex-direction:row; width:100%; height:auto; gap:.5rem; padding:.6rem; }
  .bsmmp-hero-split-image{ height:300px; min-height:130px; padding: 1rem 1rem .5rem; }
  .bsmmp-hero-image-frame{ width:100%; height:100%; max-height:none; }
  .bsmmp-hero-split-text{ padding: .9rem 1.3rem 1.4rem; }
  .bsmmp-moments-strip{ grid-template-columns: repeat(2, 1fr); transform: translateY(-2rem); }
  .bsmmp-moments-badge{ position:static; transform:none; margin: 1rem auto 0; width:max-content; }
}

@media (min-width: 576px) and (max-width: 767.98px){
  .bsmmp-moments-strip{ grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) and (max-width: 991.98px){
  .bsmmp-about-media img, .bsmmp-swamiji-portrait img{ min-height: 340px; }
  .bsmmp-logo-mark{ width:68px; height:68px; }
}

@media (max-width: 767.98px){
  .bsmmp-logo-mark{ width:56px; height:56px; }
  .bsmmp-navbar.bsmmp-scrolled .bsmmp-logo-mark{ width:48px; height:48px; }
}

@media (min-width: 1400px){
  .bsmmp-section{ padding: 7rem 0; }
}

/* ---------- Gallery lightbox: keep prev/next arrows on-screen on
   mobile. The desktop inline styles place them just outside the modal
   box (e.g. left:-56px), which works when the dialog has room to
   breathe on a wide screen — but Bootstrap's modal shrinks to nearly
   the full viewport width with almost no side margin on small screens,
   so those same offsets would push the arrows off-screen and clip
   them. #id selectors + !important correctly override the buttons'
   inline styles here, per normal CSS cascade rules (importance beats
   specificity, even against inline declarations). ---------- */
@media (max-width: 767.98px){
  #bsmmpLightboxPrev{ left: 6px !important; }
  #bsmmpLightboxNext{ right: 6px !important; }
}
@media (max-width: 480px){
  #bsmmpLightboxPrev,
  #bsmmpLightboxNext{
    width: 40px !important;
    height: 40px !important;
    font-size: 1rem !important;
  }
}