/******************** Custom Accordion Icon (v7.1) ********************/

/* Base icon styling
 * Absolutely positioned so it can never influence the button's height.
 * Vertically centred via top:50% + margin-top (not transform), leaving
 * transform free for WP core's rotate(45deg) open-state rule.
 *
 * Closed: primary-tint (#33647D) icon, transparent background.
 * Open:   white icon, secondary circle background.
 * Transform/rotation is left entirely to WP core's style.min.css rule:
 *   .wp-block-accordion-item.is-open > .wp-block-accordion-heading
 *     .wp-block-accordion-heading__toggle-icon { transform: rotate(45deg); }
 */

/* Positioning context for the absolute icon */
.wp-block-accordion-heading__toggle {
    position: relative;
}

.wp-block-accordion-heading__toggle-icon {

    /* 1. Take out of flex flow — cannot affect button height */
    position: absolute !important;
    right: var(--wp--preset--spacing--space-900);
    top: 50%;
    margin-top: -1rem; /* half of 2rem height — centres without transform */

    /* 2. Size */
    width: 2rem !important;
    height: 2rem !important;
    border-radius: 50%;

    /* 3. Hide the literal "+" text character */
    font-size: 0 !important;

    /* 4. Closed-state icon: primary-tint stroke, transparent fill */
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224px%22%20height%3D%2224px%22%20stroke-width%3D%221.5%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M6%2012H12M18%2012H12M12%2012V6M12%2012V18%22%20stroke%3D%22%2333647D%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C%2Fsvg%3E");
    background-size: 65%;
    background-position: center;
    background-repeat: no-repeat;

    transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
    will-change: transform;
    backface-visibility: hidden;
}

/* Open state: secondary circle + white icon
 * Transform/rotation handled by WP core — no override needed.
 */
.wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon {
    background-color: var(--wp--preset--color--secondary) !important;
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224px%22%20height%3D%2224px%22%20stroke-width%3D%221.5%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M6%2012H12M18%2012H12M12%2012V6M12%2012V18%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C%2Fsvg%3E") !important;
}


/************** Panel show / hide **************/

/* Hidden by default — let theme.json supply the padding so it's always consistent */
.wp-block-accordion-panel {
    display: none !important;
}

/* Visible when the item is open */
.wp-block-accordion-item.is-open .wp-block-accordion-panel {
    display: block !important;
}

/* Editor override */
.editor-styles-wrapper .wp-block-accordion-panel {
    display: block !important;
}


/************** Full-width clickable heading **************/

/* Move padding from the h3 onto the button so the entire heading area is tappable.
 * theme.json sets padding on core/accordion-heading (the h3); zeroing it here and
 * reapplying the same values to the button makes the button fill that full area.
 * Core already gives the button width:100%, so this is a CSS-only fix.
 */
.wp-block-accordion-heading {
    padding: 0 !important;
}

.wp-block-accordion-heading__toggle {
    padding: var(--wp--preset--spacing--space-700) var(--wp--preset--spacing--space-900) !important;
}

.wp-block-accordion-heading__toggle-title {
    padding-right: calc(2rem + 0.75rem); /* clear the 2rem icon + gap */
}


/************** Heading hover & open states **************/

/* Remove underline on hover
 * Core sets text-decoration:underline on the __toggle-title span (not the button),
 * so we must target that span directly to override it.
 */
.wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title,
.wp-block-accordion-heading__toggle:focus-visible .wp-block-accordion-heading__toggle-title {
    text-decoration: none !important;
}

/* Accordion item: smooth border-color transition */
.wp-block-accordion-item {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Border highlight on hover */
.wp-block-accordion-item:hover {
    border-color: var(--wp--preset--color--secondary) !important;
}

/* Border highlight + shadow when open */
.wp-block-accordion-item.is-open {
    border-color: var(--wp--preset--color--secondary) !important;
    box-shadow: var(--wp--preset--shadow--medium-shade) !important;
}