/* --- HEADER --- */
.header {
    position: sticky;
    top: 0;
    height: 0;
    container-name: header;
    container-type: scroll-state;
}

/* --- HEADER: STICKY --- */
.header-inner {
    height: var(--header-compact-height);
    border-bottom-style: solid;
    border-color: var(--color-gray-medium);
    background: var(--color-secondary);
    box-shadow: var(--shadow-element);
    font-size: clamp(0.75rem, 3.25vw, 1.25rem);
    /* midnight-fix */
    /*
    transition: all var(--duration-transition), height 0s, backdrop-filter 0s;
    */
}

/* --- HEADER: DEFAULT --- */
@container header scroll-state(stuck: none) {
    .header-inner {
        border-color: transparent;
        color: var(--color-secondary);
        background: transparent;
        box-shadow: none;
    }
}

/* --- SCREEN: LARGE --- */
@media (min-width: 1024px) {
    .header-inner {
        font-size: clamp(0.75rem, 3.25vw, 1.5rem);
    }

    @container header scroll-state(stuck: none) {
        .header-inner {
            height: var(--header-full-height);
        }
    }
}