/* Ported from murahno 3 MenuBtn.css */
.menu-toggle {
    position: fixed;
    top: 2.15rem;
    left: 7.5rem;
    width: 12rem;
    height: 3rem;
    background: rgba(242, 237, 230, 0.75);
    backdrop-filter: blur(10px);
    border-radius: 8rem;
    transition: opacity 0.5s cubic-bezier(0.65, 0, 0.076, 1);
    cursor: pointer;
    z-index: 1000;
    padding: 0.15rem;
    opacity: 1;
    display: block;
    /* Ensure visibility */
}

/* Ocultar botón de menú cuando está abierto o animando */
.menu-toggle.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Móvil: dos círculos — trasero #BDB6AE, frontal #1F1D1D, icono SVG blanco */
@media (max-width: 1000px) {

    /* Back circle: light beige ring */
    .menu-toggle {
        position: fixed;
        top: 1rem;
        right: 1rem;
        left: auto;
        bottom: auto;
        transform: none;
        width: 3.2rem;
        height: 3.2rem;
        border-radius: 50%;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #BDB6AE;
        z-index: 1000;
    }

    /* Front circle: dark, slightly smaller */
    .menu-toggle-icon {
        position: absolute !important;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 2.7rem;
        height: 2.7rem;
        border-radius: 50%;
        background: #1F1D1D !important;
        background-color: #1F1D1D !important;
        border: none;
        z-index: 10;
    }

    .menu-toggle:hover .menu-toggle-icon {
        width: 2.7rem;
        border-radius: 50%;
    }

    /* Hide desktop hamburger and label */
    .desktop-hamburger {
        display: none !important;
    }

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

    /* White SVG icon centered over the dark circle */
    .mobile-menu-icon {
        display: block !important;
        width: 1.4rem;
        height: 1.4rem;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 20;
        color: #ffffff;
        transition: transform 500ms ease-in-out;
    }

    /* SVG rotation transition */
    .menu-toggle-svg {
        transition: transform 500ms ease-in-out;
    }

    /* Opened state */
    .menu-toggle.opened {
        z-index: 1001;
    }

    .menu-toggle.opened .menu-toggle-svg {
        transform: rotate(-45deg);
    }

    /* Stroke-dash animation: hamburger → X */
    .menu-path-main {
        stroke-dasharray: 12 63;
        stroke-dashoffset: 0;
        transition: stroke-dasharray 500ms ease-in-out,
            stroke-dashoffset 500ms ease-in-out;
    }

    .menu-toggle.opened .menu-path-main {
        stroke-dasharray: 20 300;
        stroke-dashoffset: -32.42px;
    }
}

.menu-copy {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-left: 1.25rem;
    color: var(--base-450);
    transition: all 0.5s cubic-bezier(0.65, 0, 0.076, 1);
    z-index: 15;
}

.menu-copy p {
    color: var(--base-500);
    font-family: "Instrument Sans", sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: color 0.5s cubic-bezier(0.65, 0, 0.076, 1);
    margin: 0;
    margin: 0;
    /* Reset default p margin */
}

/* Default state (Desktop): Hide mobile icon */
.mobile-menu-icon {
    display: none;
}

/* Desktop only: sliding circle inside pill button */
@media (min-width: 1001px) {
    .menu-toggle-icon {
        position: absolute;
        top: 3px;
        left: 3px;
        width: calc(3rem - 6px);
        height: calc(3rem - 6px);
        border-radius: 100%;
        background-color: var(--base-450);
        transition: all 0.5s cubic-bezier(0.65, 0, 0.076, 1);
        z-index: 10;
    }

    /* Efecto hover: expandir el círculo */
    .menu-toggle:hover .menu-toggle-icon {
        width: calc(100% - 6px);
        border-radius: 8rem;
    }
}

/* Efecto hover: cambiar color del texto */
.menu-toggle:hover .menu-copy p {
    color: var(--base-100);
}

/* Hamburger posicionado relativo al botón principal, no al icono */
.hamburger {
    position: absolute;
    top: 50%;
    left: calc(3px + (3rem - 6px) / 2);
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20;
    transition: none;
    flex-direction: column;
    /* Ensure bars stack */
    gap: 0;
    /* Reset gap */
}

.menu-toggle:hover .hamburger,
.menu-toggle.opened .hamburger {
    opacity: 1;
}

/* Styling for menu-bar to match .menu-bar */
.hamburger .menu-bar {
    position: absolute;
    width: 15px;
    height: 1.5px;
    background: var(--base-100);
    transition: all 250ms ease-out;
}

.hamburger .menu-bar:nth-child(1) {
    transform: translateY(-3px);
}

.hamburger .menu-bar:nth-child(2) {
    transform: translateY(3px);
}

/* Open state handled by JS usually adding a class or animating style, 
   but nav.js might need updates if it doesn't toggle classes. 
   Assuming nav.js handles close button separately. */

/* Close Button (X in circle) - Ported styles */
.menu-close-btn {
    position: fixed;
    top: 2rem;
    right: 2rem;
    width: 3rem;
    height: 3rem;
    cursor: pointer;
    z-index: 1001;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s cubic-bezier(0.65, 0, 0.076, 1);
}

.menu-close-btn.visible {
    opacity: 1;
    pointer-events: auto;
}

/* Mobile: position close button where hamburger was */
@media (max-width: 1000px) {
    .menu-close-btn {
        top: 1rem;
        right: 1rem;
    }
}

.close-circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--base-100);
    transition: all 0.5s cubic-bezier(0.65, 0, 0.076, 1);
}

.close-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--base-500);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: color 0.5s cubic-bezier(0.65, 0, 0.076, 1);
}

.menu-close-btn:hover .close-circle {
    background-color: var(--base-450);
}

.menu-close-btn:hover .close-icon {
    color: var(--base-100);
}