/*
 * PinfallOps application header
 * Add this file after the Universal Theme CSS.
 */

:root {
    --po-header-height: 4rem;
    --po-header-border:
        var(--ut-component-border-color, #d9d9d9);
    --po-header-surface:
        var(--ut-component-background-color, #fff);
    --po-header-text:
        var(--ut-component-text-default-color, #172033);
    --po-header-muted:
        var(--ut-component-text-muted-color, #68707a);
    --po-header-accent:
        var(--ut-palette-primary, #2563eb);
}

.t-Header {
    min-height: var(--po-header-height);
    border-bottom: 1px solid var(--po-header-border);
    background:
        linear-gradient(
            to bottom,
            color-mix(
                in srgb,
                var(--po-header-accent) 9%,
                var(--po-header-surface)
            ) 0%,
            var(--po-header-surface) 100%
        );
    box-shadow: none;
}

.t-Header-branding {
    min-height: var(--po-header-height);
    padding-inline: clamp(0.75rem, 2vw, 1.35rem);
    background: transparent;
}

.t-Header-logo {
    margin-inline-start: 0.35rem;
}

.t-Header-logo-link {
    display: inline-flex;
    min-height: 2.65rem;
    align-items: center;
    gap: 0.65rem;
    color: var(--po-header-text);
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: -0.025em;
    text-decoration: none;
}

.t-Header-logo-link:hover,
.t-Header-logo-link:focus {
    color: var(--po-header-text);
    text-decoration: none;
}

.t-Header-logo-link::before {
    display: inline-flex;
    width: 2.15rem;
    height: 2.15rem;
    flex: 0 0 2.15rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.62rem;
    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--po-header-accent) 82%,
                #fff
            ),
            var(--po-header-accent)
        );
    color: #fff;
    content: "P";
    font-size: 1rem;
    font-weight: 950;
    line-height: 1;
    box-shadow:
        0 0.35rem 0.9rem
        color-mix(
            in srgb,
            var(--po-header-accent) 19%,
            transparent
        );
}

.t-Header-logo-link:has(img)::before {
    display: none;
}

.t-Header-logo-link img {
    width: 2.15rem;
    height: 2.15rem;
    object-fit: contain;
    border-radius: 0.62rem;
}

.t-Header-controls {
    gap: 0.35rem;
}

.t-Header .t-Button--header {
    min-width: 2.4rem;
    min-height: 2.4rem;
    border: 1px solid transparent;
    border-radius: 0.62rem;
    background: transparent;
    color: var(--po-header-muted);
    box-shadow: none;
}

.t-Header .t-Button--header:hover,
.t-Header .t-Button--header:focus-visible {
    border-color: var(--po-header-border);
    background:
        color-mix(
            in srgb,
            var(--po-header-accent) 7%,
            var(--po-header-surface)
        );
    color: var(--po-header-text);
}

.t-Header .t-Button--header.is-active,
.t-Header .t-Button--header[aria-expanded="true"] {
    border-color:
        color-mix(
            in srgb,
            var(--po-header-accent) 24%,
            var(--po-header-border)
        );
    background:
        color-mix(
            in srgb,
            var(--po-header-accent) 11%,
            var(--po-header-surface)
        );
    color: var(--po-header-accent);
}

.t-Header-navBar {
    display: flex;
    align-items: center;
}

.t-NavigationBar {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.t-NavigationBar-item {
    margin: 0;
}

.t-NavigationBar-item .t-Button {
    min-height: 2.4rem;
    border: 1px solid transparent;
    border-radius: 0.62rem;
    background: transparent;
    color: var(--po-header-muted);
    font-size: 0.82rem;
    font-weight: 750;
    box-shadow: none;
}

.t-NavigationBar-item .t-Button:hover,
.t-NavigationBar-item .t-Button:focus-visible {
    border-color: var(--po-header-border);
    background:
        color-mix(
            in srgb,
            var(--po-header-accent) 7%,
            var(--po-header-surface)
        );
    color: var(--po-header-text);
}

.t-NavigationBar-item.po-nav-login .t-Button,
.po-nav-login.t-NavigationBar-item .t-Button {
    border-color: var(--po-header-border);
    background: var(--po-header-surface);
    color: var(--po-header-text);
}

.t-NavigationBar-item.po-nav-signup .t-Button,
.po-nav-signup.t-NavigationBar-item .t-Button {
    border-color: var(--po-header-accent);
    background: var(--po-header-accent);
    color: #fff;
    box-shadow:
        0 0.35rem 0.85rem
        color-mix(
            in srgb,
            var(--po-header-accent) 18%,
            transparent
        );
}

.t-NavigationBar-item.po-nav-signup .t-Button:hover,
.t-NavigationBar-item.po-nav-signup .t-Button:focus-visible,
.po-nav-signup.t-NavigationBar-item .t-Button:hover,
.po-nav-signup.t-NavigationBar-item .t-Button:focus-visible {
    border-color:
        color-mix(
            in srgb,
            var(--po-header-accent) 82%,
            #000
        );
    background:
        color-mix(
            in srgb,
            var(--po-header-accent) 88%,
            #000
        );
    color: #fff;
}

.t-Header-nav {
    border-top:
        1px solid
        color-mix(
            in srgb,
            var(--po-header-border) 65%,
            transparent
        );
    border-bottom: 1px solid var(--po-header-border);
    background: var(--po-header-surface);
    box-shadow: none;
}

.t-Header-nav .t-MenuBar {
    min-height: 2.9rem;
    padding-inline: clamp(0.5rem, 2vw, 1rem);
    background: transparent;
}

.t-Header-nav .t-MenuBar-item {
    margin-block: 0.3rem;
}

.t-Header-nav .t-MenuBar-item > .t-MenuBar-label {
    border-radius: 0.58rem;
    color: var(--po-header-muted);
    font-size: 0.82rem;
    font-weight: 750;
}

.t-Header-nav .t-MenuBar-item:hover > .t-MenuBar-label,
.t-Header-nav .t-MenuBar-item.is-focused > .t-MenuBar-label {
    background:
        color-mix(
            in srgb,
            var(--po-header-accent) 7%,
            var(--po-header-surface)
        );
    color: var(--po-header-text);
}

.t-Header-nav .t-MenuBar-item.is-current > .t-MenuBar-label,
.t-Header-nav .t-MenuBar-item.a-MenuBar-item--current
> .t-MenuBar-label {
    background:
        color-mix(
            in srgb,
            var(--po-header-accent) 11%,
            var(--po-header-surface)
        );
    color: var(--po-header-accent);
}

.a-Menu,
.t-NavigationBar-menu {
    overflow: hidden;
    border: 1px solid var(--po-header-border);
    border-radius: 0.75rem;
    background: var(--po-header-surface);
    box-shadow: 0 1rem 2.5rem rgb(15 23 42 / 14%);
}

.a-Menu-item {
    margin: 0.2rem;
    border-radius: 0.5rem;
}

.a-Menu-item.is-focused,
.a-Menu-item:hover {
    background:
        color-mix(
            in srgb,
            var(--po-header-accent) 8%,
            var(--po-header-surface)
        );
}

.t-Header-branding,
.t-Header-nav,
.t-Header-navBar,
.t-Header-controls {
    box-shadow: none;
}

.t-Header .t-NavigationBar-item.has-username
.t-Button-label {
    font-weight: 800;
}

@media (max-width: 720px) {
    :root {
        --po-header-height: 3.65rem;
    }

    .t-Header-branding {
        padding-inline: 0.55rem;
    }

    .t-Header-logo-link {
        gap: 0.5rem;
        font-size: 0.95rem;
    }

    .t-Header-logo-link::before,
    .t-Header-logo-link img {
        width: 1.95rem;
        height: 1.95rem;
        flex-basis: 1.95rem;
    }

    .t-NavigationBar {
        gap: 0.2rem;
    }

    .t-NavigationBar-item .t-Button {
        min-width: 2.25rem;
        padding-inline: 0.65rem;
    }

    .t-NavigationBar-item.po-nav-login .t-Button-label,
    .po-nav-login.t-NavigationBar-item .t-Button-label {
        display: none;
    }
}