/* Space Gate Nova+ — reactive transparent headers
   Transparent above hero artwork; premium black glass after vertical scroll. */
:root {
    --nova-app-header-h: 58px;
    --nova-header-glass: rgba(0, 0, 0, .74);
    --nova-header-glass-strong: rgba(0, 0, 0, .82);
    --nova-header-line: rgba(255, 255, 255, .065);
    --nova-header-ease: cubic-bezier(.2, .78, .2, 1);
}

/* Shared compact height for the simple application headers. */
:where(header.oscar-toolbar, .catalog-landing-toolbar) {
    height: calc(var(--nova-app-header-h) + var(--safe-top, env(safe-area-inset-top, 0px))) !important;
    min-height: calc(var(--nova-app-header-h) + var(--safe-top, env(safe-area-inset-top, 0px))) !important;
    padding-top: var(--safe-top, env(safe-area-inset-top, 0px)) !important;
    background: transparent !important;
    border-bottom: 1px solid transparent !important;
    box-shadow: none !important;
    backdrop-filter: blur(0) saturate(1) !important;
    -webkit-backdrop-filter: blur(0) saturate(1) !important;
    transition:
        background-color .26s var(--nova-header-ease),
        background .26s var(--nova-header-ease),
        backdrop-filter .26s var(--nova-header-ease),
        border-color .26s var(--nova-header-ease),
        box-shadow .26s var(--nova-header-ease) !important;
}

html.sg-header-scrolled :where(header.oscar-toolbar, .catalog-landing-toolbar) {
    background: var(--nova-header-glass) !important;
    border-bottom-color: var(--nova-header-line) !important;
    box-shadow: 0 12px 34px rgba(0,0,0,.28) !important;
    backdrop-filter: blur(20px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.12) !important;
}

/* Home header keeps the approved free-floating icon layout. */
header.oscar-toolbar.professional-home-toolbar {
    min-height: calc(var(--nova-app-header-h) + var(--safe-top, env(safe-area-inset-top, 0px))) !important;
    padding-inline: clamp(14px, 3vw, 22px) !important;
}

.professional-home-toolbar .home-toolbar-shell {
    min-height: var(--nova-app-header-h) !important;
}

.professional-home-toolbar .icon-button.home-header-action,
.professional-home-toolbar .icon-button.home-menu-button {
    width: 36px !important;
    height: 36px !important;
}

/* Section landing header. */
.catalog-landing-toolbar {
    padding-inline: clamp(14px, 3vw, 24px) !important;
    gap: 16px;
}

.catalog-landing-title-copy {
    min-width: 0;
}

.catalog-landing-toolbar-actions {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    direction: ltr;
}

.catalog-landing-toolbar-button {
    position: relative;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #fff !important;
}

.catalog-landing-toolbar-button.notification i {
    position: absolute;
    top: 4px;
    right: 2px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, #F04AD8, #9B4DFF 54%, #14D7FF);
    box-shadow: 0 0 0 3px rgba(155,77,255,.14);
}

/* All-content compound header: smaller and transparent at the top, black glass after scrolling. */
:root {
    --nova-catalog-header-h: calc(156px + var(--safe-top, 0px));
    --sg-catalog-fixed-h: var(--nova-catalog-header-h);
}

.nova-catalog-fixed-header {
    height: var(--nova-catalog-header-h) !important;
    min-height: var(--nova-catalog-header-h) !important;
    grid-template-rows: 58px 51px 39px !important;
    padding-top: var(--safe-top, 0px) !important;
    background: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: blur(0) saturate(1) !important;
    -webkit-backdrop-filter: blur(0) saturate(1) !important;
    transition:
        background .26s var(--nova-header-ease),
        backdrop-filter .26s var(--nova-header-ease),
        border-color .26s var(--nova-header-ease),
        box-shadow .26s var(--nova-header-ease) !important;
}

.nova-catalog-fixed-header::before {
    opacity: .12 !important;
}

html.sg-header-scrolled .nova-catalog-fixed-header {
    background: var(--nova-header-glass-strong) !important;
    border-bottom-color: var(--nova-header-line) !important;
    box-shadow: 0 14px 36px rgba(0,0,0,.34) !important;
    backdrop-filter: blur(22px) saturate(1.1) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.1) !important;
}

.nova-catalog-hero-row {
    height: 58px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "heading actions" !important;
    direction: rtl !important;
    gap: 12px !important;
}

.nova-catalog-heading-group {
    grid-area: heading;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
}

.nova-catalog-heading-copy {
    min-width: 0;
    display: grid !important;
    justify-items: start !important;
    text-align: right !important;
    gap: 3px !important;
}

.nova-catalog-heading-copy h1 {
    font-size: clamp(1.34rem, 2.1vw, 1.9rem) !important;
}

.nova-catalog-heading-copy p {
    font-size: clamp(.64rem, .8vw, .75rem) !important;
}

.nova-catalog-back {
    position: static !important;
    flex: 0 0 auto;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.nova-catalog-actions {
    grid-area: actions;
    justify-self: end;
    gap: 6px !important;
}

.nova-catalog-brand,
.nova-catalog-menu {
    display: none !important;
}

.nova-catalog-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.nova-catalog-page {
    padding-top: calc(var(--nova-catalog-header-h) + 12px) !important;
}

/* Details header changes from transparent to premium black glass while scrolling. */
.details-app .nova-details-topbar,
.media-details .details-topbar,
.channel-details .details-topbar {
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    min-height: calc(var(--nova-app-header-h) + var(--safe-top, 0px)) !important;
    padding: var(--safe-top, 0px) clamp(14px, 3vw, 28px) 0 !important;
    box-sizing: border-box !important;
    background: transparent !important;
    border-bottom: 1px solid transparent !important;
    box-shadow: none !important;
    backdrop-filter: blur(0) !important;
    -webkit-backdrop-filter: blur(0) !important;
    transition:
        background .26s var(--nova-header-ease),
        backdrop-filter .26s var(--nova-header-ease),
        border-color .26s var(--nova-header-ease),
        box-shadow .26s var(--nova-header-ease) !important;
}

html.sg-header-scrolled .details-app .nova-details-topbar,
html.sg-header-scrolled .media-details .details-topbar,
html.sg-header-scrolled .channel-details .details-topbar {
    background: var(--nova-header-glass) !important;
    border-bottom-color: var(--nova-header-line) !important;
    box-shadow: 0 12px 34px rgba(0,0,0,.26) !important;
    backdrop-filter: blur(20px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.12) !important;
}

/* The initial section gate owns the first paint; old skeletons must not leak into the header. */
.home-skeleton-page,
.catalog-landing-skeleton,
.catalog-landing-motion-loading,
.home-motion-loading {
    padding-top: 0 !important;
}

@media (max-width: 680px) {
    :root {
        --nova-app-header-h: 54px;
        --nova-catalog-header-h: calc(164px + var(--safe-top, 0px));
        --sg-catalog-fixed-h: var(--nova-catalog-header-h);
    }

    .nova-catalog-fixed-header {
        grid-template-rows: 54px 60px 42px !important;
        padding-inline: 10px !important;
    }

    .nova-catalog-hero-row { height: 54px !important; }

    .nova-catalog-heading-copy p { display: none !important; }
    .nova-catalog-heading-copy h1 { font-size: 1.42rem !important; }
    .nova-catalog-heading-group { gap: 7px; }
    .nova-catalog-back { width: 33px !important; height: 33px !important; min-width: 33px !important; }

    .catalog-landing-toolbar {
        padding-inline: 15px !important;
    }

    .catalog-landing-toolbar span {
        margin-bottom: 2px !important;
        font-size: .57rem !important;
    }

    .catalog-landing-toolbar h1 {
        font-size: 1.14rem !important;
    }

    .professional-home-toolbar .icon-button.home-header-action,
    .professional-home-toolbar .icon-button.home-menu-button,
    .catalog-landing-toolbar-button {
        width: 33px !important;
        height: 33px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    :where(header.oscar-toolbar, .catalog-landing-toolbar, .nova-catalog-fixed-header, .details-app .nova-details-topbar) {
        transition: none !important;
    }
}