/*
    Public site header for the vault surfaces.

    The older .share-topbar put the dark-ink logo on a near-black page with no
    invert filter, which made the brand mark effectively invisible. This uses
    the white mark directly so no filter is needed, and gives guests both doors
    instead of one: a quiet link to sign in and a loud button to sign up.
*/

.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(13, 13, 15, 0.72);
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 14px 22px;
}

.site-header__logo {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    text-decoration: none;
    opacity: 0.96;
    transition: opacity 0.25s ease;
}

.site-header__logo:hover {
    opacity: 1;
}

.site-header__logo img {
    display: block;
    height: 28px;
    width: auto;
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.site-header__link,
.site-header__btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease,
        box-shadow 0.25s ease, border-color 0.25s ease;
}

.site-header__link {
    padding: 9px 14px;
    color: rgba(255, 255, 255, 0.74);
    border: 1px solid transparent;
}

.site-header__link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.1);
}

.site-header__btn {
    padding: 10px 20px;
    color: #fff;
    background: linear-gradient(135deg, #e8385a 0%, #db2f49 55%, #b81f38 100%);
    box-shadow: 0 6px 18px rgba(219, 47, 73, 0.28);
}

.site-header__btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(219, 47, 73, 0.38);
}

.site-header__btn:active {
    transform: translateY(0);
}

.site-header__btn i,
.site-header__link i {
    font-size: 12px;
}

/*
    Signed in, these pages carry the same cluster as the account header: the
    FANCCI ID badge, the community count, the points chip, the language
    switcher and the account nav behind the hamburger.

    That markup normally takes its styling from global-bo-clean.css, which
    these standalone documents deliberately do not load, so the shared classes
    are restyled here. The original laid the cluster out with absolute offsets
    against a fixed header; here it is a flex row, so those offsets are undone
    rather than inherited.
*/
.site-header--app .site-header__inner {
    max-width: none;
}

.site-header--app .site-header__actions {
    position: relative;
    gap: 12px;
}

.site-header--app .hryt-cont {
    position: relative;
    top: auto;
    right: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.site-header--app .hc-link {
    display: inline-flex;
    margin: 0;
}

.site-header--app .hc-link img {
    display: block;
    width: 26px;
    height: auto;
}

.site-header--app .comm-count {
    display: inline-flex;
    margin: 0;
}

.site-header--app .comm-count a {
    display: inline-flex;
    align-items: flex-start;
    white-space: nowrap;
    text-decoration: none;
}

.site-header--app .comm-count svg {
    flex: 0 0 auto;
    width: 30px;
    height: auto;
    fill: #fff;
}

.site-header--app .comm-count span {
    flex: 0 0 auto;
    margin-left: -5px;
    padding: 2px 5px;
    border-radius: 100px;
    background: #fff;
    color: #0d0d0f;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.site-header--app .points-chip {
    /* The original cleared the absolutely positioned hamburger with a 72px
       right margin. The flex row already keeps them apart. */
    margin: 0;
    padding: 6px 11px;
    border-radius: 999px;
    background: #fff;
    color: #111;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.site-header--app .points-chip:hover {
    opacity: 0.9;
}

.site-header--app .language {
    position: relative;
    display: inline-flex;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #fff;
    border-radius: 7px;
    background: #fff;
    cursor: pointer;
}

.site-header--app .language img {
    display: block;
    width: 26px;
    height: auto;
}

.site-header--app .languageSelect {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    width: 165px;
    margin-top: 13px;
    padding: 6px 0;
    background: #0d0d0f;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
    z-index: 60;
}

.site-header--app .languageSelect.is-open {
    display: block;
}

.site-header--app .languageSelect a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 13px;
    color: #fff;
    font-size: 13px;
    text-transform: uppercase;
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.25s ease, background 0.25s ease;
}

.site-header--app .languageSelect a:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.06);
}

.site-header--app .languageSelect a img {
    width: 22px;
    height: auto;
}

/* Hamburger */
.site-header--app .mobNav {
    position: relative;
    top: auto;
    right: auto;
    display: flex;
    align-items: center;
}

.site-header--app .mob-bar {
    position: relative;
    display: block;
    width: 38px;
    height: 38px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.site-header--app .mob-bar span {
    position: absolute;
    display: block;
    left: 6px;
    width: 26px;
    height: 3px;
    border-radius: 10px;
    background: #fff;
    opacity: 1;
    transition: 0.25s ease-in-out;
}

.site-header--app .mob-bar span:nth-child(1) {
    top: 11px;
}

.site-header--app .mob-bar span:nth-child(2),
.site-header--app .mob-bar span:nth-child(3) {
    top: 18px;
}

.site-header--app .mob-bar span:nth-child(4) {
    top: 25px;
}

.site-header--app .mob-bar.open span:nth-child(1),
.site-header--app .mob-bar.open span:nth-child(4) {
    top: 18px;
    left: 50%;
    width: 0;
}

.site-header--app .mob-bar.open span:nth-child(2) {
    transform: rotate(45deg);
}

.site-header--app .mob-bar.open span:nth-child(3) {
    transform: rotate(-45deg);
}

.site-header--app .mob-bar:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    border-radius: 9px;
}

/* Account nav panel */
.site-header--app .iconHdr {
    position: absolute;
    display: none;
    top: 100%;
    right: 0;
    width: 270px;
    margin-top: 14px;
    padding: 10px;
    background: #0d0d0f;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
    text-align: left;
    z-index: 60;
}

.site-header--app .iconHdr.is-open {
    display: block;
}

/* The caret points back at the hamburger, which sits 19px in from the right. */
.site-header--app .iconHdr:before {
    position: absolute;
    top: -7px;
    right: 12px;
    width: 0;
    height: 0;
    content: '';
    border-style: solid;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
    border-bottom: 7px solid #0d0d0f;
    border-top: 0;
}

.site-header--app .user-avtr {
    display: block;
    margin-bottom: 10px;
    padding: 10px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.28);
    color: #fff;
    text-align: center;
}

.site-header--app .user-avtr a img {
    display: inline-block;
    width: 40%;
    height: auto;
    border-radius: 100%;
}

.site-header--app .user-avtr small {
    display: block;
    padding-top: 5px;
    font-size: 15px;
}

.site-header--app .iconHdr a {
    position: relative;
    display: block;
    margin: 0;
    padding: 8px 7px;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    border-radius: 8px;
    transition: color 0.25s ease, background 0.25s ease;
}

.site-header--app .iconHdr a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

.site-header--app .iconHdr a.deact {
    opacity: 0.5;
    cursor: not-allowed;
}

.site-header--app .iconHdr a.deact:hover {
    background: none;
}

.site-header--app .iconHdr a svg {
    display: inline-block;
    vertical-align: top;
    width: 24px;
    height: auto;
    margin: 0 10px 0 0;
    fill: #fff;
}

.site-header--app .iconHdr a svg.nofill {
    fill: none;
    stroke: #fff;
}

.site-header--app .iconHdr a svg.smlsz {
    width: 22px;
}

.site-header--app .iconHdr a svg.top2 {
    margin-top: 2px;
}

.site-header--app .studio-lock__badge {
    margin-left: 6px;
    font-size: 11px;
    opacity: 0.7;
}

@media (max-width: 600px) {
    .site-header__inner {
        padding: 11px 15px;
        gap: 10px;
    }

    .site-header__logo img {
        height: 23px;
    }

    .site-header__link {
        padding: 8px 10px;
        font-size: 13px;
    }

    .site-header__btn {
        padding: 9px 16px;
        font-size: 13px;
    }

    /* The whole cluster stays on mobile, just tighter. */
    .site-header--app .hc-link img {
        width: 20px;
    }

    .site-header--app .comm-count svg {
        width: 24px;
    }

    .site-header--app .points-chip {
        padding: 4px 8px;
        font-size: 10px;
    }

    .site-header--app .site-header__actions,
    .site-header--app .hryt-cont {
        gap: 8px;
    }
}

@media (max-width: 390px) {
    /* The header row runs out of space, so the chip keeps the rank only. */
    .site-header--app .points-chip--ranked .points-chip__pts,
    .site-header--app .points-chip--ranked .points-chip__sep {
        display: none;
    }
}