/* Responsive hamburger menu styles
   Overrides are minimal and scoped to avoid breaking existing layout.
*/

.menu-section {
    position: relative;
}

/* Hamburger button (hidden on large screens) */
.hamburger {
    display: none;
    position: relative;
    width: 40px;
    height: 30px;
    padding: 8px;
    margin: 8px;
    border: 0;
    background: transparent;
    cursor: pointer;
    z-index: 50;
}

/* Hamburger inner bars */
.hamburger-box {
    display: inline-block;
    width: 100%;
    height: 100%;
    position: relative;
}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 100%;
    height: 3px;
    background-color: #222;
    display: block;
    position: absolute;
    left: 0;
    transition: transform 0.25s ease, top 0.25s ease, opacity 0.25s ease;
}
.hamburger-inner {
    top: 50%;
    transform: translateY(-50%);
}
.hamburger-inner::before {
    content: "";
    top: -10px;
}
.hamburger-inner::after {
    content: "";
    top: 10px;
}

/* Transform to X when open */
.menu-section.open .hamburger-inner {
    transform: rotate(45deg);
}
.menu-section.open .hamburger-inner::before {
    top: 0;
    transform: rotate(90deg);
}
.menu-section.open .hamburger-inner::after {
    top: 0;
    opacity: 0;
}

/* Menu list base */
.menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Desktop: keep existing horizontal menu if any */
@media (min-width: 801px) {
    .hamburger { display: none !important; }
    /* Ensure menu-list displays as originally intended on desktop */
    .menu-list { display: block; }
}

/* Mobile: collapse menu behind hamburger */
@media (max-width: 800px) {
    .hamburger { display: inline-block; }

    /* Hide the menu by default on mobile */
    .menu-list {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        z-index: 40;
        box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    }

    /* Show menu when section has .open */
    .menu-section.open .menu-list {
        display: block;
    }

    .menu-list li {
        border-bottom: 1px solid #eee;
    }

    .menu-list li a {
        display: block;
        padding: 12px 16px;
        color: #222;
        text-decoration: none;
    }

    .menu-list li a:hover {
        background: #f5f5f5;
    }
}

/* Small adjustments so the button doesn't overlap logo area on narrow layouts */
@media (max-width: 480px) {
    .hamburger { margin: 6px; width: 36px; height: 26px; }
}/* Responsive hamburger menu styles
   Overrides are minimal and scoped to avoid breaking existing layout.
*/

.menu-section {
    position: relative;
}

/* Hamburger button (hidden on large screens) */
.hamburger {
    display: none;
    position: relative;
    width: 40px;
    height: 30px;
    padding: 8px;
    margin: 8px;
    border: 0;
    background: transparent;
    cursor: pointer;
    z-index: 50;
}

/* Hamburger inner bars */
.hamburger-box {
    display: inline-block;
    width: 100%;
    height: 100%;
    position: relative;
}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 100%;
    height: 3px;
    background-color: #222;
    display: block;
    position: absolute;
    left: 0;
    transition: transform 0.25s ease, top 0.25s ease, opacity 0.25s ease;
}
.hamburger-inner {
    top: 50%;
    transform: translateY(-50%);
}
.hamburger-inner::before {
    content: "";
    top: -10px;
}
.hamburger-inner::after {
    content: "";
    top: 10px;
}

/* Transform to X when open */
.menu-section.open .hamburger-inner {
    transform: rotate(45deg);
}
.menu-section.open .hamburger-inner::before {
    top: 0;
    transform: rotate(90deg);
}
.menu-section.open .hamburger-inner::after {
    top: 0;
    opacity: 0;
}

/* Menu list base */
.menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Desktop: keep existing horizontal menu if any */
@media (min-width: 801px) {
    .hamburger { display: none !important; }
    /* Ensure menu-list displays as originally intended on desktop */
    .menu-list { display: block; }
}

/* Mobile: collapse menu behind hamburger */
@media (max-width: 800px) {
    .hamburger { display: inline-block; }

    /* Hide the menu by default on mobile */
    .menu-list {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        z-index: 40;
        box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    }

    /* Show menu when section has .open */
    .menu-section.open .menu-list {
        display: block;
    }

    .menu-list li {
        border-bottom: 1px solid #eee;
    }

    .menu-list li a {
        display: block;
        padding: 12px 16px;
        color: #222;
        text-decoration: none;
    }

    .menu-list li a:hover {
        background: #f5f5f5;
    }
}

/* Small adjustments so the button doesn't overlap logo area on narrow layouts */
@media (max-width: 480px) {
    .hamburger { margin: 6px; width: 36px; height: 26px; }
}