/* ============================================================
   MOBILE NAV DRAWER
   Pixel-matched to Figma spec
   Only active below xl (navbar-expand-xl = 1200px)

   Figma tokens used:
   - bg-teal-950  = var(--bs-primary-800)  = #0f2c2b
   - border-emerald-900 = var(--bs-primary-600) = #004e3b
   - text-teal-100 = var(--bs-primary-100) = #cbf4ea
   - bg-red-400   = var(--bs-secondary-400) = #ff6b6b
   - outline-cyan-100 = var(--bs-primary-50) = #bafaea
   - IBM Plex Sans / IBM Plex Mono
   ============================================================ */

/* ----------------------------------------------------------
   OVERLAY
   ---------------------------------------------------------- */
.mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.mobile-nav-overlay.is-open {
  display: block;
  opacity: 1;
}

/* ----------------------------------------------------------
   CLOSE BUTTON
   Outside the drawer, fixed top-right over the overlay
   Animates in when overlay opens: fade + scale
   ---------------------------------------------------------- */
.mobile-nav-close {
  position: fixed;
  top: 1.25rem;
  right: 1rem;
  z-index: 1060;

  /* Hidden state — use opacity+scale so we can animate */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.6) rotate(-45deg);
  pointer-events: none;

  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: none;
  background: var(--bs-primary-800);
  color: var(--bs-primary-50); /* cyan-100 = #bafaea */
  cursor: pointer;
  padding: 0;
  line-height: 1;

  transition:
    opacity  0.3s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.2s ease;
}

/* Visible state — triggered when overlay opens */
.mobile-nav-overlay.is-open .mobile-nav-close {
  opacity: 1;
  transform: scale(1) rotate(0deg);
  pointer-events: auto;
}

.mobile-nav-close:hover,
.mobile-nav-close:focus-visible {
  background: var(--bs-primary-700);
  outline: none;
  transform: scale(1.1) rotate(0deg);
}

.mobile-nav-close:active {
  transform: scale(0.92) rotate(0deg);
}

/* SVG X lines */
.mobile-nav-close svg {
  width: 1rem;
  height: 1rem;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  fill: none;
  display: block;
  overflow: visible;
}

/* Animate each path drawing in via stroke-dasharray/dashoffset */
.mobile-nav-close svg path {
  stroke-dasharray: 17;
  stroke-dashoffset: 17;
  transition: stroke-dashoffset 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Draw lines in when overlay is open */
.mobile-nav-overlay.is-open .mobile-nav-close svg path {
  stroke-dashoffset: 0;
}

/* On close: reverse stagger (second line disappears first) */
.mobile-nav-close svg path:nth-child(1) {
  transition-delay: 0.15s; /* open: draws second */
}

.mobile-nav-close svg path:nth-child(2) {
  transition-delay: 0.22s; /* open: draws last */
}

/* When closing (overlay losing .is-open), reverse the delay order */
.mobile-nav-overlay:not(.is-open) .mobile-nav-close svg path:nth-child(1) {
  transition-delay: 0.05s;
}

.mobile-nav-overlay:not(.is-open) .mobile-nav-close svg path:nth-child(2) {
  transition-delay: 0s;
}

/* ----------------------------------------------------------
   DRAWER PANEL
   Figma: w-80 (320px), bg-teal-950
   ---------------------------------------------------------- */
.mobile-nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1050;
  width: min(87vw); 
  background: var(--bs-primary-800);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.mobile-nav-drawer.is-open {
  transform: translateX(0);
}

/* ----------------------------------------------------------
   DRAWER HEADER  (logo — sticky, never scrolls)
   Figma: pt-5 px-5
   ---------------------------------------------------------- */
.mobile-nav-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: 1.25rem 1.25rem 1.25rem 1.25rem; /* pt-5 px-5 */
  background: var(--bs-primary-800);
  flex-shrink: 0;
}

.mobile-nav-header .mobile-nav-logo img {
  height: 2rem; /* h-8 = 32px */
  width: auto;
  display: block;
}

/* ----------------------------------------------------------
   SCROLLABLE BODY
   Figma: pb-28 on outer wrapper — we apply to body
   ---------------------------------------------------------- */
.mobile-nav-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 1.25rem 7rem; /* px-5 pb-28 */
  display: flex;
  flex-direction: column;
  gap: 1.25rem; /* gap-5 */
}

/* ----------------------------------------------------------
   MENU LIST  (ul.new-mobile-menu)
   Figma: flex flex-col, no extra padding
   ---------------------------------------------------------- */
.mobile-nav-drawer .new-mobile-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* ----------------------------------------------------------
   TOP-LEVEL ITEMS
   Figma: py-2 border-t border-b border-emerald-900
   Last item: border-t only (no border-b)
   ---------------------------------------------------------- */
.mobile-nav-drawer .new-mobile-menu > .nav-item {
  border-top: 1px solid var(--bs-primary-600);
  border-bottom: 1px solid var(--bs-primary-600);
}

/* Collapse double borders between adjacent items */
.mobile-nav-drawer .new-mobile-menu > .nav-item + .nav-item {
  border-top: none;
}

/* Last item: no bottom border (Figma: "Closed Last" state) */
.mobile-nav-drawer .new-mobile-menu > .nav-item:last-child {
  border-bottom: none;
}

/* Top-level link row
   font-size uses theme token --font-size-p-medium (16px constant) */
.mobile-nav-drawer .new-mobile-menu > .nav-item > .nav-link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100%;
  padding: 0.5rem 0 !important; /* py-2 */
  color: var(--bs-primary-100) !important;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-p-medium) !important; /* 16px */
  font-weight: 400 !important;
  line-height: 1.5 !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease;
  box-shadow: none !important;
}

.mobile-nav-drawer .new-mobile-menu > .nav-item > .nav-link:hover,
.mobile-nav-drawer .new-mobile-menu > .nav-item > .nav-link:focus-visible {
  color: var(--bs-primary-25) !important;
  outline: none;
}

/* Kill Bootstrap active colour — all top-level items stay teal-100 */
.mobile-nav-drawer .new-mobile-menu > .nav-item > .nav-link.active,
.mobile-nav-drawer .new-mobile-menu > .nav-item.current-menu-item > .nav-link,
.mobile-nav-drawer .new-mobile-menu > .nav-item.current-menu-ancestor > .nav-link,
.mobile-nav-drawer .new-mobile-menu > .nav-item.current-page-ancestor > .nav-link {
  color: var(--bs-primary-100) !important;
}

/* ----------------------------------------------------------
   KILL BOOTSTRAP CARET on top-level links
   ---------------------------------------------------------- */
.mobile-nav-drawer .new-mobile-menu > .nav-item > .nav-link::after,
.mobile-nav-drawer .new-mobile-menu > .nav-item > .nav-link.dropdown-toggle::after {
  display: none !important;
  content: none !important;
}

/* ----------------------------------------------------------
   +/− TOGGLE ICON
   Figma: w-8 h-8 container, w-4 h-4 icon (bg-teal-100)
   Items WITHOUT children: icon has opacity-0 (keeps spacing)
   Animation: vertical bar shrinks to centre → + becomes −
   ---------------------------------------------------------- */
.mobile-nav-drawer .new-mobile-menu > .nav-item > .nav-link .mobile-nav-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;   /* w-8 */
  height: 2rem;  /* h-8 */
  pointer-events: none;
}

/* Items without children: invisible but keeps layout spacing */
.mobile-nav-drawer .new-mobile-menu > .nav-item:not(.dropdown) > .nav-link .mobile-nav-toggle {
  opacity: 0;
}

/* Horizontal bar — always visible, no animation needed */
.mobile-nav-drawer .new-mobile-menu > .nav-item.dropdown > .nav-link .mobile-nav-toggle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1.5px;
  background: var(--bs-primary-100);
  border-radius: 1px;
  transform: translate(-50%, -50%);
  /* no transition — horizontal bar never moves */
}

/* Vertical bar — animates out on open */
.mobile-nav-drawer .new-mobile-menu > .nav-item.dropdown > .nav-link .mobile-nav-toggle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.5px;
  height: 1rem;
  background: var(--bs-primary-100);
  border-radius: 1px;
  /* anchor transform at the visual centre */
  transform: translate(-50%, -50%) scaleY(1) rotate(0deg);
  transform-origin: center center;
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity   0.3s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
}

/* Open state: vertical bar collapses to a point at centre → clean − */
.mobile-nav-drawer .new-mobile-menu > .nav-item.dropdown.is-open > .nav-link .mobile-nav-toggle::after {
  transform: translate(-50%, -50%) scaleY(0) rotate(0deg);
  opacity: 0;
}

/* ----------------------------------------------------------
   DEPTH-1 SUBMENU PANEL  (ul.dropdown-menu)
   Figma: pb-2.5, no background change (same teal-950)
   Accordion: collapsed by default, expands on .is-open
   ---------------------------------------------------------- */
.mobile-nav-drawer .new-mobile-menu > .nav-item > .dropdown-menu {
  position: static !important;
  float: none !important;
  transform: none !important;
  inset: auto !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  /* Collapsed */
  display: block !important;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.mobile-nav-drawer .new-mobile-menu > .nav-item.is-open > .dropdown-menu {
  max-height: 80rem;
  pointer-events: auto;
  padding-bottom: 0.625rem !important; /* pb-2.5 */
}

/* ----------------------------------------------------------
   DEPTH-1 ITEMS  (group headings + plain links)
   ---------------------------------------------------------- */
.mobile-nav-drawer .new-mobile-menu .dropdown-menu > .nav-item {
  list-style: none;
}

/* All depth-1 links: font-size uses theme token --font-size-p-medium (16px) */
.mobile-nav-drawer .new-mobile-menu .dropdown-menu > .nav-item > .sub-menu-link,
.mobile-nav-drawer .new-mobile-menu .dropdown-menu > .nav-item > .dropdown-item {
  display: block !important;
  padding: 0 0 0.375rem 0.625rem !important; /* pl-2.5 pb-1.5 */
  color: var(--bs-primary-100) !important;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-p-medium) !important; /* 16px */
  font-weight: 300 !important;
  line-height: 1.5 !important;
  text-decoration: none !important;
  background: transparent !important;
  white-space: normal !important;
  border: none !important;
  transition: color 0.2s ease;
}

.mobile-nav-drawer .new-mobile-menu .dropdown-menu > .nav-item > .sub-menu-link:hover,
.mobile-nav-drawer .new-mobile-menu .dropdown-menu > .nav-item > .sub-menu-link:focus-visible,
.mobile-nav-drawer .new-mobile-menu .dropdown-menu > .nav-item > .dropdown-item:hover,
.mobile-nav-drawer .new-mobile-menu .dropdown-menu > .nav-item > .dropdown-item:focus-visible {
  color: var(--bs-primary-25) !important;
  background: transparent !important;
  outline: none;
}

/* GROUP HEADINGS (depth-1 items that have children)
   Figma: data-type="Headline" — font-bold, pl-2.5 pb-1.5 */
.mobile-nav-drawer .new-mobile-menu .dropdown-menu > .nav-item.dropdown > .sub-menu-link,
.mobile-nav-drawer .new-mobile-menu .dropdown-menu > .nav-item.dropdown > .dropdown-item {
  font-weight: 700 !important; /* font-bold */
  color: var(--bs-primary-100) !important;
 
  pointer-events: none;
  cursor: default;
}

/* If heading has a real link, make it clickable */
.mobile-nav-drawer .new-mobile-menu .dropdown-menu > .nav-item.dropdown > .sub-menu-link[href]:not([href="#"]),
.mobile-nav-drawer .new-mobile-menu .dropdown-menu > .nav-item.dropdown > .dropdown-item[href]:not([href="#"]) {
  pointer-events: auto;
  cursor: pointer;
}

/* Kill Bootstrap caret on depth-1 dropdown-toggle */
.mobile-nav-drawer .new-mobile-menu .dropdown-menu > .nav-item.dropdown > .sub-menu-link::after,
.mobile-nav-drawer .new-mobile-menu .dropdown-menu > .nav-item.dropdown > .dropdown-item::after {
  display: none !important;
  content: none !important;
}

/* ----------------------------------------------------------
   DEPTH-2 LIST  (ul.dropdown-menu.sub-menu)
   Figma: always visible, no collapse
   ---------------------------------------------------------- */
.mobile-nav-drawer .new-mobile-menu .dropdown-menu .sub-menu {
  display: block !important;
  position: static !important;
  float: none !important;
  transform: none !important;
  inset: auto !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.mobile-nav-drawer .new-mobile-menu .dropdown-menu .sub-menu > .nav-item {
  list-style: none;
}

/* DEPTH-2 LINKS — font-size uses theme token --font-size-p-medium (16px) */
.mobile-nav-drawer .new-mobile-menu .dropdown-menu .sub-menu > .nav-item > .sub-menu-link,
.mobile-nav-drawer .new-mobile-menu .dropdown-menu .sub-menu > .nav-item > .dropdown-item {
  display: block !important;
  padding: 0 0 0.375rem 0.625rem !important; /* pl-2.5 pb-1.5 */
  color: var(--bs-primary-100) !important;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-p-medium) !important; /* 16px */
  font-weight: 300 !important;
  line-height: 1.5 !important;
  text-decoration: none !important;
  background: transparent !important;
  white-space: normal !important;
  border: none !important;
  transition: color 0.2s ease;
}

.mobile-nav-drawer .new-mobile-menu .dropdown-menu .sub-menu > .nav-item > .sub-menu-link:hover,
.mobile-nav-drawer .new-mobile-menu .dropdown-menu .sub-menu > .nav-item > .sub-menu-link:focus-visible,
.mobile-nav-drawer .new-mobile-menu .dropdown-menu .sub-menu > .nav-item > .dropdown-item:hover,
.mobile-nav-drawer .new-mobile-menu .dropdown-menu .sub-menu > .nav-item > .dropdown-item:focus-visible {
  color: var(--bs-primary-25) !important;
  background: transparent !important;
  outline: none;
}

/* DIVIDER after last item in each group
   Figma: data-type="Last" — has a self-stretch h-px bg-emerald-900 below the link
   We use a ::after on the last depth-2 li in each group */
.mobile-nav-drawer .new-mobile-menu .dropdown-menu .sub-menu > .nav-item:last-child::after {
  content: '';
  display: block;
  height: 1px;
  background: var(--bs-primary-600); /* bg-emerald-900 */
  margin: 0.75rem 0 ; 
}

/* No divider after the very last group's last item */
.mobile-nav-drawer .new-mobile-menu .dropdown-menu > .nav-item.dropdown:last-child .sub-menu > .nav-item:last-child::after {
  display: none;
}

/* ----------------------------------------------------------
   CTA BUTTONS
   Figma: gap-5 between menu and buttons
   Login: rounded-2xl outline outline-1 outline-cyan-100, text-cyan-100 IBM Plex Mono uppercase font-medium
   Quote: bg-red-400 rounded-2xl, text-black IBM Plex Mono uppercase font-medium
   ---------------------------------------------------------- */
.mobile-nav-cta {
  display: flex;
  flex-direction: column;
  gap: 0.625rem; /* ~gap-2.5 between buttons */
  padding: 0; /* spacing handled by .mobile-nav-body gap */
}

/* Override theme btn styles for mobile drawer */
.mobile-nav-cta .btn {
  width: 100%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 2.5rem; /* h-10 */
  padding: 0.25rem 1rem !important; /* px-4 py-1 */
  border-radius: 1rem !important; /* rounded-2xl */
  font-family: var(--font-family-mono) !important;
  font-size: var(--font-size-base) !important; /* 16px — matches desktop CTA */
  font-weight: 500 !important; /* font-medium */
  letter-spacing: 0.04em;
  text-transform: uppercase !important;
  line-height: 1.5;
  text-decoration: none !important;
  transition: opacity 0.2s ease;
}

.mobile-nav-cta .btn:hover {
  opacity: 0.85;
}

/* Login button — outline style */
.mobile-nav-cta .btn-primary-light-outline {
  background: transparent !important;
  border: 1px solid var(--bs-primary-50) !important; /* outline-cyan-100 */
  color: var(--bs-primary-50) !important; /* text-cyan-100 */
  box-shadow: none !important;
}

/* Quote button — filled red */
.mobile-nav-cta .btn-secondary {
  background: var(--bs-secondary-400) !important; /* bg-red-400 */
  border: none !important;
  color: #000 !important; /* text-black */
  box-shadow: none !important;
}

/* ----------------------------------------------------------
   BODY SCROLL LOCK
   ---------------------------------------------------------- */
body.mobile-nav-open {
  overflow: hidden;
}

/* ----------------------------------------------------------
   ONLY APPLY BELOW xl (1200px)
   ---------------------------------------------------------- */
@media (min-width: 1200px) {
  .mobile-nav-overlay,
  .mobile-nav-drawer {
    display: none !important;
  }
}