/* Project File Path: /src/assets/css/responsive.css */

/* ================================================================== */
/* 🚀 GRENIER TOWING - ENHANCED RESPONSIVE.CSS                       */
/* PURPOSE: Defines responsive layout for header, logo, hamburger menu, and mobile menu */
/*          Mobile-first design for viewports 200px to 2048px+ (2015–2025) */
/*          Production-ready, patched for mobile menu and fluid logo  */
/* ================================================================== */

/* ============================================================ */
/* 🚀 SECTION: CSS Reset & Base Responsive Foundation          */
/* PURPOSE: Resets default styles and ensures responsive media  */
/* ============================================================ */
* {
  margin: 0; /* Remove default margins */
  padding: 0; /* Remove default padding */
  box-sizing: border-box; /* Ensure consistent box model */
}

/* Responsive images and media */
img, video, iframe {
  max-width: 100%; /* Ensure media scales within container */
  height: auto; /* Maintain aspect ratio */
}

/* Prevent horizontal scroll */
html, body {
  overflow-x: hidden; /* Avoid horizontal overflow */
}

/* ============================================================ */
/* 🚀 SECTION: Critical Fix - Mobile-First Sidebar Control     */
/* PURPOSE: Hides sidebar by default across all mobile ranges  */
/* ============================================================ */
.side_bar, #gt-mobile-sidebar {
  display: none !important; /* 🎨 Color: N/A - Hidden by default for mobile-first */
}

/* ============================================================ */
/* 🚀 SECTION: Original Failed Fix Attempt (Preserved)         */
/* PURPOSE: Legacy logo sizing, overridden by surgical fix     */
/* ============================================================ */
@media (max-width: 991px) {
  /* Targets logo inside header (overridden later) */
  .header__one .logo a img,
  .header-section .logo a img {
    max-width: clamp(90px, 25vw, 200px) !important; /* Legacy sizing */
    height: auto !important; /* Maintain aspect ratio */
  }

  /* Ensure mobile toggle button visibility */
  .mobile-menu-toggle, .header-bar {
    display: block !important; /* Force visibility */
    flex-shrink: 0 !important; /* Prevent shrinking */
  }
}

/* ============================================================ */
/* 🚀 SECTION: Condensed Mobile Styles (991px and below)       */
/* PURPOSE: Adjusts spacing, typography, and layout for mobile */
/* ============================================================ */
@media (max-width: 991px) {
  /* ---------- Utility spacing ---------- */
  .pb-60   { padding-bottom: 50px !important; } /* Reduced padding */
  .pt-40   { padding-top: 30px !important; } /* Reduced padding */
  .pb-40   { padding-bottom: 30px !important; } /* Reduced padding */
  .pb-30   { padding-bottom: 20px !important; } /* Reduced padding */
  .pt-30   { padding-top: 20px !important; } /* Reduced padding */
  .pb-24   { padding-bottom: 15px !important; } /* Reduced padding */
  .pt-24   { padding-top: 15px !important; } /* Reduced padding */
  .pb-20   { padding-bottom: 15px !important; } /* Reduced padding */
  .pt-20   { padding-top: 15px !important; } /* Reduced padding */
  .pb-16   { padding-bottom: 10px !important; } /* Reduced padding */
  .pt-16   { padding-top: 10px !important; } /* Reduced padding */
  .pb-15   { margin-bottom: 10px !important; } /* Reduced margin */
  .pt-15   { margin-top: 10px !important; } /* Reduced margin */

  .mt-120  { margin-top: 80px !important; } /* Reduced margin */
  .mb-120  { margin-bottom: 80px !important; } /* Reduced margin */
  .mt-100  { margin-top: 80px !important; } /* Reduced margin */
  .mb-100  { margin-bottom: 80px !important; } /* Reduced margin */
  .mt-80   { margin-top: 60px !important; } /* Reduced margin */
  .mb-80   { margin-bottom: 60px !important; } /* Reduced margin */
  .mt-60   { margin-top: 50px !important; } /* Reduced margin */
  .mb-60   { margin-bottom: 50px !important; } /* Reduced margin */
  .mt-50   { margin-top: 40px !important; } /* Reduced margin */
  .mb-50   { margin-bottom: 40px !important; } /* Reduced margin */
  .mt-40   { margin-top: 30px !important; } /* Reduced margin */
  .mb-40   { margin-bottom: 30px !important; } /* Reduced margin */
  .mt-30   { margin-top: 20px !important; } /* Reduced margin */
  .mb-30   { margin-bottom: 20px !important; } /* Reduced margin */
  .mt-24   { margin-top: 15px !important; } /* Reduced margin */
  .mb-24   { margin-bottom: 15px !important; } /* Reduced margin */

  /* ---------- Padding helper ---------- */
  .p-24    { padding: 20px !important; } /* Consistent padding */

  /* ---------- Typography helpers ---------- */
  .fz-16   { font-size: 14px !important; } /* Smaller font */
  .fz-18   { font-size: 16px !important; } /* Smaller font */
  .fz-20   { font-size: 18px !important; } /* Smaller font */
  .fz-24   { font-size: 20px !important; } /* Smaller font */
  .fz-26   { font-size: 22px !important; } /* Smaller font */
  .fz-30   { font-size: 26px !important; } /* Smaller font */
  .fz-32   { font-size: 28px !important; } /* Smaller font */

  /* ---------- Section paddings ---------- */
  .pt-130, .pb-130,
  .pt-120, .pb-120,
  .pt-110, .pb-110,
  .pt-90,  .pb-90  { padding-top: 80px !important; padding-bottom: 80px !important; } /* Reduced section padding */
  .pt-80   { padding-top: 60px !important; } /* Reduced padding */
  .pb-80   { padding-bottom: 60px !important; } /* Reduced padding */
  .pt-60   { padding-top: 50px !important; } /* Reduced padding */
  .pb-60   { padding-bottom: 50px !important; } /* Reduced padding */

  /* ---------- Layout tweaks ---------- */
  .feature__section  { margin-top: 0 !important; } /* Remove top margin */
  .search-wrap .search-field-holder { width: 80% !important; } /* Adjust search width */
  .search-wrap .main-search-input   { font-size: 18px !important; } /* Smaller search input font */
  .p-24                            { padding: 20px !important; } /* Consistent padding */

  /* ---------- Form font size ---------- */
  .contact__us__section .contact__right .form__clt input,
  .contact__us__section .contact__right .form__clt__big textarea {
    font-size: 14px !important; /* Smaller form font */
  }
}

/* ============================================================ */
/* 🚀 SECTION: Specific Device Viewport Targeting (2015-2025)  */
/* PURPOSE: Fine-tunes layout for specific mobile viewports     */
/* ============================================================ */
@media only screen and (min-width: 320px) and (max-width: 359px) {
  .container { padding: 0 10px !important; } /* Tight padding */
  .fz-16 { font-size: 12px !important; } /* Smaller font */
  .fz-18 { font-size: 14px !important; } /* Smaller font */
  .search-wrap .main-search-input { font-size: 16px !important; } /* Smaller search input */
  .pt-130, .pb-130 { padding-top: 40px !important; padding-bottom: 40px !important; } /* Reduced padding */
  .mt-80, .mb-80 { margin-top: 30px !important; margin-bottom: 30px !important; } /* Reduced margin */
}

@media only screen and (min-width: 360px) and (max-width: 374px) {
  .container { padding: 0 15px !important; } /* Slightly wider padding */
  .search-wrap .search-field-holder { width: 85% !important; } /* Adjust search width */
}

@media only screen and (min-width: 375px) and (max-width: 413px) {
  .container { padding: 0 20px !important; } /* Wider padding */
  .search-wrap .main-search-input { font-size: 20px !important; } /* Larger search input */
}

@media only screen and (min-width: 414px) and (max-width: 430px) {
  .container { padding: 0 25px !important; } /* Wider padding */
  .fz-24 { font-size: 22px !important; } /* Adjust font size */
  .fz-30 { font-size: 28px !important; } /* Adjust font size */
}

@media only screen and (min-width: 744px) and (max-width: 1023px) {
  .container { max-width: 90% !important; margin: 0 auto !important; } /* Centered container */
  .search-wrap .search-field-holder { width: 60% !important; } /* Adjust search width */
  .fz-30 { font-size: 32px !important; } /* Larger font */
  .pt-130, .pb-130 { padding-top: 100px !important; padding-bottom: 100px !important; } /* Increased padding */
}

/* ============================================================ */
/* 🚀 SECTION: Enhanced Mobile Menu (1199px to 200px)          */
/* PURPOSE: Ensures mobile menu appears when toggled, sidebar hidden */
/* ============================================================ */
@media only screen and (max-width: 1199px) {
  /* Define global variables for logo sizing */
  :root {
    --logo-min-size: 50px; /* Minimum logo width */
    --logo-preferred-size: 20vw; /* Preferred scaling */
    --logo-max-size: 100px; /* Maximum logo width */
  }

  /* Step 1: Force header container to use Flexbox */
  html body div.header-wrapper {
    display: flex !important; /* Flexbox layout for header */
    flex-wrap: nowrap !important; /* Prevent wrapping */
    justify-content: space-between !important; /* Space logo and menu */
    align-items: center !important; /* Vertically align */
    width: 100% !important; /* Full width */
    max-width: 100vw !important; /* Prevent overflow */
    padding: 0 10px !important; /* Minimal padding */
    margin: 0 !important; /* Remove margins */
    box-sizing: border-box !important; /* Handle padding/margins */
  }

  /* Step 2: Logo container flexibility */
  html body .header-section .main__logo .logo__menuadjust,
  html body .main__logo .logo__menuadjust,
  html body .logo__menuadjust {
    flex: 1 1 auto !important; /* Allow shrinking */
    min-width: 0 !important; /* Enable shrinking */
    max-width: 60% !important; /* Cap logo container */
    overflow: hidden !important; /* Prevent overflow */
  }

  /* Step 3: Hamburger menu container (original, 1199px to 991px) */
  html body .header-section .menu__components,
  html body .menu__components {
    flex: 0 0 auto !important; /* Prevent shrinking */
    min-width: fit-content !important; /* Fit content */
    display: block !important; /* Ensure visibility */
    visibility: visible !important; /* Force visibility */
  }

  /* Step 4: Fluid logo with adjustable sizes */
  html body .header-section .main__logo .logo img,
  html body .main__logo .logo img,
  html body .logo img,
  html body img[src*="logo"] {
    max-width: clamp(var(--logo-min-size), var(--logo-preferred-size), var(--logo-max-size)) !important; /* Responsive logo sizing */
    width: 100% !important; /* Full responsiveness */
    height: auto !important; /* Maintain aspect ratio */
    object-fit: contain !important; /* Prevent distortion */
    display: block !important; /* Remove inline spacing */
  }

  /* Step 5: Hide Bootstrap hamburger menu (1199px to 991px) */
  html body #mobileHeaderHamburger,
  html body .header-bar {
    display: none !important; /* Hide Bootstrap hamburger */
    visibility: hidden !important; /* Ensure not visible */
  }







  /* Step 6: Hide sidebar completely */
  body .side_bar, body #gt-mobile-sidebar,
  body .side_bar.active, body #gt-mobile-sidebar.active {
    display: none !important; /* 🎨 Color: N/A - Sidebar hidden entirely */
  }







  
  /* Step 7: Mobile menu items when toggled */
  body .mobile-main-menu.active, body #gt-mobile-sidebar.active ul.mobile-main-menu {
    display: flex !important; /* Flexbox for mobile menu */
    width: 100vw !important; /* Full viewport width */
    right: 0 !important; /* Align to right */
    left: 0 !important; /* Full width */
    padding: 20px 15px !important; /* Comfortable padding */
    background: var(--theme, #2e0c5e) !important; /* 🎨 Color: #2e0c5e (Theme Purple) */
    color: var(--white, #ffffff) !important; /* 🎨 Color: #ffffff (White) */
    overflow-y: auto !important; /* Scrollable content */
    z-index: 9999 !important; /* Above all elements */
    flex-direction: column !important; /* Vertical layout */
    position: fixed !important; /* Fixed overlay */
    top: 0 !important; /* Full height */
    height: 100vh !important; /* Full viewport height */
  }

  /* Mobile menu items styling */
  body .mobile-main-menu.active li a,
  body #gt-mobile-sidebar.active ul.mobile-main-menu li a {
    display: flex !important; /* Flexbox for alignment */
    align-items: center !important; /* Center vertically */
    padding: 12px 20px !important; /* Comfortable padding */
    margin: 5px 0 !important; /* Spacing */
    border-radius: 25px !important; /* Pill shape */
    background: transparent !important; /* No background */
    color: var(--white, #ffffff) !important; /* 🎨 Color: #ffffff (White) */
    transition: all 0.3s ease !important; /* Smooth hover */
    text-decoration: none !important; /* No underline */
  }

  /* Hover/focus/active states for menu items */
  body .mobile-main-menu.active li a:hover,
  body .mobile-main-menu.active li a:focus,
  body .mobile-main-menu.active li a:active,
  body #gt-mobile-sidebar.active ul.mobile-main-menu li a:hover,
  body #gt-mobile-sidebar.active ul.mobile-main-menu li a:focus,
  body #gt-mobile-sidebar.active ul.mobile-main-menu li a:active {
    background: linear-gradient(90deg, #FFD700, #2e0c5e) !important; /* 🎨 Color: #FFD700 (Gold) to #2e0c5e (Theme Purple) Gradient */
    color: var(--white, #ffffff) !important; /* 🎨 Color: #ffffff (White) */
    transform: translateX(5px) !important; /* Slight shift on hover */
  }
}

/* ============================================================ */
/* 🚀 SECTION: Hamburger Menu Toggle Fix (991px and below)     */
/* PURPOSE: Ensures Bootstrap hamburger triggers mobile menu   */
/* ============================================================ */
@media only screen and (max-width: 991px) {
  /* Show Bootstrap hamburger menu */
  html body #mobileHeaderHamburger,
  html body .header-bar {
    display: block !important; /* Show hamburger icon */
    visibility: visible !important; /* Ensure visible */
    flex: 0 0 auto !important; /* Prevent shrinking */
    min-width: fit-content !important; /* Fit content */
  }

  /* Hide original hamburger menu */
  html body .menu__components {
    display: none !important; /* Hide original menu */
    visibility: hidden !important; /* Ensure not visible */
  }
}

/* ============================================================ */
/* 🚀 SECTION: Mobile Menu Toggle Fix (375px to 200px)         */
/* PURPOSE: Ensures mobile menu appears, sidebar remains hidden */
/* ============================================================ */
@media only screen and (min-width: 200px) and (max-width: 375px) {
  /* Hide sidebar completely */
  body .side_bar, body #gt-mobile-sidebar,
  body .side_bar.active, body #gt-mobile-sidebar.active {
  }

  /* Show Bootstrap hamburger menu */
  html body #mobileHeaderHamburger,
  html body .header-bar {
    display: block !important; /* Show hamburger icon */
    visibility: visible !important; /* Ensure visible */
    flex: 0 0 auto !important; /* Prevent shrinking */
    min-width: fit-content !important; /* Fit content */
  }

  /* Hide original hamburger menu */
  html body .menu__components {
    display: none !important; /* Hide original menu */
    visibility: hidden !important; /* Ensure not visible */
  }

  /* Mobile menu items when toggled */
  body .mobile-main-menu.active, body #gt-mobile-sidebar.active ul.mobile-main-menu {
    display: flex !important; /* Flexbox for mobile menu */
    width: 100vw !important; /* Full viewport width */
    right: 0 !important; /* Align to right */
    left: 0 !important; /* Full width */
    padding: 20px 15px !important; /* Tighter padding for small screens */
    background: var(--theme, #2e0c5e) !important; /* 🎨 Color: #2e0c5e (Theme Purple) */
    color: var(--white, #ffffff) !important; /* 🎨 Color: #ffffff (White) */
    overflow-y: auto !important; /* Scrollable content */
    z-index: 9999 !important; /* Above all elements */
    flex-direction: column !important; /* Vertical layout */
    position: fixed !important; /* Fixed overlay */
    top: 0 !important; /* Full height */
    height: 100vh !important; /* Full viewport height */
  }

  /* Mobile menu items styling */
  body .mobile-main-menu.active li a,
  body #gt-mobile-sidebar.active ul.mobile-main-menu li a {
    display: flex !important; /* Flexbox for alignment */
    align-items: center !important; /* Center vertically */
    padding: 10px 15px !important; /* Tighter padding */
    margin: 5px 0 !important; /* Spacing */
    border-radius: 25px !important; /* Pill shape */
    background: transparent !important; /* No background */
    color: var(--white, #ffffff) !important; /* 🎨 Color: #ffffff (White) */
    transition: all 0.3s ease !important; /* Smooth hover */
    text-decoration: none !important; /* No underline */
  }

  /* Hover/focus/active states */
  body .mobile-main-menu.active li a:hover,
  body .mobile-main-menu.active li a:focus,
  body .mobile-main-menu.active li a:active,
  body #gt-mobile-sidebar.active ul.mobile-main-menu li a:hover,
  body #gt-mobile-sidebar.active ul.mobile-main-menu li a:focus,
  body #gt-mobile-sidebar.active ul.mobile-main-menu li a:active {
    background: linear-gradient(90deg, #FFD700, #2e0c5e) !important; /* 🎨 Color: #FFD700 (Gold) to #2e0c5e (Theme Purple) Gradient */
    color: var(--white, #ffffff) !important; /* 🎨 Color: #ffffff (White) */
    transform: translateX(5px) !important; /* Slight shift */
  }
}

/* ============================================================ */
/* 🚀 SECTION: Desktop Sidebar (≥ 1200px)                      */
/* PURPOSE: Displays fixed right-hand sidebar for desktop      */
/* ============================================================ */
@media (min-width: 1200px) {
  .side_bar, #gt-mobile-sidebar {
    display: flex !important; /* Flexbox for sidebar */
    position: fixed !important; /* Fixed position */
    right: 0 !important; /* Align to right */
    top: 0 !important; /* Full height */
    height: 100vh !important; /* Full viewport height */
    width: 350px !important; /* Fixed width per directive */
    transform: translateX(0) !important; /* No transform */
    overflow-y: auto !important; /* Scrollable content */
    box-shadow: -4px 0 10px rgba(0,0,0,0.12) !important; /* 🎨 Color: rgba(0,0,0,0.12) (Shadow) */
    z-index: 1030 !important; /* Above other elements */
    background: var(--theme, #2e0c5e) !important; /* 🎨 Color: #2e0c5e (Theme Purple) */
    color: var(--white, #ffffff) !important; /* 🎨 Color: #ffffff (White) */
    flex-direction: column !important; /* Vertical layout */
    padding: 30px 25px !important; /* Comfortable padding */
  }

  #page-wrapper {
    margin-right: 350px !important; /* Shift content left */
  }

  .mobile-menu-toggle,
  .sidebar-overlay {
    display: none !important; /* Hide mobile toggles */
  }

  .side_bar ul.mobile-main-menu li a,
  #gt-mobile-sidebar ul.mobile-main-menu li a {
    display: flex !important; /* Flexbox for alignment */
    align-items: center !important; /* Center vertically */
    padding: 15px 25px !important; /* Comfortable padding */
    margin: 8px 0 !important; /* Spacing */
    border-radius: 25px !important; /* Pill shape */
    background: transparent !important; /* No background */
    color: var(--white, #ffffff) !important; /* 🎨 Color: #ffffff (White) */
    transition: all 0.3s ease !important; /* Smooth hover */
    text-decoration: none !important; /* No underline */
  }

  .side_bar ul.mobile-main-menu li a:hover,
  .side_bar ul.mobile-main-menu li a:focus,
  .side_bar ul.mobile-main-menu li a:active,
  #gt-mobile-sidebar ul.mobile-main-menu li a:hover,
  #gt-mobile-sidebar ul.mobile-main-menu li a:focus,
  #gt-mobile-sidebar ul.mobile-main-menu li a:active {
    background: linear-gradient(90deg, #FFD700, #2e0c5e) !important; /* 🎨 Color: #FFD700 (Gold) to #2e0c5e (Theme Purple) Gradient */
    color: var(--white, #ffffff) !important; /* 🎨 Color: #ffffff (White) */
    transform: translateX(5px) !important; /* Slight shift on hover */
  }

  .side_bar .logo img, #gt-mobile-sidebar .logo img {
    max-width: 200px !important; /* Fixed logo size */
    height: auto !important; /* Maintain aspect ratio */
  }
}

/* ============================================================ */
/* 🚀 SECTION: Remaining Styles (Preserved)                    */
/* PURPOSE: Handles landscape, high-DPI, accessibility, print  */
/* ============================================================ */
@media screen and (orientation: landscape) and (max-height: 500px) {
  body .mobile-main-menu.active, body #gt-mobile-sidebar.active ul.mobile-main-menu {
    padding: 15px 20px !important; /* Tighter padding */
  }
  body .mobile-main-menu.active li a,
  body #gt-mobile-sidebar.active ul.mobile-main-menu li a {
    padding: 8px 15px !important; /* Tighter padding */
    margin: 3px 0 !important; /* Tighter spacing */
  }
  .search-wrap .main-search-input {
    height: 40px !important; /* Smaller input */
    font-size: 16px !important; /* Smaller font */
  }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  body .side_bar, body #gt-mobile-sidebar {
    box-shadow: -2px 0 8px rgba(0,0,0,0.15) !important; /* 🎨 Color: rgba(0,0,0,0.15) (Shadow) */
    -webkit-font-smoothing: antialiased !important; /* Smoother fonts */
    -moz-osx-font-smoothing: grayscale !important; /* Smoother fonts */
  }
}

@media (max-width: 991px) {
  body .mobile-main-menu.active li a:focus,
  body #gt-mobile-sidebar.active ul.mobile-main-menu li a:focus {
    outline: 2px solid #FFD700 !important; /* 🎨 Color: #FFD700 (Gold) */
    outline-offset: 2px !important; /* Accessibility outline */
  }
  body .mobile-main-menu.active li a,
  body #gt-mobile-sidebar.active ul.mobile-main-menu li a {
    min-height: 44px !important; /* Accessibility touch target */
    min-width: 44px !important; /* Accessibility touch target */
  }
  @media (prefers-reduced-motion: reduce) {
    body .mobile-main-menu.active li a,
    body #gt-mobile-sidebar.active ul.mobile-main-menu li a {
      transition: none !important; /* Disable transitions */
    }
    body .mobile-main-menu.active li a:hover,
    body #gt-mobile-sidebar.active ul.mobile-main-menu li a:hover {
      transform: none !important; /* Disable transform */
    }
  }
}

@media print {
  .side_bar, #gt-mobile-sidebar,
  .mobile-menu-toggle, .sidebar-overlay {
    display: none !important; /* Hide for print */
  }
  #page-wrapper {
    margin-right: 0 !important; /* Reset margin */
  }
}















/* 992–1199px: strip even more right-side space so the menu sits hard against the hamburger */
@media (min-width: 992px) and (max-width: 1199px) {
  .header-section .container{
    max-width:100% !important;
    padding-right:0 !important;
    --bs-gutter-x:0 !important;
  }
  .header-wrapper{display:flex;align-items:center;gap:0 !important;padding-right:0 !important;}

  .menu__components{
    flex:0 0 auto !important;
    margin-left:0 !important;
    position:relative !important;
    z-index:2 !important;
  }

  .logo__menuadjust{
    flex:1 1 auto !important;min-width:0 !important;
    display:grid !important;grid-template-columns:1fr auto 1fr !important;align-items:center !important;
  }
  .logo__menuadjust .main-nav{grid-column:1 / 4 !important;}

  .logo__menuadjust .main-menu{
    position:relative !important;z-index:1 !important;
    display:flex !important;flex-wrap:nowrap !important;white-space:nowrap !important;
    gap:4px !important;
    padding-right:0 !important;         /* no right padding */
    margin-right:-144px !important;      /* pull 2× closer than before */
    padding-left:44px !important;        /* small buffer from center logo */
  }

  .logo__menuadjust .main-menu > li:nth-child(4){margin-left:auto !important;} /* push right group past logo */

  /* remove any trailing spacing on the last item */
  .logo__menuadjust .main-menu > li,
  .logo__menuadjust .main-menu > li > a{margin-right:0 !important;}
  .logo__menuadjust .main-menu > li:last-child > a{padding-right:0 !important;}

  /* optional: free a few more pixels */
  .straddle-logo img{width:92px !important;height:auto !important;}
}







/* ====================================================================== */
/* ✅ GRENIER TOWING — REPLACEMENT OVERRIDE (v2025-08-09)                 */
/* PURPOSE:                                                               */
/*  1) Restore sidebar submenu compatibility (no display/visibility hacks)*/
/*  2) Implement precise 1400→1200→992 "straddle → inside" logo behavior  */
/*  3) Tighten nav clusters as width shrinks (desktop down to 992px)      */
/*  NOTE: All properties use !important to win specificity wars.          */
/*  MANDATES: Flexbox where applicable; DO NOT touch JS; DO NOT touch     */
/*           parent header sizing; DO NOT set display/visibility on .side_bar */
/* ====================================================================== */

/* ------------------------------- */
/* 1) Sidebar mechanics (safe)     */
/*    - Keep parent's display state untouched to preserve submenu anims   */
/*    - Assume original JS toggles `.active`                              */
/* ------------------------------- */
.side_bar {
  /* hint smooth slide without affecting child max-height transitions */
  transition: right 0.35s ease, transform 0.35s ease !important;
  will-change: right, transform !important;
  contain: layout paint style !important; /* isolation to avoid repaint spill */
}

.side_bar.active {
  /* The original CSS should already set right/transform; this line ensures
     activation remains slide-based, not display-based. */
  transition: right 0.35s ease, transform 0.35s ease !important;
}

/* Ensure child submenus can animate height unobstructed */
.side_bar .mobile-sub-menu,
.side_bar .mobile-sub-menutwo {
  overflow: hidden !important; /* allow max-height transitions from JS */
}