/* mobile-nav.css
 *
 * Full-screen mobile navigation, restyled to match the homepage hero.
 *
 * The mirrored Qichen theme ships a 290px dark-grey (#222) slide-in drawer.
 * Two problems, both fixed here:
 *
 *  1. It never opened. `.menu-canvas.toggled .container-menu { transform:none }`
 *     and `.menu-canvas .container-menu.dir_left { transform:translate3d(-290px,0,0) }`
 *     have IDENTICAL specificity (0,2,1), and the dir_left rule is emitted
 *     LATER (it repeats in the inline <style> blocks), so it always won and the
 *     panel stayed parked off-screen even while `.toggled` was set.
 *     Every rule below is written at a higher specificity so order cannot
 *     decide the outcome.
 *
 *  2. The client asked for a full-screen panel in the hero's visual language,
 *     not the generic grey drawer.
 *
 * Palette taken from the live hero (measured, not guessed):
 *   --primary  #ffd700  gold      (theme accent, active menu items)
 *   hero brown #330f03            (popup/footer ground colour)
 *   button     #ba8b37  bronze    (hero "ORDER NOW" button)
 *   Forum = display font, Open Sans = body font
 *
 * Loaded after the mirrored stylesheets so a re-capture cannot silently
 * revert it. Pairs with the open/close logic in assets/mirror-shim.js.
 */

/* ---------------------------------------------------------------------------
   1. The panel itself — full screen, hero-styled
   --------------------------------------------------------------------------- */
nav.menu-canvas .container-menu.dir_left,
nav.menu-canvas .container-menu.dir_right,
nav.menu-canvas .container-menu {
  /* fill the screen instead of the theme's 290px rail */
  width: 100%;
  max-width: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  /* dvh keeps the panel honest under mobile browser chrome */
  height: 100dvh;
  padding: 0;

  /* hero ground: warm brown over the hero photograph */
  background-color: #330f03;
  background-image:
    linear-gradient(rgba(38, 11, 2, .80), rgba(20, 6, 1, .90)),
    url("/wp-content/uploads/2025/08/DeWatermark.ai_1756093309189.jpeg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;

  color: #fff;
  z-index: 100000;

  /* start off-screen, slide in from the left */
  transform: translate3d(-100%, 0, 0);
  transition: transform .38s cubic-bezier(.22, .61, .36, 1);

  /* let the panel scroll if the menu is taller than the phone */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  display: flex;
  flex-direction: column;
}

/* open state — higher specificity than the dir_left rule above, so it wins
   regardless of source order */
nav.menu-canvas.toggled .container-menu.dir_left,
nav.menu-canvas.toggled .container-menu.dir_right,
nav.menu-canvas.toggled .container-menu {
  transform: translate3d(0, 0, 0);
}

/* a thin gold hairline along the top, echoing the hero accent */
nav.menu-canvas .container-menu::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 2;
  background: linear-gradient(90deg, #ffd700 0%, #ba8b37 100%);
}

/* ---------------------------------------------------------------------------
   2. Close control
   --------------------------------------------------------------------------- */
nav.menu-canvas .container-menu .close-menu {
  /* fixed, not absolute: it stays in the corner even if the panel scrolls */
  position: fixed;
  top: 20px;
  right: 18px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  /* no ring, no disc: just the glyph. The 44px box stays for the tap target. */
  border: none;
  background: none;
  color: #ffd700;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  /* must outrank the hamburger (100001) or it cannot be tapped */
  z-index: 100002;
  transition: opacity .25s ease;
}

nav.menu-canvas .container-menu .close-menu:hover,
nav.menu-canvas .container-menu .close-menu:focus-visible {
  opacity: .7;
}

/* the theme's ovaicon font supplies the glyph; if it fails to load the
   pseudo-element below still draws a usable × */
nav.menu-canvas .container-menu .close-menu i {
  font-style: normal;
}
nav.menu-canvas .container-menu .close-menu i:empty::before {
  content: "\00d7";
  font-family: Georgia, serif;
  font-size: 34px;
}

/* ---------------------------------------------------------------------------
   3. Menu list — centred, Forum display face, generous tap targets
   --------------------------------------------------------------------------- */
nav.menu-canvas .container-menu .primary-navigation {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  /* Anchored to the top rather than vertically centred. Centring balanced the
     logo and the list against the whole viewport, which on a tall phone left
     the block sitting low with a large dead gap under the last item. */
  justify-content: flex-start;
  padding: 78px 26px 40px;
  width: 100%;
  box-sizing: border-box;
}

/* the real Bojan Bliss logo, injected by mirror-shim.js and linked home
   exactly like the header logo */
nav.menu-canvas .container-menu .canvas-brand {
  display: block;
  margin: 0 auto 30px;
  text-align: center;
  line-height: 0;
}

nav.menu-canvas .container-menu .canvas-brand img {
  width: auto;
  max-width: 236px;
  height: auto;
  margin: 0 auto;
}

@media (max-height: 700px) {
  nav.menu-canvas .container-menu .canvas-brand {
    margin-bottom: 20px;
  }
  nav.menu-canvas .container-menu .canvas-brand img {
    max-width: 196px;
  }
}

nav.menu-canvas .container-menu ul.menu {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
}

nav.menu-canvas .container-menu ul.menu > li {
  display: block;
  text-align: center;
  position: relative;
}

nav.menu-canvas .container-menu ul.menu > li > a {
  display: block;
  padding: 15px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .11);
  font-family: "Forum", Georgia, serif;
  font-size: 30px;
  line-height: 1.24;
  font-weight: 400;
  letter-spacing: .4px;
  color: #fff;
  text-decoration: none;
  transition: color .22s ease;
}

nav.menu-canvas .container-menu ul.menu > li:last-child > a {
  border-bottom: none;
}

nav.menu-canvas .container-menu ul.menu > li > a:hover,
nav.menu-canvas .container-menu ul.menu > li > a:focus-visible {
  color: #ffd700;
}

/* current page, in the theme's gold */
nav.menu-canvas .container-menu ul.menu > li.current-menu-item > a,
nav.menu-canvas .container-menu ul.menu > li.current_page_item > a {
  color: #ffd700;
}

/* ---------------------------------------------------------------------------
   4. Submenus (Order Now / Get Directions)
   --------------------------------------------------------------------------- */
nav.menu-canvas .container-menu ul.menu ul.sub-menu {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height .34s ease;
  background: rgba(0, 0, 0, .22);
}

/* .open is set by mirror-shim.js; .show is the theme's own class */
nav.menu-canvas .container-menu ul.menu > li.open > ul.sub-menu,
nav.menu-canvas .container-menu ul.menu > li > ul.sub-menu.show {
  max-height: 460px;
}

nav.menu-canvas .container-menu ul.menu ul.sub-menu > li > a {
  display: block;
  padding: 12px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 15px;
  letter-spacing: .6px;
  color: rgba(255, 255, 255, .84);
  text-decoration: none;
  transition: color .22s ease;
}

nav.menu-canvas .container-menu ul.menu ul.sub-menu > li > a:hover,
nav.menu-canvas .container-menu ul.menu ul.sub-menu > li > a:focus-visible {
  color: #ffd700;
}

/* the caret the theme injects next to parent items */
/* Items with children must read as expandable at a glance. The caret is gold
   (against white siblings), always visible, and carries a 48x48 tap target of
   its own so it can be hit without triggering the parent link. */
nav.menu-canvas .container-menu ul.menu > li.menu-item-has-children > a {
  /* keep the label clear of the caret */
  padding-right: 54px;
}

nav.menu-canvas .container-menu .dropdown-toggle {
  position: absolute;
  /* Anchored to the TOP of the li, not its centre: the li grows to contain
     the expanded submenu, so a 50% offset slid the caret down next to the
     first child item once the section was open. */
  top: 0;
  right: 0;
  width: 48px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  color: #ffd700;
  cursor: pointer;
  opacity: 1;
  visibility: visible;
}

nav.menu-canvas .container-menu .dropdown-toggle::after {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  margin-top: -5px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .25s ease;
}

/* points up once the submenu is open */
nav.menu-canvas .container-menu ul.menu > li.open > .dropdown-toggle::after,
nav.menu-canvas .container-menu .dropdown-toggle.toggled-on::after {
  margin-top: 5px;
  transform: rotate(-135deg);
}

/* the open parent stays gold, so it is obvious which section is expanded */
nav.menu-canvas .container-menu ul.menu > li.open > a {
  color: #ffd700;
}

/* ---------------------------------------------------------------------------
   5. Overlay — the panel is full-screen, so the scrim is only a fade
   --------------------------------------------------------------------------- */
nav.menu-canvas .site-overlay {
  background-color: #000;
  z-index: 99998;
}

nav.menu-canvas.toggled .site-overlay {
  opacity: .55;
  visibility: visible;
}

/* ---------------------------------------------------------------------------
   6. Hamburger button — animates to an × while open
   --------------------------------------------------------------------------- */
nav.menu-canvas .menu-toggle {
  position: relative;
  z-index: 100001;
  /* The theme draws a 25x25 button. House minimum for a tap target is 48x48,
     so grow the hit area with padding and pull it back with negative margin —
     the bars stay exactly where they were, only the touchable box grows. */
  box-sizing: content-box;
  padding: 12px;
  margin: -12px;
}

nav.menu-canvas.toggled .menu-toggle:before,
nav.menu-canvas.toggled .menu-toggle:after,
nav.menu-canvas.toggled .menu-toggle span:before {
  background-color: #ffd700 !important;
}

/* With the panel open the × is the close affordance, so the hamburger stops
   taking clicks — otherwise it sits over the × and swallows the tap. */
nav.menu-canvas.toggled .menu-toggle {
  pointer-events: none;
  opacity: 0;
}

/* while the menu is open the page behind must not scroll */
body.menu-canvas-open {
  overflow: hidden;
  touch-action: none;
}

/* ---------------------------------------------------------------------------
   7. Short phones — tighten so nothing is clipped
   --------------------------------------------------------------------------- */
@media (max-height: 700px) {
  nav.menu-canvas .container-menu .primary-navigation {
    padding: 62px 26px 30px;
  }
  nav.menu-canvas .container-menu ul.menu > li > a {
    padding: 11px 10px;
    font-size: 25px;
  }
  nav.menu-canvas .container-menu .dropdown-toggle {
    height: 54px;
  }
  nav.menu-canvas .container-menu ul.menu ul.sub-menu > li > a {
    padding: 9px 10px;
    font-size: 14px;
  }
}

@media (max-height: 560px) {
  nav.menu-canvas .container-menu ul.menu > li > a {
    padding: 8px 10px;
    font-size: 21px;
  }
}