/* =============================================================================
 * Single-gallery chrome styles.
 *
 * Overrides the theme's .nav-full-width nav#navigation rule that sets 
 * position:absolute + top:0 + bottom:0 + width:100% (making the nav
 * fullscreen). We constrain it to a top strip, center it, style it.
 *
 * Also overrides the theme's OTHER inline style that sets 
 * body.single-gallery nav#navigation { position:fixed; top:0; left:30px }
 * but forgets to reset bottom:0 / width:100% from headers.css.
 * ============================================================================= */

/* NAV — top bar, content-width, centered, constrained height */
html body.single-gallery nav#navigation,
html body.single-gallery .nav-full-width nav#navigation {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 88px !important;
    margin: 0 !important;
    padding: 20px 50px !important;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.5) 70%, transparent 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    z-index: 2000 !important;
    transition: opacity 0.5s ease, transform 0.5s ease !important;
    pointer-events: auto !important;
    opacity: 1;
    transform: translateY(0);
}

/* AUTO-HIDE state — toggled by JS below */
html body.single-gallery.alts-chrome-hidden nav#navigation,
html body.single-gallery.alts-chrome-hidden footer#colophon {
    opacity: 0 !important;
    pointer-events: none !important;
}
html body.single-gallery.alts-chrome-hidden nav#navigation {
    transform: translateY(-20px) !important;
}
html body.single-gallery.alts-chrome-hidden footer#colophon {
    transform: translateY(20px) !important;
}

/* Menu UL — flex row centered */
html body.single-gallery nav#navigation > ul,
html body.single-gallery nav#navigation ul.sf-menu,
html body.single-gallery nav#navigation .navigation {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 36px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

html body.single-gallery nav#navigation .scroll-wrapper {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
    width: auto !important;
}

/* Top-level LI — inline */
html body.single-gallery nav#navigation > ul > li,
html body.single-gallery nav#navigation ul.sf-menu > li {
    display: inline-flex !important;
    align-items: center !important;
    position: relative !important;
    list-style: none !important;
    transform: none !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Icon button */
html body.single-gallery nav#navigation > ul > li > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 56px !important;
    height: 56px !important;
    color: #e8e8e8 !important;
    font-size: 0 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    transition: color 0.18s ease, transform 0.18s ease !important;
}

/* Hide Font Awesome arrows + caret */
html body.single-gallery nav#navigation a > i.fa-angle-down,
html body.single-gallery nav#navigation a > .caret,
html body.single-gallery nav#navigation a > i.fa-angle-right {
    display: none !important;
}

/* Main glyph */
html body.single-gallery nav#navigation > ul > li > a > i:not(.fa-angle-down):not(.caret),
html body.single-gallery nav#navigation > ul > li > a [class*="fa-"]:not(.fa-angle-down) {
    font-size: 28px !important;
    line-height: 1 !important;
    color: inherit !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
}

/* Icon hover — neon green, scale */
html body.single-gallery nav#navigation > ul > li > a:hover,
html body.single-gallery nav#navigation > ul > li > a:focus,
html body.single-gallery nav#navigation > ul > li:hover > a,
html body.single-gallery nav#navigation > ul > li:focus-within > a {
    background: transparent !important;
    color: #bbff00 !important;
    transform: scale(1.05) !important;
}

/* Dropdown indicator dots — RESTORED (v4, April 2026).
 *
 * History:
 *   v2: 4px neon-green circles below top-level nav items that have
 *       submenus. Subtle "this expands" hint.
 *   v3: tried display:none because they were rendering as giant grey
 *       blobs against dark video backdrops. WRONG fix — the rendering
 *       was wrong, not the design. The blobs were the tooltip plugin's
 *       liquid-glass box-shadow stack leaking into these pseudo-elements
 *       via the [data-alts-tip]::after selector.
 *   v4 (this version): restore the original 4px dot but EXPLICITLY
 *       reset box-shadow, filter, and backdrop-filter to none with
 *       !important so the tooltip CSS can't override. Also bake the
 *       data-alts-tip-skip="1" attribute via JS (see altsounds-tooltips.js)
 *       so the tooltip-converter never claims menu links in the first
 *       place. Belt-and-braces.
 *
 * Hover behavior: opacity 0.6 → 1.0 and scale 1.0 → 1.2 (was 1.4 in v2,
 * which felt too aggressive against the new restrained icon hover scale
 * of 1.05 above).
 *
 * The other ::after rule at the menu-item LI level (around line 193
 * below) is the hover-bridge — an invisible 24px-tall click region
 * between icon and dropdown that lets the cursor cross from icon to
 * dropdown without losing :hover. Untouched.
 */
html body.single-gallery nav#navigation > ul > li.menu-item-has-children > a::after,
html body.single-gallery nav#navigation > ul > li > a.sf-with-ul::after {
    content: '' !important;
    position: absolute !important;
    bottom: -8px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 4px !important;
    height: 4px !important;
    max-width: 4px !important;
    max-height: 4px !important;
    background: #bbff00 !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 50% !important;
    opacity: 0.6 !important;
    transition: opacity 0.18s ease, transform 0.18s ease !important;
    /* Defensive: nuke the tooltip plugin's box-shadow stack so it
       doesn't compose with our dot. */
    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* Force the dot to be its own size — the tooltip CSS sets padding
       and font-size that would otherwise inflate the pseudo. */
    padding: 0 !important;
    font-size: 0 !important;
    color: transparent !important;
}
html body.single-gallery nav#navigation > ul > li:hover > a::after,
html body.single-gallery nav#navigation > ul > li:focus-within > a::after {
    opacity: 1 !important;
    transform: translateX(-50%) scale(1.2) !important;
}

html body.single-gallery nav#navigation .sf-arrows > li > .sf-with-ul::before,
html body.single-gallery nav#navigation .sf-sub-indicator {
    display: none !important;
}

/* Dropdowns (L2) */
html body.single-gallery nav#navigation ul ul,
html body.single-gallery nav#navigation ul.sub-menu {
    position: absolute !important;
    top: calc(100% + 20px) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    display: block !important;
    min-width: 240px !important;
    padding: 8px !important;
    margin: 0 !important;
    list-style: none !important;
    background: rgba(10, 10, 10, 0.72) !important;
    backdrop-filter: blur(28px) saturate(1.5) !important;
    -webkit-backdrop-filter: blur(28px) saturate(1.5) !important;
    border: 1px solid rgba(191, 255, 0, 0.15) !important;
    border-radius: 16px !important;
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.6),
        0 2px 0 rgba(191, 255, 0, 0.1) inset !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease, visibility 0.2s !important;
    z-index: 2100 !important;
    height: auto !important;
    max-height: none !important;
}

/* Hover bridge between icon and dropdown */
html body.single-gallery nav#navigation > ul > li.menu-item-has-children::after,
html body.single-gallery nav#navigation > ul > li:has(> ul)::after {
    content: '';
    position: absolute;
    top: 100%;
    left: -18px;
    right: -18px;
    height: 24px;
    pointer-events: none;
}
html body.single-gallery nav#navigation > ul > li.menu-item-has-children:hover::after,
html body.single-gallery nav#navigation > ul > li:has(> ul):hover::after {
    pointer-events: auto;
}

html body.single-gallery nav#navigation > ul > li:hover > ul,
html body.single-gallery nav#navigation > ul > li:focus-within > ul,
html body.single-gallery nav#navigation > ul > li > ul.sfHover {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Right-align last 2 dropdowns */
html body.single-gallery nav#navigation > ul > li:nth-last-child(-n+2) > ul.sub-menu,
html body.single-gallery nav#navigation > ul > li:nth-last-child(-n+2) > ul {
    left: auto !important;
    right: 0 !important;
    transform: none !important;
}

/* L3 — slide right of L2 parent */
html body.single-gallery nav#navigation ul ul ul,
html body.single-gallery nav#navigation ul.sub-menu ul.sub-menu,
html body.single-gallery nav#navigation > ul > li > ul > li > ul {
    top: -8px !important;
    left: 100% !important;
    right: auto !important;
    margin-left: 8px !important;
    transform: none !important;
    -webkit-transform: none !important;
}

/* L3 for right-edge parents — slide left of L2 parent */
html body.single-gallery nav#navigation > ul > li:nth-last-child(-n+2) > ul > li > ul {
    left: auto !important;
    right: 100% !important;
    margin-left: 0 !important;
    margin-right: 8px !important;
}

/* L2/L3 list items */
html body.single-gallery nav#navigation ul ul li {
    display: block !important;
    list-style: none !important;
    margin: 0 !important;
    position: relative !important;
    background: transparent !important;
    padding: 0 !important;
    border: 0 !important;
    transform: none !important;
}

html body.single-gallery nav#navigation ul ul a {
    display: block !important;
    padding: 12px 18px !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease !important;
    white-space: nowrap !important;
    position: relative !important;
    background: transparent !important;
}

html body.single-gallery nav#navigation ul ul a:hover,
html body.single-gallery nav#navigation ul ul a:focus {
    background: #bbff00 !important;
    color: #000 !important;
    transform: translateX(2px) !important;
}

/* Arrow indicator for L2 items with L3 children */
html body.single-gallery nav#navigation ul ul li.menu-item-has-children > a::after,
html body.single-gallery nav#navigation ul ul li:has(> ul) > a::after {
    content: '';
    position: absolute;
    right: 14px;
    top: 50%;
    width: 4px;
    height: 4px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
    opacity: 0.5;
    transition: opacity 0.15s ease;
}
/* Flip arrow for right-edge parents */
html body.single-gallery nav#navigation > ul > li:nth-last-child(-n+2) > ul > li.menu-item-has-children > a::after,
html body.single-gallery nav#navigation > ul > li:nth-last-child(-n+2) > ul > li:has(> ul) > a::after {
    right: auto;
    left: 14px;
    transform: translateY(-50%) rotate(-135deg);
}

html body.single-gallery nav#navigation ul ul li:hover > ul {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* =============================================================================
 * FOOTER on single-gallery — matches nav (50px horizontal padding, auto-hides
 * together, doesn't block clicks meant for the video).
 * ============================================================================= */

html body.single-gallery footer#colophon {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 2000 !important;
    opacity: 1;
    visibility: visible !important;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.85) 100%) !important;
    padding: 30px 50px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    height: auto !important;
    min-height: 0 !important;
    pointer-events: none !important;
    border-top: 0 !important;
    transform: translateY(0);
    transition: opacity 0.5s ease, transform 0.5s ease !important;
}
html body.single-gallery footer#colophon > * {
    pointer-events: auto;
}

/* Subtle neon-green accent line at the top of the footer gradient */
html body.single-gallery footer#colophon::before {
    content: '';
    position: absolute;
    left: 50px;
    right: 50px;
    top: 14px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(191, 255, 0, 0.25) 50%, transparent);
    pointer-events: none;
}

/* =============================================================================
 * Make sure the player area is click-through to #as-click-capture below.
 * The theme's nav had pointer-events: auto fullscreen, eating clicks.
 * Our nav above only occupies the top strip so clicks pass through correctly.
 * ============================================================================= */