/*
 * Mobile Accordion Menu – menu.css v2.0.0
 * All selectors are prefixed with #mam- to avoid theme conflicts.
 */

/* ══════════════════════════════════════
   CSS CUSTOM PROPERTIES
══════════════════════════════════════ */
:root {
    --mam-accent:      #a59cf0;
    --mam-accent-dim:  rgba(165,156,240,.15);
    --mam-bg:          #18181f;
    --mam-bg-sub:      rgba(0,0,0,.22);
    --mam-surface:     rgba(255,255,255,.05);
    --mam-surface-hv:  rgba(255,255,255,.09);
    --mam-border:      rgba(255,255,255,.08);
    --mam-border2:     rgba(255,255,255,.15);
    --mam-text-1:      #71ace9;
    --mam-text-2:      #ffffff;
    --mam-text-3:      #ffffff;
    --mam-text-4:      #ffffff;
    --mam-dot:         #ffffff;
    --mam-drawer-w:    450px;
    --mam-ease:        cubic-bezier(.22,1,.36,1);
    --mam-ease-io:     cubic-bezier(.77,0,.175,1);
    --mam-font:        'DM Sans', system-ui, sans-serif;
    --mam-radius:      10px;
    --mam-radius-sm:   8px;
}

/* ══════════════════════════════════════
   BURGER BUTTON
   Fixed position, always on top
══════════════════════════════════════ */
#mam-burger {
    /* position controlled by inline CSS from PHP */
    position:  fixed !important;
    top:       16px  !important;
    z-index:   99990 !important;

    display:         flex !important;
    flex-direction:  column !important;
    align-items:     center !important;
    justify-content: center !important;
    gap:             5px !important;

    width:      44px !important;
    height:     44px !important;
    padding:    0    !important;

       margin-top: 17px;


    border:     1px solid #ffffff;
    border-radius: var(--mam-radius-sm) !important;
    background: rgba(14,14,18,.88) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    cursor:     pointer !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.35) !important;
    transition: background .2s ease, border-color .2s ease !important;
    /* Reset any theme button styles */
    appearance: none !important;
    -webkit-appearance: none !important;
    font-size: 0 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    outline: none !important;
}

#mam-burger:hover {
    background: rgba(24,24,31,.96) !important;
    border-color: #ffffff;
}

#mam-burger:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px !important;
}

/* Bars */
#mam-burger .mam-bar {
    display:       block !important;
    height:        2px   !important;
    background:    #ffffff !important;
    border-radius: 2px !important;
    transform-origin: center center !important;
    transition:
        transform .38s var(--mam-ease-io),
        opacity   .22s ease,
        width     .28s ease !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}

#mam-burger .mam-b1 { width: 18px !important; }
#mam-burger .mam-b2 { width: 12px !important; }
#mam-burger .mam-b3 { width: 18px !important; }

/* Open state → animates to X */
#mam-burger.is-open .mam-b1 { transform: translateY(7px) rotate(45deg)  !important; width: 18px !important; }
#mam-burger.is-open .mam-b2 { opacity: 0 !important; transform: scaleX(0) !important; }
#mam-burger.is-open .mam-b3 { transform: translateY(-7px) rotate(-45deg) !important; width: 18px !important; }

/* ══════════════════════════════════════
   OVERLAY
══════════════════════════════════════ */
#mam-overlay {
    position:       fixed   !important;
    inset:          0       !important;
    z-index:        99991   !important;
    background:     rgba(0,0,0,.62) !important;
    opacity:        0       !important;
    pointer-events: none    !important;
    transition:     opacity .32s ease !important;
    margin:         0       !important;
    padding:        0       !important;
}

#mam-overlay.is-open {
    opacity:        1       !important;
    pointer-events: all     !important;
}

/* ══════════════════════════════════════
   DRAWER
══════════════════════════════════════ */
#mam-drawer {
    position:   fixed !important;
    top:        0     !important;
    right:      0     !important;
    bottom:     0     !important;
    z-index:    99992 !important;
    width:      var(--mam-drawer-w) !important;
    max-width:  92vw  !important;
    height:     100%  !important;
    margin:     0     !important;
    padding:    0     !important;

    display:        flex          !important;
    flex-direction: column        !important;
    background:     var(--mam-bg) !important;
    border-left:    1px solid var(--mam-border) !important;
    overflow:       hidden        !important;

    transform:  translateX(100%) !important;
    transition: transform .4s var(--mam-ease) !important;
    box-shadow: -6px 0 32px rgba(0,0,0,.45) !important;
}

#mam-drawer.is-open {
    transform: translateX(0) !important;
}

/* ── Drawer Header ── */
#mam-drawer .mam-hdr {
    display:         flex !important;
    align-items:     center !important;
    justify-content: space-between !important;
    padding:         0 16px !important;
    height:          60px !important;
    flex-shrink:     0 !important;
    border-bottom:   1px solid var(--mam-border) !important;
    background:      var(--mam-bg) !important;
    box-sizing:      border-box !important;
}

#mam-drawer .mam-brand {
    font-family:     var(--mam-font) !important;
    font-size:       16px !important;
    font-weight:     600  !important;
    color:           var(--mam-text-1) !important;
    text-decoration: none !important;
    letter-spacing:  -.3px !important;
    line-height:     1 !important;
}

#mam-drawer .mam-brand:hover { color: var(--mam-accent) !important; }

#mam-close {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    width:           34px !important;
    height:          34px !important;
    padding:         0 !important;
    border:          1px solid var(--mam-border2) !important;
    border-radius:   var(--mam-radius-sm) !important;
    background:      var(--mam-surface) !important;
    color:           var(--mam-text-3) !important;
    cursor:          pointer !important;
    transition:      background .2s, color .2s !important;
    font-size:       18px !important;
    line-height:     1 !important;
    appearance:      none !important;
    -webkit-appearance: none !important;
    flex-shrink:     0 !important;
}

#mam-close:hover {
    background: var(--mam-surface-hv) !important;
    color:      var(--mam-text-1) !important;
}

/* ── Drawer Scroll Body ── */
#mam-drawer .mam-body {
    flex:       1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding:    6px 0 !important;
    box-sizing: border-box !important;
    /* Custom scrollbar */
    scrollbar-width: thin !important;
    scrollbar-color: var(--mam-dot) transparent !important;
}

#mam-drawer .mam-body::-webkit-scrollbar        { width: 4px; }
#mam-drawer .mam-body::-webkit-scrollbar-track  { background: transparent; }
#mam-drawer .mam-body::-webkit-scrollbar-thumb  { background: var(--mam-dot); border-radius: 2px; }

/* ── Nav list ── */
#mam-drawer .mam-list {
    list-style: none !important;
    margin:     0    !important;
    padding:    0    !important;
    width:      100% !important;
    box-sizing: border-box !important;
}

#mam-drawer .mam-item {
    border-bottom: 1px solid var(--mam-border) !important;
    margin:        0 !important;
    padding:       0 !important;
    list-style:    none !important;
}

/* ── Nav Trigger (accordion button) ── */
#mam-drawer .mam-trigger {
    display:         flex !important;
    align-items:     center !important;
    gap:             10px !important;
    width:           100% !important;
    padding:         14px 16px !important;
    margin:          0 !important;
    border:          none !important;
    border-radius:   0 !important;
    background:      none !important;
    cursor:          pointer !important;
    color:           var(--mam-text-2) !important;
    font-family:     var(--mam-font) !important;
    font-size:       14px !important;
    font-weight:     500 !important;
    text-align:      left !important;
    letter-spacing:  -.1px !important;
    line-height:     1.4 !important;
    box-sizing:      border-box !important;
    transition:      color .2s, background .2s !important;
    appearance:      none !important;
    -webkit-appearance: none !important;
}

#mam-drawer .mam-trigger:hover {
    color:      var(--mam-text-1) !important;
    background: var(--mam-surface) !important;
}

#mam-drawer .mam-trigger.is-open {
    color: #71ace9;
}

/* ── Nav Link (single item) ── */
#mam-drawer .mam-link {
    display:         flex !important;
    align-items:     center !important;
    gap:             10px !important;
    width:           100% !important;
    padding:         14px 16px !important;
    margin:          0 !important;
    border:          none !important;
    border-radius:   0 !important;
    background:      none !important;
    color:           var(--mam-text-2) !important;
    font-family:     var(--mam-font) !important;
    font-size:       14px !important;
    font-weight:     500 !important;
    text-decoration: none !important;
    letter-spacing:  -.1px !important;
    line-height:     1.4 !important;
    box-sizing:      border-box !important;
    transition:      color .2s, background .2s !important;
}

#mam-drawer .mam-link:hover {
    color:      var(--mam-text-1) !important;
    background: var(--mam-surface) !important;
}

/* Shared icon */
#mam-drawer .mam-ico {
    font-size:   19px !important;
    flex-shrink: 0    !important;
    opacity:     .85  !important;
    line-height: 1    !important;
    width:       22px !important;
    text-align:  center !important;
}

/* Label */
#mam-drawer .mam-lbl {
    flex: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Badge */
#mam-drawer .mam-badge {
    flex-shrink:   0 !important;
    font-size:     10px !important;
    font-weight:   700 !important;
    padding:       2px 7px !important;
    border-radius: 5px !important;
    background:    var(--mam-accent-dim) !important;
    color:         var(--mam-accent) !important;
    letter-spacing:.3px !important;
    line-height:   1.6 !important;
    font-family:   var(--mam-font) !important;
}

/* Chevron */
#mam-drawer .mam-chev {
    font-size:    14px !important;
    color:        var(--mam-text-4) !important;
    flex-shrink:  0 !important;
    transition:   transform .32s var(--mam-ease), color .2s !important;
    line-height:  1 !important;
}

#mam-drawer .mam-trigger.is-open .mam-chev {
    transform: rotate(180deg) !important;
    color:     var(--mam-accent) !important;
}

/* ══════════════════════════════════════
   ACCORDION PANEL
══════════════════════════════════════ */
#mam-drawer .mam-panel {
    overflow:   hidden  !important;
    max-height: 0       !important;
    background: var(--mam-bg-sub) !important;
    transition: max-height .38s var(--mam-ease) !important;
    margin:     0 !important;
    padding:    0 !important;
    box-sizing: border-box !important;
}

#mam-drawer .mam-panel.is-open {
    max-height: 320px !important;
}

/* Sub list */
#mam-drawer .mam-sub {
    list-style: none !important;
    margin:     0 !important;
    padding:    4px 0 8px !important;
}

#mam-drawer .mam-sub li {
    list-style:  none !important;
    margin:      0 !important;
    padding:     0 !important;
}

/* Sub link */
#mam-drawer .mam-sublink {
    display:         flex !important;
    align-items:     center !important;
    gap:             10px !important;
    padding:         10px 16px 10px 48px !important;
    margin:          0 !important;
    color:           #ffffff;
    font-family:     var(--mam-font) !important;
    font-size:       13px !important;
    font-weight:     400 !important;
    text-decoration: none !important;
    line-height:     1.4 !important;
    box-sizing:      border-box !important;
    transition:      color .2s, background .2s !important;
      text-transform: uppercase;

}

#mam-drawer .mam-sublink:hover {
    color:      var(--mam-text-2) !important;
    background: var(--mam-surface) !important;
}

/* Dot */
#mam-drawer .mam-dot {
    display:       block !important;
    width:         5px !important;
    height:        5px !important;
    border-radius: 50% !important;
    background:    var(--mam-dot) !important;
    flex-shrink:   0 !important;
    transition:    background .2s !important;
}

#mam-drawer .mam-sublink:hover .mam-dot {
    background: var(--mam-accent) !important;
}

/* ══════════════════════════════════════
   DRAWER FOOTER
══════════════════════════════════════ */
#mam-drawer .mam-foot {
    flex-shrink:  0 !important;
    padding:      12px 16px 28px !important;
    border-top:   1px solid var(--mam-border) !important;
    display:      flex !important;
    flex-direction: column !important;
    gap:          2px !important;
    box-sizing:   border-box !important;
}

#mam-drawer .mam-flink {
    display:         flex !important;
    align-items:     center !important;
    gap:             10px !important;
    padding:         10px 0 !important;
    color:           var(--mam-text-4) !important;
    font-family:     var(--mam-font) !important;
    font-size:       13px !important;
    font-weight:     400 !important;
    text-decoration: none !important;
    line-height:     1.4 !important;
    transition:      color .2s !important;
    background:      none !important;
    border:          none !important;
    cursor:          pointer !important;
    box-sizing:      border-box !important;
}

#mam-drawer .mam-flink:hover { color: var(--mam-text-3) !important; }

#mam-drawer .mam-flink .ti {
    font-size: 15px !important;
    line-height: 1 !important;
}