/* ============================================================
   TB MEGA MENU — Zaira overrides
   ============================================================ */

/* ── Level-1 nav item spacing ─────────────────────────────── */
@media (min-width: 1200px) {
  .tbm-nav.level-0 > .tbm-item.level-1:last-child {
    margin-right: 1rem;
  }
}
.tbm.tbm--mobile .tbm-nav {
  gap: 0;
}
.tbm.tbm--mobile .tbm-nav.level-0 > .tbm-item.level-1:last-child {
  margin-right: 0;
}

/* ── Neutralise Drupal core's `.contextual-region` positioning ───────
 *
 * Drupal's `contextual` module gives every block wrapper the generic
 * `.contextual-region { position: relative }` class for any user with
 * "access contextual links" (i.e. logged-in admins — this is what the
 * Gin-themed admin account actually triggers, not Gin's CSS itself).
 *
 * For #block-zaira-megamenu that silently inserts a *new* positioned
 * ancestor between nav.tbm and .menu-area .container, hijacking the
 * absolute-positioning containing block the rules below depend on —
 * so submenus render at the wrong size and position, producing the
 * overlapping/ghosted panel that only appears while logged in. This
 * block renders no contextual-links trigger of its own, so forcing it
 * back to `static` is safe and restores the anonymous-user layout.
 * ──────────────────────────────────────────────────────────────────── */
#block-zaira-megamenu.contextual-region {
  position: static;
}

/* ── Desktop submenu: full Bootstrap-container width ─────────
 *
 * Problem: TB Megamenu positions submenus relative to nav.tbm
 * (the flex child inside .col-8, ~880 px).  With four groups
 * (Focus Areas · Curated Content · Learning Resources ·
 * Work with Us) each column gets only ~213 px — too tight.
 *
 * Fix: on desktop, promote .menu-area .container to the
 * absolute-positioning context, then remove nav.tbm from that
 * chain.  The submenu can now use left:0 / right:0 / width:auto
 * to fill the full Bootstrap container (~1272 px), giving each
 * of the four columns ~307 px.
 * ────────────────────────────────────────────────────────── */
@media (min-width: 1200px) {

  /* 1. Bootstrap container becomes the positioning anchor */
  .menu-area .container {
    position: relative;
  }

  /* 2. Nav element must NOT interrupt the ancestor chain */
  .tbm.tbm-main:not(.tbm--mobile) {
    position: static;
    overflow: visible;
  }

  /* 3. Top-level submenus span the full container width */
  .tbm.tbm-main:not(.tbm--mobile)
    > .tbm-collapse
    > .tbm-nav
    > .tbm-item.level-1
    > .tbm-submenu {
    top: 100%;        /* flush beneath the container (= the header bar) */
    left: 0;
    right: 0;
    width: auto;      /* auto lets left + right define width */
    z-index: 999;
    padding: 1.75rem 1.5rem;
    border-top: 3px solid var(--tg-primary-color, #C09A52);
    box-shadow: 0 8px 32px rgba(13, 27, 42, 0.12);
  }

  /* 3b. Hover-bridge: invisible pseudo-element that fills the gap between
   *     the nav link's bottom and the submenu's top edge.
   *
   *     Gap anatomy:
   *       20 px  — .menu-nav bottom padding (sits between nav links and container bottom)
   *        3 px  — submenu border-top
   *       -----
   *       23 px  total gap  (+5 px buffer = 28 px)
   *
   *     Without this, when the mouse exits .tbm-item.level-1 downward it crosses
   *     the 20 px gap and triggers mouseleave; the 100 ms close timeout in
   *     frontend.js fires before the mouse reaches the submenu.
   *     With the ::before bridge, the mouse never leaves .tbm-item.level-1
   *     (it enters a child of .tbm-submenu instead), so mouseleave never fires.
   */
  .tbm.tbm-main:not(.tbm--mobile)
    > .tbm-collapse
    > .tbm-nav
    > .tbm-item.level-1
    > .tbm-submenu::before {
    content:  '';
    position: absolute;
    top:      -28px;   /* reach back into the gap */
    left:     0;
    right:    0;
    height:   28px;
    display:  block;
  }

  /* 4. Ensure open/display state still fires correctly */
  .tbm.tbm-main:not(.tbm--mobile)
    > .tbm-collapse
    > .tbm-nav
    > .tbm-item.level-1.open
    > .tbm-submenu {
    display:  block;
    overflow: visible;
    clip:     auto;
    height:   auto;
  }

  /* 5. Give each column a comfortable minimum width so text
        doesn't wrap on narrower viewports */
  .tbm.tbm-main:not(.tbm--mobile) .tbm-column {
    min-width: 160px;
  }

  /* 6. Column inner: consistent padding and link spacing */
  .tbm.tbm-main:not(.tbm--mobile) .tbm-column-inner {
    /* padding: 0 0.75rem; */
  }

  /* 7. Group title (section headings inside the dropdown)
   *
   * flex: 1 is critical: .tbm-link-container is display:flex, so without
   * this the span shrinks to text width and the border-bottom underline
   * only spans the heading text — making the column divider appear
   * asymmetrically close to the right column.  flex:1 stretches the
   * title to fill the full column width so the underline is equidistant
   * from the vertical divider on both sides.
   */
  .tbm.tbm-main:not(.tbm--mobile) .tbm-group-title {
    display:        block;
    flex:           1;            /* fill the flex container → full-width underline */
    font-size:      0.7rem;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--tg-primary-color, #C09A52);
    padding-bottom: 0.5rem;
    margin-bottom:  0.5rem;
    border-bottom:  1px solid var(--tg-border-color, #e2ddd7);
    cursor:         default;
  }

  /* 8. Links inside the dropdown */
  .tbm.tbm-main:not(.tbm--mobile)
    .tbm-submenu
    .tbm-subnav.level-2
    > .tbm-item
    > .tbm-link-container
    > .tbm-link {
    display:     block;
    padding:     0.35rem 0;
    font-size:   0.875rem;
    white-space: nowrap;
    color:       var(--tg-body-font-color, #3D4A56);
  }
  .tbm.tbm-main:not(.tbm--mobile)
    .tbm-submenu
    .tbm-subnav.level-2
    > .tbm-item
    > .tbm-link-container
    > .tbm-link:hover {
    color:       var(--tg-primary-color, #C09A52);
  }

  /* 9. Thin vertical dividers — centred in the column-gap
   *
   * right: -0.3125rem = half the 0.625rem gap, placing the line's
   * right edge at the gap midpoint.  This is now visually equidistant
   * from both columns because the group title underlines (rule 7 above)
   * extend to the full column width via flex:1.
   */
  .tbm.tbm-main:not(.tbm--mobile)
    .tbm-submenu
    .tbm-row
    > .tbm-column:not(:last-child) {
    position: relative;
  }

  .tbm.tbm-main:not(.tbm--mobile)
    .tbm-submenu
    .tbm-row
    > .tbm-column:not(:last-child)::after {
    content:    '';
    position:   absolute;
    right:      20%;
    top:        8%;
    height:     84%;
    width:      1px;
    background: rgba(194, 159, 90, 0.30);
    pointer-events: none;
  }

  [data-bs-theme="dark"]
    .tbm.tbm-main:not(.tbm--mobile)
    .tbm-submenu
    .tbm-row
    > .tbm-column:not(:last-child)::after {
    background: rgba(255, 255, 255, 0.12);
  }

}
/* ── End desktop submenu overrides ─────────────────────────── */

/* ── Level-1 link colours (light mode) ────────────────────────────────────
 *
 * tbm-styles.css uses var(--tg-body-color) for .tbm-link.level-1, but
 * Zaira defines --tg-body-font-color, not --tg-body-color.  The undefined
 * variable resolves to the inherited body colour in light mode (acceptable)
 * but leaves the links nearly invisible on the dark header in dark mode.
 * Explicit rules below fix both modes and make the menu compelling.
 * ─────────────────────────────────────────────────────────────────────── */
@media (min-width: 1200px) {

  /* Resting state — dark navy, medium weight, smooth colour transition */
  .tbm.tbm-main:not(.tbm--mobile)
    .tbm-nav.level-0
    > .tbm-item.level-1
    > .tbm-link-container
    > .tbm-link.level-1 {
    color:       var(--tg-secondary-color, #0D1B2A);
    font-weight: 500;
    transition:  color 0.2s ease-out;
  }

  /* Hover / focus */
  .tbm.tbm-main:not(.tbm--mobile)
    .tbm-nav.level-0
    > .tbm-item.level-1
    > .tbm-link-container
    > .tbm-link.level-1:hover,
  .tbm.tbm-main:not(.tbm--mobile)
    .tbm-nav.level-0
    > .tbm-item.level-1
    > .tbm-link-container
    > .tbm-link.level-1:focus {
    color: var(--tg-primary-color, #C09A52);
  }

  /* Open submenu state — gold highlight */
  .tbm.tbm-main:not(.tbm--mobile)
    .tbm-nav.level-0
    > .tbm-item.level-1.open
    > .tbm-link-container
    > .tbm-link.level-1 {
    color: var(--tg-primary-color, #C09A52);
  }

  /* Dropdown arrow — inherit link colour so it matches on hover/open */
  .tbm.tbm-main:not(.tbm--mobile)
    .tbm-nav.level-0
    > .tbm-item.level-1
    > .tbm-link-container
    .tbm-toggle::after {
    color:      inherit;
    transition: transform 0.3s ease-out, color 0.2s ease-out;
  }

  /* Submenu card — crisp white in light mode */
  .tbm.tbm-main:not(.tbm--mobile)
    > .tbm-collapse
    > .tbm-nav
    > .tbm-item.level-1
    > .tbm-submenu {
    background-color: #ffffff;
    border-left:   1px solid var(--tg-border-color, #E2DDD7);
    border-right:  1px solid var(--tg-border-color, #E2DDD7);
    border-bottom: 1px solid var(--tg-border-color, #E2DDD7);
  }
}

/* ── Level-1 link colours (dark mode) ────────────────────────────────────── */
@media (min-width: 1200px) {

  /* Resting — steel blue-white, readable on the dark header */
  [data-bs-theme="dark"]
    .tbm.tbm-main:not(.tbm--mobile)
    .tbm-nav.level-0
    > .tbm-item.level-1
    > .tbm-link-container
    > .tbm-link.level-1 {
    color: #C8D8E8;
  }

  /* Hover / focus */
  [data-bs-theme="dark"]
    .tbm.tbm-main:not(.tbm--mobile)
    .tbm-nav.level-0
    > .tbm-item.level-1
    > .tbm-link-container
    > .tbm-link.level-1:hover,
  [data-bs-theme="dark"]
    .tbm.tbm-main:not(.tbm--mobile)
    .tbm-nav.level-0
    > .tbm-item.level-1
    > .tbm-link-container
    > .tbm-link.level-1:focus {
    color: var(--tg-primary-color, #C09A52);
  }

  /* Open state */
  [data-bs-theme="dark"]
    .tbm.tbm-main:not(.tbm--mobile)
    .tbm-nav.level-0
    > .tbm-item.level-1.open
    > .tbm-link-container
    > .tbm-link.level-1 {
    color: var(--tg-primary-color, #C09A52);
  }

  /* Submenu card — deep navy, dark border, stronger shadow */
  [data-bs-theme="dark"]
    .tbm.tbm-main:not(.tbm--mobile)
    > .tbm-collapse
    > .tbm-nav
    > .tbm-item.level-1
    > .tbm-submenu {
    background-color: #0D1B2A;
    border-left:   1px solid var(--tg-border-dark, #273341);
    border-right:  1px solid var(--tg-border-dark, #273341);
    border-bottom: 1px solid var(--tg-border-dark, #273341);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  }

  /* Group title separator in dark mode */
  [data-bs-theme="dark"]
    .tbm.tbm-main:not(.tbm--mobile)
    .tbm-group-title {
    border-bottom-color: var(--tg-border-dark, #273341);
  }

  /* Level-2 link colours in dark mode */
  [data-bs-theme="dark"]
    .tbm.tbm-main:not(.tbm--mobile)
    .tbm-submenu
    .tbm-subnav.level-2
    > .tbm-item
    > .tbm-link-container
    > .tbm-link {
    color: #7E9AB0;
  }

  [data-bs-theme="dark"]
    .tbm.tbm-main:not(.tbm--mobile)
    .tbm-submenu
    .tbm-subnav.level-2
    > .tbm-item
    > .tbm-link-container
    > .tbm-link:hover {
    color: var(--tg-primary-color, #C09A52);
  }
}

/* ── Mobile dark mode ──────────────────────────────────────────────────────
 *
 * tbm-styles.css sets .tbm--mobile .tbm-collapse { background: #fff }
 * and .tbm-item { border-top: 1px solid rgba(0,0,0,.2) } — both invisible
 * on a dark background.  Override below.
 * ─────────────────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .tbm.tbm--mobile .tbm-collapse {
  background: #0D1B2A;
}
[data-bs-theme="dark"] .tbm.tbm--mobile .tbm-nav {
  background: #0D1B2A;
}
[data-bs-theme="dark"] .tbm.tbm--mobile .tbm-item {
  border-top-color: #273341;
}
[data-bs-theme="dark"] .tbm.tbm--mobile .tbm-link.level-1 {
  color: #C8D8E8;
}
[data-bs-theme="dark"] .tbm.tbm--mobile .tbm-link.level-1:hover,
[data-bs-theme="dark"] .tbm.tbm--mobile .tbm-link.level-1:focus {
  color: var(--tg-primary-color, #C09A52);
}
[data-bs-theme="dark"] .tbm.tbm--mobile .tbm-item.level-1.open > .tbm-toggle {
  background-color: var(--tg-primary-color, #C09A52);
  color: #0D1B2A;
}
[data-bs-theme="dark"] .tbm.tbm--mobile .tbm-submenu {
  background: #111F30;
  border-top-color: #273341;
  box-shadow: none;
}
[data-bs-theme="dark"] .tbm.tbm--mobile .tbm-submenu .tbm-link {
  color: #7E9AB0;
}
[data-bs-theme="dark"] .tbm.tbm--mobile .tbm-submenu .tbm-link:hover,
[data-bs-theme="dark"] .tbm.tbm--mobile .tbm-submenu .tbm-link:focus {
  color: var(--tg-primary-color, #C09A52);
}
[data-bs-theme="dark"] .tbm.tbm--mobile .tbm-submenu-toggle {
  background-color: #0D1B2A;
  color: #C8D8E8;
  border-left-color: #273341;
}

/* ── Pinned-open state (.tbm-pinned added by tb-megamenu-pin.js) ───────────
 *
 * Visual feedback: the trigger text and dropdown arrow turn gold and the
 * arrow rotates 180° so users can see which menu is currently locked open.
 * No layout changes — only colour and transform.
 * ─────────────────────────────────────────────────────────────────────── */
@media (min-width: 1200px) {
  /* Gold text on the pinned trigger */
  .tbm.tbm-main:not(.tbm--mobile)
    .tbm-item.level-1.tbm-pinned
    > .tbm-link-container
    > .tbm-toggle {
    color: var(--tg-primary-color, #C09A52);
  }

  /* Rotate the expand_more arrow to point upward (menu is open/pinned) */
  .tbm.tbm-main:not(.tbm--mobile)
    .tbm-item.level-1.tbm-pinned
    > .tbm-link-container
    > .tbm-toggle::after {
    transform:  rotate(180deg);
    color:      var(--tg-primary-color, #C09A52);
  }
}