/* ------------------------------------------------------------------
   SmartMenus × BBI theme overrides
   - Maps SmartMenus design tokens to our Tailwind @theme tokens
   - Keeps vendor file intact and overridden via cascade
------------------------------------------------------------------ */

/* Base colour mapping for all nav modes (desktop + mobile) */
.sm-navbar {
  /* hook SmartMenus palette into our theme tokens */
  --sm-bg: var(--color-surface);
  --sm-bg-alt: var(--color-surface-alt);
  --sm-bg-soft: var(--color-surface-soft);

  --sm-text: var(--color-body);
  --sm-text-alt: var(--color-body);
  --sm-text-disabled: rgba(148, 163, 184, 0.6);

  --sm-brand: var(--color-primary);
  --sm-brand-contrast: var(--color-surface);
  --sm-accent: var(--color-primary-soft);
  --sm-accent-contrast: var(--color-surface);

  --sm-separator: rgba(148, 163, 184, 0.25);
  --sm-border: var(--color-border-soft);

  --sm-box-shadow: var(--shadow-strong);
  --sm-text-shadow: none;

  --sm-font-family: var(--font-sans);
}

/* Mobile hamburger / toggler icon colour follows our token */
.sm-navbar .sm-toggler-anchor {
  color: var(--color-nav-toggle) !important;
}

/* --------------------------------------------------------------
   MOBILE (collapsible nav < 768px)
-------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .sm-navbar {
    /* collapsible bar bg/colour (override vendor light look) */
    --sm-collapsible-navbar-bg: var(--color-surface);
    --sm-collapsible-navbar-color: var(--color-body);

    --sm-collapsible-nav-link-hover-bg: rgba(249, 115, 22, 0.16);
    --sm-collapsible-nav-link-hover-color: var(--color-body);

    --sm-collapsible-nav-link-active-bg: var(--color-primary);
    --sm-collapsible-nav-link-active-color: var(--color-surface);

    --sm-collapsible-sub-bg: var(--color-surface-alt);
    --sm-collapsible-sub-first-level-bg: var(--color-surface-alt);
    --sm-collapsible-sub-link-hover-bg: rgba(249, 115, 22, 0.16);
    --sm-collapsible-sub-link-hover-color: var(--color-body);
  }

  .sm-nav-link,
  .sm-sub-link {
    font-family: var(--font-sans);
    color: var(--color-body);
  }

  .sm-nav-link:hover,
  .sm-sub-link:hover {
    text-decoration: none;
  }
}

/* --------------------------------------------------------------
   DESKTOP (dropdown nav ≥ 768px)
-------------------------------------------------------------- */
@media (min-width: 768px) {
  .sm-navbar {
    /* navbar + dropdown colours wired to Customizer tokens */
    --sm-dropdowns-navbar-bg: var(--color-surface);
    --sm-dropdowns-navbar-color: var(--color-nav-link);

    /* dropdown panel */
    --sm-dropdowns-sub-bg: var(--color-nav-sub-bg);
    --sm-dropdowns-sub-border-color: var(--color-surface-border-strong);
    --sm-dropdowns-sub-box-shadow: 0 18px 45px var(--sm-box-shadow);

    /* vendor feeds (we still override via cascade below) */
    --sm-dropdowns-nav-link-hover-bg: transparent;
    --sm-dropdowns-nav-link-hover-color: var(--color-nav-link-hover);
    --sm-dropdowns-nav-link-active-bg: var(--color-nav-link-hover);
    --sm-dropdowns-nav-link-active-color: var(--color-surface);

    --sm-dropdowns-sub-link-hover-bg: var(--color-nav-sub-hover-bg);
    --sm-dropdowns-sub-link-hover-color: var(--color-nav-sub-link);
    --sm-dropdowns-sub-link-active-bg: var(--color-nav-sub-hover-bg);
    --sm-dropdowns-sub-link-active-color: var(--color-nav-sub-link);

    border-color: var(--sm-dropdowns-navbar-border-color);
    background: var(--sm-dropdowns-navbar-bg);
    color: var(--sm-dropdowns-navbar-color);
  }

  /* Main top-level links (parents) - BASE (your existing = pill behaviour) */
  .sm-nav-link {
    grid-area: link/link/link/link-split-toggler;
    border-radius: var(--sm-dropdowns-nav-link-border-radius);
    padding: var(--sm-dropdowns-nav-link-padding-y)
      var(--sm-dropdowns-nav-link-padding-x);
    background: transparent;
    color: var(--color-nav-link);
    font-family: var(--font-sans);
    font-size: var(--sm-font-size);
    font-weight: var(--sm-dropdowns-nav-link-font-weight);
    line-height: var(--sm-line-height);
    text-decoration: none;
    transition: background 150ms ease, color 150ms ease, text-decoration-color 150ms ease;
  }

  /* Hover / active for main links (THIS IS YOUR CURRENT "PILL" BASE) */
  @media (hover: hover) and (pointer: fine) {
    .sm-nav-link:hover {
      background: var(--color-nav-link-hover);
      color: var(--color-surface);
    }
  }

  .sm-nav-link:active {
    background: var(--color-nav-link-hover);
    color: var(--color-surface);
  }

  .sm-nav-link.sm-selected {
    background: var(--color-nav-link-hover);
    color: var(--color-surface);
    font-weight: 600;
  }

  /* Dropdown items (children) */
  .sm-sub-link {
    grid-area: link/link/link/link-split-toggler;
    border-radius: var(--sm-dropdowns-sub-link-border-radius);
    padding: var(--sm-dropdowns-sub-link-padding-y)
      var(--sm-dropdowns-sub-link-padding-x);
    background: transparent;
    color: var(--color-nav-sub-link);
    font-family: var(--font-sans);
    font-size: var(--sm-font-size-small);
    font-weight: var(--sm-dropdowns-sub-link-font-weight);
    line-height: var(--sm-line-height);
    text-decoration: none;
    transition: background 150ms ease, color 150ms ease;
  }

  @media (hover: hover) and (pointer: fine) {
    .sm-sub-link:hover {
      background: var(--color-nav-sub-hover-bg);
      color: var(--color-nav-sub-link);
    }
  }

  .sm-sub-link:active,
  .sm-sub-link.sm-selected {
    background: var(--color-nav-sub-hover-bg);
    color: var(--color-nav-sub-link);
    font-weight: 600;
  }

  /* CTA button in nav – keep using primary token */
  .cta-btn a {
    grid-area: link/link/link/link-split-toggler;
    border-radius: 9999px;
    padding: var(--sm-dropdowns-nav-link-padding-y)
      var(--sm-dropdowns-nav-link-padding-x);
    background: var(--color-primary);
    color: var(--color-surface);
    font-family: var(--font-sans);
    font-size: var(--sm-font-size);
    font-weight: 600;
    line-height: var(--sm-line-height);
    text-decoration: none;
    margin-left: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    transition: background 150ms ease, color 150ms ease,
      box-shadow 150ms ease, transform 150ms ease;
  }

  .cta-btn a:hover {
    background: var(--color-primary-soft);
    color: var(--color-surface);
    transform: translateY(-1px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  }

  .cta-btn a:active {
    transform: translateY(0);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  }
}

/* --------------------------------------------------------------
   NAV STYLE OVERRIDES (DESKTOP ONLY)
   - Pill stays as your default (no overrides)
   - Basic + Underline override ONLY the parent <a> and arrow button colours
   - No padding/grid/border changes = no split arrow bugs
-------------------------------------------------------------- */
@media (min-width: 768px) {

  /* ===== BASIC (no pill): text colour only, no background ===== */
  body.nav-style-basic .sm-navbar .sm-nav > .sm-nav-item > a.sm-nav-link {
    background: transparent !important;
    color: var(--color-nav-link) !important;
    text-decoration: none !important;
  }

  body.nav-style-basic .sm-navbar .sm-nav > .sm-nav-item > button.sm-sub-toggler {
    background: transparent !important;
    color: var(--color-nav-link) !important;
  }

  @media (hover: hover) and (pointer: fine) {
    body.nav-style-basic .sm-navbar .sm-nav > .sm-nav-item:hover > a.sm-nav-link,
    body.nav-style-basic .sm-navbar .sm-nav > .sm-nav-item:hover > button.sm-sub-toggler {
      background: transparent !important;
      color: var(--color-nav-link-hover) !important;
    }
  }

  body.nav-style-basic .sm-navbar .sm-nav > .sm-nav-item > a.sm-nav-link.highlighted,
  body.nav-style-basic .sm-navbar .sm-nav > .sm-nav-item > a.sm-nav-link.sm-selected,
  body.nav-style-basic .sm-navbar .sm-nav > .current-menu-item > a.sm-nav-link,
  body.nav-style-basic .sm-navbar .sm-nav > .current-menu-ancestor > a.sm-nav-link,
  body.nav-style-basic .sm-navbar .sm-nav > .current-menu-parent > a.sm-nav-link {
    background: transparent !important;
    color: var(--color-nav-link-hover) !important;
    font-weight: 600;
  }

  body.nav-style-basic .sm-navbar .sm-nav > .sm-nav-item > a.sm-nav-link.highlighted + button.sm-sub-toggler,
  body.nav-style-basic .sm-navbar .sm-nav > .sm-nav-item > a.sm-nav-link.sm-selected + button.sm-sub-toggler,
  body.nav-style-basic .sm-navbar .sm-nav > .current-menu-item > button.sm-sub-toggler,
  body.nav-style-basic .sm-navbar .sm-nav > .current-menu-ancestor > button.sm-sub-toggler,
  body.nav-style-basic .sm-navbar .sm-nav > .current-menu-parent > button.sm-sub-toggler {
    background: transparent !important;
    color: var(--color-nav-link-hover) !important;
  }

  /* ===== UNDERLINE: no pill bg, underline on the parent <a> only ===== */
  body.nav-style-underline .sm-navbar .sm-nav > .sm-nav-item > a.sm-nav-link {
    background: transparent !important;
    color: var(--color-nav-link) !important;
    text-decoration: none !important;
    text-decoration-color: var(--color-nav-link-hover);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.35em;
  }

  body.nav-style-underline .sm-navbar .sm-nav > .sm-nav-item > button.sm-sub-toggler {
    background: transparent !important;
    color: var(--color-nav-link) !important;
  }

  @media (hover: hover) and (pointer: fine) {
    body.nav-style-underline .sm-navbar .sm-nav > .sm-nav-item:hover > a.sm-nav-link {
      background: transparent !important;
      color: var(--color-nav-link-hover) !important;
      text-decoration: underline !important;
    }

    body.nav-style-underline .sm-navbar .sm-nav > .sm-nav-item:hover > button.sm-sub-toggler {
      background: transparent !important;
      color: var(--color-nav-link-hover) !important;
    }
  }

  body.nav-style-underline .sm-navbar .sm-nav > .sm-nav-item > a.sm-nav-link.highlighted,
  body.nav-style-underline .sm-navbar .sm-nav > .sm-nav-item > a.sm-nav-link.sm-selected,
  body.nav-style-underline .sm-navbar .sm-nav > .current-menu-item > a.sm-nav-link,
  body.nav-style-underline .sm-navbar .sm-nav > .current-menu-ancestor > a.sm-nav-link,
  body.nav-style-underline .sm-navbar .sm-nav > .current-menu-parent > a.sm-nav-link {
    background: transparent !important;
    color: var(--color-nav-link-hover) !important;
    font-weight: 600;
    text-decoration: underline !important;
  }

  body.nav-style-underline .sm-navbar .sm-nav > .sm-nav-item > a.sm-nav-link.highlighted + button.sm-sub-toggler,
  body.nav-style-underline .sm-navbar .sm-nav > .sm-nav-item > a.sm-nav-link.sm-selected + button.sm-sub-toggler,
  body.nav-style-underline .sm-navbar .sm-nav > .current-menu-item > button.sm-sub-toggler,
  body.nav-style-underline .sm-navbar .sm-nav > .current-menu-ancestor > button.sm-sub-toggler,
  body.nav-style-underline .sm-navbar .sm-nav > .current-menu-parent > button.sm-sub-toggler {
    background: transparent !important;
    color: var(--color-nav-link-hover) !important;
  }
}

/* --------------------------------------------------------------
   Submenu width tweaks
-------------------------------------------------------------- */
@media (min-width: 768px) {
  .sm-navbar .sm-sub:not(.sm-sub--mega) {
    min-width: unset !important;
    width: max-content !important;
  }

  .sm-navbar .sm-sub--mega {
    left: 0 !important;
    right: 0 !important;
    min-width: 100% !important;
    width: 100% !important;
  }
}

/* --------------------------------------------------------------
   Mega menu colours (use Customizer nav tokens)
-------------------------------------------------------------- */
@media (min-width: 768px) {
  .sm-navbar .sm-sub--mega {
    background: var(--color-nav-sub-bg) !important;
    color: var(--color-nav-sub-link) !important;
  }

  .sm-navbar .sm-sub--mega > li {
    background: transparent;
  }

  .sm-navbar .sm-sub--mega > li > a,
  .sm-navbar .sm-sub--mega .sm-mega-group-title {
    display: block;
    margin-bottom: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-headings);
  }

  .sm-navbar .sm-sub--mega .sm-sub-link {
    background: transparent;
    color: var(--color-nav-sub-link);
  }

  @media (hover: hover) and (pointer: fine) {
    .sm-navbar .sm-sub--mega .sm-sub-link:hover {
      background: var(--color-nav-sub-hover-bg);
      color: var(--color-nav-sub-link);
    }
  }

  .sm-navbar .sm-sub--mega .sm-sub-link:active,
  .sm-navbar .sm-sub--mega .sm-sub-link.sm-selected {
    background: var(--color-nav-sub-hover-bg);
    color: var(--color-nav-sub-link);
    font-weight: 600;
  }
}




/* ------------------------------------------------------------------
   SmartMenus radius tokens -> Hayden global radius tokens
------------------------------------------------------------------ */
@media (min-width: 768px) {

  /* PILL style: parents should be pill-shaped */
  body.nav-style-pill .sm-navbar {
    --sm-dropdowns-nav-link-border-radius: var(--radius-xl);
  }

  /* Dropdown items can be slightly rounded (optional, but nice) */
  body.nav-style-pill .sm-navbar {
    --sm-dropdowns-sub-link-border-radius: var(--radius-lg);
  }

  /* Basic + Underline: keep square */
  body.nav-style-basic .sm-navbar,
  body.nav-style-underline .sm-navbar {
    --sm-dropdowns-nav-link-border-radius: 0rem;
    --sm-dropdowns-sub-link-border-radius: 0rem;
  }
}
