/* Mobile off-canvas menu (80% width) - consolidated & cleaned */
/* Include this AFTER your main header.css */
@media (max-width: 991.98px) {

  /* Safety: hide original collapse menu markup on mobile */
  #mainMenu { display: none !important; }

  /* Prevent background scroll when menu open (toggled by JS) */
  body.mobile-menu-open { overflow: hidden; }

  /* Offcanvas container (right) - 80% width */
  #mobileOffcanvas {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 80vw;            /* 80% width */
    max-width: 520px;
    background: #fff;
    box-shadow: -12px 0 28px rgba(8,17,34,0.14);
    transform: translateX(100%); /* hidden by default */
    transition: transform .34s cubic-bezier(.2,.9,.2,1);
    z-index: 5000;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: block;
    overscroll-behavior: contain;
  }
  body.mobile-menu-open #mobileOffcanvas { transform: translateX(0); }
  /* overlay */
  #mobileMenuOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.36);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease, visibility 0s linear .28s;
    z-index: 4995;
    pointer-events: none;
  }
  body.mobile-menu-open #mobileMenuOverlay {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
    pointer-events: auto;
  }

  /* Offcanvas inner layout */
  #mobileOffcanvas .offcanvas-inner { padding: 20px 16px; min-height: 100%; box-sizing: border-box; }
  #mobileOffcanvas .offcanvas-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
  /* visible close placeholder button (X) in offcanvas header */
  #mobileOffcanvas .close-placeholder {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    color: #111;
    font-size: 18px;
    background: transparent;
    border: none;
  }
  #mobileOffcanvas .close-placeholder:hover,
  #mobileOffcanvas .close-placeholder:focus { background: rgba(0,0,0,0.04); outline: none; }
  #mobileOffcanvas .close-placeholder:focus-visible { box-shadow: 0 0 0 3px rgba(0,123,255,0.12); }

  /* Force nav inside offcanvas to align left and occupy full width */
  #mobileOffcanvas .navbar-nav {
    margin: 0 !important;
    padding-left: 0 !important;
    display: block !important;
    list-style: none;
  }

  /* TOP-LEVEL item: make LI block so its dropdown appears BELOW the anchor */
  #mobileOffcanvas .nav-item {
    display: block !important;
    padding: 12px 6px;
    position: relative;
    background: transparent;
  }

  /* Keep icon + label on one line: make the anchor a flex container */
  #mobileOffcanvas .nav-item > .nav-link {
    display: flex !important;
    align-items: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    text-decoration: none;
    color: inherit;
  }

  /* Divider: only one line between top-level items */
  #mobileOffcanvas .nav-item + .nav-item { border-top: 1px solid #f1f1f1; }
  #mobileOffcanvas .nav-item.open { border-bottom: 0; }

  /* Icon bubble */
  #mobileOffcanvas .nav-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  /* caret on right */
  #mobileOffcanvas .nav-link .arrow { margin-left: auto; transition: transform .18s ease; color: #6c757d; }
  #mobileOffcanvas .nav-item.open > .nav-link .arrow { transform: rotate(90deg); color: var(--brand-red); }

  /* Submenu: force static, full-width, left-aligned inside offcanvas
     (strong overrides to neutralize desktop positioning rules) */
  #mobileOffcanvas .dropdown-menu.mega-menu {
    display: block !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
    margin: 0 0 0 12px !important; /* small indent */
    box-shadow: none !important;
    border-top: 0 !important; /* remove tiny divider under parent */
    text-align: left !important;
    float: none !important;
    max-height: 0;
    overflow: hidden;
    padding: 0;
    transition: max-height .32s ease, padding .22s ease;
    box-sizing: border-box;
    background: transparent;
  }
  #mobileOffcanvas .nav-item.open > .dropdown-menu.mega-menu { overflow: hidden; }

  /* Force submenu columns to stack and not float */
  #mobileOffcanvas .dropdown-menu.mega-menu .row {
    display: block !important;
    margin: 0;
    padding: 0;
  }
  #mobileOffcanvas .dropdown-menu.mega-menu .row > [class*="col-"] {
    float: none !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    margin-left: 12px !important; /* slight indent */
    text-align: left !important;
    padding-left: 8px !important;
  }

  /* Dropdown items full width and left aligned */
  #mobileOffcanvas .dropdown-menu.mega-menu .dropdown-item {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    padding: 6px 0 !important;
    box-sizing: border-box;
  }

  /* Ensure last item spacing */
  #mobileOffcanvas .navbar-nav .nav-item:last-child { padding-bottom: 28px; }

  /* Accessibility: visible focus states for keyboard users */
  #mobileOffcanvas .nav-link:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0,123,255,0.12); border-radius: 6px; }

  /* Small visual / responsive tweaks */
  #mobileOffcanvas .nav-link { font-size: 16px; padding: 6px 0; line-height: 1.2; }
}


/* Ensure toggler visible above offcanvas/overlay and hamburger lines visible */
@media (max-width: 991.98px) {
  /* Make sure the custom toggler is on top of overlay/offcanvas */
  .mobile-toggler,
  .navbar-toggler.mobile-toggler {
    position: relative !important;
    z-index: 6001 !important;        /* higher than overlay (4995) and offcanvas (5000) */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    visibility: visible !important;
    opacity: 1 !important;
    background: transparent !important;
    border: 0 !important;
  }

  /* Make sure hamburger lines are visible and colored */
  .mobile-toggler .hamburger .line {
    background: #111 !important;
  }

  /* When toggler has aria-expanded true (open), keep lines on top */
  .mobile-toggler[aria-expanded="true"] {
    z-index: 6001 !important;
  }
  .mobile-toggler[aria-expanded="true"] .line { background: #111 !important; }

  /* Ensure overlay and offcanvas z-index ordering is consistent */
  #mobileMenuOverlay { z-index: 4995 !important; pointer-events: auto; }
  #mobileOffcanvas { z-index: 5000 !important; }

  /* If overlay or offcanvas had pointer-events grabbing clicks over toggler,
     ensure toggler stays clickable by forcing pointer-events on it */
  .mobile-toggler, .mobile-toggler * { pointer-events: auto !important; }

  /* If Bootstrap's default icon is used anywhere, ensure not hidden accidentally */
  .navbar-toggler .navbar-toggler-icon {
    opacity: 1 !important;
    visibility: visible !important;
    background-image: var(--bs-navbar-toggler-icon-bg, none) !important;
  }
}

/* QUICK FIX: force show mobile toggler and fallback icon */
@media (max-width: 991.98px) {
  .mobile-toggler, .navbar-toggler.mobile-toggler {
    position: relative !important;
    z-index: 7000 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    visibility: visible !important;
    opacity: 1 !important;
    background: transparent !important;
    border: 0 !important;
    width: 48px;
    height: 44px;
    padding: 6px;
  }

  /* Make sure the three lines are visible and sized */
  .mobile-toggler .hamburger { display: inline-block !important; width: 28px; height: 20px; position: relative; }
  .mobile-toggler .hamburger .line {
    display: block !important;
    width: 28px !important;
    height: 2px !important;
    background: #111 !important;
    border-radius: 2px;
    position: absolute !important;
    left: 0 !important;
    transition: transform .25s ease, opacity .2s ease;
  }
  .mobile-toggler .hamburger .line-1 { top: 0 !important; }
  .mobile-toggler .hamburger .line-2 { top: 9px !important; }
  .mobile-toggler .hamburger .line-3 { top: 18px !important; }

  /* Fallback: if for some reason .line elements are not visible, show a Unicode hamburger on the button */
  .mobile-toggler::after {
    content: "☰";
    font-size: 20px;
    color: #111;
    line-height: 1;
    display: inline-block;
    pointer-events: none;
  }
  /* Hide fallback when lines clearly present (prevents double icon). If you want the fallback always, remove this rule */
  .mobile-toggler .hamburger .line { opacity: 1; }
  .mobile-toggler:has(.hamburger .line)::after { opacity: 0; }

  /* Ensure toggler clickable above overlay/offcanvas */
  .mobile-toggler, .mobile-toggler * { pointer-events: auto !important; }
  
  /* Fix: force left-alignment for offcanvas dropdowns & remove extra divider */
@media (max-width: 991.98px) {
  /* Ensure top-level anchor content sits left, not center */
  #mobileOffcanvas .nav-item > .nav-link {
    justify-content: flex-start !important;
    text-align: left !important;
  }
  #mobileOffcanvas .nav-link .nav-icon {
    margin-right: 12px !important;
    margin-left: 0 !important;
  }

  /* Headings and items inside mega menu: left align */
  #mobileOffcanvas .dropdown-menu.mega-menu,
  #mobileOffcanvas .dropdown-menu.mega-menu * {
    text-align: left !important;
  }
  #mobileOffcanvas .mega-heading {
    text-align: left !important;
    margin-bottom: 6px;
  }
  #mobileOffcanvas .dropdown-menu.mega-menu .dropdown-item {
    text-align: left !important;
    display: block !important;
    width: 100% !important;
  }

  /* Remove top-border / tiny divider coming from cloned dropdown container */
  #mobileOffcanvas .dropdown-menu.mega-menu {
    border-top: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    box-shadow: none !important;
  }
}
/* Ensure toggler on top and clickable */
.mobile-toggler, .navbar-toggler.mobile-toggler {
  position: relative !important;
  z-index: 9000 !important; /* higher than overlay/offcanvas */
  pointer-events: auto !important;
  display: inline-flex !important;
}
/* Mobile-only: distinguish mega-heading, parent links and child items in offcanvas */
@media (max-width: 991.98px) {

  /* Heading inside cloned mega menu */
  #mobileOffcanvas .mega-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;            /* slightly larger than items */
    font-weight: 700;           /* bold heading */
    color: #0d6efd;             /* accent color (Bootstrap primary) - change to your brand color */
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 12px 0 8px 0;
    padding: 2px 0 2px 0;
  }
  /* small accent bar to the left of heading */
  #mobileOffcanvas .mega-heading::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 18px;
    background: #0d6efd;        /* same accent color */
    border-radius: 2px;
    margin-left: 0;
  }

  /* Parent top-level nav links */
  #mobileOffcanvas .nav-item > .nav-link {
    font-size: 16px;
    font-weight: 600;           /* a bit less than heading, bolder than child items */
    color: #111;                /* primary text color */
    padding: 12px 0;
  }
  /* Make the caret smaller and lighter */
  #mobileOffcanvas .nav-link .arrow {
    color: #6c757d;
    font-size: 12px;
  }

  /* Child items inside the mega-menu */
  #mobileOffcanvas .dropdown-menu.mega-menu .dropdown-item {
    font-size: 14px;
    font-weight: 400;
    color: #444;                /* muted but clear */
    padding: 6px 0 6px 18px;    /* indent child items to indicate hierarchy */
    display: block;
  }
  /* Slight hover/active state to improve touch feedback */
  #mobileOffcanvas .dropdown-menu.mega-menu .dropdown-item:hover,
  #mobileOffcanvas .dropdown-menu.mega-menu .dropdown-item:active {
    background: rgba(13,110,253,0.06); /* subtle blue tint */
    color: #0d6efd;
    border-radius: 6px;
  }

  /* Add a tiny separator above each mega menu group for clarity */
  #mobileOffcanvas .dropdown-menu.mega-menu .row + .row,
  #mobileOffcanvas .mega-heading + .row {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid rgba(0,0,0,0.04);
  }

  /* Ensure headings are focusable/readable for keyboard users (optional) */
  #mobileOffcanvas .mega-heading[tabindex] { outline: none; }
}