/* Zhiroz Top Chrome
   Three structural slots shared by desktop and mobile:
   Row 1 = optional admin announcement, Row 2 = global header,
   Row 3 = optional page-owned context. Only this component owns fixed
   positioning, global top offset and the final divider. */

:root {
    --site-top-chrome-height: 72px;
    --top-chrome-context-collapse-duration: 180ms;
    --top-chrome-context-opacity-duration: 120ms;
    --top-chrome-context-collapse-easing: ease;
}

body.has-site-top-chrome {
    padding-top: var(--site-top-chrome-height) !important;
}

.site-top-chrome {
    position: fixed;
    inset: 0 0 auto 0;
    width: 100%;
    z-index: 1040;
    background: var(--theme-header-bg, #F8F5EF);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.site-top-chrome-row {
    width: 100%;
    min-width: 0;
    background: var(--theme-header-bg, #F8F5EF);
}

.site-top-chrome-row--announcement:empty,
.site-top-chrome-row--context:empty {
    display: none;
}

.site-top-chrome-row--announcement {
    height: var(--top-chrome-announcement-height-desktop, 32px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: 16px;
    overflow: hidden;
    color: var(--theme-header-bg-text, #111);
}

.site-top-chrome-row--announcement.is-image {
    padding-inline: 0;
}

.site-top-chrome-announcement-link,
.site-top-chrome-announcement-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-width: 0;
    color: inherit;
    text-align: center;
    text-decoration: none;
}

.site-top-chrome-announcement-text {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
}

.site-top-chrome-announcement-link:hover {
    color: var(--theme-page-accent);
}

.site-top-chrome-announcement-picture,
.site-top-chrome-announcement-image {
    display: block;
    width: 100%;
    height: 100%;
}

.site-top-chrome-announcement-image {
    object-fit: cover;
    object-position: center;
}


.site-top-chrome-row--primary {
    height: var(--top-chrome-primary-height-desktop, 64px);
}

.site-top-chrome-row--primary > * {
    min-width: 0;
}

.site-top-chrome-row--primary .navbar {
    position: relative !important;
    inset: auto !important;
    width: 100%;
    height: 100%;
    border: 0 !important;
}

.site-top-chrome-row--primary .navbar > .container {
    height: 100%;
}

.site-top-chrome-row--primary .search-box .input-group {
    height: var(--top-chrome-search-height-desktop, 44px);
}

.site-top-chrome-row--context {
    position: relative;
}

.site-top-chrome.is-context-auto-hide [data-top-chrome-scroll-context] {
    max-height: var(--top-chrome-scroll-context-height, 160px);
    opacity: 1;
    transition:
        max-height var(--top-chrome-context-collapse-duration) var(--top-chrome-context-collapse-easing),
        padding-block var(--top-chrome-context-collapse-duration) var(--top-chrome-context-collapse-easing),
        opacity var(--top-chrome-context-opacity-duration) var(--top-chrome-context-collapse-easing);
}

.site-top-chrome.is-context-auto-hide.is-context-collapsed [data-top-chrome-scroll-context] {
    max-height: 0 !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

@media (max-width: 767px) {
    .site-top-chrome-row--announcement {
        height: var(--top-chrome-announcement-height-mobile, 32px);
        padding-inline: 8px;
    }

    .site-top-chrome-row--announcement.is-image {
        padding-inline: 0;
    }

    .site-top-chrome-announcement-text {
        font-size: 12px;
    }

    .site-top-chrome-row--primary {
        height: var(--top-chrome-primary-height-mobile, 56px);
    }

    .site-top-chrome-row--primary .navbar {
        height: 100%;
    }

    .site-top-chrome-row--primary .search-box .input-group {
        height: var(--top-chrome-search-height-mobile, 44px);
    }

}

@media (prefers-reduced-motion: reduce) {
    [data-top-chrome-scroll-context] {
        transition: none !important;
    }
}