/* ==========================================================
   KiaraHub Force Mobile Layout
   Locks the page to a fixed, app-like mobile layout:
   - no horizontal scroll ("doomscroll left/right") anywhere
   - full-width single-column stacking
   - safe-area padding for notches / home indicators
   - fixed header/bottom nav behave like an app shell
   ========================================================== */

html.khfm-active,
body.khfm-mobile-forced {
  max-width: 100vw !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  height: auto !important;
  min-height: 100%;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-x: none;
  overscroll-behavior-y: auto;
}

/* Some themes lock html/body to 100% height with overflow:hidden
   for sliders/modals — that silently kills page scrolling on
   mobile too. Force it back on.
   Exception: themes/plugins that deliberately add a "no-scroll"
   class while a menu/modal is open (e.g. the KiaraHub theme's
   body.kh-noscroll, used while its mobile nav drawer is open)
   need overflow:hidden to actually stick — otherwise the page
   scrolls underneath the open menu. Respect any of those classes. */
html.khfm-active:not(.kh-noscroll),
body.khfm-mobile-forced:not(.kh-noscroll) {
  overflow-y: auto !important;
}

/* Kill horizontal scroll on every element — the #1 cause of
   "doomscrolling left and right" is a stray element wider than
   the viewport (fixed-width table, image, iframe, etc). */
body.khfm-mobile-forced * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

body.khfm-mobile-forced img,
body.khfm-mobile-forced video,
body.khfm-mobile-forced iframe,
body.khfm-mobile-forced table,
body.khfm-mobile-forced pre,
body.khfm-mobile-forced svg {
  max-width: 100% !important;
  height: auto;
}

/* Exempt Leaflet's internals from the universal max-width/grid nukes
   above. Leaflet sizes its tile images (256px) and marker icons with
   inline styles it manages itself; max-width:100% !important on them
   squashes/misaligns the tile mosaic instead of leaving it alone, and
   grid-template-columns:1fr on its internal panes breaks their
   absolute-positioned layout entirely. The map's outer box (#kh-map)
   still gets normal mobile sizing from the theme's own CSS. */
body.khfm-mobile-forced .leaflet-container,
body.khfm-mobile-forced .leaflet-container * {
  max-width: none !important;
  grid-template-columns: none !important;
}
body.khfm-mobile-forced .leaflet-container img {
  height: unset !important;
}

body.khfm-mobile-forced table {
  display: block;
  overflow-x: auto; /* wide tables scroll inside themselves, not the page */
  -webkit-overflow-scrolling: touch;
}

/* Force any theme grid/flex row layouts to stack in a single
   column on mobile instead of spilling sideways. */
body.khfm-mobile-forced .kh-container,
body.khfm-mobile-forced [class*="row"],
body.khfm-mobile-forced [class*="grid"],
body.khfm-mobile-forced [class*="flex"] {
  flex-wrap: wrap !important;
}

/* flex-wrap above does nothing for display:grid elements (e.g. any
   template that sets grid-template-columns inline, like the Varanasi
   Darshan panel) — those need their columns collapsed directly, or a
   fixed 2-column ratio survives even inside forced mobile mode. */
body.khfm-mobile-forced [class*="grid"] {
  grid-template-columns: 1fr !important;
}

/* Basic app-shell spacing */
body.khfm-mobile-forced {
  width: 100%;
  margin: 0;
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Prevent double-tap zoom weirdness / callout menus that make
   the page feel like it is drifting sideways on touch. Vertical
   panning remains fully enabled — only horizontal is restricted.
   Set on both html and body since iOS Safari sometimes only
   honors touch-action on one or the other depending on which
   element is the actual scroll container. */
html.khfm-active,
body.khfm-mobile-forced {
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y !important;
}

/* If the theme's header/nav uses fixed positioning wider than
   the screen, clamp it too. */
body.khfm-mobile-forced header,
body.khfm-mobile-forced nav,
body.khfm-mobile-forced footer {
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
}

/* ==========================================================
   Fixed bottom navigation bar (mobile only)
   ========================================================== */
body.khfm-mobile-forced {
  /* Reserve space so page content never sits under the bar. */
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
}

.khfm-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999998;
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  width: 100%;
  height: 64px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--kh-ink, #0A1424);
  border-top: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.25);
}

.khfm-bottom-nav-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none !important;
  color: rgba(255,255,255,0.55);
  font-size: 11px;
  line-height: 1;
  padding: 6px 2px 8px;
  transition: color .15s ease;
}

.khfm-bottom-nav-item svg {
  width: 22px;
  height: 22px;
}

.khfm-bottom-nav-item span {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.khfm-bottom-nav-item:hover,
.khfm-bottom-nav-item:focus {
  color: #ffffff;
}

.khfm-bottom-nav-item.khfm-active-item {
  color: var(--kh-primary, #2FD3C6); /* matches the active theme's accent when present */
}

.khfm-bottom-nav-item.khfm-active-item svg {
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--kh-primary, #2FD3C6) 55%, transparent));
}

/* Hide the bar automatically if a theme's own fixed bottom bar
   already exists, to avoid double bars — opt in per theme by
   adding this class to that element. */
.khfm-hide-native-bottom-bar {
  display: none !important;
}

/* If the WP admin bar is showing on mobile web view, keep the
   bottom nav above it and content padded correctly. */
@media screen and (max-width: 782px) {
  body.khfm-mobile-forced.admin-bar .khfm-bottom-nav {
    bottom: 0;
  }
}

/* Small helper toggle button injected by khfm-mobile.js */
#khfm-toggle-btn {
  position: fixed;
  bottom: 14px;
  right: 14px;
  z-index: 999999;
  background: #0A1424;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 13px;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  opacity: 0.85;
}

/* Mobile ad slot, rendered just above the fixed bottom nav. Centered,
   spaced away from any tappable UI (accidental-click prevention), and
   capped in width so it can never trigger the page-wide horizontal-
   scroll guard above. */
.khfm-ad-slot {
  max-width: 100%;
  margin: 12px auto calc(12px + 64px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  overflow: hidden;
}