/**
*
* Sticky structural headers
* Layout controls for sticky behavior and stacking order
*
**/
#searchbar-container,
#breadcrumbs-container {
    position: sticky;
    position: -webkit-sticky;
    top: var(--sticky-top, 0px);
    transition:
        border-color 0.3s ease,
        background 0.3s ease;
    border-bottom: 1px solid transparent;
    z-index: calc(777 - var(--stack-index, 0));
}

/**
*
* Navigation & Breadcrumbs
* Handles breadcrumb paths and sticky activation states
*
**/
#breadcrumbs-container {
    #breadcrumbs {
        font-size: 14px;
        color: #1d1d1b;

        a {
            color: #676767;
            transition: 0.3s ease;

            &:hover {
                color: #1d1d1b;
            }
        }

        span:not(:last-child)::after {
            content: ">";
            color: #676767;
            margin: 0 8px 0 12px;
        }

        span:nth-last-child(2)::after {
            color: var(--orange);
        }
    }

    &.is-stuck {
        background: var(--white) !important;
        border-bottom: 1px solid #ddd;
    }
}

/**
*
* Search Bar inputs
* Design layout and icon configuration for search functionality
*
**/
#searchbar-container {
    #input-wrapper {
        display: flex;
        padding: 8px 16px;
        border-radius: 4px;
        align-items: center;
        background: white;
        border: 1px solid #ddd;

        #search-icon {
            height: 20px;
            color: #676767;
            pointer-events: none;
        }

        #page-search-input {
            padding: 0;
            border: none;
            font-size: 14px;
            background: white;
        }
    }

    &.is-stuck {
        background: var(--lightgrey) !important;
        border-bottom: 1px solid #ddd;
    }
}

/**
*
* Filters & Form Controls
* Select dropdown layouts, global interaction states, and responsive behavior
*
**/
#filter-container {
    gap: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;

    #filter-wrapper {
        gap: 16px;
        display: flex;

        select {
            font-size: 14px;
            border-radius: 4px;
            color: #1d1d1b;
            background: white;
            border-color: #ddd;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
            background-position: right 10px center;
            background-repeat: no-repeat;
            background-size: 20px;
        }
    }

    @media (max-width: 767px) {
        grid-template-columns: 1fr;
    }
}

#page-search-input:focus-visible,
#page-date-filter:focus-visible,
#page-category-filter:focus-visible {
    outline: none;
}

#page-date-filter:hover,
#page-category-filter:hover {
    cursor: pointer;
}