/* ====================================================
   JBL Floating Side Menu — Frontend Styles v1.1
   All colour/size values driven by CSS custom properties
   set as an inline :root block via wp_enqueue_scripts.
==================================================== */

/* ── box-sizing scope only — do NOT reset padding/margin via wildcard.
      #jbl-fm-nav * has specificity (1,0,0) which overrides every class
      rule like .jbl-fm-logo (0,1,0), silently killing spacing. ── */
#jbl-fm-nav,
#jbl-fm-nav *,
#jbl-fm-burger,
#jbl-fm-burger * {
    box-sizing: border-box;
}
/* Zero only list chrome — nothing else */
#jbl-fm-nav ul,
#jbl-fm-nav li {
    margin:  0;
    padding: 0;
    list-style: none;
}

/* ══════════════════════════════════════════════
   OVERLAY  (mobile backdrop)
══════════════════════════════════════════════ */
.jbl-fm-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: calc(var(--jbl-z) - 1);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity var(--jbl-anim) ease;
}
.jbl-fm-overlay.active {
    display: block;
    opacity: 1;
}

/* ══════════════════════════════════════════════
   NAV BAR
══════════════════════════════════════════════ */
#jbl-fm-nav {
    position: fixed;
    left:   0;
    top:    0;
    width:  var(--jbl-width);
    height: 100vh;
    height: 100dvh;
    background: var(--jbl-bg);
    z-index: var(--jbl-z);
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: var(--jbl-shadow);
    border-radius: 0 var(--jbl-radius) var(--jbl-radius) 0;
    overflow: visible;
    animation: jbl-nav-in .45s cubic-bezier(.22,1,.36,1) both;
}
@keyframes jbl-nav-in {
    from { transform: translateX(-100%); opacity: 0; }
    to   { transform: translateX(0);     opacity: 1; }
}

/* ══════════════════════════════════════════════
   LOGO
══════════════════════════════════════════════ */
.jbl-fm-logo {
    width: 100%;
    padding: 14px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(255,255,255,.08);
    flex-shrink: 0;
    background: var(--jbl-bg);
    position: relative;
    z-index: 1;
}
.jbl-fm-logo img {
    width:  var(--jbl-logo-size);
    height: var(--jbl-logo-size);
    object-fit: contain;
    display: block;
}

/* ══════════════════════════════════════════════
   SCROLLABLE ITEM LIST
   NOTE: overflow-y:auto forces overflow-x to also
   clip in all browsers — tooltips therefore cannot
   live inside this container. They are managed by
   a body-level #jbl-fm-tt element in JS instead.
══════════════════════════════════════════════ */
.jbl-fm-list {
    flex: 1;
    width: 100%;
    list-style: none;
    padding: 8px 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.jbl-fm-list::-webkit-scrollbar { display: none; }

.jbl-fm-divider {
    height: 1px;
    background: var(--jbl-sep);
    margin: 6px 12px;
    list-style: none;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════
   MENU ITEM + LINK
══════════════════════════════════════════════ */
.jbl-fm-item {
    position: relative;
    width: 100%;
    list-style: none;
    animation: jbl-item-in .4s cubic-bezier(.22,1,.36,1) both;
}
.jbl-fm-item:nth-child(1)    { animation-delay: .04s; }
.jbl-fm-item:nth-child(2)    { animation-delay: .08s; }
.jbl-fm-item:nth-child(3)    { animation-delay: .12s; }
.jbl-fm-item:nth-child(4)    { animation-delay: .16s; }
.jbl-fm-item:nth-child(5)    { animation-delay: .20s; }
.jbl-fm-item:nth-child(6)    { animation-delay: .24s; }
.jbl-fm-item:nth-child(7)    { animation-delay: .28s; }
.jbl-fm-item:nth-child(8)    { animation-delay: .32s; }
.jbl-fm-item:nth-child(9)    { animation-delay: .36s; }
.jbl-fm-item:nth-child(10)   { animation-delay: .40s; }
.jbl-fm-item:nth-child(n+11) { animation-delay: .44s; }

@keyframes jbl-item-in {
    from { opacity: 0; transform: translateX(-12px) scale(.92); }
    to   { opacity: 1; transform: translateX(0)     scale(1);   }
}

.jbl-fm-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 11px 0;
    text-decoration: none;
    color: inherit;
    position: relative;
    outline: none;
    cursor: pointer;
    transition: background var(--jbl-anim) ease;
}

/* Left accent bar */
.jbl-fm-link::before {
    content: '';
    position: absolute;
    left: 0;
    top:  50%;
    transform: translateY(-50%) scaleY(0);
    width:  3px;
    height: 60%;
    border-radius: 0 3px 3px 0;
    background: var(--jbl-accent);
    transition: transform .2s cubic-bezier(.34,1.56,.64,1);
    pointer-events: none;
}
.jbl-fm-link:hover::before,
.jbl-fm-link:focus-visible::before,
.jbl-fm-item.active > .jbl-fm-link::before {
    transform: translateY(-50%) scaleY(1);
}
.jbl-fm-link:hover,
.jbl-fm-link:focus-visible {
    background: rgba(255,255,255,.06);
}
.jbl-fm-item.active > .jbl-fm-link {
    background: rgba(255,255,255,.08);
}

/* Icon image */
.jbl-fm-icon {
    width:  var(--jbl-icon-size);
    height: var(--jbl-icon-size);
    object-fit: contain;
    display: block;
    flex-shrink: 0;
    transition: transform .2s cubic-bezier(.34,1.56,.64,1), filter .2s ease;
    filter: brightness(.82);
    pointer-events: none;
}
.jbl-fm-link:hover .jbl-fm-icon,
.jbl-fm-link:focus-visible .jbl-fm-icon {
    transform: scale(1.14);
    filter: brightness(1);
}
.jbl-fm-icon-placeholder {
    width:  var(--jbl-icon-size);
    height: var(--jbl-icon-size);
    background: rgba(255,255,255,.12);
    border-radius: 6px;
    flex-shrink: 0;
}

/*
 * Tooltip label — hidden span; JS reads text from
 * here and displays it via #jbl-fm-tt at body level.
 */
.jbl-fm-tooltip { display: none; }

/* ══════════════════════════════════════════════
   GLOBAL TOOLTIP  (#jbl-fm-tt)
   Single element appended to <body> by JS.
   position:fixed — never clipped by parent overflow.
   
   IMPORTANT: opacity is controlled ONLY by CSS classes
   (.tt-measuring hides via visibility, .tt-visible shows).
   NEVER set opacity via inline JS style — it overrides classes.
══════════════════════════════════════════════ */
#jbl-fm-tt {
    /* Layout */
    position:   fixed;
    display:    none;           /* JS calls .show() then adds classes */
    align-items: center;
    gap: 6px;

    /* Bubble appearance — white card style matching the mockup */
    background:    #ffffff;
    color:         #1a1a1a;
    padding:       10px 18px;
    border-radius: 10px;
    box-shadow:    0 6px 24px rgba(0,0,0,.22), 0 1px 4px rgba(0,0,0,.12);
    border:        1px solid rgba(0,0,0,.06);

    /* Typography */
    font-family:   -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size:     13px;
    font-weight:   700;
    white-space:   nowrap;
    letter-spacing: .2px;

    /* Stacking */
    z-index:        calc(var(--jbl-z) + 20);
    pointer-events: none;

    /* Animation start state */
    opacity:   0;
    transform: translateX(-10px) scale(0.92);
    transform-origin: left center;
    transition:
        opacity   .18s ease,
        transform .24s cubic-bezier(.34, 1.56, .64, 1);
}

/* Measuring phase: element is visible in DOM for size calculation
   but hidden from user via visibility (does NOT affect transitions) */
#jbl-fm-tt.tt-measuring {
    visibility: hidden;
}

/* Fully visible + spring animation */
#jbl-fm-tt.tt-visible {
    opacity:   1;
    transform: translateX(0) scale(1);
}

/* Left-pointing tail (arrow) */
#jbl-fm-tt::before {
    content:  '';
    position: absolute;
    right:    100%;
    top:      50%;
    transform: translateY(-50%);
    /* Triangle pointing left */
    border:       8px solid transparent;
    border-right: 10px solid #ffffff;
    filter: drop-shadow(-2px 0 2px rgba(0,0,0,.08));
}

.jbl-fm-tt-label {
    display: block;
}
.jbl-fm-tt-sub-arrow {
    font-size:   16px;
    opacity:     .5;
    line-height: 1;
    margin-left: 2px;
}

/* Mobile: tooltip never shown */
@media (max-width: 768px) {
    #jbl-fm-tt { display: none !important; }
}

/* ══════════════════════════════════════════════
   SUBMENU  (flyout)
   Also position:fixed + JS-positioned so it
   escapes the overflow:hidden list container.
══════════════════════════════════════════════ */
.jbl-fm-submenu {
    position: fixed;
    top:  0;
    left: 0;
    min-width: 190px;
    background: var(--jbl-sub-bg);
    border-radius: 8px;
    list-style: none;
    padding: 6px 0;
    box-shadow: 0 8px 28px rgba(0,0,0,.35);
    z-index: calc(var(--jbl-z) + 10);
    opacity: 0;
    transform: translateX(-8px) scaleX(.95);
    transform-origin: left center;
    pointer-events: none;
    transition: opacity .18s ease, transform .22s cubic-bezier(.34,1.56,.64,1);
}
.jbl-fm-item.has-submenu:hover   .jbl-fm-submenu,
.jbl-fm-item.has-submenu.sub-open .jbl-fm-submenu {
    opacity: 1;
    transform: translateX(0) scaleX(1);
    pointer-events: auto;
}
.jbl-fm-sublink {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    text-decoration: none;
    color: var(--jbl-sub-text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    transition: background .14s, color .14s, padding-left .14s;
}
.jbl-fm-sublink:hover {
    background: rgba(255,255,255,.07);
    color: var(--jbl-sub-hover);
    padding-left: 20px;
}
.jbl-fm-sub-icon {
    width:  20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════
   FOOTER AREA
══════════════════════════════════════════════ */
.jbl-fm-footer {
    width: 100%;
    padding: 10px 0 14px;
    border-top: 1px solid rgba(255,255,255,.09);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    background: var(--jbl-bg);
    position: relative;
    z-index: 2;
}

/* Button — full title text, wraps, fits narrow bar */
.jbl-fm-footer-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width:      calc(var(--jbl-width) - 14px);
    min-height: 32px;
    padding:    5px 6px;
    border-radius: 5px;
    text-decoration: none;
    position: relative;
    overflow: visible;
    transition: filter .15s ease, transform .15s ease;
    flex-shrink: 0;
}
.jbl-fm-footer-btn:hover {
    filter: brightness(1.12);
    transform: scale(1.05);
}
.jbl-fm-footer-btn-label {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size:   9.5px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: rgba(0,0,0,.78);
    text-align: center;
    line-height: 1.3;
    word-break: break-word;
    hyphens: auto;
    pointer-events: none;
    user-select: none;
    width: 100%;
}
.jbl-fm-footer-text {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size:   9px;
    color: rgba(255,255,255,.28);
    text-align:  center;
    padding: 2px 8px 0;
    line-height: 1.45;
    width: 100%;
}

/* ══════════════════════════════════════════════
   BURGER BUTTON
══════════════════════════════════════════════ */
#jbl-fm-burger {
    display: none;
    position: fixed;
    top:  14px;
    left: 14px;
    z-index: calc(var(--jbl-z) + 2);
    width:  44px;
    height: 44px;
    border-radius: 8px;
    background: var(--jbl-bg);
    border: 1.5px solid rgba(255,255,255,.14);
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    box-shadow: 0 2px 14px rgba(0,0,0,.35);
    padding: 0;
    transition: background var(--jbl-anim) ease;
}
#jbl-fm-burger span {
    display: block;
    width:  20px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform .26s ease, opacity .26s ease;
    transform-origin: center;
}
#jbl-fm-burger.open span:nth-child(1) { transform: translateY(7px)  rotate(45deg);  }
#jbl-fm-burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0);           }
#jbl-fm-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ══════════════════════════════════════════════
   MOBILE LABEL  (hidden on desktop, shown in grid)
══════════════════════════════════════════════ */
.jbl-fm-mobile-label {
    display: none; /* hidden on desktop — JS tooltip handles labels */
}

/* ══════════════════════════════════════════════
   MOBILE LAYOUT  —  Full-screen grid overlay
   Completely different from the desktop sidebar.
   Desktop styles are untouched above this block.
══════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Show burger */
    #jbl-fm-burger { display: flex; }

    /* ── Nav: full-screen slide-down overlay ── */
    #jbl-fm-nav {
        /* Full viewport width */
        width:  100vw !important;
        /* Slides up off the top of the screen when closed */
        transform: translateY(-105%);
        transition: transform var(--jbl-anim) cubic-bezier(.4,0,.2,1);
        animation: none;
        border-radius: 0 0 20px 20px;
        align-items: stretch;
        /* Normal block flow inside — not flex column from desktop */
        display: flex;
        flex-direction: column;
        overflow: hidden; /* clip the grid scroll */
        max-height: 100vh;
        max-height: 100dvh;
    }
    #jbl-fm-nav.mobile-open {
        transform: translateY(0);
    }

    /* ── Logo area: sits below the burger ── */
    #jbl-fm-nav .jbl-fm-logo {
        /* burger: top 14 + height 44 + gap 12 = 70px */
        padding-top:    70px !important;
        padding-bottom: 16px !important;
        padding-left:   0 !important;
        justify-content: center;
        border-bottom: 1px solid rgba(255,255,255,.1);
    }
    #jbl-fm-nav .jbl-fm-logo img {
        width:  var(--jbl-mob-logo, 80px) !important;
        height: var(--jbl-mob-logo, 80px) !important;
    }

    /* ── List: becomes a scrollable grid ── */
    .jbl-fm-list {
        display: grid !important;
        grid-template-columns: repeat(var(--jbl-mob-cols, 2), 1fr);
        gap: 10px;
        padding: 16px !important;
        overflow-y: auto;
        overflow-x: hidden;
        flex: 1;
        align-content: start;
    }

    /* ── Dividers make no sense in a grid — hide them ── */
    .jbl-fm-divider { display: none; }

    /* ── Each item: centred card ── */
    .jbl-fm-item {
        animation: none;
        list-style: none;
        /* Reset any desktop position that could interfere */
        position: static;
    }

    /* ── Link: vertical stack — icon on top, label below ── */
    .jbl-fm-link {
        display:        flex !important;
        flex-direction: column;
        align-items:    center;
        justify-content: center;
        gap:    8px;
        padding: var(--jbl-mob-item-pad, 18px) 8px !important;
        background:    var(--jbl-mob-item-bg, #222222);
        border-radius: var(--jbl-mob-item-radius, 12px);
        width:  100%;
        height: 100%;
        text-decoration: none;
        transition: background .15s ease, transform .15s ease;
        /* Remove desktop left-bar accent pseudo */
    }
    .jbl-fm-link::before { display: none !important; }

    .jbl-fm-link:hover,
    .jbl-fm-link:active {
        background: rgba(255,255,255,.12);
        transform: scale(0.97);
    }
    .jbl-fm-item.active > .jbl-fm-link {
        background: rgba(255,255,255,.10);
        outline: 2px solid var(--jbl-accent);
        outline-offset: -2px;
    }

    /* ── Icon: sized from mobile setting ── */
    .jbl-fm-icon {
        width:  var(--jbl-mob-icon, 48px) !important;
        height: var(--jbl-mob-icon, 48px) !important;
        filter: brightness(1) !important;  /* full brightness on mobile */
        transform: none !important;
        flex-shrink: 0;
    }
    .jbl-fm-icon-placeholder {
        width:  var(--jbl-mob-icon, 48px) !important;
        height: var(--jbl-mob-icon, 48px) !important;
    }

    /* ── Label below icon ── */
    .jbl-fm-mobile-label {
        display: block;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        font-size:   var(--jbl-mob-label-size, 11px);
        font-weight: 600;
        color:       var(--jbl-mob-label-color, #ffffff);
        text-align:  center;
        line-height: 1.3;
        word-break:  break-word;
        hyphens:     auto;
        /* Gentle fade-in when the menu opens */
        animation: jbl-label-in .3s ease both;
    }
    @keyframes jbl-label-in {
        from { opacity: 0; transform: translateY(4px); }
        to   { opacity: 1; transform: translateY(0);   }
    }

    /* ── Speech bubble tooltip: hide on mobile ── */
    #jbl-fm-tt { display: none !important; }

    /* ── Submenus: fullscreen inline accordion below items ── */
    .jbl-fm-submenu {
        /* Span the full grid width */
        grid-column: 1 / -1;
        position:  static !important;
        opacity:   1 !important;
        transform: none !important;
        pointer-events: auto;
        box-shadow: none;
        border-radius: 10px;
        background: rgba(255,255,255,.05);
        padding: 6px 0;
        max-height: 0;
        overflow:   hidden;
        transition: max-height var(--jbl-anim) ease !important;
        margin-top: -10px; /* pull flush under parent card */
    }
    /* When has-submenu item tapped, show the item inline after grid row */
    .jbl-fm-item.has-submenu {
        grid-column: auto; /* stays in normal cell */
    }
    .jbl-fm-item.sub-open .jbl-fm-submenu {
        max-height: 800px;
    }
    .jbl-fm-sublink {
        padding: 10px 20px;
        font-size: 14px;
    }

    /* ── Footer: full-width stacked buttons ── */
    .jbl-fm-footer {
        align-items:   stretch;
        padding: 12px 16px 16px;
        gap: 8px;
        border-top: 1px solid rgba(255,255,255,.1);
    }
    .jbl-fm-footer-btn {
        width:   100% !important;
        justify-content: center;
        padding: 12px 16px;
        min-height: 44px;
        border-radius: 8px;
    }
    .jbl-fm-footer-btn-label {
        font-size:      14px !important;
        font-weight:    700;
        text-transform: none;
        letter-spacing: 0;
        text-align:     center;
    }
    .jbl-fm-footer-text {
        text-align: center;
        font-size:  10px;
        padding-top: 4px;
    }
}

/* ══════════════════════════════════════════════
   REDUCE MOTION
══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    #jbl-fm-nav,
    .jbl-fm-item,
    .jbl-fm-link,
    #jbl-fm-tt,
    .jbl-fm-submenu,
    #jbl-fm-burger span {
        animation:  none !important;
        transition: none !important;
    }
}