/**
 * FAQ Block - Frontend Styles
 * 
 * @package UnitekCollege
 * @version 1.0.0
 */

/* ===================================
   1. BASE & GLOBAL STYLES
   =================================== */

/* Editor overflow fix */
.block-editor-block-list__layout .faq-section-block,
.editor-styles-wrapper .faq-section-block,
.wp-block-acf-faq .faq-section-block {
    max-width: 100%;
    overflow-x: hidden;
}

/* Main block container */
.faq-section-block {
    --faq-container-padding-inline: 9.375rem;
    /* --faq-sidebar-width: 41.25rem; */
    --faq-sidebar-width: 39.75rem;
    --faq-main-width: 68.25rem;
    width: 100%;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background-color: var(--color-white);
    color: var(--color-text-primary);
    box-sizing: border-box;
    overflow-x: visible;
    position: relative;
    border-top: 1px solid var(--color-gray-border);
    border-bottom: 1px solid var(--color-gray-border);

}

/* Block Alignment Support */
.faq-section-block.alignwide {
    max-width: 75rem;
    margin-left: auto;
    margin-right: auto;
}

.faq-section-block.alignfull {
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Fix for editor - prevent overflow */
.block-editor-block-list__layout .faq-section-block.alignfull,
.editor-styles-wrapper .faq-section-block.alignfull,
.wp-block-acf-faq .faq-section-block.alignfull {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* ===================================
   2. LAYOUT STRUCTURE
   =================================== */

.faq-section-content {
    display: flex;
    flex-direction: row;
    gap: 0;
    min-height: 37.5rem;
    max-width: 1728px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    position: relative;
    overflow-x: visible;
}

/* ===================================
   3. SIDEBAR SECTION
   =================================== */

.faq-section-sidebar {
    background-color: var(--faq-sidebar-bg-color, var(--sidebar-bg-color, var(--color-accent-blue, var(--color-primary-dark))));
    padding: 5.625rem 0 5.125rem var(--faq-container-padding-inline);
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    box-sizing: border-box;
    min-width: 0;
    width: var(--faq-sidebar-width);
    flex-shrink: 0;
    position: relative;
}

/* Extend sidebar background to left edge only when container is centered with outer gutter */
@media (min-width: 1729px) {
    .faq-section-block::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: calc(max(0px, ((100vw - 1728px) / 2)) + var(--faq-sidebar-width));
        height: 100%;
        background-color: var(--faq-sidebar-bg-color, var(--sidebar-bg-color, var(--color-accent-blue, var(--color-primary-dark))));
        z-index: 0;
        pointer-events: none;
    }
    
    .faq-section-content {
        position: relative;
        z-index: 1;
    }
    
    .faq-section-sidebar {
        position: relative;
        z-index: 2;
    }
}

.faq-section-title {
    font-family: 'Outfit', sans-serif;
    font-size: 2rem;
    font-weight: 600;
    font-style: normal;
    line-height: 2.5rem;
    letter-spacing: 0;
    color: var(--color-faq-title);
    margin: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    padding-right: 2rem;
}

/* When sidebar background is blue (var(--color-accent-blue)), make title white */
.color-accent-blue .faq-section-title {
    color: var(--color-white) !important;
}

.faq-section-categories {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    box-sizing: border-box;
}

.faq-category-tab {
    font-family: 'Outfit', sans-serif;
    font-size: 1.25rem;
    font-weight: 300;
    font-style: normal;
    line-height: 1.75rem;
    letter-spacing: 0;
    background-color: var(--faq-sidebar-bg-color, var(--sidebar-bg-color, var(--color-accent-blue, var(--color-primary-dark))));
    color: var(--color-white);
    border: none;
    padding: 1.75rem 2rem;;
    text-align: left;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    box-sizing: border-box;
    word-wrap: break-word;
    white-space: normal;
}

.faq-category-tab:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.faq-category-tab.active {
    font-family: 'Outfit', sans-serif;
    font-size: 1.25rem;
    font-weight: 500;
    font-style: normal;
    line-height: 1.75rem;
    letter-spacing: 0;
    background-color: var(--color-white);
    color: var(--color-faq-question);
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-top: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.faq-category-tab:hover:not(.active) {
    background-color: rgba(255, 255, 255, 0.1);
}

/* ===================================
   4. MAIN CONTENT SECTION
   =================================== */

.faq-section-main {
    background-color: var(--color-white);
    padding: 10.375rem 1.875rem 3.75rem 1.875rem;
    padding-right: var(--faq-container-padding-inline);
    position: relative;
    box-sizing: border-box;
    min-width: 0;
    flex: 1;
}

/* ===================================
   5. DESKTOP ACCORDION
   =================================== */

.faq-accordion-category {
    display: none;
}

.faq-accordion-category.active {
    display: block;
}

/* ===================================
   EDITOR PREVIEW STYLES
   =================================== */

/* 1. Only show first category as active if it has the active class (JavaScript controls this) */
.block-editor-block-list__layout .faq-accordion-category.active:first-child,
.editor-styles-wrapper .faq-accordion-category.active:first-child,
.wp-block-acf-faq .faq-accordion-category.active:first-child {
    display: block !important;
}

/* Only style first tab as active if it has the active class (initial state only) */
.block-editor-block-list__layout .faq-category-tab.active:first-child,
.editor-styles-wrapper .faq-category-tab.active:first-child,
.wp-block-acf-faq .faq-category-tab.active:first-child {
    background-color: var(--color-white) !important;
    color: var(--color-faq-question) !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* 2. Show first question/answer expanded only in active category for editor preview */
.block-editor-block-list__layout .faq-accordion-category.active .faq-accordion-item:first-child .faq-accordion-answer.active,
.editor-styles-wrapper .faq-accordion-category.active .faq-accordion-item:first-child .faq-accordion-answer.active,
.wp-block-acf-faq .faq-accordion-category.active .faq-accordion-item:first-child .faq-accordion-answer.active {
    max-height: 31.25rem !important;
    background-color: var(--color-surface-muted) !important;
    overflow: visible !important;
}

.block-editor-block-list__layout .faq-accordion-category.active .faq-accordion-item:first-child .faq-accordion-question.active,
.editor-styles-wrapper .faq-accordion-category.active .faq-accordion-item:first-child .faq-accordion-question.active,
.wp-block-acf-faq .faq-accordion-category.active .faq-accordion-item:first-child .faq-accordion-question.active {
    background-color: var(--color-surface-muted) !important;
    color: var(--color-faq-active) !important;
    padding-top: 1.75rem !important;
}

.block-editor-block-list__layout .faq-accordion-category.active .faq-accordion-item:first-child .faq-accordion-question.active i,
.editor-styles-wrapper .faq-accordion-category.active .faq-accordion-item:first-child .faq-accordion-question.active i,
.wp-block-acf-faq .faq-accordion-category.active .faq-accordion-item:first-child .faq-accordion-question.active i {
    transform: rotate(180deg) !important;
}

.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    box-sizing: border-box;
}

.faq-accordion-item {
    border-bottom: 1px solid var(--color-gray-light);
    min-width: 0;
    box-sizing: border-box;
}

.faq-accordion-item:last-child {
    border-bottom: none;
}

.faq-accordion-question {
    font-family: 'Outfit', sans-serif;
    font-size: 1.25rem;
    font-weight: 500;
    font-style: normal;
    line-height: 1.75rem;
    letter-spacing: 0;
    background: none;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    width: 100%;
    padding: 1.25rem 0 1.25rem 1.875rem;
    color: var(--color-faq-active);
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.9375rem;
    transition: all 0.3s ease;
    box-sizing: border-box;
    word-wrap: break-word;
    white-space: normal;
}

.faq-accordion-question:hover {
    color: var(--color-blue-hover);
}

.faq-accordion-question i {
    width: 1.5rem;
    height: 1.5rem;
    transition: transform 0.3s ease;
    flex-shrink: 0;
    text-align: center !important;
    order: -1;
    display: inline-block;
    opacity: 1;
}

.faq-accordion-question.active i {
    transform: rotate(180deg);
}

.faq-accordion-question.active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background-color: var(--color-surface-muted);
    color: var(--color-faq-active);
}

/* [hidden] removes the panel from layout and the accessibility tree when collapsed. */
.faq-accordion-answer[hidden] {
    display: none !important;
}

.faq-accordion-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background-color: var(--color-white);
}

.faq-accordion-answer.active {
    max-height: 31.25rem;
    background-color: var(--color-surface-muted);
}

.faq-accordion-answer-content {
    font-family: 'Outfit', sans-serif;
    /* padding: 0 5.625rem 1.25rem 3.4375rem; */
    padding: 0 5.625rem 1.25rem 4.5rem;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.5em;
    color: var(--color-primary-dark);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.faq-accordion-answer-content p {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 300;
    font-style: normal;
    line-height: 1.5rem;
    letter-spacing: 0;
    margin: 0 0 1rem 0;
}

.faq-accordion-answer-content p:last-child {
    margin-bottom: 0;
}

/* ===================================
   6. MOBILE ACCORDION
   =================================== */

.faq-mobile-accordion {
    display: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-mobile-accordion.active {
    display: block;
    max-height: 312.5rem;
}

.faq-mobile-accordion-item {
    border-bottom: 1px solid var(--color-gray-border);
    background-color: transparent;
}

.faq-mobile-question {
    font-family: 'Outfit', sans-serif;
    background-color: var(--color-white);
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    width: 100%;
    padding: 1.25rem 1.25rem 1.25rem 2rem;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.4em;
    color: var(--color-accent-blue);
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
    box-sizing: border-box;
    word-wrap: break-word;
    white-space: normal;
    position: relative;
}

.faq-mobile-question i {
    width: 1.5rem;
    height: 1.5rem;
    transition: transform 0.3s ease;
    flex-shrink: 0;
    text-align: center !important;
    order: -1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900;
    font-style: normal;
    opacity: 1;
}

.faq-mobile-question .faq-question-text {
    flex: 1;
    min-width: 0;
}

.faq-mobile-question.active i {
    transform: rotate(180deg);
}

.faq-mobile-question.active {
    background-color: var(--color-surface-muted);
}

.faq-mobile-answer[hidden] {
    display: none !important;
}

.faq-mobile-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background-color: var(--color-white);
}

.faq-mobile-answer.active {
    max-height: 62.5rem;
    background-color: var(--color-surface-muted);
}

.faq-mobile-answer-content {
    font-family: 'Outfit', sans-serif;
    /* padding: 1.25rem 2rem 1.25rem 5.5rem; */
    padding: 1.25rem 2rem 1.25rem 4.5rem;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.5em;
    color: var(--color-primary-dark);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.faq-mobile-answer-content p {
    margin: 0 0 1rem 0;
}

.faq-mobile-answer-content p:last-child {
    margin-bottom: 0;
}

/* ===================================
   7. EDITOR PREVIEW STYLES
   =================================== */

.wp-block-acf-faq .faq-section-block {
    border: 2px dashed var(--color-border-medium);
    position: relative;
}

.wp-block-acf-faq .faq-section-block::after {
    content: "❓ FAQ Section - Interactive categories & accordion";
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 0.5rem 0.75rem;
    font-size: 0.6875rem;
    border-radius: 0.25rem;
    z-index: 10;
    font-weight: 500;
    max-width: 17.5rem;
    text-align: center;
    line-height: 1.3;
    pointer-events: none;
}

/* 3. Hide mobile accordion in editor preview (desktop view only) */
.block-editor-block-list__layout .faq-mobile-accordion,
.editor-styles-wrapper .faq-mobile-accordion,
.wp-block-acf-faq .faq-mobile-accordion {
    display: none !important;
    max-height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
}

.block-editor-block-list__layout .faq-mobile-accordion.active,
.editor-styles-wrapper .faq-mobile-accordion.active,
.wp-block-acf-faq .faq-mobile-accordion.active {
    display: none !important;
    max-height: 0 !important;
    visibility: hidden !important;
}

.block-editor-block-list__layout .faq-mobile-accordion-item,
.editor-styles-wrapper .faq-mobile-accordion-item,
.wp-block-acf-faq .faq-mobile-accordion-item {
    display: none !important;
}

/* 4. Ensure desktop accordion is visible and functional in editor preview */
.block-editor-block-list__layout .faq-section-main,
.editor-styles-wrapper .faq-section-main,
.wp-block-acf-faq .faq-section-main {
    display: block !important;
    visibility: visible !important;
}

.block-editor-block-list__layout .faq-accordion-category,
.editor-styles-wrapper .faq-accordion-category,
.wp-block-acf-faq .faq-accordion-category {
    visibility: visible !important;
}

.block-editor-block-list__layout .faq-accordion,
.editor-styles-wrapper .faq-accordion,
.wp-block-acf-faq .faq-accordion {
    display: flex !important;
    visibility: visible !important;
}

/* 5. Ensure interactive elements are clickable in editor preview */
.block-editor-block-list__layout .faq-category-tab,
.editor-styles-wrapper .faq-category-tab,
.wp-block-acf-faq .faq-category-tab {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 2 !important;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
}

.block-editor-block-list__layout .faq-accordion-question,
.editor-styles-wrapper .faq-accordion-question,
.wp-block-acf-faq .faq-accordion-question {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 2 !important;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
}

.block-editor-block-list__layout .faq-mobile-question,
.editor-styles-wrapper .faq-mobile-question,
.wp-block-acf-faq .faq-mobile-question {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 2 !important;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
}

/* 6. Ensure editor preview container doesn't block interactions */
.block-editor-block-list__layout .faq-section-block,
.editor-styles-wrapper .faq-section-block,
.wp-block-acf-faq .faq-section-block {
    pointer-events: auto !important;
    position: relative;
}

.block-editor-block-list__layout .faq-section-content,
.editor-styles-wrapper .faq-section-content,
.wp-block-acf-faq .faq-section-content {
    pointer-events: auto !important;
    position: relative;
}

.block-editor-block-list__layout .faq-section-sidebar,
.editor-styles-wrapper .faq-section-sidebar,
.wp-block-acf-faq .faq-section-sidebar {
    pointer-events: auto !important;
}

.block-editor-block-list__layout .faq-section-main,
.editor-styles-wrapper .faq-section-main,
.wp-block-acf-faq .faq-section-main {
    pointer-events: auto !important;
}

/* ===================================
   8. RESPONSIVE DESIGN
   =================================== */

/* Large Desktop (1729px and above) - Align with container */
@media (min-width: 1729px) {
    .faq-section-block::before {
        left: 0;
        width: calc(max(0px, ((100vw - 1728px) / 2)) + var(--faq-sidebar-width));
    }
}

/* Desktop (1281px - 1540px) - Match header container padding */
@media (min-width: 1281px) and (max-width: 1540px) {
    .faq-section-block {
        --faq-container-padding-inline: 9.375rem;
    }
}

/* Desktop (1541px and above) - Match hero/header clamp logic */
@media (min-width: 1541px) {
    .faq-section-block {
        --faq-container-padding-inline: clamp(6rem, 15.046vw, 16.25rem);
    }
}


/* Desktop (1025px - 1280px) - Align with header */
@media (min-width: 1025px) and (max-width: 1280px) {
    .faq-section-block {
        --faq-container-padding-inline: 5rem;
    }

    .faq-section-sidebar {
        width: calc(100% * 636 / 1728);
        flex: 0 0 calc(100% * 636 / 1728);
    }

    .faq-section-main {
        padding-right: var(--faq-container-padding-inline);
        padding-top: 10.875rem;
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
    }

    
}

/* Desktop (1281px - 1727px) keeps proportional sidebar/main widths */
@media (min-width: 1281px) and (max-width: 1727px) {
    .faq-section-sidebar {
        width: calc(100% * 636 / 1728);
        flex: 0 0 calc(100% * 636 / 1728);
    }

    .faq-section-main {
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* Desktop (1025px and above) */
@media (min-width: 1025px) {
    .faq-section-sidebar {
        padding-top: 6.25rem;
        padding-bottom: 7.5rem;
        gap: 4.0625rem;
    }

    .faq-section-main {
        padding-left: 2.5rem;
        padding-top: 16.5625rem;
        padding-bottom: 12.75rem;
    }
}

/* 1728px and above keeps fixed 636/1092 split */
@media (min-width: 1728px) {
    .faq-section-sidebar {
        width: var(--faq-sidebar-width);
        flex: 0 0 var(--faq-sidebar-width);
    }

    .faq-section-main {
        width: var(--faq-main-width);
        flex: 0 0 var(--faq-main-width);
    }
}

/* Tablet and Desktop (768px and above) */
@media (min-width: 768px) {
    .faq-accordion-question {
        padding: 1.75rem 0 1.75rem 2rem;
        gap: 1rem;
    }

    .faq-accordion-item:first-child .faq-accordion-question {
        padding-top: 0;
    }

    .faq-accordion-item:first-child .faq-accordion-question.active {
        padding-top: 1.75rem;
    }
}



/* Tablet (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .faq-section-block {
        --faq-container-padding-inline: 3.125rem;
    }

    .faq-accordion-answer-content {
        padding-left: 2rem !important;
    }

    .faq-category-tab,
    .faq-category-tab.active {
        padding: 1.75rem 2rem;
    }

    .faq-section-sidebar {
        padding-left: var(--faq-container-padding-inline);
        padding-right: 0px;
        width: clamp(21.875rem, calc(21.875rem + (100vw - 769px) * 100 / 255), 28.125rem);
        flex-shrink: 0;
    }
    
    .faq-section-main {
        padding-right: var(--faq-container-padding-inline);
        padding-top: 13.875rem;
    }
    
    /* Ensure mobile accordion is hidden on tablet */
    .faq-mobile-accordion {
        display: none !important;
        max-height: 0 !important;
    }
    
    .faq-mobile-accordion.active {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 870px) {
    .faq-section-block {
        --faq-container-padding-inline: 2rem;
    }

    .faq-section-sidebar {
        padding-left: var(--faq-container-padding-inline);
    }

    .faq-section-main {
        padding-right: var(--faq-container-padding-inline);
    }
}

/* Desktop (1025px and above) - Hide mobile accordion */
@media (min-width: 768px) {
    .faq-mobile-accordion {
        display: none !important;
        max-height: 0 !important;
    }
    
    .faq-mobile-accordion.active {
        display: none !important;
    }
}

/* Mobile (max-width: 767px) */
@media (max-width: 767.98px) {
    .faq-section-content {
        flex-direction: column;
        gap: 0;
    }
    
    .faq-section-sidebar {
        width: 100%;
        padding: 3.75rem 1rem 5rem 1rem;
        gap: 0;
    }
    
    .faq-section-title {
        font-size: 2rem;
        font-weight: 600;
        line-height: 2.5rem;
        letter-spacing: 0;
        color: var(--color-green-lime);
        margin-bottom: 2.0625rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .faq-section-categories {
        padding: 0;
        background-color: transparent;
        gap: 0;
        /* margin-bottom: 50px; */
    }
    
    .faq-category-tab {
        width: 100%;
        padding: 1.75rem 2rem 1.75rem 2rem;
        /* min-height: 56px; */
        font-family: 'Outfit', sans-serif;
        font-size: 1.25rem;
        font-weight: 300;
        font-style: normal;
        line-height: 1.75rem;
        letter-spacing: 0;
        background-color: var(--faq-sidebar-bg-color, var(--sidebar-bg-color, var(--color-accent-blue, var(--color-primary-dark))));
        border: none;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        color: var(--color-white);
        margin: 0;
        display: flex;
        align-items: center;
        /* justify-content: flex-start; */
        text-align: left;
    }
    
    .faq-category-tab:first-child {
        border-top: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .faq-category-tab:last-child {
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .faq-category-tab.active {
        font-family: 'Outfit', sans-serif;
        font-size: 1.25rem;
        font-weight: 500;
        font-style: normal;
        line-height: 1.75rem;
        letter-spacing: 0;
        background-color: var(--color-white);
        color: var(--color-black-soft);
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        padding: 1.75rem 2rem 1.75rem 2rem;
    }
    
    .faq-category-tab.active + .faq-mobile-accordion {
        background-color: var(--color-white);
    }
    
    .faq-mobile-accordion-item {
        background-color: var(--color-white);
        border-bottom: 1px solid var(--color-gray-border);
    }

    .faq-mobile-question {
        padding: 1.75rem 1.5rem 1.75rem 2rem;
    }
    
    .faq-category-tab:hover:not(.active) {
        background-color: rgba(255, 255, 255, 0.05);
        opacity: 1;
    }
    
    /*
     * Do NOT set .faq-mobile-accordion { display: block } for all panels — that overrides
     * the base display:none / .active rules and leaves inactive panels in the accessibility
     * tree (VoiceOver reads questions from collapsed categories). Only .active is visible.
     */
    
    .faq-section-main {
        display: none;
    }
}

.faq-category-tab:focus-visible,
.faq-accordion-question:focus-visible {
    outline: 0.1875rem solid var(--color-focus-ring) !important;
    outline-offset: 0.1875rem;
    border-radius: 0.25rem;
    position: relative;
    z-index: 2;
}

/*Css for download button*/
#faq-sections .faq-accordion-answer-content .faq-pdf-download {
    display: inline-flex;
    align-items: center;
    gap: 0.1875rem;

    color: var(--color-faq-download-link);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;

    text-decoration: none !important;
}

#faq-sections .faq-accordion-answer-content .faq-pdf-download:hover,
#faq-sections .faq-accordion-answer-content .faq-pdf-download:focus {
    text-decoration: none !important;
    opacity: 0.85;
}

#faq-sections .faq-accordion-answer-content .faq-pdf-download .faq-pdf-icon {
    width: 2rem;
    height: 2rem;

    object-fit: contain;
    display: block;
    flex-shrink: 0;
}