/* YesStreaming header dropdown (homepage and inner pages): icon tiles, soft panel, pink hover.
   Colours come from tokens.css. */

.hx-nav .hx-sub {
    width: 340px;
    padding: 10px;
    border: 1px solid var(--color-line);
    border-radius: 20px;
    background: var(--color-bg);
    box-shadow: 0 30px 60px -24px rgba(20, 21, 43, 0.35), 0 8px 18px -12px rgba(var(--accent-rgb), 0.25);
}

.hx-nav .hx-sub a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    border-radius: 14px;
    transition: background 0.2s ease;
}

.hx-nav .hx-sub a:hover,
.hx-nav .hx-sub a[aria-current="page"] {
    background: var(--grad-panel);
}

.hx-nav .hx-sub-ico {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    color: var(--color-brand);
    background: var(--c5-bg);
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.hx-nav .hx-sub-ico svg {
    width: 20px;
    height: 20px;
}

.hx-nav .hx-sub a:hover .hx-sub-ico,
.hx-nav .hx-sub a[aria-current="page"] .hx-sub-ico {
    color: #fff;
    background: var(--grad-icon-pink);
    box-shadow: var(--glow-pink);
}

.hx-nav .hx-sub-txt {
    min-width: 0;
}

.hx-nav .hx-sub a b {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--color-text-strong);
}

.hx-nav .hx-sub a small {
    display: block;
    margin-top: 1px;
    font-size: 13px;
    color: var(--color-text-muted);
}

.hx-nav .hx-sub-badge {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-brand);
    background: var(--c5-bg);
}

@media (max-width: 960px) {
    .hx-nav .hx-sub {
        width: auto;
        box-shadow: none;
    }
}

/* Top menu hover: glass pill, always white text */
html body .hx-nav .hx-links > li > a:not(.btn):not(.nav-link):hover,
html body .hx-nav .hx-sub-toggle:hover,
html body .hx-nav .hx-has-sub.is-open .hx-sub-toggle,
html body .hx-nav .hx-links > li > a:not(.btn):not(.nav-link)[aria-current="page"] {
    background: rgba(255, 255, 255, .12)!important;
    color: #fff!important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

/* Sticky header: strong frosted glass when scrolling */
html body .hx-nav.is-stuck .hx-nav-bar {
    background: rgba(15, 18, 36, .48)!important;
    border-color: rgba(255, 255, 255, .22)!important;
    box-shadow: 0 18px 48px -22px rgba(8, 10, 24, .65), inset 0 1px 0 rgba(255, 255, 255, .16)!important;
    -webkit-backdrop-filter: saturate(180%) blur(28px)!important;
    backdrop-filter: saturate(180%) blur(28px)!important;
}

/* Header logo: a bit larger and clearer on the frosted bar */
html body .hx-nav .hx-brand img {
    height: 38px;
    width: auto;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)) drop-shadow(0 0 10px rgba(255, 255, 255, .18));
}

@media (max-width: 960px) {
    html body .hx-nav .hx-brand img {
        height: 32px;
    }
}