/**
 * Edison House Menu — Stylesheet
 * Author: Erick R. | https://www.stagemarketing.com/
 *
 * Color tokens are injected as CSS custom properties by er-menu.js
 * on DOMContentLoaded, so values here serve only as hardcoded fallbacks.
 */

:root {
    --er-m-bg:           rgba(0, 0, 0, 0.80);
    --er-m-accent:       #FF8DA1;
    --er-m-active-text:  #000000;
    --er-m-default-text: #ffffff;
    --er-m-logo-height:  46px;

    /* Sizing & spacing */
    --er-m-panel-w:      260px;
    --er-m-radius:       2px;

    /* Timing — one place to tweak the whole motion system */
    --er-m-ease:         cubic-bezier(0.65, 0, 0.15, 1);
    --er-m-dur:          0.55s;
}

/* ─── Trigger (hamburger) ─────────────────────────────────────────────────── */

.er-m-trigger {
    position: fixed;
    top:      32px;
    left:     32px;
    z-index:  2147483647;
    display:  flex;
    flex-direction: column;
    justify-content: space-between;
    width:    26px;
    height:   18px;
    padding:  0;
    background: transparent;
    border:   none;
    cursor:   pointer;
    outline:  none;
    transition: opacity 0.3s ease;
}

.er-m-bar {
    display:          block;
    width:            100%;
    height:           2px;
    background:       #FF8DA1;
    border-radius:    1px;
    transition:       transform var(--er-m-dur) var(--er-m-ease),
                      opacity   0.3s ease,
                      width     0.3s ease,
                      background 0.2s ease;
    transform-origin: center;
}

/* Hover state for hamburger/X trigger */
.er-m-trigger:hover .er-m-bar {
    background: #FFFFFF;
}

/* Hide hamburger when panel is open (close button handles closing) */
.er-m-panel-open .er-m-trigger {
    opacity: 0;
    pointer-events: none;
}

/* Morphs into X when panel is open */
.er-m-panel-open .er-m-trigger .er-m-bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.er-m-panel-open .er-m-trigger .er-m-bar:nth-child(2) {
    opacity: 0;
    width:   0;
}
.er-m-panel-open .er-m-trigger .er-m-bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* ─── Trigger logo (next to hamburger) ────────────────────────────────────── */

.er-m-trigger-logo {
    position:   fixed;
    top:        22px;
    left:       70px;
    z-index:    2147483647;
    display:    block;
    line-height: 0;
    text-decoration: none;
    transition: opacity 0.35s ease;
}

.er-m-trigger-logo img {
    max-width:  50px;
    height:     auto;
    display:    block;
}

/* Fade out when panel opens — panel has its own logo */
.er-m-panel-open .er-m-trigger-logo {
    opacity:        0;
    pointer-events: none;
}

/* ─── Overlay ─────────────────────────────────────────────────────────────── */

.er-m-overlay {
    position:   fixed;
    inset:      0;
    z-index:    2147483646;
    background: rgba(0, 0, 0, 0);
    pointer-events: none;
    transition: background 0.5s ease;
}

.er-m-panel-open .er-m-overlay {
    background:     rgba(0, 0, 0, 0.35);
    pointer-events: auto;
}

/* ─── Panel ───────────────────────────────────────────────────────────────── */

.er-m-panel {
    position:   fixed;
    top:        0;
    left:       0;
    bottom:     0;
    z-index:    2147483647;
    width:      var(--er-m-panel-w);
    background: var(--er-m-bg);

    /* Frosted-glass depth on browsers that support it */
    backdrop-filter:         blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);

    display:        flex;
    flex-direction: column;
    overflow:       hidden;

    /* Slide in from left with a subtle clip-path reveal */
    transform:   translateX(-100%);
    clip-path:   inset(0 100% 0 0);
    visibility:  hidden;
    transition:
        transform  var(--er-m-dur) var(--er-m-ease),
        clip-path  var(--er-m-dur) var(--er-m-ease),
        visibility 0s linear var(--er-m-dur);
}

.er-m-panel-open .er-m-panel {
    transform:   translateX(0);
    clip-path:   inset(0 0% 0 0);
    visibility:  visible;
    transition:
        transform  var(--er-m-dur) var(--er-m-ease),
        clip-path  var(--er-m-dur) var(--er-m-ease),
        visibility 0s linear 0s;
}

/* ─── Panel header (logo + close) ────────────────────────────────────────── */

.er-m-panel-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         20px 20px 16px;
    flex-shrink:     0;
}

.er-m-logo-wrap {
    line-height: 0;
}

.er-m-logo-link {
    display: inline-block;
    line-height: 0;
    text-decoration: none;
}

.er-m-logo-img {
    max-height:   var(--er-m-logo-height);
    width:        auto;
	margin-top: 20px;
    margin-left: 10px;
    object-fit:   contain;
    /* Fade in alongside the panel */
    opacity:      0;
    transform:    translateX(-10px);
    transition:
        opacity   0.4s ease 0.25s,
        transform 0.4s var(--er-m-ease) 0.25s;
}

.er-m-panel-open .er-m-logo-img {
    opacity:   1;
    transform: translateX(0);
}

/* ─── Close button ────────────────────────────────────────────────────────── */

.er-m-close-btn {
    position:   relative;
    width:      28px;
    height:     28px;
    padding:    0;
    background: transparent;
    border:     none;
    cursor:     pointer;
    flex-shrink: 0;
    margin-left: auto;
    /* Shared fade-in with logo */
    opacity:    0;
    transition: opacity 0.4s ease 0.2s;
}

.er-m-panel-open .er-m-close-btn {
    opacity: 1;
}

.er-m-close-icon,
.er-m-close-icon::before {
    position:         absolute;
    top:              50%;
    left:             50%;
    width:            18px;
    height:           1.5px;
    background:       #FF8DA1;
    border-radius:    1px;
    transform-origin: center;
    transition:       background 0.2s ease;
}

.er-m-close-icon {
    transform: translate(-50%, -50%) rotate(45deg);
}
.er-m-close-icon::before {
    content:   '';
    transform: translate(-50%, -50%) rotate(90deg);
}

.er-m-close-btn:hover .er-m-close-icon,
.er-m-close-btn:hover .er-m-close-icon::before {
    background: #FFFFFF;
}

/* ─── Navigation list ─────────────────────────────────────────────────────── */

.er-m-nav-wrap {
    flex:     1;
    overflow-y: auto;
    padding:  0 0 24px;
    /* Hide scrollbar visually but keep functionality */
    scrollbar-width: none;
}
.er-m-nav-wrap::-webkit-scrollbar { display: none; }

.er-m-nav-list {
    list-style: none;
    margin:     0;
    padding:    0;
}

/* ─── Nav items — stagger in on open ─────────────────────────────────────── */

.er-m-nav-item {
    opacity:   0;
    transform: translateX(-16px);
    transition:
        opacity   0.4s ease,
        transform 0.4s var(--er-m-ease);
}

.er-m-panel-open .er-m-nav-item {
    opacity:   1;
    transform: translateX(0);
}

/*
 * Each item is delayed in JS via a CSS custom property --er-m-i
 * set on the element itself (0-based index). The base delay accounts
 * for the panel's own opening animation.
 */
.er-m-panel-open .er-m-nav-item {
    transition-delay: calc(0.18s + var(--er-m-i, 0) * 0.055s);
}

/* ─── Nav links ───────────────────────────────────────────────────────────── */

.er-m-nav-link {
    display:         block;
    padding:         12px 20px;
    font-family:     'Futura PT','Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size:       18px;
    font-weight:     800;
    letter-spacing:  0.12em;
    text-transform:  uppercase;
    text-decoration: none;
    color:           var(--er-m-default-text);
    background:      transparent;
    border-radius:   var(--er-m-radius);
    margin:          2px 12px;
    transition:
        color      0.25s ease,
        background 0.25s ease;
}

/* Hover state — accent text, transparent background */
.er-m-nav-link:hover {
    color:      var(--er-m-accent);
    background: transparent;
}

/* Active / current page — accent fill, dark text */
.er-m-nav-link[data-active="true"],
.er-m-nav-link.er-m-active {
    color:      var(--er-m-active-text);
    background: var(--er-m-accent);
}

.er-m-nav-link[data-active="true"]:hover,
.er-m-nav-link.er-m-active:hover {
    color:      var(--er-m-active-text);
    background: var(--er-m-accent);
    opacity:    0.88;
}
/* ─── Responsive — Tablets ──────────────────────────────────── */
@media (max-width: 874px) {
    .er-m-nav-link {
        padding:   12px 18px;
        font-size: 14px;
    }
}

/* ─── Responsive — tighten up on mobile ──────────────────────────────────── */

@media (max-width: 480px) {
    :root {
        --er-m-panel-w: 240px;
    }

    .er-m-trigger {
        top:  16px;
        left: 16px;
    }

    .er-m-trigger-logo {
        top:  10px;
        left: 52px;
    }

    .er-m-trigger-logo img {
        max-width: 40px;
    }

    .er-m-nav-link {
        padding:   10px 12px;
        font-size: 12px;
    }
}