/*
 * KF Compliance Block Styles
 */


@view-transition {
    navigation: auto;
}

::view-transition-old(post-image),
::view-transition-new(post-image) {
    animation-duration: 400ms;
    animation-timing-function: ease;
}

::view-transition-old(post-title),
::view-transition-new(post-title) {
    animation-duration: 300ms;
    animation-timing-function: ease;
}



.kf-compliance-block {
    width: 100%;
    margin: 0 auto;

    display: grid;
    gap: 40px;
    grid-template-columns: 60px 1fr;

    transition: grid-template-columns 0.3s ease;
}


/* Filter sidebar open state (desktop) */
.kf-compliance-block.filter-open.filter-open {
    grid-template-columns: 230px 1fr;
}

.kf-compliance-block.filter-open.filter-open .search-filter-form-btn-open {
    display: none;
    opacity: 0;
}

.kf-compliance-block.filter-open.filter-open .search-filter-form-inner {
    opacity: 1;
    visibility: visible;
    max-height: 2000px;
}

.kf-compliance-block .searchandfilter {
}

/* Grid layout */
.kf-compliance-grid {
    display: grid;
    gap: 40px;
    width: 100%;
}

.kf-compliance-block .search-filter-results {
    display: grid;
    gap: 40px;
}

/* Layout variants */
.layout-grid-2-col .kf-compliance-grid {
    grid-template-columns: repeat(2, 1fr);
}

.layout-grid-3-col .kf-compliance-grid {
    grid-template-columns: repeat(3, 1fr);
}

.layout-grid-4-col .kf-compliance-grid {
    grid-template-columns: repeat(4, 1fr);
}


/* Compliance card */
.kf-compliance-card {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border: 1px solid #19191926;
    border-radius: 20px;
    overflow: hidden;
    transition: box-shadow 0.2s ease, opacity 0.3s ease-out;
    height: 100%;
}

.kf-compliance-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.kf-compliance-card__image-container {
    background-color: #E8E9FF;
    height: 200px;
}

.kf-compliance-card__image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
}

.kf-compliance-card__image[src$=".png"],
.kf-compliance-card__image[src$=".svg"] {
    object-fit: contain;
    padding: 20px;
}

.kf-compliance-card__image-placeholder {
    width: 100%;
    height: 100%;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kf-compliance-card__image-fallback {
    color: #888;
    font-style: italic;
}

.kf-compliance-card__content {
    display: flex;
    flex-direction: column;
    padding: 20px;
    flex-grow: 1;
    flex-basis: 0;
}

.kf-compliance-card__title.kf-compliance-card__title {
    margin: 0 0 .5em 0;

    font-weight: 500;
    font-size: clamp(22px, 19.09px + 0.91vw, 30px);
    line-height: 90%;
    letter-spacing: -2%;

}

.kf-compliance-card__title a {
    color: #191919;
    text-decoration: none;

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
    overflow: hidden;
    padding-bottom: .1em;

    transition: color 0.2s ease;
}

.kf-compliance-card__title a:hover {
    color: #5F61FF;
}

.kf-compliance-card__excerpt {
    color: #555;
    margin: 0 0 16px 0;
    flex-grow: 1;

    font-size: 14px;
    line-height: 150%;

}

.kf-compliance-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 16px 0;
}

.kf-compliance-badge {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 4px;

    font-weight: 600;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 2%;

    background-color: #0A0B2E;
    color: #fff;
}

.kf-compliance-card__button {
    display: inline-block;
    color: #5F61FF;
    text-decoration: none;
    font-weight: 600;
    font-size: var(--wp--preset--font-size--x-18);
    line-height: 100%;
}

.kf-compliance-card__button::after {
    content: url('data:image/svg+xml,<svg width="6" height="7" viewBox="0 0 6 7" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 4.76837e-07L0 7L6 3.50146L0 4.76837e-07Z" fill="%235F61FF"/></svg>');
    margin-left: .3em;
    vertical-align: text-top;
    display: inline-block;
    transition: transform 0.2s ease;
}

.kf-compliance-card__button:hover::after {
    transform: translateX(3px);
}

/* Load More button */
.kf-load-more {
    display: block;
    margin: 0 auto;
    padding: 18px 24px;
    border: 1px solid #1A1825;
    border-radius: 49px;
    background-color: #fff;
    color: #1A1825;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.kf-load-more:hover {
    background-color: #f5f5f5;
}

.kf-load-more:active {
    transform: translateY(1px);
}

/* Loading state — keeps the button in the layout during AJAX so the
   content below does not jump up (layout shift fix) */
.kf-load-more.is-loading {
    cursor: default;
    opacity: 0.7;
    pointer-events: none;
}

/* .kf-load-more.is-loading::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 10px;
    border: 2px solid #1A1825;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: middle;
    animation: kf-spin 0.7s linear infinite;
}

@keyframes kf-spin {
    to {
        transform: rotate(360deg);
    }
} */

/* No results message */
.kf-compliance-no-results {
    text-align: center;
    padding: 40px 20px;
    font-size: 16px;
    color: #777;
}

/* Hidden meta element */
.kf-compliance-meta {
    display: none;
}

/* Editor styles */
.editor-styles-wrapper .kf-compliance-block {
    background-color: #fafafa;
    padding: 16px;
    border: 1px dashed #ddd;
    border-radius: 4px;
}


.kf-compliance-block .search-filter-form {
    display: grid;
    align-items: start;
    justify-items: start;
}

.kf-compliance-block .search-filter-form > * {
    grid-column: 1;
    grid-row: 1;
}


.kf-compliance-block .search-filter-form > .search-filter-form-btn-open {
    position: sticky;
    top: calc(var(--header-nav-bar-height, 80px) + 40px);

    background: none;
    border: none;
    cursor: pointer;
    padding: 0;

    opacity: 1;
    transition: opacity 0.3s ease;
}

.kf-compliance-block .search-filter-form > .search-filter-form-btn-open svg rect {
    transition: fill 0.3s ease;
}

.kf-compliance-block .search-filter-form > .search-filter-form-btn-open:hover svg rect {
    fill: #5F61FF;
}

.kf-compliance-block .search-filter-form .search-filter-form-inner {
    position: sticky;
    top: calc(var(--header-nav-bar-height, 80px) + 40px);

    border-top: 5px solid #5F61FF;
    box-shadow: 0px 4px 25px 0px #1A182526;

    border-radius: 10px;
    padding: 25px 20px;

    opacity: 0;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, max-height 0.3s ease;

    min-width: 230px;

}

.kf-compliance-block .search-filter-form-header {
    font-weight: 700;
    font-size: 16px;
    line-height: 100%;
    display: flex;
    align-items: center;
}

.kf-compliance-block .search-filter-form-header > svg {
    margin-right: 8px;
}

.kf-compliance-block .search-filter-form-header > .search-filter-form-btn-close {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;

    transition: opacity 0.3s ease;
}

.kf-compliance-block .search-filter-form-header > .search-filter-form-btn-close:hover {
    opacity: 0.7;
}

.kf-compliance-block .searchandfilter ul {
    display: flex;
    flex-direction: column;
    padding: 0;
    list-style: none;
    margin: 0;
}

.kf-compliance-block .searchandfilter ul > li {
    
}

.kf-compliance-block .searchandfilter > ul {
    margin-top: 20px;
    gap: 10px;
}


.kf-compliance-block .searchandfilter .sf-field-search input[type="text"] {
    width: 100%;
    padding: 15px;
    padding-right: 40px;
    border: none;
    background-color: transparent;
    border-radius: 80px;
    box-shadow: 
        0px 4px 20px 0px #00000017,
        inset 1px 1px 0px 0px #fff,
        inset -1px -1px 0px 0px #fff,
        inset -6px -6px 10px 3px #ffffff55;

    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
}

.kf-compliance-block .searchandfilter .sf-field-search input[type="text"]:focus {
  outline-color: #5F61FF;
}

.kf-compliance-block .searchandfilter .sf-field-search label {
    position: relative;
    display: flex;
    align-items: center;
}

.kf-compliance-block .searchandfilter .sf-field-search label::after {
    content: url('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.49547 0C3.36472 0 0 3.36472 0 7.49547C0 11.6262 3.36472 14.9909 7.49547 14.9909C9.29177 14.9909 10.9414 14.3531 12.2343 13.2942L16.7096 17.7695C16.7787 17.8415 16.8614 17.8989 16.953 17.9385C17.0445 17.978 17.143 17.9989 17.2427 18C17.3425 18.001 17.4414 17.9821 17.5337 17.9444C17.626 17.9067 17.7099 17.851 17.7804 17.7804C17.851 17.7099 17.9067 17.626 17.9444 17.5337C17.9821 17.4414 18.001 17.3425 18 17.2427C17.9989 17.143 17.978 17.0445 17.9385 16.953C17.8989 16.8614 17.8415 16.7787 17.7695 16.7096L13.2942 12.2343C14.3531 10.9414 14.9909 9.29177 14.9909 7.49547C14.9909 3.36472 11.6262 0 7.49547 0ZM7.49547 1.49909C10.8161 1.49909 13.4919 4.17489 13.4919 7.49547C13.4919 10.8161 10.8161 13.4919 7.49547 13.4919C4.17489 13.4919 1.49909 10.8161 1.49909 7.49547C1.49909 4.17489 4.17489 1.49909 7.49547 1.49909Z" fill="%231A1825"/></svg>');
    position: absolute;
    right: 16px;
    top: 16px;
}

.kf-compliance-block .searchandfilter ul > li > h4 {
    font-weight: 600;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 8%;
    text-transform: uppercase;
}

.kf-compliance-block .searchandfilter .sf-label-checkbox {
    font-weight: 500;
    font-size: 14px;
    line-height: 100%;
}

.kf-compliance-block .searchandfilter .sf-input-checkbox:not(:checked) {
    appearance: none;
    -webkit-appearance: none;

    width: 12px;
    height: 12px;
    background-color: #1A182526;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    margin-left: 0px;
}


.kf-compliance-block .searchandfilter .sf-input-checkbox:checked {
    accent-color: #5F61FF;
    margin-left: 0px;

    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.kf-compliance-block .searchandfilter li[data-sf-field-input-type="checkbox"] li {
    display: flex;
    align-items: center;
    gap: 3px;
}


.kf-compliance-block .searchandfilter .sf-field-reset a {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 14px;
    background: #1A1825;
    color: #fff;
    border-radius: 49px;
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    margin-top: 10px;

    transition: all 0.2s ease;
}

.kf-compliance-block .searchandfilter .sf-field-reset a:hover {
    background: #5F61FF;
}

.kf-compliance-block .search-filter-scroll-loading {
    display: none;
}



/* Single column fallback (mobile override) */
@media (max-width: 767px) {
    .kf-compliance-grid {
        grid-template-columns: 1fr !important;
    }

    /* Mobile: single-column layout, no grid transition */
    .kf-compliance-block {
        grid-template-columns: 1fr !important;
        transition: none;
    }

    .kf-compliance-block.filter-open.filter-open .search-filter-form-btn-open {
        display: block;
        opacity: 1;
        position: sticky;
    }

    /* Keep form controls above the fixed dialog */
    .search-filter-form {
        position: relative;
        z-index: 10000;
    }

    /* Mobile: filter sidebar becomes a full-width fixed dialog */
    .kf-compliance-block .search-filter-form .search-filter-form-inner {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        /* height: 100vh; */
        max-height: 100vh;
        overflow-y: auto;
        z-index: 9999;
        opacity: 0;
        visibility: hidden;
        transform: translateX(-100%);
        transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    }

    /* Mobile: dialog slides in when open */
    .kf-compliance-block.filter-open .search-filter-form .search-filter-form-inner {
        background: #fff;
        margin: 20px;
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
        position: fixed;
        top: 0;
        width: calc(100vw - 40px);
        max-height: calc(100vh - 40px);
    }
}