/* ══════════════════════════════════════════════════════
   SERENITY — SIDE HAMBURGER MENU
   Scoped under .shm-wrap to beat any theme CSS
══════════════════════════════════════════════════════ */

/* ── Hamburger Button — fixed black square ── */
.shm-wrap .shm-btn {
    position: fixed !important;
    top: 120px !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    width: 72px !important;
    height: 72px !important;
    background: #111111 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 7px !important;
    cursor: pointer !important;
    z-index: 99999 !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    overflow: visible !important;
}

/* Left side variant */
.shm-wrap .shm-btn.shm-btn-left {
    left: 0 !important;
    right: auto !important;
}

/* ── Bars — the 3 white lines ── */
.shm-wrap .shm-btn .shm-bar {
    display: block !important;
    width: 26px !important;
    height: 2px !important;
    min-width: 26px !important;
    max-width: 26px !important;
    min-height: 2px !important;
    max-height: 2px !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-radius: 1px !important;
    border: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    position: static !important;
    float: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform-origin: center !important;
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1),
                opacity 0.4s ease !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

/* Morph to X */
.shm-wrap .shm-btn.active .shm-bar:nth-child(1) {
    transform: translateY(9px) rotate(45deg) !important;
}
.shm-wrap .shm-btn.active .shm-bar:nth-child(2) {
    opacity: 0 !important;
    transform: scaleX(0) !important;
}
.shm-wrap .shm-btn.active .shm-bar:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg) !important;
}

/* ── Dimmer ── */
.shm-wrap .shm-dimmer {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.55) !important;
    z-index: 99997 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.55s ease !important;
    display: block !important;
}

.shm-wrap .shm-dimmer.show {
    opacity: 1 !important;
    pointer-events: all !important;
}

/* ── Slide Panel ── */
.shm-wrap .shm-panel {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    width: 32% !important;
    min-width: 320px !important;
    max-width: 500px !important;
    height: 100vh !important;
    background: #111111 !important;
    z-index: 99998 !important;
    transform: translateX(100%) !important;
    transition: transform 0.55s cubic-bezier(0.77, 0, 0.175, 1) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 90px 50px 60px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
}

.shm-wrap .shm-panel.shm-panel-left {
    left: 0 !important;
    right: auto !important;
    transform: translateX(-100%) !important;
}

.shm-wrap .shm-panel.open {
    transform: translateX(0) !important;
}

/* ── Nav List ── */
.shm-wrap .shm-panel .shm-nav {
    display: block !important;
    margin: 0 0 40px !important;
    padding: 0 !important;
}

.shm-wrap .shm-panel .shm-nav-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

.shm-wrap .shm-panel .shm-nav-list li {
    display: block !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
    list-style: none !important;
    float: none !important;
}

/* Kill any theme bullet pseudo-elements */
.shm-wrap .shm-panel .shm-nav-list li::before,
.shm-wrap .shm-panel .shm-nav-list li::after {
    display: none !important;
    content: none !important;
}

.shm-wrap .shm-panel .shm-nav-list li a {
    display: inline-block !important;
    font-size: clamp(1.6rem, 2.5vw, 2.4rem) !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    letter-spacing: -0.01em !important;
    line-height: 1.45 !important;
    font-family: inherit !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    /* Slide-in animation base state */
    transform: translateX(30px);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1),
                opacity   0.4s ease,
                color     0.3s ease;
}

.shm-wrap .shm-panel .shm-nav-list li a:hover,
.shm-wrap .shm-panel .shm-nav-list li.active a {
    color: #7c4dff !important;
}

/* Staggered slide-in when panel opens */
.shm-wrap .shm-panel.open .shm-nav-list li:nth-child(1) a { transition-delay: 0.12s; transform: translateX(0); opacity: 1; }
.shm-wrap .shm-panel.open .shm-nav-list li:nth-child(2) a { transition-delay: 0.18s; transform: translateX(0); opacity: 1; }
.shm-wrap .shm-panel.open .shm-nav-list li:nth-child(3) a { transition-delay: 0.24s; transform: translateX(0); opacity: 1; }
.shm-wrap .shm-panel.open .shm-nav-list li:nth-child(4) a { transition-delay: 0.30s; transform: translateX(0); opacity: 1; }
.shm-wrap .shm-panel.open .shm-nav-list li:nth-child(5) a { transition-delay: 0.36s; transform: translateX(0); opacity: 1; }
.shm-wrap .shm-panel.open .shm-nav-list li:nth-child(6) a { transition-delay: 0.42s; transform: translateX(0); opacity: 1; }
.shm-wrap .shm-panel.open .shm-nav-list li:nth-child(7) a { transition-delay: 0.48s; transform: translateX(0); opacity: 1; }
.shm-wrap .shm-panel.open .shm-nav-list li:nth-child(8) a { transition-delay: 0.54s; transform: translateX(0); opacity: 1; }

/* Left panel - items slide from left */
.shm-wrap .shm-panel.shm-panel-left .shm-nav-list li a {
    transform: translateX(-30px);
}
.shm-wrap .shm-panel.shm-panel-left.open .shm-nav-list li a {
    transform: translateX(0);
}

/* ── Divider ── */
.shm-wrap .shm-panel .shm-divider {
    display: block !important;
    width: 100% !important;
    height: 1px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    margin: 0 0 28px !important;
    padding: 0 !important;
    border: none !important;
    flex-shrink: 0 !important;
}

/* ── Contact Block ── */
.shm-wrap .shm-panel .shm-contact {
    display: block !important;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease 0.50s, transform 0.4s ease 0.50s;
    flex-shrink: 0 !important;
}

.shm-wrap .shm-panel.open .shm-contact {
    opacity: 1;
    transform: translateY(0);
}

/* Each contact row on its OWN LINE */
.shm-wrap .shm-panel .shm-contact-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    color: #cccccc !important;
    text-decoration: none !important;
    font-size: 0.95rem !important;
    font-family: inherit !important;
    line-height: 1.4 !important;
    transition: color 0.3s ease !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: none !important;
    border: none !important;
    float: none !important;
}

.shm-wrap .shm-panel .shm-contact-item:hover {
    color: #7c4dff !important;
}

/* SVG icons — locked to 18px, cannot be overridden by theme */
.shm-wrap .shm-panel .shm-contact-item svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    flex-shrink: 0 !important;
    opacity: 0.75;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .shm-wrap .shm-panel {
        width: 85vw !important;
        min-width: 0 !important;
        max-width: 380px !important;
        padding: 70px 32px 50px !important;
    }
    .shm-wrap .shm-btn {
        width: 58px !important;
        height: 58px !important;
    }
    .shm-wrap .shm-panel .shm-nav-list li a {
        font-size: clamp(1.3rem, 5vw, 1.8rem) !important;
    }
}

@media (max-width: 480px) {
    .shm-wrap .shm-panel {
        width: 100vw !important;
        max-width: 100% !important;
        padding: 60px 24px 40px !important;
    }
    .shm-wrap .shm-btn {
        width: 50px !important;
        height: 50px !important;
    }
}

/* ══════════════════════════════════════════════════════
   ELEMENTOR EDITOR — show inline for preview only
══════════════════════════════════════════════════════ */

.elementor-editor-active .shm-wrap .shm-btn {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    margin-bottom: 16px !important;
    display: inline-flex !important;
    z-index: 10 !important;
}

.elementor-editor-active .shm-wrap .shm-panel {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 280px !important;
    padding: 40px 30px !important;
    z-index: 10 !important;
    transition: none !important;
}

.elementor-editor-active .shm-wrap .shm-panel .shm-nav-list li a {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
}

.elementor-editor-active .shm-wrap .shm-panel .shm-contact {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

.elementor-editor-active .shm-wrap .shm-dimmer {
    display: none !important;
}

/* ══════════════════════════════════════════════════════
   ACCESSIBILITY
══════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .shm-wrap .shm-btn .shm-bar,
    .shm-wrap .shm-panel,
    .shm-wrap .shm-dimmer,
    .shm-wrap .shm-panel .shm-nav-list li a,
    .shm-wrap .shm-panel .shm-contact {
        transition: none !important;
        animation: none !important;
    }
    .shm-wrap .shm-panel .shm-nav-list li a {
        transform: none !important;
        opacity: 1 !important;
    }
}