/* ============================================================ */
/* File Path: /assets/css/mobile-menu.css */
/* Purpose: Styles for mobile menu of Grenier's Towing. */
/* Description: Defines mobile navigation system for screens <= 991px with flexbox and responsive design. */
/* Status: FINAL - Fixed submenu hover pop-out effect and border removal, preserved all existing settings. */
/* Console Log: [MobileMenu_Fixed] Corrected submenu hover with prominent pop-out (scale 1.08, translateY -2px), ensured no border, maintained all other settings. */
/* ============================================================ */

/* =============================================== */
/* SECTION 2: MOBILE NAV SYSTEM (<= 991px only)    */
/* =============================================== */

/* Keep desktop nav hidden on mobile; show hamburger */
@media (max-width: 991px) {
  /* Purpose: Hide desktop nav and show hamburger on mobile */
  .header-wrapper .main-nav .main-menu { display: none !important; }
  .header-wrapper .header-bar { display: block !important; }
}

.header-wrapper .header-bar {
  /* Purpose: Define hamburger button styles */
  display: none;
  position: relative !important;
  width: 31px !important;
  height: 20px !important;
  cursor: pointer !important;
  z-index: 10001 !important;
}

.header-wrapper .header-bar span {
  /* Purpose: Style hamburger lines */
  position: absolute !important;
  left: 0 !important;
  width: 100% !important;
  height: 3px !important;
  display: inline-block !important;
  border-radius: 3px !important;
  background: #000000 !important; /* Black, color: #000000 */
  transition: all .3s ease-in-out !important;
}

.header-wrapper .header-bar span:first-of-type { top: 0 !important; }
.header-wrapper .header-bar span:nth-of-type(2) { top: 50% !important; transform: translateY(-50%) !important; }
.header-wrapper .header-bar span:last-of-type { bottom: 0 !important; }
.header-wrapper .header-bar.active span:first-of-type { transform: rotate(45deg) translate(5px, 6px) !important; }
.header-wrapper .header-bar.active span:nth-of-type(2) { opacity: 0 !important; }
.header-wrapper .header-bar.active span:last-of-type { transform: rotate(-45deg) translate(5px, -6px) !important; }

/* ------------------------------ */
/* PANEL LAYOUT – TRANSPARENT SCROLL */
/* ------------------------------ */
@media (max-width: 991px) {
  /* Purpose: Hide sidebar when menu is open */
  body.gt-mobile-menu-open .sidebar__right { display: none !important; }

  #targetElement.side_bar {
    /* Purpose: Allow page scrolling with transparent scrollbar for menu */
    display: none;
    position: absolute !important;
    top: 70px !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: calc(100vh - 70px) !important; /* Limit height to viewport */
    overflow-y: auto !important; /* Enable scrolling */
    scrollbar-width: thin !important; /* Transparent scrollbar */
    scrollbar-color: transparent transparent !important;
    padding: 16px 16px 18px !important;
    background: #2e0c5e !important; /* Theme purple, color: #2e0c5e */
    box-shadow: 0 4px 15px rgba(0, 0, 0, .1) !important;
    z-index: 9999 !important;
    display: flex;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 16px !important;
  }

  #targetElement.side_bar::-webkit-scrollbar {
    /* Purpose: Transparent scrollbar in Webkit browsers */
    width: 6px !important;
    background: transparent !important;
  }

  #targetElement.side_bar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2) !important; /* Subtle transparent thumb */
    border-radius: 3px !important;
  }

  #targetElement.side_bar.active { display: flex !important; }

  /* Purpose: Hide logo and company contact info */
  #targetElement.side_bar .logo,
  #targetElement.side_bar .info {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* Menu (centered, expanded width) */
  #targetElement.side_bar .mobile-main-menu {
    order: 1 !important;
    flex: 0 1 70% !important; /* Expanded from 54% */
    max-width: 720px !important; /* Expanded from 560px */
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Center menu horizontally */
  }

  #targetElement.side_bar .mobile-main-menu > li {
    margin: 10px 0 !important;
    border: 0 !important;
    text-align: center !important; /* Center text */
    width: 100% !important;
  }

  #targetElement.side_bar .mobile-main-menu > li > a {
    /* Purpose: Menu buttons with expanded height and #2e0c5e background */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important; /* Original width */
    padding: 10px 204px !important; /* Expanded from 14px 20px */
    border-radius: 999px !important;
    background: #2e0c5e !important; /* Theme purple, color: #2e0c5e */
    border: 2px solid #facc15 !important; /* Grenier Yellow border, color: #facc15 */
    color: #fff !important; /* White text, color: #fff */
    font-weight: 700 !important;
    font-size: 22px !important; /* Expanded from 20px */
    line-height: 1.2 !important;
    text-decoration: none !important;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .35), 0 0 6px rgba(0, 0, 0, .35) !important;
    box-shadow: 0 6px 14px rgba(253, 253, 253, 0.35) !important;
    transition: transform .2s ease, background-color .25s ease, color .25s ease, box-shadow .25s ease !important;
  }

  #targetElement.side_bar .mobile-main-menu > li > a:hover,
  #targetElement.side_bar .mobile-main-menu > li.active > a {
    /* Purpose: Enhanced hover effect */
    background: #facc15 !important; /* Grenier Yellow, color: #facc15 */
    color: #2e0c5e !important; /* Deep Purple, color: #2e0c5e */
    border-color: transparent !important;
    text-shadow: none !important;
    box-shadow: 0 8px 20px #00000061 !important;
    transform: scale(1.05) !important; /* Slight scale on hover */
  }

  #targetElement.side_bar .mobile-main-menu > li > a > i {
    /* Purpose: Style dropdown arrow */
    color: currentColor !important;
    font-size: 18px !important;
    line-height: 1 !important;
    transition: transform .25s ease !important;
  }

  #targetElement.side_bar .mobile-main-menu > li.active > a > i { transform: rotate(180deg) !important; }

  /* Submenu */
  #targetElement.side_bar .mobile-sub-menu {
    /* Purpose: Submenu with scrolling if needed */
    display: none !important;
    margin-top: 8px !important;
    padding: 8px 0 10px !important;
    background: #1c132d !important; /* Darker purple, color: #1c132d */
    border-radius: 16px !important;
    overflow-y: visible !important; /* Allow submenu to expand */
    max-height: none !important;
  }

  #targetElement.side_bar .mobile-main-menu > li.active > .mobile-sub-menu,
  #targetElement.side_bar .mobile-main-menu > li[aria-expanded="true"] > .mobile-sub-menu {
    display: flex !important;
    flex-direction: column !important;
  }

  #targetElement.side_bar .mobile-sub-menu li { list-style: none !important; }

  #targetElement.side_bar .mobile-sub-menu li > a {
    /* Purpose: Submenu buttons with prominent hover pop-out effect */
    display: block !important;
    width: 100% !important;
    padding: 14px 30px !important;
    background: #2e0c5e !important; /* Theme purple, color: #2e0c5e */
    border: none !important; /* No border for prominent hover */
    color: #fff !important; /* White text, color: #fff */
    font-weight: 600 !important;
    font-size: 18px !important;
    text-decoration: none !important;
    border-radius: 999px !important;
    -webkit-tap-highlight-color: transparent !important; /* Cleaner taps on mobile */
    transition: background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.2s ease, transform 0.2s ease !important;
    will-change: transform !important; /* Performance hint for hover */
  }

  #targetElement.side_bar .mobile-sub-menu li > a:hover,
  #targetElement.side_bar .mobile-sub-menu li > a:active,
  #targetElement.side_bar .mobile-sub-menu li > a:focus-visible {
    /* Purpose: Prominent pop-out hover effect with touch and keyboard support */
    background: #facc15 !important; /* Grenier Yellow, color: #facc15 */
    color: #2e0c5e !important; /* Deep Purple, color: #2e0c5e */
    -webkit-transform: scale(1.08) translateY(-2px) !important; /* Vendor prefix for compatibility */
    transform: scale(1.08) translateY(-2px) !important; /* Pop-out effect */
  }

  #targetElement.side_bar .mobile-sub-menu li > a:focus-visible {
    outline: 2px solid #facc15 !important; /* Yellow outline for accessibility */
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px #2e0c5e !important; /* Dark purple halo */
  }

  /* Social icons */
  #targetElement.side_bar .social__icon {
    order: 2 !important;
    flex: 1 1 100% !important;
    max-width: 100% !important;
    margin-top: 6px !important;
    margin-bottom: 22px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 0 !important;
    list-style: none !important;
  }

  #targetElement.side_bar .social__icon li { list-style: none !important; }

  #targetElement.side_bar .social__icon li a {
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    border: 2px solid #fff !important; /* White border, color: #fff */
    color: #fff !important; /* White icons, color: #fff */
    text-decoration: none !important;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .35) !important;
    transition: background-color .2s ease, color .25s ease, transform .2s ease !important;
  }

  #targetElement.side_bar .social__icon li a:hover {
    background: #facc15 !important; /* Grenier Yellow, color: #facc15 */
    color: #2e0c5e !important; /* Deep Purple, color: #2e0c5e */
    transform: translateY(-1px) !important;
  }

  /* Default text/icon colors */
  #targetElement.side_bar a,
  #targetElement.side_bar p,
  #targetElement.side_bar li,
  #targetElement.side_bar span,
  #targetElement.side_bar i { color: #fff !important; /* White text, color: #fff */ }

  /* Kill theme close button */
  #targetElement.side_bar button#closeButton { display: none !important; }

  /* Purpose: Ensure hamburger is fully visible */
  .header-wrapper,
  .header__two,
  header.site-header {
    position: relative !important;
    min-height: 60px !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    overflow: visible !important;
    z-index: 10000 !important;
  }

  .header-wrapper .header-bar {
    margin-top: 0 !important;
    padding: 10px 0 !important;
  }

  /* Purpose: Extend banner area under header */
  .banner__section,
  .page__banner,
  .hero__section,
  .banner {
    padding-top: 100px !important;
  }

  /* Purpose: Remove search icon */
  .search-wrap { display: none !important; }
}

/* Extra certainty for very small phones */
@media (max-width: 575px) {
  #targetElement.side_bar,
  #targetElement.side_bar.active {
    background: #2e0c5e !important; /* Deep purple, color: #2e0c5e */
    position: absolute !important;
    top: 70px !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: calc(100vh - 70px) !important; /* Limit height to viewport */
    overflow-y: auto !important; /* Enable scrolling */
    scrollbar-width: thin !important; /* Transparent scrollbar */
    scrollbar-color: transparent transparent !important;
    padding: 10px 15px 18px !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
  }

  #targetElement.side_bar::-webkit-scrollbar {
    /* Purpose: Transparent scrollbar in Webkit browsers */
    width: 6px !important;
    background: transparent !important;
  }

  #targetElement.side_bar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2) !important; /* Subtle transparent thumb */
    border-radius: 3px !important;
  }

  #targetElement.side_bar .logo,
  #targetElement.side_bar .info { display: none !important; }

  #targetElement.side_bar .mobile-main-menu {
    order: 1 !important;
    flex: 1 1 100% !important; /* Original width at <= 575px */
    max-width: 100% !important;
    margin: 0 0 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Center menu horizontally */
  }

  #targetElement.side_bar .mobile-main-menu li {
    margin: 8px 0 !important;
    border: 0 !important;
    text-align: center !important;
    width: 100% !important;
  }

  #targetElement.side_bar .mobile-main-menu li > a {
    border-radius: 999px !important;
    background: #2e0c5e !important; /* Theme purple, color: #2e0c5e */
    border: 2px solid #facc15 !important; /* Grenier Yellow border, color: #facc15 */
    color: #fff !important; /* White text, color: #fff */
    font-size: 20px !important; /* Expanded from 18px */
    padding: 16px 22px !important; /* Expanded from 12px 18px */
    width: 100% !important; /* Original width */
  }

  #targetElement.side_bar .mobile-sub-menu {
    background: #1c132d !important; /* Darker purple, color: #1c132d */
    padding: 6px 0 10px !important;
    margin-top: 6px !important;
    border-radius: 16px !important;
    overflow-y: visible !important; /* Allow submenu to expand */
    max-height: none !important;
  }

  #targetElement.side_bar .mobile-sub-menu li > a {
    /* Purpose: Submenu buttons with prominent hover pop-out effect */
    display: block !important;
    width: 100% !important;
    padding: 12px 28px !important;
    background: #2e0c5e !important; /* Theme purple, color: #2e0c5e */
    border: none !important; /* No border for prominent hover */
    color: #fff !important; /* White text, color: #fff */
    font-weight: 600 !important;
    font-size: 17px !important;
    text-decoration: none !important;
    border-radius: 999px !important;
    -webkit-tap-highlight-color: transparent !important; /* Cleaner taps on mobile */
    transition: background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.2s ease, transform 0.2s ease !important;
    will-change: transform !important; /* Performance hint for hover */
  }

  #targetElement.side_bar .mobile-sub-menu li > a:hover,
  #targetElement.side_bar .mobile-sub-menu li > a:active,
  #targetElement.side_bar .mobile-sub-menu li > a:focus-visible {
    /* Purpose: Prominent pop-out hover effect with touch and keyboard support */
    background: #facc15 !important; /* Grenier Yellow, color: #facc15 */
    color: #2e0c5e !important; /* Deep Purple, color: #2e0c5e */
    -webkit-transform: scale(1.08) translateY(-2px) !important; /* Vendor prefix for compatibility */
    transform: scale(1.08) translateY(-2px) !important; /* Pop-out effect */
  }

  #targetElement.side_bar .mobile-sub-menu li > a:focus-visible {
    outline: 2px solid #facc15 !important; /* Yellow outline for accessibility */
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px #2e0c5e !important; /* Dark purple halo */
  }

  #targetElement.side_bar .social__icon {
    order: 2 !important;
    flex: 1 1 100% !important;
    max-width: 100% !important;
    margin-top: 4px !important;
    margin-bottom: 24px !important;
    justify-content: center !important;
  }
}

/* ============================================================
   APPEND-ONLY: .mobile-sub-menu pop-out hover + no border
   File: assets/css/horizontal-mobile-menu.css  (confirm)
   Pages: (confirm which pages to note)
   Scope: <= 991px only
   Notes:
   - Preserves your container + button props exactly
   - Adds keyboard focus ring, touch pressed state
   - Honors [aria-expanded="true"] as an additional reveal trigger
   - Respects prefers-reduced-motion
   ============================================================ */

/* ===================== YOUR ORIGINAL (UNTOUCHED) ===================== */
/* Tablet & mobile */
@media (max-width: 991px) {
  /* Container (keep these EXACT) */
  #targetElement.side_bar .mobile-sub-menu{
    display: none !important;
    margin-top: 8px !important;
    padding: 8px 0 10px !important;
    background: #1c132d !important;    /* deep eggplant */
    border-radius: 16px !important;
    overflow-y: visible !important;
    max-height: none !important;
  }

  /* Submenu buttons – retain sizes, remove border, prep for hover */
  #targetElement.side_bar .mobile-sub-menu li > a{
    display: block !important;
    width: 100% !important;
    padding: 14px 30px !important;   /* as directed */
    font-size: 18px !important;      /* as directed */
    font-weight: 600 !important;
    background: #2e0c5e !important;  /* primary purple */
    color: #fff !important;          /* white #ffffff */
    text-decoration: none !important;
    border: none !important;         /* explicit: no border */
    border-radius: 999px !important; /* pill */
    -webkit-tap-highlight-color: transparent; /* cleaner taps on mobile */
    transition: background-color .25s ease, color .25s ease, -webkit-transform .2s ease, transform .2s ease !important;
    will-change: transform; /* micro-perf hint for hover scale */
  }

  /* Pop-out hover effect */
  #targetElement.side_bar .mobile-sub-menu li > a:hover{
    background: #facc15 !important;   /* yellow #facc15 */
    color: #2e0c5e !important;        /* dark purple #2e0c5e for contrast */
    -webkit-transform: scale(1.08) translateY(-2px) !important;
    transform: scale(1.08) translateY(-2px) !important;
  }

  /* Ensure submenu reveals when parent <li> is toggled active (JS handles .active) */
  #targetElement.side_bar .mobile-main-menu > li.active > .mobile-sub-menu{
    display: flex !important;
    flex-direction: column !important;
  }
}

/* Small phones */
@media (max-width: 575px){
  /* Keep your phone sizes exactly */
  #targetElement.side_bar .mobile-sub-menu li > a{
    padding: 12px 28px !important;  /* as directed */
    font-size: 17px !important;     /* as directed */
  }
}

/* ===================== APPEND-ONLY ENHANCEMENTS ===================== */

/* 1) Keyboard accessibility: visible focus ring (no borders added) */
@media (max-width: 991px){
  #targetElement.side_bar .mobile-sub-menu li > a:focus-visible{
    outline: 2px solid #facc15 !important; /* yellow #facc15 */
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px #2e0c5e !important; /* dark purple halo #2e0c5e */
  }
}

/* 2) Touch pressed state: slightly less pop than hover to avoid jumpiness */
@media (max-width: 991px){
  #targetElement.side_bar .mobile-sub-menu li > a:active{
    transform: scale(1.03) translateY(-1px) !important;
  }
}

/* 3) ARIA-expanded support (does not replace your .active; just an extra hook) */
@media (max-width: 991px){
  #targetElement.side_bar .mobile-main-menu > li[aria-expanded="true"] > .mobile-sub-menu{
    display: flex !important;
    flex-direction: column !important;
  }
}

/* 4) Reduced motion: keep colors, skip motion for users who prefer less animation */
@media (prefers-reduced-motion: reduce){
  @media (max-width: 991px){
    #targetElement.side_bar .mobile-sub-menu li > a{
      transition: background-color 0.01s linear, color 0.01s linear !important;
    }
    #targetElement.side_bar .mobile-sub-menu li > a:hover,
    #targetElement.side_bar .mobile-sub-menu li > a:active{
      transform: none !important;
    }
  }
}

/* =================================================================== */
/* APPEND-ONLY FIX PATCH — OPEN/CLOSE WIRING + HOVER SAFETY (GLOBAL)   */
/* File: /assets/css/mobile-menu.css                                   */
/* Pages: Global (all pages using mobile menu)                          */
/* Purpose:                                                            */
/*  - Force CLOSED by default at <= 991px                              */
/*  - OPEN when body.gt-mobile-menu-open is present (JS)               */
/*  - OPEN when hamburger .header-bar is .active (fallback)            */
/*  - Submenu also opens on :hover for hover-capable devices           */
/*  - Keep submenu buttons borderless + pop-out                        */
/*  - Preserve all existing settings above (append-only)               */
/* =================================================================== */

@media (max-width: 991px){
  /* Closed by default (wins over earlier non-!important display) */
  #targetElement.side_bar{
    display: none !important;
  }

  /* Open when JS toggles class on <body> (primary control) */
  body.gt-mobile-menu-open #targetElement.side_bar{
    display: flex !important;
  }

  /* Fallback: if hamburger gets .active but body class isn't set */
  body:has(.header-wrapper .header-bar.active) #targetElement.side_bar{
    display: flex !important;
  }

  /* Optional data hook if your JS sets it */
  #targetElement.side_bar[data-open="true"]{
    display: flex !important;
  }

  /* iOS smooth scroll for panel + submenu (no visual change) */
  #targetElement.side_bar,
  #targetElement.side_bar .mobile-sub-menu{
    -webkit-overflow-scrolling: touch !important;
  }

  /* Hover-capable devices get hover-to-open for nested submenu (desktop emulation / tablets with cursor) */
  @media (hover:hover){
    #targetElement.side_bar .mobile-main-menu > li:hover > .mobile-sub-menu{
      display: flex !important;
      flex-direction: column !important;
    }
  }

  /* ARIA-expanded rotation (covers both .active and aria-expanded) */
  #targetElement.side_bar .mobile-main-menu > li:has(> a[aria-expanded="true"]) > .mobile-sub-menu{
    display: flex !important;
    flex-direction: column !important;
  }
  #targetElement.side_bar .mobile-main-menu > li:has(> a[aria-expanded="true"]) > a > i{
    transform: rotate(180deg) !important;
  }
}

/* Reduced motion safety for panel transitions (no visual differences unless user opts in) */
@media (prefers-reduced-motion: reduce){
  @media (max-width: 991px){
    #targetElement.side_bar,
    #targetElement.side_bar .mobile-sub-menu{
      scroll-behavior: auto !important;
    }
  }
}