/* ✅ Reset menu styles */
ul.dc_mm-orange, ul.dc_mm-orange li {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ✅ Full-width menu bar */
:root { --nav-h: 36px; } /* NEW: lock bar height for no-shift */
ul.dc_mm-orange {
    background: #000;
    /* NEW: system stack first to minimize font-swap jumps; Monda still included */
    font: normal 14px system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Monda", sans-serif;
    padding: 0;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    position: relative;
    width: 100%;
}

/* ✅ Menu items inline */
ul.dc_mm-orange li {
    position: relative;
}

/* ✅ Menu links */
ul.dc_mm-orange li a {
    color: #fff;
    text-decoration: none;
    /* NEW: fix height to the bar to prevent CLS */
    display: flex;
    align-items: center;
    height: var(--nav-h);
    padding: 0 25px; /* keep your horizontal spacing */
    text-transform: uppercase;
    font-family: 'Monda', sans-serif;
    font-size: 12px;
    text-shadow: 0.5px 0.5px 0.5px #000;
}

/* ✅ Hover effects for menu links */
ul.dc_mm-orange li a:hover {
    color: #fff;
    background: linear-gradient(to bottom, #660033, #e48e14);
}

/* ✅ Fixed Full-Screen Dropdown Menu (DESKTOP) */
ul.dc_mm-orange .dropdown-menu {
    /* ORIGINAL geometry preserved */
    position: absolute;
    top: 100%;
    left: 50%; /* ✅ Centers dropdown */
    transform: translateX(-30%); /* ✅ Ensures it stays centered */
    width: 90vw; /* ✅ Uses 90% of viewport width for better responsiveness */
    max-width: min(90vw, 800px); /* ✅ Dynamically adjusts max-width */
    background: #000000; /* ⚠️ UNCHANGED per your request */
    z-index: 1000;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    /* NEW: ~40% less vertical padding for tighter dropdown */
    padding: 9px; /* was 15px */
    box-sizing: border-box;
    overflow-y: auto; /* ✅ Enables scrolling if needed */
    max-height: 85vh; /* ✅ Prevents dropdown from exceeding viewport height */

    /* NEW: CLS-safe reveal (kept in DOM, no reflow on open) */
    display: block;               /* was display:none */
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease-out, visibility 0s linear .18s;
    will-change: opacity;
}
ul.dc_mm-orange .dropdown-menu.visible {
    /* was display:flex; → switch to paint-only reveal */
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: opacity .18s ease-out;
}

/* ✅ Dropdown Content Container */
ul.dc_mm-orange .dropdown-menu .dropdown-container {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    /* NEW: ~40% tighter vertical padding */
    padding: 6px; /* was 10px */
    box-sizing: border-box;
}

/* ✅ Dropdown Columns - Ensures Three Columns */
ul.dc_mm-orange .dropdown-menu .menu-grids {
    flex: 1;
    min-width: 30%;
    max-width: 33.33%;
    /* NEW: ~40% tighter vertical padding */
    padding: 6px; /* was 10px */
    text-align: left;
    box-sizing: border-box;
    display: flex;
    flex-direction: column; /* Forces links to stack */
}

/* ✅ Dropdown List - Fixes Stacking Issue */
ul.dc_mm-orange .multi-column-dropdown {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    display: block;
}

/* ✅ Dropdown Links - Ensures Full Width */
ul.dc_mm-orange .multi-column-dropdown li {
    margin-bottom: 4px; /* was 5px */
}

ul.dc_mm-orange .multi-column-dropdown li a {
    color: #fff; /* ⚠️ UNCHANGED per your original */
    font-family: 'Monda', sans-serif;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 250;
    letter-spacing: 1px;
    /* NEW: ~40% less vertical padding */
    padding: 5px 15px; /* was 8px 15px */
    display: block;
    width: 100%; /* Ensures each link takes full width */
    transition: all 0.3s ease-in-out;
}

/* ✅ Hover Effect for Dropdown Links */
ul.dc_mm-orange .multi-column-dropdown li a:hover {
    color: #fff;
    background: #D8953F;
    text-decoration: none;
}

/* ✅ Dropdown Header Styling */
ul.dc_mm-orange .multi-column-dropdown h4 {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #ddd;
    color: #222;
}

/* == WRAPPER & TOGGLE == */
.menu {
  display: block;
  width: 100%;
  /* NEW: match wrapper min-height to bar height for no-shift */
  min-height: var(--nav-h); /* was 50px */
  padding: 0;
  margin: 0;
  background-color: #660033; /* Match your default background */
  box-sizing: border-box;
}

/* ✅ Mobile menu toggle: reserve space to avoid layout shift */
.menu-toggle {
  /* NEW: keep toggle aligned with bar height */
  min-height: var(--nav-h); /* was 60px */
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-weight: bold;
  background-color: #660033;
  color: #000000;
  text-transform: uppercase;
  font-size: 16px;
  width: 100%;
  border: none;
  box-sizing: border-box;
}

/* ✅ DESKTOP MENU — show menu, hide toggle */
@media only screen and (min-width: 1024px) {
  ul.dc_mm-orange {
    display: flex;
  }

  .menu-toggle {
    display: none !important;
  }
}

/* ✅ MOBILE MENU — Handles toggle visibility and layout */
@media only screen and (max-width: 1023px) {
  .menu-toggle {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    padding: 10px;
    background: #660033;
    color: #fff;
    text-align: left;
    font-size: 16px;
    cursor: pointer;
    border: none;
    font-weight: bold;
    text-transform: uppercase;
  }

  /* Hide menu unless toggled */
  ul.dc_mm-orange {
    display: none;
    flex-direction: column;
    background: #000000;
    padding: 10px 0;
    text-align: center;
  }

  /* Show menu when toggle is clicked */
  ul.dc_mm-orange.menu-open {
    display: flex;
    flex-direction: column;
  }

  /* Ensure dropdowns inside mobile work properly */
  ul.dc_mm-orange .dropdown-menu {
    position: static;
    transform: none;
    width: 100%;
    max-width: 100%;
    box-shadow: none;
    /* keep tighter rhythm from desktop container/columns/links */
    padding: 0; /* container padding is handled inside */
    max-height: none;
    overflow: visible;
    /* MOBILE reveal stays display-based (safe in-flow) */
    display: none;

    /* NOTE: background remains UNCHANGED (inherits), per your request */
  }

  ul.dc_mm-orange .dropdown-menu.visible {
    display: block;
  }

  /* keep the tightened inner spacings on mobile too */
  ul.dc_mm-orange .dropdown-menu .dropdown-container { padding: 6px; } /* was 10px */
  ul.dc_mm-orange .dropdown-menu .menu-grids { padding: 6px; }        /* was 10px */
  ul.dc_mm-orange .multi-column-dropdown li a { padding: 5px 15px; }  /* was 8px */
  ul.dc_mm-orange .multi-column-dropdown li { margin-bottom: 4px; }   /* was 5px */
}