/* Site-wide mobile header. */

.site-header {
    position: fixed;
    z-index: var(--z-index-header);
    top: 0;
    left: 50%;
    display: flex;
    width: min(100%, var(--page-max-width));
    min-height: var(--site-header-block-size);
    padding: var(--site-header-padding);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    background: var(--color-overlay-backdrop);
    transform: translateX(-50%);
    -webkit-backdrop-filter: blur(var(--modal-backdrop-blur));
    backdrop-filter: blur(var(--modal-backdrop-blur));
}

.site-header__menu-button {
    --interactive-icon-image: var(--icon-image-category);

    flex: 0 0 auto;
    border-radius: var(--radius-icon-control);
    background: transparent;
}

.site-header__menu-button:hover,
.site-header__menu-button:focus-visible {
    color: var(--color-primary);
}

/*
 * Large heading icons are decorative and always use the primary foreground.
 * Interactive header buttons keep their own interactive color states.
 */

.page-heading {
    color: var(--color-primary);
}

.page-heading:has(.page-heading__icon[src$="/bold/logo.svg"]),
.page-heading:has(.page-heading__icon[src$="/bold/heart.svg"]),
.page-heading:has(.page-heading__icon[src$="/bold/messages_3.svg"]),
.page-heading:has(.page-heading__icon[src$="/bold/message.svg"]),
.page-heading:has(.page-heading__icon[src$="/bold/category.svg"]),
.page-heading:has(.page-heading__icon[src$="/bold/element-4.svg"]),
.page-heading:has(.page-heading__icon[src$="/bold/setting.svg"]),
.page-heading:has(.page-heading__icon[src$="/bold/driver-2.svg"]),
.page-heading:has(.page-heading__icon[src$="/bold/arrow-left.svg"]) {
    --page-heading-icon-image: var(--icon-image-logo);
}

.page-heading:has(.page-heading__icon[src$="/bold/heart.svg"]) {
    --page-heading-icon-image: var(--icon-image-heart-bold);
}

.page-heading:has(.page-heading__icon[src$="/bold/messages_3.svg"]) {
    --page-heading-icon-image: var(--icon-image-messages);
}

.page-heading:has(.page-heading__icon[src$="/bold/message.svg"]) {
    --page-heading-icon-image: var(--icon-image-message);
}

.page-heading:has(.page-heading__icon[src$="/bold/category.svg"]) {
    --page-heading-icon-image: var(--icon-image-category);
}

.page-heading:has(.page-heading__icon[src$="/bold/element-4.svg"]) {
    --page-heading-icon-image: var(--icon-image-dashboard);
}

.page-heading:has(.page-heading__icon[src$="/bold/setting.svg"]) {
    --page-heading-icon-image: var(--icon-image-settings);
}

.page-heading:has(.page-heading__icon[src$="/bold/driver-2.svg"]) {
    --page-heading-icon-image: var(--icon-image-models);
}

.page-heading:has(.page-heading__icon[src$="/bold/arrow-left.svg"]) {
    --page-heading-icon-image: var(--icon-image-arrow-left);
}

.page-heading:has(.page-heading__icon[src$="/bold/logo.svg"]) .page-heading__icon,
.page-heading:has(.page-heading__icon[src$="/bold/heart.svg"]) .page-heading__icon,
.page-heading:has(.page-heading__icon[src$="/bold/messages_3.svg"]) .page-heading__icon,
.page-heading:has(.page-heading__icon[src$="/bold/message.svg"]) .page-heading__icon,
.page-heading:has(.page-heading__icon[src$="/bold/category.svg"]) .page-heading__icon,
.page-heading:has(.page-heading__icon[src$="/bold/element-4.svg"]) .page-heading__icon,
.page-heading:has(.page-heading__icon[src$="/bold/setting.svg"]) .page-heading__icon,
.page-heading:has(.page-heading__icon[src$="/bold/driver-2.svg"]) .page-heading__icon,
.page-heading:has(.page-heading__icon[src$="/bold/arrow-left.svg"]) .page-heading__icon {
    display: none;
}

.page-heading:has(.page-heading__icon[src$="/bold/logo.svg"])::before,
.page-heading:has(.page-heading__icon[src$="/bold/heart.svg"])::before,
.page-heading:has(.page-heading__icon[src$="/bold/messages_3.svg"])::before,
.page-heading:has(.page-heading__icon[src$="/bold/message.svg"])::before,
.page-heading:has(.page-heading__icon[src$="/bold/category.svg"])::before,
.page-heading:has(.page-heading__icon[src$="/bold/element-4.svg"])::before,
.page-heading:has(.page-heading__icon[src$="/bold/setting.svg"])::before,
.page-heading:has(.page-heading__icon[src$="/bold/driver-2.svg"])::before,
.page-heading:has(.page-heading__icon[src$="/bold/arrow-left.svg"])::before {
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    flex: 0 0 auto;
    background: currentColor;
    content: "";
    -webkit-mask: var(--page-heading-icon-image) center / contain no-repeat;
    mask: var(--page-heading-icon-image) center / contain no-repeat;
}



/* Public desktop navigation. Mobile and management headers remain unchanged. */

.public-header-nav {
    display: none;
}

@media (min-width: 64rem) {
    body:has(:is(.home-page, .voting-page, .messages-page)) .site-header {
        width: min(100%, var(--public-page-max-width));
        padding-inline: var(--public-page-padding-inline);
    }

    body:has(:is(.home-page, .voting-page, .messages-page)) .site-header__menu-button {
        display: none;
    }

    body:has(:is(.home-page, .voting-page, .messages-page)) .public-header-nav {
        position: fixed;
        z-index: var(--z-index-header);
        top: var(--site-header-padding);
        right: max(
            var(--public-page-padding-inline),
            calc(
                (100vw - var(--public-page-max-width)) / 2
                + var(--public-page-padding-inline)
            )
        );
        display: flex;
        min-height: var(--page-header-height);
        align-items: center;
        gap: var(--space-2);
    }

    .public-header-nav__link {
        display: flex;
        padding: var(--space-3) var(--space-4);
        align-items: center;
        border-radius: var(--radius-control);
        color: var(--color-secondary);
        font-size: var(--font-size-body-small);
        font-weight: var(--font-weight-medium);
        transition:
            background-color var(--transition-interactive),
            color var(--transition-interactive);
    }

    .public-header-nav__link:hover,
    .public-header-nav__link:focus-visible {
        background: var(--color-surface);
        color: var(--color-primary);
        outline: none;
    }

    .public-header-nav__link[aria-current="page"] {
        color: var(--color-primary);
        font-weight: var(--font-weight-semibold);
    }

    .public-header-nav__preferences-button {
        --interactive-icon-image: var(--icon-image-category);

        margin-left: var(--space-2);
        flex: 0 0 auto;
        border-radius: var(--radius-icon-control);
        background: transparent;
    }

    .public-header-nav__preferences-button:hover,
    .public-header-nav__preferences-button:focus-visible {
        background: var(--color-surface);
        color: var(--color-primary);
    }
}

/* Management desktop navigation. */

.management-header-nav {
    display: none;
}

@media (min-width: 64rem) {
    .management-shell .site-header {
        width: min(100%, var(--management-page-max-width));
        padding-inline: var(--management-page-padding-inline);
        justify-content: flex-start;
    }

    .management-header-nav {
        display: flex;
        min-width: 0;
        margin-left: auto;
        align-items: center;
        gap: var(--space-2);
    }

    .management-header-nav__link {
        display: flex;
        padding: var(--space-3) var(--space-4);
        align-items: center;
        border-radius: var(--radius-control);
        color: var(--color-secondary);
        font-size: var(--font-size-body-small);
        font-weight: var(--font-weight-medium);
        transition:
            background-color var(--transition-interactive),
            color var(--transition-interactive);
    }

    .management-header-nav__link:hover,
    .management-header-nav__link:focus-visible {
        background: var(--color-surface);
        color: var(--color-primary);
        outline: none;
    }

    .management-header-nav__link[aria-current="page"] {
        color: var(--color-primary);
        font-weight: var(--font-weight-semibold);
    }

    .management-shell:has(.management-dashboard)
        .site-header
        .page-heading {
        color: var(--color-primary);
    }

    .management-shell .site-header__menu-button {
        margin-left: var(--space-2);
    }
}