/*
 * mobile-menu.css  —  TB Megamenu mobile skin
 * ============================================
 * Loaded LAST in zaira.libraries.yml so it wins over
 * TB Megamenu's dist/base.css and the theme's own CSS.
 *
 * TB Megamenu class reference
 * ───────────────────────────
 *   .tbm--mobile       added by frontend.js at the configured breakpoint
 *   .tbm--mobile-show  added by plugin.js when the drawer is OPEN
 *   .open              added to .tbm-item when its submenu is expanded
 *
 * Z-index stack (highest = topmost)
 *   1060  .tbm.tbm--mobile  ← hamburger always tappable
 *   1050  .tbm-collapse     ← off-canvas panel
 *   1040  .tbm-mobile-overlay ← semi-transparent backdrop
 */


/* ── Custom Properties ──────────────────────────────────────────────────── */
:root {
  --tbm-drawer-width:      300px;
  --tbm-drawer-bg:         #ffffff;
  --tbm-overlay-bg:        rgba(0, 0, 0, 0.45);

  --tbm-link-color:        #0D1B2A;
  --tbm-link-muted:        #6B788A;
  --tbm-link-hover-bg:     rgba(192, 154, 82, 0.08);
  --tbm-link-hover-color:  var(--tg-primary-color, #C09A52);
  --tbm-link-accent:       var(--tg-primary-color, #C09A52);
  --tbm-submenu-bg:        #F7F5F2;

  --tbm-transition:        0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --tbm-drawer-z:          1050;
  --tbm-overlay-z:         1040;
  --tbm-nav-z:             1060;

  --tbm-icon-size:         22px;
  --tbm-toggle-icon-size:  18px;
  --tbm-item-px:           20px;
  --tbm-item-py:           8px;
}


/* ══════════════════════════════════════════════════════════════════════════
   1. NAV STACKING CONTEXT
   Give the <nav> a z-index in mobile mode so the hamburger sits above
   both the overlay backdrop (1040) and the off-canvas drawer (1050).
   ══════════════════════════════════════════════════════════════════════════ */

/* Override module default: nav sits transparently on whatever is behind it.
   The sticky-menu class adds its own explicit background+shadow on scroll. */
.tbm:not(.tbm--mobile) {
  background-color: transparent !important;
}

.tbm.tbm--mobile {
  z-index: var(--tbm-nav-z);  /* 1060 */
}


/* ══════════════════════════════════════════════════════════════════════════
   2. HAMBURGER BUTTON
   TB Megamenu hides/shows this with .tbm--mobile; we only add aesthetics.
   Our JS (tb-megamenu-mobile.js) replaces the native icon-bars with a
   Material Symbols Sharp "menu" icon that swaps to "close" when open.
   ══════════════════════════════════════════════════════════════════════════ */

.tbm.tbm--mobile .tbm-button {
  display:         flex !important;
  align-items:     center;
  justify-content: center;
  width:           44px;
  height:          44px;
  padding:         0;
  background:      transparent;
  border:          none;
  border-radius:   8px;
  cursor:          pointer;
  color:           var(--tbm-link-color);
  transition:      background var(--tbm-transition), color var(--tbm-transition);
}

.tbm.tbm--mobile .tbm-button:hover,
.tbm.tbm--mobile .tbm-button:focus-visible {
  background: rgba(0, 0, 0, 0.06);
  outline:    none;
}

/* Hide TB Megamenu's native three-bar icon; replaced by Material icon in JS */
.tbm.tbm--mobile .tbm-button .tbm-icon-bar {
  display: none !important;
}

/* Material Symbols icon inside the hamburger button */
.tbm.tbm--mobile .tbm-button .material-symbols-sharp {
  font-size:               var(--tbm-icon-size);
  line-height:             1;
  font-variation-settings: 'wght' 400, 'FILL' 0, 'GRAD' 0, 'opsz' 24;
  pointer-events:          none;
  user-select:             none;
}


/* ══════════════════════════════════════════════════════════════════════════
   3. OFF-CANVAS DRAWER  —  RIGHT SIDE
   Overrides TB Megamenu's position:absolute + display:none approach.
   We keep display:block always and hide via transform so CSS transitions
   work. The drawer slides in from the RIGHT edge of the viewport.
   ══════════════════════════════════════════════════════════════════════════ */

.tbm.tbm--mobile .tbm-collapse {
  /* Override TB Megamenu display:none — animate via transform instead */
  display:     block   !important;
  visibility:  hidden;

  /* Fixed full-height panel, pinned to the RIGHT */
  position:    fixed   !important;
  top:         0       !important;
  right:       0       !important;
  left:        auto    !important;
  width:       var(--tbm-drawer-width) !important;
  height:      100vh   !important;
  height:      100dvh  !important;   /* respects mobile browser chrome */
  overflow-y:  auto    !important;
  -webkit-overflow-scrolling: touch;

  /* Appearance */
  background:  var(--tbm-drawer-bg) !important;
  z-index:     var(--tbm-drawer-z)  !important;  /* 1050 */
  box-shadow:  -4px 0 28px rgba(0, 0, 0, 0.10);

  /* Slide from the right; hidden off-screen */
  transform:   translateX(110%);
  transition:  transform var(--tbm-transition), visibility var(--tbm-transition);

  /* No top padding — the injected close-button row provides the header gap */
  padding-top: 0 !important;
}

/* OPEN — TB Megamenu's plugin.js adds .tbm--mobile-show */
.tbm.tbm--mobile.tbm--mobile-show .tbm-collapse {
  visibility: visible;
  transform:  translateX(0) !important;
}

/* Lock body scroll while drawer is open */
body.tbm-menu-open {
  overflow: hidden;
}


/* ══════════════════════════════════════════════════════════════════════════
   4. DRAWER CLOSE BUTTON
   Injected by JS as the first child of .tbm-collapse.
   Hidden on desktop (where .tbm--mobile is absent); always visible inside
   the mobile drawer.
   ══════════════════════════════════════════════════════════════════════════ */

/* Hidden by default — only shown inside the mobile drawer */
.tbm-drawer-close {
  display: none !important;
}

.tbm.tbm--mobile .tbm-drawer-close {
  display:         flex          !important;
  align-items:     center;
  justify-content: flex-end;
  width:           100%;
  padding:         14px 18px;
  background:      transparent;
  border:          none;
  border-bottom:   1px solid rgba(0, 0, 0, 0.07);
  cursor:          pointer;
  color:           var(--tbm-link-muted);
  transition:      color var(--tbm-transition);
}

.tbm.tbm--mobile .tbm-drawer-close:hover,
.tbm.tbm--mobile .tbm-drawer-close:focus-visible {
  color:   var(--tbm-link-accent);
  outline: none;
}

.tbm.tbm--mobile .tbm-drawer-close .material-symbols-sharp {
  font-size:               24px;
  line-height:             1;
  font-variation-settings: 'wght' 300, 'FILL' 0, 'GRAD' 0, 'opsz' 24;
  user-select:             none;
}


/* ══════════════════════════════════════════════════════════════════════════
   5. VERTICAL NAVIGATION LIST
   Items are separated by spacing only — no visible borders.
   Each row is a flex container: link text (flex: 1) + toggle button.
   ══════════════════════════════════════════════════════════════════════════ */

/* Reset ALL borders from TB Megamenu base.css (items, lists, submenus) */
.tbm.tbm--mobile .tbm-item,
.tbm.tbm--mobile .tbm-nav,
.tbm.tbm--mobile .tbm-subnav,
.tbm.tbm--mobile .tbm-submenu,
.tbm.tbm--mobile .tbm-link-container {
  border: none !important;
}

.tbm.tbm--mobile .tbm-nav.level-0 > .tbm-item {
  width: 100%;
}

/* Adjacent-sibling rule: exactly ONE border BETWEEN consecutive top-level items.
   Using border-top on the second item makes overlap structurally impossible —
   only one rule ever fires for any given gap. */
.tbm.tbm--mobile .tbm-nav.level-0 > .tbm-item + .tbm-item {
  border-top: 1px solid rgba(0, 0, 0, 0.07) !important;
}

/* Suppress TB Megamenu's native ::before decoration; we own ::after */
.tbm.tbm--mobile .tbm-toggle::before {
  display: none !important;
  content: ''   !important;
}

/* .tbm-toggle span is the full-width accordion trigger (text + caret).
   No DOM element injected — the caret is a pure CSS ::after pseudo-element. */
.tbm.tbm--mobile .tbm-link.tbm-toggle {
  justify-content: space-between;   /* text left, ::after caret right */
  cursor: pointer;
}

/* Caret rendered via Material Symbols Sharp ligature — zero extra DOM */
.tbm.tbm--mobile .tbm-link.tbm-toggle::after {
  font-family:             'Material Symbols Sharp';
  content:                 'expand_more';
  font-style:              normal;
  font-weight:             normal;
  font-size:               var(--tbm-toggle-icon-size);
  line-height:             1;
  font-variation-settings: 'wght' 300, 'FILL' 0, 'GRAD' 0, 'opsz' 24;
  flex-shrink:             0;
  color:                   var(--tbm-link-muted);
  user-select:             none;
  pointer-events:          none;
  transition:              transform var(--tbm-transition),
                           color     var(--tbm-transition);
}

/* Rotate 180° and accent when submenu is open */
.tbm.tbm--mobile .tbm-item.open
  > .tbm-link-container
  > .tbm-link.tbm-toggle::after {
  transform: rotate(180deg);
  color:     var(--tbm-link-accent);
}

/* Flex row: link + optional toggle chevron */
.tbm.tbm--mobile .tbm-link-container {
  display:     flex;
  align-items: stretch;
}

/* All link variants */
.tbm.tbm--mobile .tbm-link,
.tbm.tbm--mobile a.tbm-link,
.tbm.tbm--mobile span.tbm-link {
  flex:            1;
  display:         flex;
  align-items:     center;
  padding:         var(--tbm-item-py) var(--tbm-item-px);
  color:           var(--tbm-link-color);
  font-size:       14px;
  font-weight:     500;
  letter-spacing:  0.01em;
  text-decoration: none;
  background:      transparent;
  border:          none;
  cursor:          pointer;
  transition:      background  var(--tbm-transition),
                   color       var(--tbm-transition),
                   box-shadow  var(--tbm-transition);
}

.tbm.tbm--mobile .tbm-link:hover,
.tbm.tbm--mobile .tbm-link:focus-visible {
  background:  var(--tbm-link-hover-bg);
  color:       var(--tbm-link-hover-color);
  box-shadow:  inset 3px 0 0 var(--tbm-link-accent);
  outline:     none;
}

/* Active / current-page highlight */
.tbm.tbm--mobile .tbm-item.active-trail > .tbm-link-container > .tbm-link,
.tbm.tbm--mobile .tbm-item.is-active    > .tbm-link-container > .tbm-link {
  color:       var(--tbm-link-accent);
  font-weight: 600;
  box-shadow:  inset 3px 0 0 var(--tbm-link-accent);
}


/* ══════════════════════════════════════════════════════════════════════════
   6. SUBMENU TOGGLE BUTTON  (.tbm-submenu-toggle)
   TB Megamenu may generate this if "Arrows" is enabled in block settings.
   Our JS injects one (or enhances the existing one) with a Material icon.
   ══════════════════════════════════════════════════════════════════════════ */

.tbm.tbm--mobile .tbm-submenu-toggle {
  display:         flex   !important;
  align-items:     center;
  justify-content: center;
  min-width:       48px;
  padding:         0 14px;
  background:      transparent;
  border:          none;
  cursor:          pointer;
  color:           var(--tbm-link-muted);
  transition:      background var(--tbm-transition), color var(--tbm-transition);
}

.tbm.tbm--mobile .tbm-submenu-toggle:hover,
.tbm.tbm--mobile .tbm-submenu-toggle:focus-visible {
  background: var(--tbm-link-hover-bg);
  color:      var(--tbm-link-accent);
  outline:    none;
}

/* Suppress any TB Megamenu-generated pseudo-element arrow on toggle buttons.
   Our JS-injected Material icon (or the :empty fallback below) replaces it. */
.tbm.tbm--mobile .tbm-submenu-toggle::before,
.tbm.tbm--mobile .tbm-submenu-toggle::after {
  display: none !important;
  content: ''   !important;
}

/* Material icon inside the toggle */
.tbm.tbm--mobile .tbm-submenu-toggle .material-symbols-sharp {
  font-size:               var(--tbm-toggle-icon-size);
  line-height:             1;
  font-variation-settings: 'wght' 300, 'FILL' 0, 'GRAD' 0, 'opsz' 24;
  user-select:             none;
  transition:              transform var(--tbm-transition),
                           color     var(--tbm-transition);
}

/* Rotate chevron 180° when the submenu is expanded */
.tbm.tbm--mobile .tbm-item.open
  > .tbm-link-container
  > .tbm-submenu-toggle
  .material-symbols-sharp {
  transform: rotate(180deg);
  color:     var(--tbm-link-accent);
}

/* CSS chevron fallback — fires only when the button is empty (JS not yet run).
   Needs !important to override the ::before suppression rule above; wins
   because :empty gives this selector higher specificity (0,4,1 vs 0,3,1). */
.tbm.tbm--mobile .tbm-submenu-toggle:empty::before {
  content:       '' !important;
  display:       block !important;
  width:         7px;
  height:        7px;
  border-right:  2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform:     rotate(45deg);
  transition:    transform var(--tbm-transition);
}

.tbm.tbm--mobile .tbm-item.open
  > .tbm-link-container
  > .tbm-submenu-toggle:empty::before {
  transform: rotate(-135deg);
}


/* ══════════════════════════════════════════════════════════════════════════
   7. SUBMENUS — ACCORDION ANIMATION
   TB Megamenu's base.css sets display:block on open submenus via
   .tbm-item.open.  We use max-height animation instead (display stays
   block always) so the open/close is smooth at all nesting levels.
   ══════════════════════════════════════════════════════════════════════════ */

/* Always display:block; hidden via max-height:0 */
.tbm.tbm--mobile .tbm-submenu {
  display:    block   !important;
  max-height: 0       !important;
  overflow:   hidden  !important;
  background: var(--tbm-submenu-bg);
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Expanded — .open is added by TB Megamenu's showMenu() or our injected btn */
.tbm.tbm--mobile .tbm-item.open > .tbm-submenu {
  max-height: 2500px !important;
}

/* Level-2 links — indented, lighter weight */
.tbm.tbm--mobile .tbm-submenu .tbm-link,
.tbm.tbm--mobile .tbm-submenu a.tbm-link {
  padding:     10px var(--tbm-item-px) 10px 32px;
  font-size:   13px;
  font-weight: 400;
  color:       var(--tbm-link-muted);
}

.tbm.tbm--mobile .tbm-submenu .tbm-link:hover,
.tbm.tbm--mobile .tbm-submenu a.tbm-link:hover {
  color:      var(--tbm-link-hover-color);
  box-shadow: inset 3px 0 0 var(--tbm-link-accent);
}

/* Level-3+ */
.tbm.tbm--mobile .tbm-submenu .tbm-submenu .tbm-link,
.tbm.tbm--mobile .tbm-submenu .tbm-submenu a.tbm-link {
  padding-left: 48px;
}


/* ══════════════════════════════════════════════════════════════════════════
   8. OVERLAY BACKDROP
   A <div class="tbm-mobile-overlay"> is injected once by
   tb-megamenu-mobile.js and appended to <body>.  The MutationObserver
   in that script adds body.tbm-menu-open to signal the open state.
   ══════════════════════════════════════════════════════════════════════════ */

.tbm-mobile-overlay,
body.tbm-menu-open .tbm-mobile-overlay {
  display:        none           !important;
  pointer-events: none           !important;
  visibility:     hidden         !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   9. DARK-MODE OVERRIDES  [data-bs-theme="dark"]
   ══════════════════════════════════════════════════════════════════════════ */

[data-bs-theme="dark"] {
  --tbm-drawer-bg:     var(--background-color);  /* matches page dark surface exactly */
  --tbm-link-color:    #e2e8f0;
  --tbm-link-muted:    #94a3b8;
  --tbm-link-hover-bg: rgba(255, 255, 255, 0.06);
  --tbm-submenu-bg:    #0F1E35;  /* slightly elevated above midnight navy */
}

[data-bs-theme="dark"] .tbm.tbm--mobile .tbm-button {
  color: var(--tbm-link-color);
}

[data-bs-theme="dark"] .tbm.tbm--mobile .tbm-button:hover {
  background: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .tbm.tbm--mobile .tbm-collapse {
  box-shadow: -4px 0 28px rgba(0, 0, 0, 0.45);
}

[data-bs-theme="dark"] .tbm.tbm--mobile .tbm-drawer-close {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* Override module's var(--background-color) on .tbm-nav inside the drawer —
   transparent so it inherits the drawer surface rather than painting over it. */
[data-bs-theme="dark"] .tbm.tbm--mobile .tbm-nav {
  background: transparent !important;
}

/* ── Override hardcoded #f4796c (old coral) in tb_megamenu/dist/styles.css ── */
/* Flyout toggle arrow hover */
.tbm-item--has-flyout .tbm-submenu-toggle:hover::before,
.tbm-item--has-flyout .tbm-submenu-toggle:focus::before {
  border-left-color: var(--tg-primary-color) !important;
}
/* Sub-nav link hover / focus */
.tbm-subnav > .tbm-item > .tbm-link-container > .tbm-link:hover,
.tbm-subnav > .tbm-item > .tbm-link-container > .tbm-link:focus {
  color: var(--tg-primary-color) !important;
}

/* Override module's hardcoded #fff on submenu toggle buttons in dark mode. */
[data-bs-theme="dark"] .tbm.tbm--mobile .tbm-submenu .tbm-submenu-toggle {
  background-color: transparent !important;
}

/* Desktop dropdown panels: consistent elevated surface against the dark page. */
[data-bs-theme="dark"] .tbm:not(.tbm--mobile) .tbm-submenu {
  background-color: var(--tbm-submenu-bg);
  border-color:     rgba(255, 255, 255, 0.08);
}


/* ══════════════════════════════════════════════════════════════════════════
   11. MEGA-MENU GRID FLATTENING  (mobile)
   Desktop layouts use .tbm-row / .tbm-column (Bootstrap-style) to render
   multi-column flyouts.  In mobile every column is collapsed to a single
   left-aligned vertical stack.  Group containers are always visible;
   group titles become small muted section labels.
   ══════════════════════════════════════════════════════════════════════════ */

/* Flatten desktop grid columns → single vertical stack */
.tbm.tbm--mobile .tbm-submenu .tbm-row,
.tbm.tbm--mobile .tbm-submenu .tbm-column,
.tbm.tbm--mobile .tbm-submenu .tbm-column-inner,
.tbm.tbm--mobile .tbm-group-container .tbm-row,
.tbm.tbm--mobile .tbm-group-container .tbm-column,
.tbm.tbm--mobile .tbm-group-container .tbm-column-inner {
  display: block !important;
  width:   100%  !important;
  float:   none  !important;
  padding: 0     !important;
  margin:  0     !important;
}

/* Group containers: always visible — groups are not separately collapsible */
.tbm.tbm--mobile .tbm-group-container {
  display:    block   !important;
  max-height: none    !important;
  overflow:   visible !important;
}

/* Group title: muted uppercase label, non-interactive */
.tbm.tbm--mobile .tbm-link.tbm-group-title {
  display:        block             !important;
  padding:        10px var(--tbm-item-px) 2px 32px !important;
  font-size:      10px              !important;
  font-weight:    700               !important;
  text-transform: uppercase         !important;
  letter-spacing: 0.1em             !important;
  color:          var(--tbm-link-muted) !important;
  background:     transparent       !important;
  box-shadow:     none              !important;
  cursor:         default           !important;
  pointer-events: none;
}

/* Actual leaf items (level-3) — indented a step deeper than the group title */
.tbm.tbm--mobile .tbm-subnav.level-2 .tbm-item .tbm-link,
.tbm.tbm--mobile .tbm-subnav.level-2 .tbm-item a.tbm-link {
  /* padding-left: 44px; */
}

.tbm.tbm--mobile .tbm-subnav.level-2 .tbm-item .tbm-link:hover,
.tbm.tbm--mobile .tbm-subnav.level-2 .tbm-item a.tbm-link:hover {
  color:      var(--tbm-link-hover-color);
  box-shadow: inset 3px 0 0 var(--tbm-link-accent);
}


/* ══════════════════════════════════════════════════════════════════════════
   10. LEGACY ELEMENT SUPPRESSOR
   Suppresses any cached markup from the old offcanvas / mobile-menu system.
   ══════════════════════════════════════════════════════════════════════════ */

.mobile-menu,
.mobile-nav-toggler,
.menu-backdrop,
.offcanvas-toggle,
.offCanvas-overlay,
.offCanvas-wrap {
  display: none !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   12. COMMERCE CART FLYOUT — TB Mega Menu integration
   Embedded via drupal_block() in tb-megamenu.html.twig, placed OUTSIDE
   .tbm-collapse so it stays visible in the nav bar on every breakpoint.
   Desktop: flex sibling of the menu list → floats to the far right.
   Mobile:  flex sibling of the hamburger (collapse is position:fixed).
   ══════════════════════════════════════════════════════════════════════════ */

/* On desktop, turn the <nav> into a flex row so the collapse fills the
   available space and the cart icon sits flush at the far right. */
nav.tbm:not(.tbm--mobile) {
  display:     flex;
  align-items: center;
}

/* Cart container — always flex, margin-left:auto pushes it right */
.tbm .cart-flyout {
  display:     flex;
  align-items: center;
  margin-left: auto;
  flex-shrink: 0;
}

/* 44 × 44 tap-target anchor */
.tbm .cart-block--link__expand {
  position:        relative;
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           44px;
  height:          44px;
  padding:         0;
  color:           var(--tbm-link-color, #1a1a2e);
  text-decoration: none;
  border-radius:   8px;
  transition:      background var(--tbm-transition, 0.28s ease),
                   color      var(--tbm-transition, 0.28s ease);
}

.tbm .cart-block--link__expand:hover,
.tbm .cart-block--link__expand:focus-visible {
  background: rgba(0, 0, 0, 0.06);
  color:      var(--tbm-link-hover-color, #C09A52);
  outline:    none;
}

/* Icon container */
.tbm .cart-block--summary__icon {
  display:     flex;
  align-items: center;
}

/* Material Symbols Sharp shopping_cart glyph */
.tbm .cart-block--summary__icon .material-symbols-sharp {
  font-size:               22px;
  line-height:             1;
  font-variation-settings: 'wght' 400, 'FILL' 0, 'GRAD' 0, 'opsz' 24;
  pointer-events:          none;
  user-select:             none;
}

/* Superscript count badge — only rendered by JS when count > 0 */
.tbm .cart-count-badge {
  position:        absolute;
  top:             4px;
  right:           4px;
  min-width:       16px;
  height:          16px;
  padding:         0 4px;
  background:      var(--tg-primary-color, #C09A52);
  color:           #fff;
  font-size:       9px;
  font-weight:     700;
  line-height:     16px;
  border-radius:   8px;
  text-align:      center;
  pointer-events:  none;
  user-select:     none;
}

/* Dark-mode adjustments */
[data-bs-theme="dark"] .tbm .cart-block--link__expand {
  color: var(--tbm-link-color, #e2e8f0);
}

[data-bs-theme="dark"] .tbm .cart-block--link__expand:hover {
  background: rgba(255, 255, 255, 0.08);
}