/* custom icons */

.qld-icon-archive {
    --qgds-icon-archive: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='20' height='5' x='2' y='3' rx='1'/><path d='M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8'/><path d='M10 12h4'/></svg>");

    mask-image: var(--qgds-icon-archive);
    -webkit-mask-image: var(--qgds-icon-archive)
}

/* Equal-height card helpers (apply by adding `equal-height` to the .row) */
.qld-card-grid .row.equal-height > [class*="col-"] {
    display: flex;
}

.qld-card-grid .row.equal-height > [class*="col-"] .card {
    /* Make each card take the full height of the column */
    display: flex;
    flex: 1 1 auto;
}

.qld-card-grid .row.equal-height .card-body {
    /* Let the body grow so footers/actions can sit at bottom if needed */
    flex: 1 1 auto;
}

/* Multi-action card image - fill container without distortion */
.card-img-right {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
}

.radius .hero-banner {
    border-radius: 1rem 1rem 3rem 1rem
}

.radius .banner-floating {
    border-radius: 1rem 1rem 3rem 1rem
}

.radius .navbar {
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
}

.radius .banner-container-with-image-slide, .radius .banner-radius {
    border-bottom-left-radius: 2rem;
    border-bottom-right-radius: 2rem;
}

@media (max-width: 991.98px) {
    .radius .banner-container-with-image-slide, .radius .banner-radius, .radius .container-md {
        border-bottom-left-radius: 0rem;
        border-bottom-right-radius: 0rem;
    }
}

@media (max-width: 991.98px) {
    .container-sm {
        padding: 0;
    }
}

.banner-title {
    font-size: 2rem;
}

.banner-abstract.banner-hero-abstract {
    font-size: 1.25rem;
}

.banner-container-with-image-slide {
    width: 100%;
    margin: 0;
    display: flex;
    flex-wrap: nowrap;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    box-sizing: border-box;

    --banner-image-url: url("/img/promo-image.jpg");
    --banner-top-gap: 10rem;
    background-image: var(--banner-image-url);
}

@media (max-width: 991.98px) {
    .banner-container-with-image-slide {
        flex-direction: column;
        flex-wrap: wrap;
    }
}

@media (max-width: 699px) {
    .banner-container-with-image-slide {
        padding-top: var(--banner-top-gap);
        background-image: none;
        background-color: var(--qld-dark-background);
        border-radius: 0;
        padding-left: 0;
        padding-right: 0;
    }
}

.banner-container-with-image-slide .mobile-banner {
    display: none;
}

@media (max-width: 699px) {
    .banner-container-with-image-slide .mobile-banner {
        background-image: var(--banner-image-url);
        background-size: cover;
        background-position: center center;
        height: var(--banner-top-gap);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        display: block;
        }
}



@media (max-width: 699) {
    .background-image {
        display: none;
    }
}

.background-image {
    width: 100%;
    margin: 0;
    display: flex;
    flex-wrap: nowrap;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    min-height: 400px;
}

.background-image::before,
.background-image::after,
.background-image .bg-slide-3 {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    z-index: 0;
}

.background-image::before {
    background-image: url("/img/promo-image.jpg");
    animation: slide-show-1 15s ease-in-out infinite;
}

.background-image::after {
    background-image: url("/img/peanut-silo.jpg");
    animation: slide-show-2 15s ease-in-out infinite;
}

/* For third image, we'll use a child element approach in HTML */
.background-image .bg-slide-3 {
    background-image: url("/img/promo-image.jpg");
    animation: slide-show-3 15s ease-in-out infinite;
}

.background-image > *:not(.bg-slide-3) {
    position: relative;
    z-index: 1;
}

/* Crossfade animations */
@keyframes slide-show-1 {
    0%, 33% { opacity: 1; }
    36%, 100% { opacity: 0; }
}

@keyframes slide-show-2 {
    0%, 30% { opacity: 0; }
    33%, 66% { opacity: 1; }
    69%, 100% { opacity: 0; }
}

@keyframes slide-show-3 {
    0%, 63% { opacity: 0; }
    66%, 99% { opacity: 1; }
    100% { opacity: 0; }
}

.banner-content-full {
    grid-column: none !important
}

.search-filter {
    background-color: var(--qld-color-default-color-dark-background-default);
    border-radius: 1rem 1rem 2rem 1rem;
}

.search-filter-title {
    color: white;
    margin: 0;
}

#active-filters {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

#active-filters::-webkit-scrollbar {
    height: 4px;
}

#active-filters::-webkit-scrollbar-track {
    background: transparent;
}

#active-filters::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}

#active-filters .tag-item {
    flex-shrink: 0;
}

.search-filter .dropdown-toggle {
    padding-inline: .5rem;
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    height: var(--qld-header-preheader-height);
    background-color: var(--dropdown-bg);
}

.search-filter .dropdown-toggle::after {
    --_icon-size: 1.5rem;

    display: inline-block;
    width: var(--_icon-size);
    height: var(--_icon-size);
    background-position: center center;
    background-repeat: no-repeat;
    mask-position: center center;
    mask-repeat: no-repeat;
    mask-size: contain;
    background-size: contain;
    vertical-align: middle;
    color: var(--qld-icon-color, var(--qld-action-icon-color, inherit));
    background-color: currentcolor;
    mask-image: var(--qgds-icon-chevron-down);
    -webkit-mask-image: var(--qgds-icon-chevron-down);
    margin-left: .5rem;
    transition: transform 0.3s ease;
}

.search-filter .dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

.filter-content {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s ease-in-out;
}

.filter-content.expanded {
    max-height: 800px;
    transition: max-height 0.4s ease-in-out;
}

.filter-content ul {
    padding: 0 0.5rem !important
}

.content-item {
    display: none
}

.content-item.active {
    display: block;
}

/* Persistent selected state for tag-link */
.tag-link.selected {
    background-color: var(--qld-dark-action-primary-hover) !important;
    color: var(--QLD-color-dark__link--on-action) !important;
    outline: 3px solid var(--qld-dark-action-primary-hover) !important;
    outline-offset: 2px !important;
    text-decoration: underline;
}

.tag-link.selected a {
    color: var(--QLD-color-dark__link--on-action) !important;
}

#help-toggle {
    min-height: 0;
    min-width: 0;
}

.filter-options-wrap {
    max-height: 300px;
}

.result-card .card-title {
    font-size: 1.25rem;
}

.result-card .card-text {
    font-size: 1rem;
}

.hidden {
    display: none;
} 

.filter-options-wrap .pagefind-modular-filter-pills {
    overflow-x: auto;
    flex-direction: column;
    flex-wrap: wrap;
    max-height: 300px;
}

.filter-options-wrap .pagefind-modular-filter-pills-wrapper {
    overflow-x: unset;
    padding: 0;
    flex: 1;
}