/*
 * Revlrr Community — Child Theme Stylesheet
 * community.revlrr.com
 *
 * Organised sections:
 *   1. CSS custom properties (tokens)
 *   2. Header shell
 *   3. Bow nav — desktop
 *   4. Bow nav — menu items
 *   5. Utility bar
 *   6. Mobile hamburger
 *   7. Mobile drawer
 *   8. Responsive breakpoints
 *   9. Reduced motion
 *  10. Logo overrides
 *  11. StreamTube icon strip tweaks
 */

/* ─────────────────────────────────────────────────────────────
   1. CSS CUSTOM PROPERTIES
   ───────────────────────────────────────────────────────────── */
:root {
    --rc-indigo:        #3d2fa0;
    --rc-indigo-glow:   rgba(61, 47, 160, 0.42);
    --rc-indigo-light:  rgba(61, 47, 160, 0.18);
    --rc-dark:          #04071b;
    --rc-dark-mid:      #0a0f2c;
    --rc-border:        rgba(61, 47, 160, 0.28);
    --rc-text-primary:  #d8d7d9;
    --rc-text-muted:    #8a91aa;
    --rc-white:         #ffffff;
    --rc-font:          'Encode Sans', system-ui, sans-serif;

    --rc-bow-height:    30px;
    --rc-bow-end-width: 36px;
    --rc-utility-height: 44px;
    --rc-header-total:  calc(var(--rc-bow-height) + var(--rc-utility-height) + 16px);
}

/* ─────────────────────────────────────────────────────────────
   2. HEADER SHELL
   ───────────────────────────────────────────────────────────── */
.revlrr-header {
    background: #fff0 !important;
    border-bottom: 1px solid var(--rc-border) !important;
    padding: 10px 0 6px !important;
    /* Override StreamTube's fixed height so two-row layout breathes */
    height: auto !important;
    min-height: var(--rc-header-total);
}

/* ─────────────────────────────────────────────────────────────
   3. BOW NAV — DESKTOP
   ───────────────────────────────────────────────────────────── */
.revlrr-bow-row {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0 16px;
    margin-bottom: 6px;
    position: relative; /* anchor for hamburger absolute positioning */
}

.revlrr-bow-nav {
    display: flex;
    align-items: stretch;
    height: var(--rc-bow-height);
    width: 100%;
    max-width: 100%; /* full width */

    /*
     * drop-shadow filter applied to the parent treats the three-piece bow
     * as a single merged shape — the glow wraps the whole bow, not each
     * individual div. This is the same technique used in the reference HTML.
     */
    filter:
        drop-shadow(0 2px 0 rgba(0, 0, 0, 0.22))
        drop-shadow(0 4px 10px var(--rc-indigo-glow));
}

/* Left cap — right-facing half-pill */
.revlrr-bow-end--left {
    width: var(--rc-bow-end-width);
    flex-shrink: 0;
    background: var(--rc-indigo);
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* Right cap — left-facing half-pill */
.revlrr-bow-end--right {
    width: var(--rc-bow-end-width);
    flex-shrink: 0;
    background: var(--rc-indigo);
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

/* Centre pill — holds the menu items */
.revlrr-bow-centre {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rc-indigo);
    border-radius: 12px;
    /* Negative margins overlap with the caps to close any seam */
    margin-left: -3px;
    margin-right: -3px;
    overflow: visible; /* prevents menu hover states from bleeding outside pill */
}

/* ─────────────────────────────────────────────────────────────
   4. BOW NAV — MENU ITEMS
   ───────────────────────────────────────────────────────────── */

/* wp_nav_menu outputs a <ul> — strip its default styling */
.revlrr-bow-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2px;
    width: 100%;
    height: 100%;
    font-family: var(--rc-font);
}

.revlrr-bow-menu > li {
    display: flex;
    align-items: center;
    height: 100%;
    position: relative; /* needed for phase 2 mega menu drop */
}

/* Separator bars between groups */
.revlrr-bow-menu > li.menu-item-has-separator::before {
    content: '';
    display: inline-block;
    width: 1px;
    height: 13px;
    background: rgba(255, 255, 255, 0.22);
    margin-right: 4px;
    flex-shrink: 0;
}

/* Individual nav links */
.revlrr-bow-menu > li > a {
    font-family: var(--rc-font);
    font-size: 10.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    padding: 4px 11px;
    border-radius: 9999px;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
    display: flex;
    align-items: center;
    height: 100%;
    line-height: 1;
}

/* Hover state */
.revlrr-bow-menu > li > a:hover {
    color: var(--rc-white);
    background: rgba(255, 255, 255, 0.13);
    text-decoration: none;
}

/* Active / current page */
.revlrr-bow-menu > li.current-menu-item > a,
.revlrr-bow-menu > li.current-menu-ancestor > a,
.revlrr-bow-menu > li.revlrr-active > a {
    color: var(--rc-white);
    background: rgba(255, 255, 255, 0.22);
}

/* Dropdown caret — subtle indicator for items with children */
.revlrr-bow-menu > li.menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-right: 1.5px solid rgba(255,255,255,0.5);
    border-bottom: 1.5px solid rgba(255,255,255,0.5);
    transform: rotate(45deg);
    margin-left: 6px;
    margin-bottom: 2px;
    vertical-align: middle;
}

/* ── INTERIM DROPDOWN PANEL ── */
/* Navwalker outputs <ul class="sub-menu"> not "dropdown-menu" */
.revlrr-bow-menu .sub-menu,
.revlrr-bow-menu .dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 200px;
    background: #0a0f2c;
    border: 1px solid rgba(61, 47, 160, 0.35);
    border-radius: 10px;
    padding: 6px 0;
    z-index: 9999;
    list-style: none;
    margin: 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* Show on hover and Bootstrap open state */
.revlrr-bow-menu > li.menu-item-has-children:hover > .sub-menu,
.revlrr-bow-menu > li.menu-item-has-children:hover > .dropdown-menu,
.revlrr-bow-menu > li.menu-item-has-children:focus-within > .sub-menu,
.revlrr-bow-menu > li.show > .sub-menu,
.revlrr-bow-menu > li.show > .dropdown-menu {
    display: block;
}

/* Dropdown items */
.revlrr-bow-menu .sub-menu li a,
.revlrr-bow-menu .dropdown-menu li a {
    display: block;
    padding: 8px 16px;
    font-family: var(--rc-font);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--rc-text-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s;
}

.revlrr-bow-menu .sub-menu li a:hover,
.revlrr-bow-menu .dropdown-menu li a:hover {
    color: var(--rc-white);
    background: var(--rc-indigo-light);
}

.revlrr-bow-menu .sub-menu li.current-menu-item > a,
.revlrr-bow-menu .dropdown-menu li.current-menu-item > a {
    color: var(--rc-white);
    background: var(--rc-indigo-light);
}

/* ─────────────────────────────────────────────────────────────
   5. UTILITY BAR
   ───────────────────────────────────────────────────────────── */
.revlrr-utility-bar {
    width: 100%;
    padding: 2px 16px 0;
}

.revlrr-utility-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--rc-utility-height);
    width: 100%;
}

.revlrr-logo-wrap {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* Ensure StreamTube's logo renders at a clean size */
.revlrr-logo-wrap .custom-logo,
.revlrr-logo-wrap img.logo {
    max-height: 28px;
    width: auto;
}

.revlrr-icon-strip {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* ─────────────────────────────────────────────────────────────
   6. STREAMTUBE ICON STRIP TWEAKS
   Targets the existing StreamTube icon buttons so they match
   the dark utility bar without breaking their functionality.
   ───────────────────────────────────────────────────────────── */

/* Search toggle */
.revlrr-header .toggle-search .btn__icon,
.revlrr-header .header-user__dropdown .btn__icon {
    color: var(--rc-text-muted);
    font-size: 18px;
}

.revlrr-header .toggle-search:hover .btn__icon {
    color: var(--rc-text-primary);
}

/* Cloud upload button (StreamTube Core) */
.revlrr-header .header-user__upload .btn__icon,
.revlrr-header [class*="upload"] .btn__icon {
    color: var(--rc-text-muted);
}

.revlrr-header .header-user__upload:hover .btn__icon {
    color: var(--rc-text-primary);
}

/* Notification bell */
.revlrr-header .header-user__notification .btn__icon,
.revlrr-header [class*="notification"] .btn__icon {
    color: var(--rc-text-muted);
}

/* Upload count badge (red dot) */
.revlrr-header .badge-upload-count,
.revlrr-header .header-badge {
    background: #e53e3e !important;
    border: 1.5px solid var(--rc-dark) !important;
}

/* Profile avatar in utility bar */
.revlrr-header .user-avatar.avatar-btn {
    border: 1.5px solid var(--rc-border);
    border-radius: 50%;
    transition: border-color 0.15s;
}

.revlrr-header .user-avatar.avatar-btn:hover {
    border-color: var(--rc-indigo);
}

/* Search dropdown panel */
.revlrr-header #site-search.dropdown-menu {
    background: var(--rc-dark-mid);
    border: 1px solid var(--rc-border);
    border-radius: 10px;
    margin-top: 6px;
}

/* Profile dropdown panel */
.revlrr-header .header-user__dropdown .dropdown-menu {
    background: var(--rc-dark-mid);
    border: 1px solid var(--rc-border);
    border-radius: 12px;
    min-width: 220px;
}

.revlrr-header .dropdown-item {
    color: var(--rc-text-primary);
    font-size: 13px;
}

.revlrr-header .dropdown-item:hover,
.revlrr-header .dropdown-item:focus {
    background: var(--rc-indigo-light);
    color: var(--rc-white);
}

.revlrr-header .dropdown-divider {
    border-color: var(--rc-border);
}

/* Upload dropdown (cloud menu) */
.revlrr-header .header-user__upload .dropdown-menu,
.revlrr-header [data-bs-toggle="dropdown"] + .dropdown-menu {
    background: var(--rc-dark-mid);
    border: 1px solid var(--rc-border);
    border-radius: 10px;
}

/* ─────────────────────────────────────────────────────────────
   6. MOBILE HAMBURGER
   ───────────────────────────────────────────────────────────── */
.revlrr-hamburger {
    display: none; /* shown via breakpoint below */
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}

.revlrr-hamburger span {
    display: block;
    width: 18px;
    height: 1.5px;
    background: var(--rc-text-muted);
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Animate hamburger to × when open */
.revlrr-hamburger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(5.5px) rotate(45deg);
}
.revlrr-hamburger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}
.revlrr-hamburger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-5.5px) rotate(-45deg);
}

/* ─────────────────────────────────────────────────────────────
   7. MOBILE DRAWER
   ───────────────────────────────────────────────────────────── */
.revlrr-mobile-drawer {
    display: none; /* shown via breakpoint below when data-open="true" */
    width: 100%;
    background: var(--rc-dark-mid);
    border-top: 1px solid var(--rc-border);
    padding: 8px 0 12px;
    /* Mobile drawer scroll fix: anchor below the header and scroll
       internally so all menu items are reachable. position:fixed lets
       it escape the header's height; the dvh max-height accounts for
       mobile browser chrome. This is the ONLY change from the working file. */
    position: fixed;
    top: var(--rc-header-total);
    left: 0;
    right: 0;
    z-index: 9998;
    max-height: calc(100vh - var(--rc-header-total));
    max-height: calc(100dvh - var(--rc-header-total));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.revlrr-mobile-drawer[data-open="true"] {
    display: block;
}

.revlrr-drawer-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.revlrr-drawer-menu > li > a {
    display: block;
    padding: 10px 20px;
    font-family: var(--rc-font);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--rc-text-muted);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.revlrr-drawer-menu > li > a:hover {
    color: var(--rc-text-primary);
    background: var(--rc-indigo-light);
    border-left-color: var(--rc-indigo);
}

.revlrr-drawer-menu > li.current-menu-item > a,
.revlrr-drawer-menu > li.revlrr-active > a {
    color: var(--rc-white);
    border-left-color: var(--rc-indigo);
    background: var(--rc-indigo-light);
}

/* Sub-items in drawer (depth 2) */
.revlrr-drawer-menu .sub-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    border-left: 2px solid var(--rc-border);
    margin-left: 20px;
}

.revlrr-drawer-menu .sub-menu > li > a {
    padding: 7px 16px;
    font-size: 11px;
    color: var(--rc-text-muted);
    text-decoration: none;
    display: block;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-family: var(--rc-font);
    transition: color 0.15s;
}

.revlrr-drawer-menu .sub-menu > li > a:hover {
    color: var(--rc-text-primary);
}

/* ─────────────────────────────────────────────────────────────
   8. RESPONSIVE BREAKPOINTS
   ───────────────────────────────────────────────────────────── */

/* ── Large desktop (≥992px): full bow visible, hamburger hidden ── */
@media (min-width: 992px) {
    .revlrr-hamburger {
        display: none !important;
    }
    .revlrr-mobile-drawer {
        display: none !important;
    }
    .revlrr-bow-nav {
        display: flex;
    }
}

/* ── Tablet / small desktop (768px–991px): bow hidden, hamburger shown ── */
@media (max-width: 991px) {
    .revlrr-hamburger {
        display: flex;
    }

    /* Hide full bow nav — mobile drawer takes over */
    .revlrr-bow-nav {
        display: none;
    }

    /* Bow row still provides hamburger anchor */
    .revlrr-bow-row {
        min-height: 32px;
        margin-bottom: 0;
    }

    .revlrr-header {
        padding: 8px 0 6px !important;
    }
}

/* ── Mobile (≤575px): tighten icon strip spacing ── */
@media (max-width: 575px) {
    .revlrr-utility-bar {
        padding: 2px 10px 0;
    }

    .revlrr-icon-strip {
        gap: 1px;
    }

    .revlrr-logo-wrap .custom-logo,
    .revlrr-logo-wrap img.logo {
        max-height: 22px;
    }
}

/* ─────────────────────────────────────────────────────────────
   9. REDUCED MOTION
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .revlrr-bow-menu > li > a,
    .revlrr-hamburger span,
    .revlrr-drawer-menu > li > a {
        transition: none;
    }
}

/* ─────────────────────────────────────────────────────────────
   10. SITE-MAIN OFFSET
   Compensate for sticky header height so content doesn't hide
   behind the header. Adjust if header height changes.
   ───────────────────────────────────────────────────────────── */
#site-main {
    margin-top: 0 !important; /* StreamTube JS handles this via headroom — leave it alone */
}

/* ─────────────────────────────────────────────────────────────
   11. DARK MODE COMPATIBILITY
   StreamTube supports data-theme="dark" on <html>.
   These rules ensure the header stays correct in both modes.
   ───────────────────────────────────────────────────────────── */
[data-theme="light"] .revlrr-header {
    background: #0d1130 !important; /* keep dark even in light theme — intentional brand choice */
    border-bottom-color: var(--rc-border) !important;
}