/* ============================================
   Sidebar — Collapsible YouTube-style
   ============================================ */

/* Sidebar header: hamburger + logo (YouTube-style, shown in drawer/mobile) */
.mypod-sidebar__header {
    display: none;
    /* Hidden by default on normal desktop sidebar */
    align-items: center;
    height: 64px;
    /* Match the main header __inner padding exactly */
    padding: 0 var(--mypod-space-md);
    /* Match the main header __left gap exactly */
    gap: var(--mypod-space-md);
    flex-shrink: 0;
}

.mypod-sidebar__header .mypod-header__logo-img {
    /* Inherits same height as main header (24px desktop, 20px mobile) */
    width: auto;
    object-fit: contain;
}

.mypod-sidebar__header .mypod-header__site-name {
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--mypod-color-text);
    white-space: nowrap;
}

.mypod-sidebar {
    position: fixed;
    /* Sidebar starts just below the header (same top as the category bar).
       This means "Home" aligns vertically with the category bar chips row,
       which is the correct YouTube-style layout. */
    top: var(--mypod-header-height, 64px);
    left: 0;
    bottom: 0;
    width: var(--mypod-sidebar-expanded);
    background: var(--mypod-color-bg);
    border-right: none;
    z-index: 950;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width 0.25s cubic-bezier(0.2, 0, 0, 1),
        transform 0.25s cubic-bezier(0.2, 0, 0, 1),
        top 0.2s ease;
}

/* WordPress Admin Bar offsets */
body.admin-bar .mypod-sidebar {
    top: calc(32px + var(--mypod-header-height, 64px));
}

@media screen and (max-width: 782px) {
    body.admin-bar .mypod-sidebar {
        top: calc(46px + var(--mypod-header-height, 64px));
    }
}

.mypod-sidebar__nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--mypod-space-sm) 0;
}

/* Collapsed state */
body.mypod-sidebar-collapsed .mypod-sidebar {
    width: var(--mypod-sidebar-collapsed);
}

/* Sidebar header is only shown on mobile (see @media max-width: 1024px) */
/* On desktop, the main header is always visible so no need for duplicate */

.mypod-sidebar__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mypod-sidebar__item {
    padding: 0 var(--mypod-space-sm);
}

.mypod-sidebar__link {
    display: flex;
    align-items: center;
    gap: var(--mypod-space-lg);
    padding: var(--mypod-space-sm) var(--mypod-space-md);
    border-radius: var(--mypod-radius-lg);
    color: var(--mypod-color-text);
    font-size: 0.875rem;
    font-weight: 400;
    transition: background 0.15s;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
}

.mypod-sidebar__link:hover {
    background: var(--mypod-color-surfaceHover);
}

.mypod-sidebar__item.is-active .mypod-sidebar__link {
    background: var(--mypod-color-bgTertiary);
    font-weight: 500;
}

.mypod-sidebar__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    position: relative;
}

.mypod-sidebar__badge {
    position: absolute;
    top: -6px;
    right: -8px;
    pointer-events: none;
}

.mypod-sidebar__label {
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 0.2s;
}

/* Collapsed: show small labels under icons */
body.mypod-sidebar-collapsed .mypod-sidebar__link {
    flex-direction: column;
    justify-content: center;
    padding: 16px 0 14px;
    gap: 4px;
}

body.mypod-sidebar-collapsed .mypod-sidebar__label {
    opacity: 1;
    width: 100%;
    font-size: 10px;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 0 4px;
}

body.mypod-sidebar-collapsed .mypod-sidebar__item {
    padding: 0 4px;
}

/* ============================================
   Mobile — Drawer Sidebar
   ============================================ */
@media (max-width: 1024px) {
    .mypod-sidebar {
        width: var(--mypod-sidebar-expanded) !important;
        transform: translateX(-100%);
        box-shadow: none;
        z-index: 1100;
        top: 0;
        height: 100vh;
        /* CLOSING animation: ease-in (gentle start, fast exit) */
        transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1);
    }

    .mypod-sidebar.is-open {
        transform: translateX(0);
        box-shadow: var(--mypod-shadow-lg);
        /* OPENING animation: ease-out (fast start, gentle landing) */
        transition: transform 0.25s cubic-bezier(0, 0, 0.2, 1);
    }

    /* Show sidebar header (hamburger + logo) on mobile */
    .mypod-sidebar__header {
        display: flex;
        /* Match the mobile header left gap exactly */
        gap: var(--mypod-space-xs);
    }

    .mypod-sidebar__header .mypod-header__site-name {
        font-size: 1rem;
    }

    .mypod-sidebar__header .mypod-header__logo-img {
        height: 20px;
    }

    /* Always show full labels on drawer, never compact */
    body.mypod-sidebar-collapsed .mypod-sidebar .mypod-sidebar__link {
        flex-direction: row;
        justify-content: flex-start;
        padding: var(--mypod-space-sm) var(--mypod-space-md);
        gap: var(--mypod-space-lg);
    }

    body.mypod-sidebar-collapsed .mypod-sidebar .mypod-sidebar__label {
        font-size: 0.875rem;
        text-align: left;
    }

    body.mypod-sidebar-collapsed .mypod-sidebar .mypod-sidebar__item {
        padding: 0 var(--mypod-space-sm);
    }
}

/* ============================================
   Hidden + Push Sidebar (Drawer Mode on desktop ONLY)
   On mobile, the standard transform-based drawer is used instead.
   ============================================ */
@media (min-width: 1025px) {

    /* When both push-sidebar-enabled and mypod-sidebar-hidden are set,
       the sidebar starts at 0 width (fully hidden) instead of collapsed. */
    body.push-sidebar-enabled.mypod-sidebar-hidden .mypod-sidebar,
    body.push-sidebar-enabled.mypod-sidebar-hidden .mypod-sidebar.is-open {
        width: 0;
        box-shadow: none !important;
        border-right: none !important;
        filter: none !important;
        overflow: hidden;
        will-change: width;
        transition: width 0.3s cubic-bezier(0.2, 0, 0, 1);
    }

    /* When expanded, sidebar grows to full width (push behavior) */
    body.push-sidebar-enabled.mypod-sidebar-hidden.sidebar-expanded .mypod-sidebar,
    body.push-sidebar-enabled.mypod-sidebar-hidden.sidebar-expanded .mypod-sidebar.is-open {
        width: var(--mypod-sidebar-expanded);
        box-shadow: none !important;
        filter: none !important;
    }

    /* Labels: hidden by default (0 width hides everything) */
    body.push-sidebar-enabled.mypod-sidebar-hidden .mypod-sidebar__link {
        flex-direction: row;
        justify-content: flex-start;
        padding: var(--mypod-space-sm) var(--mypod-space-md);
        gap: var(--mypod-space-lg);
        overflow: hidden;
        white-space: nowrap;
    }

    body.push-sidebar-enabled.mypod-sidebar-hidden .mypod-sidebar__label {
        font-size: 0.875rem;
        text-align: left;
        width: auto;
        padding: 0;
        opacity: 1;
    }

    body.push-sidebar-enabled.mypod-sidebar-hidden .mypod-sidebar__item {
        padding: 0 var(--mypod-space-sm);
    }

    /* Align sidebar items vertically with the category bar */
    body.push-sidebar-enabled.mypod-sidebar-hidden.sidebar-expanded .mypod-sidebar__nav {
        padding-top: 16px;
    }

    /* Closing animation */
    body.push-sidebar-enabled.mypod-sidebar-hidden.sidebar-closing .mypod-sidebar__link {
        flex-direction: row !important;
        justify-content: flex-start !important;
        padding: var(--mypod-space-sm) var(--mypod-space-md) !important;
        gap: var(--mypod-space-lg) !important;
        overflow: hidden;
    }

    body.push-sidebar-enabled.mypod-sidebar-hidden.sidebar-closing .mypod-sidebar__label {
        opacity: 0;
        max-width: 0;
        overflow: hidden;
        white-space: nowrap;
        transition: opacity 0.1s ease, max-width 0.1s ease;
    }

    body.push-sidebar-enabled.mypod-sidebar-hidden.sidebar-closing .mypod-sidebar__item {
        padding: 0 var(--mypod-space-sm) !important;
    }

    body.push-sidebar-enabled.mypod-sidebar-hidden.sidebar-closing .mypod-sidebar__nav {
        padding-top: 16px;
    }

}

/* ============================================
   Standalone hidden mode (non-push pages, desktop only)
   ============================================ */
@media (min-width: 1025px) {

    /* Full-height overlay drawer with sidebar header (YouTube-style) */
    body.mypod-sidebar-hidden:not(.push-sidebar-enabled) .mypod-sidebar {
        width: var(--mypod-sidebar-expanded) !important;
        transform: translateX(-100%);
        box-shadow: none;
        top: 0;
        height: 100vh;
        z-index: 1100;
        /* CLOSING: ease-in */
        transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1);
    }

    body.mypod-sidebar-hidden:not(.push-sidebar-enabled) .mypod-sidebar.is-open {
        transform: translateX(0);
        box-shadow: var(--mypod-shadow-lg);
        /* OPENING: ease-out */
        transition: transform 0.25s cubic-bezier(0, 0, 0.2, 1);
    }

    /* Show sidebar header (hamburger + logo) */
    body.mypod-sidebar-hidden:not(.push-sidebar-enabled) .mypod-sidebar__header {
        display: flex;
    }

    body.mypod-sidebar-hidden:not(.push-sidebar-enabled) .mypod-sidebar .mypod-sidebar__link {
        flex-direction: row;
        justify-content: flex-start;
        padding: var(--mypod-space-sm) var(--mypod-space-md);
        gap: var(--mypod-space-lg);
    }

    body.mypod-sidebar-hidden:not(.push-sidebar-enabled) .mypod-sidebar .mypod-sidebar__label {
        font-size: 0.875rem;
        text-align: left;
        width: auto;
        padding: 0;
        opacity: 1;
    }

    body.mypod-sidebar-hidden:not(.push-sidebar-enabled) .mypod-sidebar .mypod-sidebar__item {
        padding: 0 var(--mypod-space-sm);
    }

}

/* ============================================
   Push Sidebar Mode
   ============================================ */

/* Push mode: sidebar starts collapsed (mini), NO shadow ever */
body.push-sidebar-enabled .mypod-sidebar,
body.push-sidebar-enabled .mypod-sidebar.is-open {
    width: var(--mypod-sidebar-collapsed);
    box-shadow: none !important;
    border-right: none !important;
    filter: none !important;
    will-change: width;
    overflow: hidden;
    /* YouTube-style fast ease-out */
    transition: width 0.3s cubic-bezier(0.2, 0, 0, 1);
}

/* Push mode expanded: sidebar grows to full width, STILL no shadow */
body.push-sidebar-enabled.sidebar-expanded .mypod-sidebar,
body.push-sidebar-enabled.sidebar-expanded .mypod-sidebar.is-open {
    width: var(--mypod-sidebar-expanded);
    box-shadow: none !important;
    filter: none !important;
}

/* --- Labels: collapsed mini icons by default --- */
body.push-sidebar-enabled .mypod-sidebar__link {
    flex-direction: column;
    justify-content: center;
    padding: 16px 0 14px;
    gap: 4px;
    transition: padding 0.3s cubic-bezier(0.2, 0, 0, 1),
        gap 0.3s cubic-bezier(0.2, 0, 0, 1);
}

body.push-sidebar-enabled .mypod-sidebar__label {
    opacity: 1;
    width: 100%;
    font-size: 10px;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 4px;
    transition: font-size 0.3s cubic-bezier(0.2, 0, 0, 1),
        padding 0.3s cubic-bezier(0.2, 0, 0, 1);
}

body.push-sidebar-enabled .mypod-sidebar__item {
    padding: 0 4px;
    transition: padding 0.3s cubic-bezier(0.2, 0, 0, 1);
}

/* --- Labels: expanded row style when sidebar is open --- */
body.push-sidebar-enabled.sidebar-expanded .mypod-sidebar__link {
    flex-direction: row;
    justify-content: flex-start;
    padding: var(--mypod-space-sm) var(--mypod-space-md);
    gap: var(--mypod-space-lg);
}

body.push-sidebar-enabled.sidebar-expanded .mypod-sidebar__label {
    font-size: 0.875rem;
    text-align: left;
    width: auto;
    padding: 0;
}

body.push-sidebar-enabled.sidebar-expanded .mypod-sidebar__item {
    padding: 0 var(--mypod-space-sm);
}

/* Align sidebar items vertically with the category bar */
body.push-sidebar-enabled.sidebar-expanded .mypod-sidebar__nav {
    padding-top: 16px;
}

/* --- Closing animation: keep row layout while sidebar width shrinks --- */
body.push-sidebar-enabled.sidebar-closing .mypod-sidebar__link {
    flex-direction: row !important;
    justify-content: flex-start !important;
    padding: var(--mypod-space-sm) var(--mypod-space-md) !important;
    gap: var(--mypod-space-lg) !important;
    overflow: hidden;
}

body.push-sidebar-enabled.sidebar-closing .mypod-sidebar__label {
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: opacity 0.1s ease, max-width 0.1s ease;
}

body.push-sidebar-enabled.sidebar-closing .mypod-sidebar__item {
    padding: 0 var(--mypod-space-sm) !important;
}

body.push-sidebar-enabled.sidebar-closing .mypod-sidebar__nav {
    padding-top: 16px;
}

/* Prevent buttons/cards from being clickable while mid-transition */
body.push-sidebar-enabled .mypod-main {
    will-change: margin-left;
}

/* Mobile: push mode uses drawer overlay, not push — shadow OK here since it's overlay */
@media (max-width: 1024px) {
    body.push-sidebar-enabled .mypod-sidebar {
        width: var(--mypod-sidebar-expanded) !important;
        transform: translateX(-100%);
        z-index: 1100;
        top: 0;
        height: 100vh;
        will-change: transform;
        transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1);
    }

    body.push-sidebar-enabled.sidebar-expanded .mypod-sidebar {
        transform: translateX(0);
        box-shadow: var(--mypod-shadow-lg);
    }

    /* Full label styles on mobile drawer */
    body.push-sidebar-enabled .mypod-sidebar .mypod-sidebar__link {
        flex-direction: row;
        justify-content: flex-start;
        padding: var(--mypod-space-sm) var(--mypod-space-md);
        gap: var(--mypod-space-lg);
    }

    body.push-sidebar-enabled .mypod-sidebar .mypod-sidebar__label {
        font-size: 0.875rem;
        text-align: left;
        width: auto;
        padding: 0;
    }

    body.push-sidebar-enabled .mypod-sidebar .mypod-sidebar__item {
        padding: 0 var(--mypod-space-sm);
    }
}

/* ============================================
   Featured Icons System
   ============================================ */

/* Divider between featured and non-featured groups */
.mypod-sidebar__divider {
    height: 1px;
    background: var(--mypod-color-border);
    margin: var(--mypod-space-sm) var(--mypod-space-md);
    opacity: 0.6;
    transition: margin 0.25s cubic-bezier(0.2, 0, 0, 1),
        opacity 0.2s;
}

/* ── Desktop collapsed: hide extra items & divider ── */
/* Standard collapsed mode */
body.mypod-sidebar-collapsed .mypod-sidebar.has-featured-icons .mypod-sidebar__list--extra,
body.mypod-sidebar-collapsed .mypod-sidebar.has-featured-icons .mypod-sidebar__divider {
    display: none;
}

/* Push-sidebar collapsed (default state before hamburger click) */
body.push-sidebar-enabled:not(.sidebar-expanded) .mypod-sidebar.has-featured-icons .mypod-sidebar__list--extra,
body.push-sidebar-enabled:not(.sidebar-expanded) .mypod-sidebar.has-featured-icons .mypod-sidebar__divider {
    display: none;
}

/* ── Desktop expanded: show extra items & divider ── */
/* Standard expanded (not collapsed) */
body:not(.mypod-sidebar-collapsed):not(.mypod-sidebar-hidden):not(.push-sidebar-enabled) .mypod-sidebar.has-featured-icons .mypod-sidebar__list--extra,
body:not(.mypod-sidebar-collapsed):not(.mypod-sidebar-hidden):not(.push-sidebar-enabled) .mypod-sidebar.has-featured-icons .mypod-sidebar__divider {
    display: block;
}

/* Push-sidebar expanded */
body.push-sidebar-enabled.sidebar-expanded .mypod-sidebar.has-featured-icons .mypod-sidebar__list--extra,
body.push-sidebar-enabled.sidebar-expanded .mypod-sidebar.has-featured-icons .mypod-sidebar__divider {
    display: block;
}

/* Drawer hidden mode — treat same as mobile (show all) */
body.mypod-sidebar-hidden .mypod-sidebar.has-featured-icons .mypod-sidebar__list--extra,
body.mypod-sidebar-hidden .mypod-sidebar.has-featured-icons .mypod-sidebar__divider {
    display: block;
}

/* ── Mobile: always show all items ── */
@media (max-width: 1024px) {

    .mypod-sidebar.has-featured-icons .mypod-sidebar__list--extra,
    .mypod-sidebar.has-featured-icons .mypod-sidebar__divider {
        display: block !important;
    }

    /* Compact divider on mobile */
    .mypod-sidebar.has-featured-icons .mypod-sidebar__divider {
        margin: 4px var(--mypod-space-sm);
    }
}

/* ── Push-sidebar closing animation: keep extra items visible ── */
body.push-sidebar-enabled.sidebar-closing .mypod-sidebar.has-featured-icons .mypod-sidebar__list--extra {
    display: none;
}

body.push-sidebar-enabled.sidebar-closing .mypod-sidebar.has-featured-icons .mypod-sidebar__divider {
    display: none;
}