/* ==================================================
   TRUEVENTS MEGA MENU - WITH INTEGRATED CONTACT BAR
   ==================================================
   
   FEATURES:
   1. Top contact bar that hides on scroll
   2. Mega menu CLOSED by default
   3. Opens on HOVER (desktop) and CLICK (mobile)
   4. Wide, centered, FIXED position dropdown background
   5. All menu items share ONE dropdown panel
   6. Categories displayed HORIZONTALLY inside mega menu
   7. No position/width changes between menu items
   
   ================================================== */

/* ==================================================
   0. TOP CONTACT BAR STYLES (NEW)
   ================================================== */

.top-contact-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10001;
  background: #f1ae22;
  font-family: 'Fugaz One', Arial, sans-serif;
  font-size: 13px;
  color: #1a1a1a;
 /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);*/
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
  height: 42px;
  display: flex;
  align-items: center;
}

/* Contact bar always stays visible - no .hidden class needed */

.top-contact-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Contact Info (Left Side) */
.contact-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.contact-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #1a1a1a;
  font-weight: 600;
  transition: all 0.3s ease;
  padding: 6px 12px;
  border-radius: 6px;
}

.contact-link:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.contact-link i {
  font-size: 14px;
}

.contact-divider {
  color: rgba(26, 26, 26, 0.4);
  font-weight: 300;
}

/* Social Links (Right Side) */
.social-links {
  display: flex;
  align-items: center;
  gap: 8px;
}

.social-link {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1a1a1a;
  font-size: 16px;
  text-decoration: none;
  border-radius: 50%;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
}

.social-link:hover {
  color: #ffffff;
  background: rgba(26, 26, 26, 0.3);
  transform: scale(1.15) rotate(5deg);
}

/* Mobile Responsive for Contact Bar */
@media only screen and (max-width: 768px) {
  .top-contact-bar {
    font-size: 11px;
    height: 44px;
    padding: 0 8px;
  }

  .top-contact-container {
    padding: 0 12px;
    gap: 12px;
  }

  .contact-info {
    gap: 8px;
    flex: 1;
  }

  .contact-link {
    padding: 6px 10px;
    gap: 6px;
    min-width: 36px;
    justify-content: center;
  }

  .contact-link span {
    display: none;
  }

  .contact-link i {
    font-size: 16px;
  }

  .contact-divider {
    display: none;
  }

  .social-links {
    gap: 6px;
  }

  .social-link {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }
}

@media only screen and (max-width: 480px) {
  .top-contact-bar {
    height: 40px;
  }

  .top-contact-container {
    padding: 0 10px;
  }

  .contact-link {
    padding: 4px 8px;
    min-width: 32px;
  }

  .contact-link i {
    font-size: 14px;
  }

  .social-link {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
}

/* ==================================================
   1. CSS VARIABLES & GLOBAL RESETS
   ================================================== */

/* Global list resets */
ul, ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Global overflow prevention */
html, body {
  overflow-x: hidden !important;
}

/* ==================================================
   2. HEADER BASE (NO MEDIA QUERIES)
   ================================================== */

/* 2.1 - Base Navigation Styles */
#cs-navigation {
  box-sizing: border-box;
  position: fixed;
  z-index: 10000;
  transition: top 0.3s, border-radius 0.3s, width 0.3s, max-width 0.3s;
}

#cs-navigation .cs-container {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

/* 2.2 - Logo Base Styles */
#cs-navigation .cs-logo {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 26px;
  z-index: 2;
  margin: 0 auto 0 0;
}

#cs-navigation .cs-logo img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* 2.3 - Navigation Links Base */
#cs-navigation .cs-li {
  list-style: none;
}

#cs-navigation .cs-li-link {
  text-decoration: none;
  display: block;
  transition: color 0.3s;
}

/* 2.4 - Dropdown Base */
.cs-dropdown {
  position: relative;
}

/* ==================================================
   3. MOBILE NAVIGATION (≤1023px)
   ================================================== */

/* Mobile - 1023px */
@media only screen and (max-width: 63.9375rem) {
  
  /* 3.1 - Body & Scroll States */
  body.cs-open {
    overflow: hidden;
  }
  
  /* Mobile: Keep contact bar, header stays below it */
  body.scroll #cs-navigation {
    width: 100%;
    max-width: 100%;
    top: 44px; /* Contact bar height on mobile */
    border-radius: 0;
  }
  
  body.scroll #cs-navigation:before {
    border-radius: 0;
  }
  
  body.scroll #cs-navigation .cs-ul-wrapper {
    /* Don't change position when menu is active */
  }
  
  /* Override scroll state when menu is open */
  body.cs-open.scroll #cs-navigation .cs-ul-wrapper {
    top: 0;
  }
  
  /* 3.2 - Mobile Header Container */
  #cs-navigation {
    width: 94%;
    max-width: 80rem;
    padding: clamp(0.75rem, 2vw, 1.5rem);
    border-radius: clamp(0.75rem, 2vw, 1.5rem);
    top: calc(2rem + 44px); /* Added mobile contact bar height */
    left: 50%;
    transform: translateX(-50%);
    overflow: visible !important;
  }
  
  /* Smaller mobile devices */
  @media only screen and (max-width: 480px) {
    #cs-navigation {
      top: calc(0.5rem + 30px);
      width: 96%;
      padding: 0.75rem;
    }
  }
  
  #cs-navigation:before {
    content: "";
    width: 100%;
    height: 100%;
    background: var(--color-brand-primary);
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    opacity: 1;
    border-bottom-right-radius: clamp(0.75rem, 2vw, 1.5rem);
    border-bottom-left-radius: clamp(0.75rem, 2vw, 1.5rem);
    display: block;
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    transition: transform 0.2s, border-radius 0.3s ease-in-out;
  }
  
  #cs-navigation.cs-active:before {
    transform: translateX(-50%) scale(1.03);
  }
  
  #cs-navigation.cs-active .cs-toggle {
    transform: rotate(180deg);
  }
  
  #cs-navigation.cs-active .cs-ul-wrapper {
    transform: scaleY(1) !important;
    transition-delay: 0.15s;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  #cs-navigation.cs-active .cs-li {
    opacity: 1;
    transform: translateY(0);
  }
  
  #cs-navigation .cs-container {
    justify-content: flex-end;
    gap: 1.5rem;
    overflow: visible !important;
  }
  
  /* 3.3 - Mobile Logo */
  #cs-navigation .cs-logo {
    width: auto;
    max-width: 12.5rem;
    height: 100%;
    padding: 0;
    justify-content: flex-start;
    z-index: 10;
  }
  
  #cs-navigation .cs-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  
  /* 3.4 - Mobile Hamburger Toggle */
  #cs-navigation .cs-toggle {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 0 0 auto;
    background-color: var(--color-brand-secondary);
    border: none;
    border-radius: 0.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 10;
    transition: transform 0.6s;
  }
  
  #cs-navigation .cs-nav {
    order: 3;
  }
  
  #cs-navigation .cs-box {
    width: clamp(1.5rem, 2vw, 1.75rem);
    height: 1rem;
    position: relative;
  }
  
  #cs-navigation .cs-line {
    width: 100%;
    height: 2px;
    background-color: var(--color-brand-primary);
    border-radius: 2px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  
  #cs-navigation .cs-line1 {
    top: 0;
    transition: transform 0.5s, top 0.3s, left 0.3s;
    animation-duration: 0.7s;
    animation-timing-function: ease;
    animation-direction: normal;
    animation-fill-mode: forwards;
    transform-origin: center;
  }
  
  #cs-navigation .cs-line2 {
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    transition: top 0.3s, left 0.3s, transform 0.5s;
    animation-duration: 0.7s;
    animation-timing-function: ease;
    animation-direction: normal;
    animation-fill-mode: forwards;
  }
  
  #cs-navigation .cs-line3 {
    bottom: 0;
    transition: bottom 0.3s, opacity 0.3s;
  }
  
  #cs-navigation .cs-active .cs-line1 {
    top: 50%;
    transform: translate(-50%, -50%) rotate(225deg);
  }
  
  #cs-navigation .cs-active .cs-line2 {
    top: 50%;
    transform: translate(-50%, -50%) translateY(0) rotate(-225deg);
    transform-origin: center;
  }
  
  #cs-navigation .cs-active .cs-line3 {
    opacity: 0;
    bottom: 100%;
  }
  
  /* 3.5 - Mobile Contact Group */
  #cs-navigation .cs-contact-group {
    display: none;
    position: relative;
    z-index: 10;
  }
  
  #cs-navigation .cs-phone {
    font-size: 1rem;
    line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    color: var(--color-text-s);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    transition: opacity 0.3s, color 0.3s;
  }
  
  #cs-navigation .cs-phone-icon {
    width: 1.5rem;
    height: auto;
    display: block;
  }
  
  #cs-navigation .cs-social {
    display: none;
  }
  
  /* 3.6 - Mobile Menu Wrapper */
  #cs-navigation .cs-ul-wrapper {
    width: 100%;
    min-height: 100vh;
    padding-bottom: 2.4em;
    background-color: var(--color-brand-primary);
    border-radius: 0 0 1.5rem 1.5rem;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    overflow-y: auto;
    transform: scaleY(0);
    transition: transform 0.4s;
    transform-origin: top;
    display: block;
    text-align: left;
    padding-top: calc(100px + 2rem); /* Space for header + some margin */
  }
  
  #cs-navigation .cs-ul {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 2rem 0 0 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 1.25rem;
    overflow: visible;
    text-align: left;
    padding-left: 16px;
  }
  
  /* 3.7 - Mobile Menu Items */
  #cs-navigation .cs-li {
    text-align: center;
    width: 100%;
    margin-right: 0;
    opacity: 0;
    transform: translateY(-70/16rem);
    transition: transform 0.6s, opacity 0.9s;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 10px;
    margin-bottom: 10px;
    text-align: left;
  }
  
  #cs-navigation .cs-li:nth-of-type(1) { transition-delay: 0.05s; }
  #cs-navigation .cs-li:nth-of-type(2) { transition-delay: 0.1s; }
  #cs-navigation .cs-li:nth-of-type(3) { transition-delay: 0.15s; }
  #cs-navigation .cs-li:nth-of-type(4) { transition-delay: 0.2s; }
  #cs-navigation .cs-li:nth-of-type(5) { transition-delay: 0.25s; }
  #cs-navigation .cs-li:nth-of-type(6) { transition-delay: 0.3s; }
  #cs-navigation .cs-li:nth-of-type(7) { transition-delay: 0.35s; }
  #cs-navigation .cs-li:nth-of-type(8) { transition-delay: 0.4s; }
  #cs-navigation .cs-li:nth-of-type(9) { transition-delay: 0.45s; }
  #cs-navigation .cs-li:nth-of-type(10) { transition-delay: 0.5s; }
  #cs-navigation .cs-li:nth-of-type(11) { transition-delay: 0.55s; }
  #cs-navigation .cs-li:nth-of-type(12) { transition-delay: 0.6s; }
  #cs-navigation .cs-li:nth-of-type(13) { transition-delay: 0.65s; }
  
  /* 3.8 - Mobile Links */
  #cs-navigation .cs-li-link {
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    line-height: 1.2em;
    text-decoration: none;
    margin: 0;
    color: var(--color-text-s);
    display: inline-block;
    position: relative;
    cursor: pointer;
    transition: color 0.3s;
  }
  
  #cs-navigation .cs-li-link:hover {
    color: var(--color-brand-secondary);
  }
  
  #cs-navigation .cs-li-link.cs-active {
    color: var(--color-brand-secondary);
  }
  
  /* 3.9 - Mobile Dropdown Styles */
  #cs-navigation .cs-dropdown {
    color: var(--color-text-s);
    position: relative;
  }
  
  #cs-navigation .cs-dropdown .cs-li-link {
    position: relative;
    transition: opacity 0.3s;
  }
  
  #cs-navigation .cs-dropdown.open .cs-drop-grid {
    max-height: 400px; /* Increased from 1000px to a reasonable scrollable height */
    opacity: 1;
    visibility: visible;
    margin-top: 1rem;
    padding: 0.5rem 0;
    overflow-y: auto; /* Enable vertical scrolling */
    overflow-x: hidden; /* Prevent horizontal scroll */
    transition: max-height 0.5s ease, opacity 0.4s ease, margin-top 0.3s ease, padding 0.3s ease;
    
    /* Custom scrollbar styling for better UX */
    scrollbar-width: thin;
    scrollbar-color: rgba(241, 174, 34, 0.5) rgba(255, 255, 255, 0.1);
  }
  
  /* Webkit scrollbar styling */
  #cs-navigation .cs-dropdown.open .cs-drop-grid::-webkit-scrollbar {
    width: 6px;
  }
  
  #cs-navigation .cs-dropdown.open .cs-drop-grid::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
  }
  
  #cs-navigation .cs-dropdown.open .cs-drop-grid::-webkit-scrollbar-thumb {
    background: rgba(241, 174, 34, 0.5);
    border-radius: 10px;
  }
  
  #cs-navigation .cs-dropdown.open .cs-drop-grid::-webkit-scrollbar-thumb:hover {
    background: rgba(241, 174, 34, 0.8);
  }
  
  #cs-navigation .cs-drop-icon {
    width: 0.9375rem;
    height: auto;
    position: absolute;
    top: 50%;
    right: -1.25rem;
    transform: translateY(-50%);
    transition: transform 0.3s;
  }
  
  #cs-navigation .cs-dropdown.open .cs-drop-icon {
    transform: translateY(-50%) rotate(180deg);
  }
  
  /* 3.10 - Mobile Dropdown Grid - ENHANCED DESIGN */
  #cs-navigation .cs-drop-grid {
    width: 100%;
    max-height: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden; /* Hidden when closed */
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.4s ease, 
                margin-top 0.3s ease,
                padding 0.3s ease;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  }
  
  /* 3.11 - Mobile Grid Items - ENHANCED DESIGN */
  #cs-navigation .cs-grid-item {
    width: calc(100% - 16px);
    margin: 0 8px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: visible; /* Changed from hidden to visible to show all subcategories */
  }
  
  #cs-navigation .cs-grid-item:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(4px);
  }
  
  /* Add decorative accent */
  #cs-navigation .cs-grid-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--color-brand-secondary) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  #cs-navigation .cs-grid-item:hover::before {
    opacity: 1;
  }
  
  /* First and last item padding */
  #cs-navigation .cs-drop-grid .cs-grid-item:first-child {
    margin-top: 8px;
  }
  
  #cs-navigation .cs-drop-grid .cs-grid-item:last-child {
    margin-bottom: 8px;
  }
  
  /* 3.12 - Mobile Subcategory Links - ENHANCED DESIGN */
  #cs-navigation .cs-sub-link {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    color: var(--color-brand-secondary);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0.5rem;
    padding: 0.5rem 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
  }
  
  /* Add icon before subcategory */
  #cs-navigation .cs-sub-link::before {
    content: '▸';
    font-size: 1em;
    transition: transform 0.3s ease;
    color: var(--color-brand-secondary);
  }
  
  #cs-navigation .cs-sub-link:hover {
    color: #fff;
    transform: translateX(4px);
  }
  
  #cs-navigation .cs-sub-link:hover::before {
    transform: translateX(2px);
    color: #fff;
  }
  
  /* 3.13 - Mobile Sub-subcategory List */
  #cs-navigation .cs-sub-sub-list {
    margin: 0.5rem 0 1rem 1rem;
    padding: 0;
    list-style: none;
  }
  
  /* 3.14 - Mobile Sub-subcategory Links - ENHANCED DESIGN */
  #cs-navigation .cs-sub-sub-link {
    font-size: 0.95rem;
    line-height: 1.5;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.4rem 0;
    padding-left: 0.5rem;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
  }
  
  /* Add subtle bullet point */
  #cs-navigation .cs-sub-sub-link::before {
    content: '•';
    font-size: 1.2em;
    color: rgba(241, 174, 34, 0.6);
    transition: all 0.3s ease;
  }
  
  #cs-navigation .cs-sub-sub-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    padding-left: 0.75rem;
  }
  
  #cs-navigation .cs-sub-sub-link:hover::before {
    color: var(--color-brand-secondary);
    transform: scale(1.3);
  }
  
  /* 3.15 - Mobile Dropdown Category Badge */
  #cs-navigation .category-badge {
    display: inline-block;
    font-size: 0.7rem;
    padding: 2px 8px;
    background: rgba(241, 174, 34, 0.2);
    border: 1px solid rgba(241, 174, 34, 0.4);
    border-radius: 12px;
    color: var(--color-brand-secondary);
    font-weight: 600;
    margin-left: 8px;
    transition: all 0.3s ease;
  }
  
  #cs-navigation .cs-sub-link:hover .category-badge {
    background: var(--color-brand-secondary);
    color: #001e53;
    border-color: var(--color-brand-secondary);
  }
  
  /* 3.16 - Mobile Dropdown Scroll Shadow */
  #cs-navigation .cs-drop-grid::after {
    content: '';
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(to top, rgba(0, 30, 83, 0.8), transparent);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 0 0 16px 16px;
    z-index: 10;
  }
  
  #cs-navigation .cs-dropdown.open .cs-drop-grid::after {
    opacity: 1;
  }
  
  /* Show scroll indicator when content overflows */
  #cs-navigation .cs-drop-grid::before {
    content: '⌄'; /* Down arrow */
    position: sticky;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 24px;
    background: var(--color-brand-secondary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #001e53;
    font-size: 16px;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 11;
    pointer-events: none;
    animation: bounce 2s infinite;
  }
  
  @keyframes bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(4px); }
  }
  
  /* Show arrow only when scrollable */
  #cs-navigation .cs-dropdown.open .cs-drop-grid[style*="overflow-y: auto"]::before {
    opacity: 1;
  }
}

/* ==================================================
   4. DESKTOP NAVIGATION (≥1024px)
   ================================================== */

/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  
  /* 4.1 - Desktop Body Scroll States */
  body.scroll #cs-navigation {
    width: 100%;
    max-width: 100%;
    top: 40px; /* Move to top when scrolled */
    border-radius: 0;
  }
  
  body.scroll #cs-navigation:before {
    border-radius: 0;
  }
  
  /* Adjust mega menu position when scrolled */
  body.scroll #cs-navigation .cs-drop-grid {
    top: 6rem; /* Adjust for no contact bar */
  }
  
  /* 4.2 - Desktop Header Container */
  #cs-navigation {
    width: 94%;
    max-width: 120rem;
    height: 6rem;
    padding: clamp(0.75rem, 2vw, 1.5rem);
    border-radius: clamp(0.75rem, 2vw, 1.5rem);
    top: calc(1rem + 30px); /* Added contact bar height */
    left: 50%;
    transform: translateX(-50%);
  }
  
  #cs-navigation:before {
    content: "";
    width: 100%;
    height: 100%;
    background: var(--color-brand-primary);
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    opacity: 1;
    border-radius: clamp(0.75rem, 2vw, 1.5rem);
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    transition: transform 0.2s, border-radius 0.3s ease-in-out;
  }
  
  #cs-navigation .cs-container {
    justify-content: flex-start;
    gap: 3.75rem;
  }
  
  /* 4.3 - Desktop Logo */
  #cs-navigation .cs-logo {
    width: auto;
    max-width: 18.4375rem;
    height: 3.75rem;
    padding: 0;
    justify-content: flex-start;
    z-index: 100;
  }
  
  #cs-navigation .cs-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  
  /* 4.4 - Desktop Toggle (Hidden) */
  #cs-navigation .cs-toggle {
    display: none;
  }
  
  /* 4.5 - Desktop Contact Group */
  #cs-navigation .cs-contact-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin-left: auto;
  }
  
  #cs-navigation .cs-phone {
    font-size: 1rem;
    line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    color: var(--color-text-s);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    transition: opacity 0.3s, color 0.3s;
    position: relative;
  }
  
  #cs-navigation .cs-phone-icon {
    width: 1.5rem;
    height: auto;
    display: block;
  }
  
  #cs-navigation .cs-phone:hover {
    opacity: 0.75;
  }
  
  /* 4.6 - Desktop Social */
  #cs-navigation .cs-social {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 1rem;
  }
  
  #cs-navigation .cs-social-link {
    width: 1.25rem;
    height: 1.25rem;
    text-decoration: none;
    transition: transform 0.3s, opacity 0.3s;
    display: block;
  }
  
  #cs-navigation .cs-social-link:hover {
    transform: translateY(-0.1875rem);
    opacity: 0.75;
  }
  
  #cs-navigation .cs-social-img {
    width: 1.25rem;
    height: 1.25rem;
    object-fit: contain;
  }
  
  /* 4.7 - Desktop Navigation Base */
  #cs-navigation .cs-nav {
    margin: 0;
  }
  
  #cs-navigation .cs-ul-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
  }
  
  #cs-navigation .cs-ul {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: clamp(1.5rem, 2.5vw, 3rem);
  }
  
  /* 4.8 - Desktop Menu Items */
  #cs-navigation .cs-li {
    list-style: none;
    display: flex;
    align-items: center;
    height: 100%;
  }
  
  /* 4.9 - Desktop Main Links */
  #cs-navigation .cs-li-link {
    font-size: clamp(0.9375rem, 1.2vw, 1.125rem);
    line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    padding: 0 1.5rem;
    color: var(--color-text-s);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    transition: color 0.3s;
  }
  
  #cs-navigation .cs-li-link:hover {
    color: var(--color-brand-secondary);
  }
  
  #cs-navigation .cs-li-link.cs-active {
    color: var(--color-brand-secondary);
  }
  
  /* 4.10 - Desktop Dropdown Icons */
  #cs-navigation .cs-drop-icon {
    width: 0.9375rem;
    height: auto;
    transition: transform 0.3s;
  }
  
  /* Icon rotation controlled by JavaScript based on menu visibility */
  
  /* ==================================================
     MEGA MENU DROPDOWN - DESKTOP
     ================================================== */
  
  /* 4.11 - Mega Menu Base - FIXED, CENTERED */
  #cs-navigation .cs-drop-grid {
    /* HIDDEN by default */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    
    /* FIXED positioning */
    position: fixed;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    
    /* TOP position - below header */
    top: calc(5.5rem + 15px); /* Added contact bar height */
    
    /* SIZE - REDUCED FROM 1800px to 1200px max-width */
    width: 90vw;
    max-width: 1200px; /* CHANGED: Was 1800px */
    
    /* Dark theme background */
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 2px solid rgba(255, 215, 0, 0.3);
    border-radius: 1.5rem;
    box-shadow: 
      0 20px 60px rgba(0, 0, 0, 0.5),
      0 0 80px rgba(255, 215, 0, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
    
    /* LAYOUT - Horizontal columns */
    display: flex;
    flex-wrap: nowrap; /* CHANGED: Prevent wrapping to keep all categories in one row */
    gap: 1.25rem; /* CHANGED: Was 2rem - reduced gap between columns */
    padding: 2rem 2.5rem; /* CHANGED: Was 3rem 3rem - reduced vertical padding */
    
    /* TRANSITIONS - NO DELAY on hide to allow immediate hover on dropdown */
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    
    /* Z-INDEX above backdrop */
    z-index: 9999;
  }
  
  /* 4.12 - Dropdown controlled by JavaScript, not CSS hover */
  /* JavaScript will directly manipulate opacity, visibility, and pointer-events */
  
  /* 4.13 - Category Columns */
  #cs-navigation .cs-grid-item {
    flex: 1 1 160px; /* CHANGED: Was 200px - smaller to fit 5 columns */
    min-width: 140px; /* CHANGED: Was 180px */
    max-width: 220px; /* CHANGED: Was 280px */
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* CHANGED: Was 0.75rem - reduced vertical spacing */
  }
  
  /* 4.14 - Main category titles (strong links) */
  #cs-navigation .cs-sub-link {
    font-size: 0.95rem; /* CHANGED: Was 1.125rem - smaller font */
    font-weight: 700;
    line-height: 1.3; /* CHANGED: Was 1.4 - tighter line height */
    text-decoration: none;
    color: #FFD700;
    display: block;
    padding: 0.6rem 0.75rem; /* CHANGED: Was 0.75rem 1rem - less padding */
    border-radius: 0.75rem;
    background: rgba(255, 215, 0, 0.1);
    transition: all 0.3s ease;
    border: 1px solid transparent;
    
    /* CHANGED: Allow text to wrap instead of truncating */
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  #cs-navigation .cs-sub-link:hover {
    background: rgba(255, 215, 0, 0.2);
    border-color: rgba(255, 215, 0, 0.4);
    transform: translateX(5px);
    box-shadow: 
      0 4px 15px rgba(255, 215, 0, 0.3),
      0 0 30px rgba(255, 215, 0, 0.15);
  }
  
  /* 4.15 - Subcategory list */
  #cs-navigation .cs-sub-sub-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem; /* CHANGED: Was 0.5rem - tighter spacing between items */
  }
  
  /* 4.16 - Subcategory links with chevron bullets */
  #cs-navigation .cs-sub-sub-link {
    font-size: 0.85rem; /* CHANGED: Was 0.95rem - smaller font */
    font-weight: 400;
    line-height: 1.4; /* CHANGED: Was 1.5 - tighter line height */
    text-decoration: none;
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    gap: 0.5rem; /* CHANGED: Was 0.75rem */
    padding: 0.5rem 0.75rem; /* CHANGED: Was 0.75rem 1rem - less padding */
    transition: all 0.25s ease;
    position: relative;
    border-radius: 0.5rem;
    
    /* CHANGED: Allow text to wrap instead of truncating */
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  /* Chevron bullet point */
  #cs-navigation .cs-sub-sub-link::before {
    content: '›';
    font-size: 1.25rem; /* CHANGED: Was 1.5rem - smaller chevron */
    font-weight: 700;
    color: #FFD700;
    flex-shrink: 0;
    transition: all 0.25s ease;
  }
  
  /* Hover effect */
  #cs-navigation .cs-sub-sub-link:hover {
    color: #FFF;
    background: rgba(255, 215, 0, 0.15);
    padding-left: 1.5rem;
  }
  
  #cs-navigation .cs-sub-sub-link:hover::before {
    color: #FFF;
    transform: translateX(5px);
  }
  
  /* 4.17 - Desktop CTA Button */
  #cs-navigation .cs-button-solid {
    font-size: 1rem;
    font-weight: 700;
    line-height: clamp(2.875em, 5.5vw, 3.5em);
    text-align: center;
    text-decoration: none;
    min-width: 9.375rem;
    margin: 0;
    box-sizing: border-box;
    padding: 0 2rem;
    color: var(--color-brand-primary);
    background-color: var(--color-brand-secondary);
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
  }
  
  #cs-navigation .cs-button-solid:before {
    content: "";
    width: 0%;
    height: 100%;
    background: var(--color-brand-primary);
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  
  #cs-navigation .cs-button-solid:hover {
    color: #1a1a1a;
  }
  
  #cs-navigation .cs-button-solid:hover:before {
    width: 100%;
  }
}

@media only screen and (max-width: 63.9375rem) {
  #cs-navigation .cs-logo {
    height: 2.4rem;
    transform: none;
  }

  #cs-navigation .cs-logo::before {
    left: -12px;
    right: 0;
    border-radius: clamp(0.5rem, 1.5vw, 1rem);
    clip-path: polygon(
      4% 0%,
      100% 0%,
      96% 100%,
      0% 100%
    );
  }
}

/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #cs-navigation .cs-social {
    display: flex;
  }
}
/* ==================================================
   6. LOGO PLATE / SLASH EFFECT
   ================================================== */
/* 6.1 - Logo Wrapper Base */
#cs-navigation .cs-logo {
  position: relative;
  transition: transform 0.4s cubic-bezier(.4,0,.2,1);
}
#cs-navigation .cs-logo::before {
  content: "";
  position: absolute;
  top: calc(-1 * clamp(0.75rem, 2vw, 1.7rem));
  bottom: calc(-1 * clamp(0.50rem, 2vw, 0.8rem));
  left: -25px;
  right: -50px; /* Extended to match scroll state width */
  background: #ffffff;
  z-index: -1;
  border-top-left-radius: clamp(0.75rem, 2vw, 1.5rem);
  border-bottom-left-radius: clamp(0.75rem, 2vw, 1.5rem);
  clip-path: polygon(
    0% 0%,
    100% 0%,
    92% 100%,
    0% 100%
  );
  transition:
    clip-path 0.5s cubic-bezier(.4,0,.2,1),
    border-radius 0.5s cubic-bezier(.4,0,.2,1),
    transform 0.5s cubic-bezier(.4,0,.2,1);
  will-change: clip-path, transform;
}
/* ==================================================
   6.2 - Desktop Logo Plate Effects
   ================================================== */
@media only screen and (min-width: 64rem) {
  /* On scroll: change LEFT side to / slash */
  body.scroll #cs-navigation .cs-logo::before {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    clip-path: polygon(
      0% 0%,
      100% 0%,
      92% 100%,
      0% 100%
    );
  }
}
/* ==================================================
   6.3 - Mobile Luxury Scroll Transition
   ================================================== */
@media (max-width: 47.9375rem) {
  #cs-navigation .cs-logo {
    height: 2.4rem;
    padding: 0 20px;
    transform: translateX(-6px);
    transition: transform 0.5s cubic-bezier(.4,0,.2,1);
  }
  #cs-navigation .cs-logo::before {
    left: 6px;
    right: -30px; /* Extended to match scroll state */
    border-top-left-radius: clamp(0.75rem, 2vw, 1.5rem);
    border-bottom-left-radius: clamp(0.75rem, 2vw, 1.5rem);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    clip-path: polygon(
      0% 0%,
      100% 0%,
      92% 100%,
      0% 100%
    );
    transition:
      clip-path 0.5s cubic-bezier(.4,0,.2,1),
      border-radius 0.5s cubic-bezier(.4,0,.2,1);
  }
  body.scroll #cs-navigation .cs-logo {
    transform: translateX(-6px); /* Keep same position */
  }
  body.scroll #cs-navigation .cs-logo::before {
    left: 6px; /* Keep same left position */
    right: -30px;
    border-top-left-radius: clamp(0.75rem, 2vw, 1.5rem); /* Keep left curve */
    border-bottom-left-radius: clamp(0.75rem, 2vw, 1.5rem); /* Keep left curve */
    border-top-right-radius: clamp(1.5rem, 4vw, 3rem); /* Curve right edge */
    border-bottom-right-radius: clamp(1.5rem, 4vw, 3rem); /* Curve right edge */
    clip-path: polygon(
      0% 0%,
      112% 0%,
      86% 100%, /* Straight right edge instead of slash */
      0% 100%
    );
  }
}
/* ==================================================
   7. STATE OVERRIDES & FIXES
   ================================================== */

/* 7.1 - Mobile Overflow Fixes */
@media (max-width: 768px) {
  #cs-navigation {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    transform: none !important;
  }
}

/* 7.2 - Body Overflow Prevention */
body {
  overflow-x: hidden;
}

/* ==================================================
   8. ADDITIONAL MEGA MENU ENHANCEMENTS - DARK THEME
   ================================================== */

/* Prevent horizontal scrolling from mega menu */
@media only screen and (min-width: 64rem) {
  #cs-navigation .cs-drop-grid {
    max-width: min(1200px, 95vw); /* CHANGED: Was 1800px */
  }
  
  /* Adjust mega menu position when header is scrolled */
  body.scroll #cs-navigation .cs-drop-grid {
    top: 5.5rem; /* CHANGED: Was 6rem - reduced gap for scrolled state */
  }
  
  /* Adjust transform for scrolled state */
  body.scroll #cs-navigation .cs-dropdown:hover .cs-drop-grid {
    transform: translateX(-50%) translateY(0);
  }
  
  /* Responsive column sizing for different screen sizes */
  @media (max-width: 1400px) {
    #cs-navigation .cs-drop-grid {
      gap: 1.75rem;
      padding: 2.5rem 2.5rem;
    }
  }
  
  @media (max-width: 1200px) {
    #cs-navigation .cs-drop-grid {
      gap: 1.5rem;
      padding: 2.25rem 2rem;
      max-width: min(1000px, 95vw); /* CHANGED: Reduce further on smaller screens */
    }
    
    #cs-navigation .cs-sub-link {
      font-size: 1rem;
      padding: 0.65rem 0.85rem;
    }
    
    #cs-navigation .cs-sub-sub-link {
      font-size: 0.875rem;
      padding: 0.65rem 0.85rem;
    }
  }
  
  @media (max-width: 1024px) {
    #cs-navigation .cs-drop-grid {
      gap: 1.25rem;
      padding: 2rem 1.5rem;
      max-width: min(900px, 95vw); /* CHANGED: Even smaller on tablets */
    }
    
    #cs-navigation .cs-sub-link {
      font-size: 0.95rem;
      padding: 0.6rem 0.75rem;
    }
    
    #cs-navigation .cs-sub-sub-link {
      font-size: 0.85rem;
      padding: 0.6rem 0.75rem;
    }
  }
}

/* Backdrop removed - was causing hover issues with fixed positioning */
/* If backdrop is needed, it should be controlled via JavaScript */

/* Smooth entrance animation for mega menu - Dark theme */
@media only screen and (min-width: 64rem) {
  #cs-navigation .cs-drop-grid {
    transform: translateX(-50%) translateY(-10px);
  }
  
  /* Grid items will be visible when menu is shown via JavaScript */
  #cs-navigation .cs-grid-item {
    transition: all 0.3s ease;
  }
}

/* Gold glow effect on column hover - applies when hovering individual items */
@media only screen and (min-width: 64rem) {
  #cs-navigation .cs-sub-link:hover {
    box-shadow: 
      0 0 20px rgba(255, 215, 0, 0.4),
      0 0 40px rgba(255, 215, 0, 0.2);
  }
}
/* ==================================================
   MOBILE CONTACT BAR FIXES - BETTER ALIGNMENT
   ================================================== */

/* Override for very small screens */
@media only screen and (max-width: 375px) {
  .top-contact-bar {
    height: 38px;
  }
  
  .top-contact-container {
    padding: 0 8px;
  }
  
  .contact-info {
    gap: 6px;
  }
  
  .contact-link {
    padding: 4px 6px;
    min-width: 30px;
  }
  
  .contact-link i {
    font-size: 13px;
  }
  
  .social-links {
    gap: 4px;
  }
  
  .social-link {
    width: 30px;
    height: 30px;
    font-size: 13px;
  }
}

/* Mobile scroll state adjustments */
@media only screen and (max-width: 63.9375rem) {
  /* Keep contact bar visible and move with header */
  body.scroll .top-contact-bar {
    transform: translateY(0);
    opacity: 1;
    box-shadow: none; /* Remove shadow to blend with header */
  }
  
  /* Header stays below contact bar on mobile when scrolled */
  body.scroll #cs-navigation {
    top: 44px; /* Contact bar height */
    border-radius: 0; /* No rounded corners when stacked */
  }
  
  body.scroll #cs-navigation:before {
    border-radius: 0;
  }
  
  /* Create seamless stacked effect */
  body.scroll .top-contact-bar {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
  
  @media only screen and (max-width: 480px) {
    body.scroll #cs-navigation {
      top: 40px;
    }
  }
  
  @media only screen and (max-width: 375px) {
    body.scroll #cs-navigation {
      top: 38px;
    }
  }
}

/* Tablet size - keep full contact bar */
@media only screen and (min-width: 769px) and (max-width: 1023px) {
  .top-contact-bar {
    height: 42px;
  }
  
  .contact-link span {
    display: inline;
    font-size: 12px;
  }
  
  .contact-divider {
    display: inline;
  }
}

/* ================================
   WAVE DECORATION - ATTACHED TO HEADER BOTTOM
================================ */
.header-wave {
  position: fixed;
  left: 0;
  width: 100%;
  height: 185px;
  pointer-events: none;
  z-index: 9999; /* Same level as header */
  transition: top 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: -1px; /* Eliminate any pixel gaps */
}

.header-wave svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Desktop positioning - directly below header */
@media only screen and (min-width: 64rem) {

  .header-wave {
    top: calc(2rem); /* ~170px - will be overridden by JS */
  }
  
  /* When scrolled: below header only (6rem ~96px) */
body.scroll .header-wave {
  display: none;
}

}

/* Mobile - directly below contact bar + header stack */
@media only screen and (max-width: 63.9375rem) {
  .header-wave {
    top: calc(44px + 6rem + 2rem);
  }
  
  body.scroll .header-wave {
    display: none; /* Hide wave on scroll for mobile too */
  }
}

/* Hide on tablets and phones */
@media (max-width: 1024px) {
  .header-wave {
    display: none !important;
  }
}