/* ==================================================================
   Bali Day — Mobile Navigation Drawer (bd-mobile-nav)
   ------------------------------------------------------------------
   Companion to assets/js/bd-mobile-nav.js.

   Scope & safety:
   - Everything is namespaced `bd-` or scoped under `html.bd-nav-ready`
     (a class the JS adds only after it has successfully built the
     drawer). If the JS never runs, this file changes nothing visible
     and the stock Max Mega Menu mobile toggle keeps working.
   - Header/menu overrides apply ONLY below 768px — Max Mega Menu's
     own breakpoint. Desktop (≥768px) is explicitly guarded.
   - No Elementor / theme selectors are restyled.
   ================================================================== */

/* ------------------------------------------------------------------
   Design tokens (kept local to our components — not on :root)
   ------------------------------------------------------------------ */
#bd-nav-root,
.bd-burger {
  --bd-paper: #fbf8f3;      /* warm off-white base                    */
  --bd-card: #ffffff;
  --bd-ink: #262d2b;        /* deep charcoal                          */
  --bd-ink-soft: #6a7370;   /* secondary text                         */
  --bd-line: rgba(38, 45, 43, 0.1);
  --bd-teal: #0e7c7b;       /* ocean teal                             */
  --bd-coral: #d0603f;      /* sunset coral                           */
  --bd-green: #63803a;      /* rice-field green                       */
  --bd-stone: #8a7e6e;      /* temple stone                           */
  --bd-radius: 14px;
  --bd-shadow: 0 1px 2px rgba(38, 45, 43, 0.05), 0 6px 20px -8px rgba(38, 45, 43, 0.14);
  --bd-ease: cubic-bezier(0.32, 0.72, 0.28, 1);
}

/* ------------------------------------------------------------------
   Mobile header (< 768px, JS-enhanced only)
   ------------------------------------------------------------------ */
@media (max-width: 767.98px) {

  /* Hide the entire stock Max Mega Menu mobile UI (toggle bar +
     collapsed list + the stray repeated .mega-indicator glyphs). */
  html.bd-nav-ready #mega-menu-wrap-primary-menu {
    display: none !important;
  }

  /* Sticky, tidy header: logo left, hamburger right.
     !important is required throughout: the theme pins the header
     (`position: absolute` for transparent-header pages / `relative
     !important` in some main.css builds) and gives it a 50%-alpha
     glass background; on mobile we need a firmer, more legible bar.
     This file loads after main.css, so these win below 768px only. */
  html.bd-nav-ready .header {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0;
    z-index: 990;
    background: rgba(253, 251, 247, 0.92) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid rgba(38, 45, 43, 0.08) !important;
  }

  html.bd-nav-ready .header .wrap {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 60px;
  }

  /* The parent theme's flex header gives the logo `order: 1`, which
     pushes it right of the toggle on mobile. Normalize: logo first
     (left), hamburger last (right). */
  html.bd-nav-ready .header .logo {
    display: flex;
    align-items: center;
    min-width: 0;
    position: static !important;
    float: none !important;
    margin: 0 !important;
    order: -1 !important;
  }

  html.bd-nav-ready .header .bd-burger {
    order: 99;
  }

  /* Empty cart stub in the header markup — remove from the flex row. */
  html.bd-nav-ready .header .minicart {
    display: none !important;
  }

  html.bd-nav-ready .header .logo img {
    max-height: 84px;
    width: auto;
    display: block;
  }
}

/* ------------------------------------------------------------------
   Hamburger button
   ------------------------------------------------------------------ */
.bd-burger {
  display: none; /* shown on mobile below */
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  margin: 0;
  padding: 4px 8px;
  min-width: 48px;
  min-height: 48px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 10px;
  color: var(--bd-ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

@media (max-width: 767.98px) {
  html.bd-nav-ready .bd-burger {
    display: inline-flex;
  }
}

.bd-burger:active {
  background: rgba(38, 45, 43, 0.06);
}

.bd-burger-box {
  display: block;
  width: 22px;
  height: 14px;
  position: relative;
}

.bd-burger-line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.22s var(--bd-ease), opacity 0.18s ease;
}

.bd-burger-line:nth-child(1) { top: 0; }
.bd-burger-line:nth-child(2) { top: 6px; }
.bd-burger-line:nth-child(3) { top: 12px; }

.bd-burger.is-active .bd-burger-line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.bd-burger.is-active .bd-burger-line:nth-child(2) { opacity: 0; }
.bd-burger.is-active .bd-burger-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.bd-burger-text {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}

/* ------------------------------------------------------------------
   Overlay, backdrop, drawer shell
   ------------------------------------------------------------------ */
#bd-nav-root {
  position: fixed;
  inset: 0;
  z-index: 100000;
}

#bd-nav-root[hidden] {
  display: none;
}

.bd-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(24, 28, 27, 0.48);
  opacity: 0;
  transition: opacity 0.28s ease;
  touch-action: none;
}

#bd-nav-root.is-open .bd-backdrop {
  opacity: 1;
}

.bd-drawer {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(26.5rem, 100%);
  display: flex;
  flex-direction: column;
  background: var(--bd-paper);
  box-shadow: -12px 0 40px -12px rgba(24, 28, 27, 0.35);
  transform: translateX(100%);
  transition: transform 0.32s var(--bd-ease);
  overscroll-behavior: contain;
}

#bd-nav-root.is-open .bd-drawer {
  transform: translateX(0);
}

/* ------------------------------------------------------------------
   Drawer top bar
   ------------------------------------------------------------------ */
.bd-top {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px 16px;
  border-bottom: 1px solid var(--bd-line);
  background: var(--bd-card);
}

.bd-top-logo {
  display: flex;
  align-items: center;
  min-width: 0;
  margin-right: auto;
}

.bd-top-logo img {
  max-height: 34px;
  width: auto;
  display: block;
}

.bd-top-logo-text {
  font-weight: 700;
  font-size: 18px;
  color: var(--bd-ink);
}

.bd-top-btn {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  border-radius: 12px;
  color: var(--bd-ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.bd-top-btn:active {
  background: rgba(38, 45, 43, 0.06);
}

.bd-lang-btn {
  color: var(--bd-ink-soft);
}

.bd-lang-code {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ------------------------------------------------------------------
   Panels (drill-down)
   ------------------------------------------------------------------ */
.bd-panels {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
}

.bd-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bd-paper);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.3s var(--bd-ease), visibility 0s linear 0.3s;
}

.bd-panel.is-active {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.3s var(--bd-ease);
}

.bd-panel.is-under {
  transform: translateX(-18%);
  visibility: hidden;
  transition: transform 0.3s var(--bd-ease), visibility 0s linear 0.3s;
}

.bd-panel-root {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0px));
}

/* Sub-panel header (back + title) stays put; the body scrolls. */
.bd-panel-head {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 16px 12px;
  border-bottom: 1px solid var(--bd-line);
  background: var(--bd-paper);
}

.bd-back {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  margin: 0 0 0 -8px;
  padding: 6px 10px 6px 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  min-height: 44px;
  border-radius: 10px;
  color: var(--bd-teal);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.bd-back:active {
  background: rgba(14, 124, 123, 0.08);
}

.bd-back .bd-icon svg {
  width: 18px;
  height: 18px;
}

.bd-panel-title {
  margin: 0;
  font-size: 21px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--bd-ink);
  overflow-wrap: break-word;
}

.bd-panel-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 12px 16px calc(24px + env(safe-area-inset-bottom, 0px));
}

/* ------------------------------------------------------------------
   Search
   ------------------------------------------------------------------ */
.bd-search {
  position: relative;
  margin: 2px 0 18px;
}

.bd-search-input {
  width: 100%;
  min-height: 50px;
  padding: 0 52px 0 16px;
  border: 1px solid rgba(38, 45, 43, 0.14);
  border-radius: var(--bd-radius);
  background: var(--bd-card);
  color: var(--bd-ink);
  font-size: 16px; /* prevents iOS zoom-on-focus */
  box-shadow: var(--bd-shadow);
}

.bd-search-input::placeholder {
  color: var(--bd-ink-soft);
}

.bd-search-input:focus {
  outline: 2px solid var(--bd-teal);
  outline-offset: 1px;
  border-color: transparent;
}

.bd-search-btn {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 11px;
  background: var(--bd-teal);
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.bd-search-btn:active {
  filter: brightness(0.92);
}

/* ------------------------------------------------------------------
   Primary cards & CTA cards
   ------------------------------------------------------------------ */
.bd-cards,
.bd-ctas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bd-card-item {
  margin: 0;
  padding: 0;
}

.bd-card {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  min-height: 64px;
  margin: 0;
  border: 1px solid rgba(38, 45, 43, 0.07);
  border-radius: var(--bd-radius);
  background: var(--bd-card);
  box-shadow: var(--bd-shadow);
  color: var(--bd-ink);
  text-align: left;
  text-decoration: none;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.bd-card:active {
  transform: scale(0.985);
  box-shadow: 0 1px 2px rgba(38, 45, 43, 0.06);
}

.bd-card-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}

.bd-card-icon svg {
  width: 22px;
  height: 22px;
}

.bd-tone-teal  .bd-card-icon { background: rgba(14, 124, 123, 0.1);  color: var(--bd-teal); }
.bd-tone-coral .bd-card-icon { background: rgba(208, 96, 63, 0.1);   color: var(--bd-coral); }
.bd-tone-green .bd-card-icon { background: rgba(99, 128, 58, 0.12);  color: var(--bd-green); }
.bd-tone-stone .bd-card-icon { background: rgba(138, 126, 110, 0.14); color: var(--bd-stone); }

.bd-card-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bd-card-title {
  font-size: 16px;
  font-weight: 650;
  line-height: 1.3;
  overflow-wrap: break-word;
}

.bd-card-sub {
  font-size: 13px;
  line-height: 1.35;
  color: var(--bd-ink-soft);
  overflow-wrap: break-word;
}

.bd-card-chev {
  flex: 0 0 auto;
  color: var(--bd-stone);
}

.bd-card-chev svg {
  width: 18px;
  height: 18px;
}

.bd-section-label {
  margin: 22px 4px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bd-stone);
}

.bd-foot {
  margin: 26px 4px 0;
  font-size: 13px;
  font-style: italic;
  color: var(--bd-stone);
}

/* ------------------------------------------------------------------
   "View all" link
   ------------------------------------------------------------------ */
.bd-viewall {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 12px 14px;
  margin: 2px 0 10px;
  border-radius: 12px;
  background: rgba(14, 124, 123, 0.08);
  color: var(--bd-teal);
  font-size: 14.5px;
  font-weight: 650;
  line-height: 1.3;
  text-decoration: none;
  overflow-wrap: break-word;
}

.bd-viewall:active {
  background: rgba(14, 124, 123, 0.14);
}

.bd-viewall .bd-icon {
  flex: 0 0 auto;
}

.bd-viewall .bd-icon svg {
  width: 17px;
  height: 17px;
}

/* ------------------------------------------------------------------
   List rows (destinations, tours, activities…)
   ------------------------------------------------------------------ */
.bd-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bd-list-item {
  margin: 0;
  padding: 0;
}

.bd-list-item + .bd-list-item {
  border-top: 1px solid var(--bd-line);
}

.bd-row {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 4px;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--bd-ink);
  text-align: left;
  text-decoration: none;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.bd-row:active {
  background: rgba(38, 45, 43, 0.045);
}

span.bd-row {
  cursor: default;
}

.bd-row-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bd-row-title {
  font-size: 15px;
  font-weight: 550;
  line-height: 1.35;
  overflow-wrap: break-word;
}

.bd-row-sub {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--bd-ink-soft);
  overflow-wrap: break-word;
}

.bd-row-count {
  flex: 0 0 auto;
  min-width: 26px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(138, 126, 110, 0.13);
  color: var(--bd-stone);
  font-size: 12px;
  font-weight: 650;
  text-align: center;
}

.bd-row-chev {
  flex: 0 0 auto;
  color: var(--bd-stone);
}

.bd-row-chev svg {
  width: 17px;
  height: 17px;
}

.bd-row-current .bd-row-title {
  font-weight: 700;
}

.bd-row-current .bd-row-chev,
.bd-row-current .bd-icon {
  color: var(--bd-teal);
}

/* ------------------------------------------------------------------
   Icons (generic)
   ------------------------------------------------------------------ */
.bd-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bd-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* ------------------------------------------------------------------
   Focus visibility (keyboard)
   ------------------------------------------------------------------ */
.bd-burger:focus-visible,
.bd-top-btn:focus-visible,
.bd-card:focus-visible,
.bd-row:focus-visible,
.bd-back:focus-visible,
.bd-viewall:focus-visible,
.bd-search-btn:focus-visible,
.bd-top-logo:focus-visible {
  outline: 2px solid var(--bd-teal);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------
   Scroll lock while the drawer is open
   ------------------------------------------------------------------ */
html.bd-nav-lock,
body.bd-nav-lock {
  overflow: hidden !important;
  height: 100%;
}

/* ------------------------------------------------------------------
   Screen-reader-only helper
   ------------------------------------------------------------------ */
.bd-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* ------------------------------------------------------------------
   Theme-bleed guard
   ------------------------------------------------------------------
   The parent theme styles bare `button` elements with
   `text-transform: uppercase; text-align: center` at higher
   specificity (`button:not(.vc_btn3):not(...)`), and headings get
   theme fonts/alignment. Pin our components down. */
#bd-nav-root button,
html .bd-burger {
  text-transform: none !important;
  text-align: left !important;
  letter-spacing: normal !important;
  box-shadow: none;
}

#bd-nav-root .bd-card {
  box-shadow: var(--bd-shadow);
}

#bd-nav-root .bd-panel-title {
  text-align: left !important;
  text-transform: none !important;
  margin: 0 !important;
  font-size: 21px !important;
  line-height: 1.25 !important;
  letter-spacing: normal !important;
}

#bd-nav-root .bd-card-title,
#bd-nav-root .bd-card-sub,
#bd-nav-root .bd-row-title,
#bd-nav-root .bd-row-sub,
#bd-nav-root .bd-viewall,
#bd-nav-root .bd-back,
#bd-nav-root .bd-section-label {
  font-family: inherit !important;
}

#bd-nav-root .bd-section-label {
  text-transform: uppercase !important; /* our own small-caps label */
}

/* ------------------------------------------------------------------
   Desktop guard: none of this UI exists at ≥768px
   ------------------------------------------------------------------ */
@media (min-width: 768px) {
  .bd-burger,
  #bd-nav-root {
    display: none !important;
  }
}

/* ------------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .bd-backdrop,
  .bd-drawer,
  .bd-panel,
  .bd-panel.is-active,
  .bd-panel.is-under,
  .bd-burger-line {
    transition: none !important;
  }
}

/* ------------------------------------------------------------------
   Print
   ------------------------------------------------------------------ */
@media print {
  .bd-burger,
  #bd-nav-root {
    display: none !important;
  }
}