/**
 * Pattern Accordion Styles
 *
 * We create 4 accordion block patterns:
 * - Maroon Accordion
 * - Dark Blue Accordion
 * - Light Blue Accordion
 * - Info Block Accordion
 *
 * This allows us to apply style updates globally even for unsynced patterns
 * Unsynced patterns allow editors to update content while keeping the pattern structure and styles consistent.
 */

 /* Global Accordion Styles */
 /* add margin above and below the accordion */
 .wp-block-kadence-accordion{
    margin: var(--space-4xl) 0;
 }

/* Maroon Accordion Style */
.accordion-style-maroon .kt-blocks-accordion-header,
.accordion-style-maroon .wp-block-kadence-pane-title {
    background-color: var(--njtpa-maroon) !important;
    color: var(--njtpa-white) !important;
}

.accordion-style-maroon .kt-blocks-accordion-header:hover {
    background-color: var(--njtpa-maroon-dark) !important;
}

.accordion-style-maroon .kt-accordion-panel-inner {
    border-color: var(--njtpa-maroon) !important;
}

/* Dark Blue Accordion Style */
.accordion-style-dark-blue .kt-blocks-accordion-header,
.accordion-style-dark-blue .wp-block-kadence-pane-title {
    background-color: var(--njtpa-dark-blue) !important;
    color: var(--njtpa-white) !important;
}

.accordion-style-dark-blue .kt-blocks-accordion-header:hover {
    background-color: var(--njtpa-dark-blue-dull) !important;
}

.accordion-style-dark-blue .kt-accordion-panel-inner {
    border-color: var(--njtpa-dark-blue) !important;
}

/* Light Blue Accordion Style */
.accordion-style-light-blue .kt-blocks-accordion-header,
.accordion-style-light-blue .wp-block-kadence-pane-title {
    background-color: var(--njtpa-lightblue) !important;
    color: var(--njtpa-dark-blue) !important;
}

.accordion-style-light-blue .kt-blocks-accordion-header:hover {
    background-color: var(--njtpa-dark-blue-gray-light) !important;
}

.accordion-style-light-blue .kt-accordion-panel-inner {
    border-color: var(--njtpa-lightblue) !important;
    background-color: var(--njtpa-white) !important;
}

/* Info Block Accordion Style - Matches info-block.php template */
.accordion-style-info .kt-blocks-accordion-header,
.accordion-style-info .wp-block-kadence-pane-title {
    background-color: var(--njtpa-gray-lighter) !important;
    color: var(--njtpa-dark-gray) !important;
    border-bottom: 1px solid var(--njtpa-gray-light) !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.accordion-style-info .kt-blocks-accordion-header:hover {
    background-color: var(--njtpa-gray-light) !important;
}

.accordion-style-info .kt-accordion-wrap {
    background: var(--njtpa-white) !important;
    border: 1px solid var(--njtpa-gray-light) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    box-shadow: none !important;
}

.accordion-style-info .kt-accordion-panel-inner {
    border-bottom: 1px solid var(--njtpa-gray-light) !important;
    background-color: var(--njtpa-white) !important;
    padding: 1rem !important;
}

.accordion-style-info .kt-accordion-panel-inner:last-child {
    border-bottom: none !important;
}