:root{
    --pagination-button-size: 2rem;
    --pagination-padding-block: var(--gap-xl);
    --sortByQuickSort-max-width: max(10vw, 11rem);
}

h1{
    padding-block: var(--gap-m);
}

#actionBar{
    padding-inline:var(--gap-m);
}

#sortByQuickSort{
    max-width:var(--sortByQuickSort-max-width);
}

#pagination{
    padding-block: var(--pagination-padding-block);
}

#pagination button{
    border: none;
    border-radius:var(--pagination-button-size);
    padding:0;
    width:var(--pagination-button-size);
    height:var(--pagination-button-size);

    &:not(:hover):not(:active):not(:focus){
        background-color:var(--clr-bg--secondary);
    }
}

#pagination #cur_page_num{
    background-color: var(--clr-accent-primary);
}

#showFiltersBtn{
    display:none;
    margin-top:var(--gap-s); /* minor even spacing tweak */
    margin-bottom:var(--gap-m);
}

#lastUpdateTime{
    /*padding-block: calc(var(--gap-card-container)/2);*/
}

@media screen and (min-width: 1240px) and (max-width: 1290px) and (min-aspect-ratio: 1/1){
    /*desktop only = MIN-aspect-ratio*/
    /*regrettable I have to do this, but the end result is 3 columns at a common width, instead of 2 */
    :root{
        --card-max-width: min(19rem, 85vw);
    }
}
@media screen and (max-width: 768px) and (max-aspect-ratio: 1/1){
    :root{
        --sidebar-max-width: 100%;
        --pagination-padding-block: var(--gap-l);
        --textsearch-width:100%;
    }
    #pagination{
        gap:var(--gap-s);
    }
    #showFiltersBtn{
        display:flex;
    }
    #actionBar{
        display:none;
    }
    #sidebar{
        padding:0;
    }
    .accordion-content--mobile{
        height: 0;
        overflow: hidden;
        transition: height 0.35s ease;
    }
    #sidebarAndResults{
        align-items:center;
        flex-direction:column;
        justify-content:center;
    }
    #actionBar{
        /*flex-direction: column-reverse;*/ /*so pagination results are last*/
        align-items:center;
        gap: var(--gap-s);
        justify-content: center;
    }
    #actionBar__right{
        /*flex-direction:column;*/
        align-items:center;
        gap: var(--gap-s);
        justify-content: center;
    }
}