:root {
    --megamenu-bg: #fff;
    --megamenu-text: #333;
    --megamenu-hover-bg: #f5f5f5;
    --megamenu-hover-text: #000;
    --megamenu-breakpoint: 992px;
    --megamenu-hamburger-size: 30px;
    --megamenu-drawer-width: 300px;
    --megamenu-zindex: 1000;
}

.nav-megamenu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--megamenu-bg);
    color: var(--megamenu-text);
}

.nav-megamenu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.nav-megamenu-item {
    position: static;
}

.nav-megamenu-link {
    display: block;
    padding: 1rem 1.5rem;
    color: inherit;
    text-decoration: none;
    transition: background 0.3s, color 0.3s;
}

.nav-megamenu-link:hover,
.nav-megamenu-link:focus {
    background: var(--megamenu-hover-bg);
    color: var(--megamenu-hover-text);
}

/* Mega Menu Dropdown */
.nav-megamenu-dropdown {
    position: absolute;
    top: auto;
    left: 0;
    width: 100vw; /* Span the entire viewport width */
    /*margin-left: calc(50% - 50vw); !* Center relative to the viewport *!*/
    right: 0;
    background: var(--megamenu-bg);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
    z-index: var(--megamenu-zindex);
    padding: 2rem;
    box-sizing: border-box; /* Ensure padding doesn't affect total width */

    display: grid;
    grid-template-columns:
      [full-width-start] minmax(var(--vr-bw-padding-inline), 1fr)
      [breakout-start] minmax(var(--vr-bw-padding-inline), var(--vr-bw-breakout-size))
      [content-start] minmax(var(--vr-bw-padding-inline), var(--vr-bw-content-size))
      [indent-start] min(
        100% - (var(--vr-bw-padding-inline) * 6),
        var(--vr-bw-indent-max-width)
      )
      [indent-end]
      minmax(var(--vr-bw-padding-inline), var(--vr-bw-content-size)) [content-end]
      minmax(var(--vr-bw-padding-inline), var(--vr-bw-breakout-size)) [breakout-end]
      minmax(var(--vr-bw-padding-inline), 1fr) [full-width-end];

    > .mega-menu {
      grid-column: content;
      position: relative;
    }
}

.nav-megamenu-item:hover .nav-megamenu-dropdown,
.nav-megamenu-item:focus-within .nav-megamenu-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Hamburger Button */
.nav-megamenu-hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    width: var(--megamenu-hamburger-size);
    height: var(--megamenu-hamburger-size);
    position: relative;
    z-index: calc(var(--megamenu-zindex) + 3);
}

.nav-megamenu-hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--megamenu-text);
    position: absolute;
    left: 0;
    transition: transform 0.3s, opacity 0.3s;
}

.nav-megamenu-hamburger span:nth-child(1) { top: 25%; }
.nav-megamenu-hamburger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.nav-megamenu-hamburger span:nth-child(3) { bottom: 25%; }

.nav-megamenu-hamburger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(calc(var(--megamenu-hamburger-size) * 0.25)) rotate(45deg);
}
.nav-megamenu-hamburger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}
.nav-megamenu-hamburger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(calc(var(--megamenu-hamburger-size) * -0.25)) rotate(-45deg);
}

/* Drawer overlay */
.nav-megamenu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
    z-index: calc(var(--megamenu-zindex) + 1);
}

.nav-megamenu--is-open .nav-megamenu-overlay {
    opacity: 1;
    visibility: visible;
}

/* Submenu toggle button for mobile */
.nav-megamenu-toggle {
    position: absolute;
    top: 0;
    right: 0;
    padding: 1rem;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    display: none;
}

/* Base styles for drawer mode (applied either always or via media query) */
.nav-megamenu-drawer-mode .nav-megamenu-hamburger {
    display: block;
}

.nav-megamenu-drawer-mode .nav-megamenu-item {
    position: relative;
}

.nav-megamenu-drawer-mode .nav-megamenu-list {
    position: fixed;
    top: 0;
    right: calc(var(--megamenu-drawer-width) * -1);
    width: var(--megamenu-drawer-width);
    height: 100vh;
    background: var(--megamenu-bg);
    flex-direction: column;
    padding-top: 4rem;
    transition: transform 0.3s ease-in-out;
    z-index: calc(var(--megamenu-zindex) + 2);
    overflow-y: auto;
}

.nav-megamenu--is-open .nav-megamenu-drawer-mode .nav-megamenu-list {
    transform: translateX(calc(var(--megamenu-drawer-width) * -1));
}

.nav-megamenu-drawer-mode .nav-megamenu-dropdown {
    position: static;
    width: 100%;
    margin-left: 0; /* Reset for drawer */
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    padding: 1rem 2rem;
    display: none;
    background: var(--megamenu-hover-bg);
}

.nav-megamenu-drawer-mode .nav-megamenu-item.is-expanded .nav-megamenu-dropdown {
    display: block;
}

.nav-megamenu-drawer-mode .nav-megamenu-toggle {
    display: block;
}