/*
Block Name: Icon With Accordions
Description: A 2-column grid of cards, each with an icon, description and an expandable technical benefits accordion.
*/

/* ==========================================================================
   ICON WITH ACCORDIONS BLOCK
   ========================================================================== */

/* --------------------------------------------------------------------------
   GRID
   2 equal columns on desktop, stacking to 1 column on mobile.
   The gap between cards is handled by grid-gap; the visual divider between
   cells is achieved by setting a background on the grid itself and a solid
   background on each card — the gap reveals the grid background as a line.
   -------------------------------------------------------------------------- */
.block-icon-with-accordions .iwa-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
}

.block-icon-with-accordions.bg6{color: #444444 !important;}
.block-icon-with-accordions.bg6 h3, 
.block-icon-with-accordions.bg6 h4, 
.block-icon-with-accordions.bg6 h5, 
.block-icon-with-accordions.bg6 h6{color: #444444 !important;}

@media screen and (max-width: 768px) {
    .block-icon-with-accordions .iwa-grid {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   CARD
   Each card is one grid cell. Flex column so the accordion panel sits at
   the bottom and the header/desc rows stack naturally at the top.
   -------------------------------------------------------------------------- */
.block-icon-with-accordions .iwa-card {
    display: flex;
    flex-direction: column;
}

/* --------------------------------------------------------------------------
   ROW 1: HEADER — toggle button left, title right
   display: flex keeps them on one line.
   gap provides breathing room between button and title.
   -------------------------------------------------------------------------- */
.block-icon-with-accordions .iwa-header {
    display: grid;
    grid-template-columns: 10rem 1fr;
    align-items: center;
    gap: 2rem;
    margin-bottom: 2.5rem;
}

/* --------------------------------------------------------------------------
   TOGGLE BUTTON
   Reset all browser <button> defaults, then apply theme styles.
   The button contains the +/- circle icon and the expand/collapse label.
   -------------------------------------------------------------------------- */
.block-icon-with-accordions .iwa-toggle-btn {
    /* Reset browser button defaults */
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: none;
    font-family: inherit;
    font-size: inherit;
    text-align: left;
    cursor: pointer;

    /* Layout */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0; /* Never allow the button to squash the title */

    justify-self: center;

    /* Typography */
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--brand-1);
    white-space: nowrap;
    transition: color 0.2s;
}

.block-icon-with-accordions a.iwa-expand-btn{width: fit-content; align-self: end;}

.block-icon-with-accordions .iwa-toggle-btn:hover {
    color: var(--brand-2);
}

/* Keyboard focus ring — visible only for keyboard users, not mouse clicks */
.block-icon-with-accordions .iwa-toggle-btn:focus { outline: none; }
.block-icon-with-accordions .iwa-toggle-btn:focus-visible {
    outline: 3px solid var(--brand-1);
    outline-offset: 3px;
    border-radius: 2px;
}

/* --------------------------------------------------------------------------
   TOGGLE ICON (+/- circle)
   Two pseudo-elements form the + sign. When the card is open (.open class
   added by JS), the vertical bar fades out to create the − sign.
   aria-hidden="true" is set in the PHP so screen readers ignore this element.
   -------------------------------------------------------------------------- */
.block-icon-with-accordions .iwa-toggle-icon {
    position: relative;
    display: inline-block;
    width: 6rem;
    height: 2.5rem;
    border-radius: 15px;
    background-color: #B5B5B5;
}

/* Horizontal bar — always visible */
.block-icon-with-accordions .iwa-toggle-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translate(15%, -50%);
    width: 3rem;
    height: 3rem;
    background: var(--brand-2);
    border-radius: 50%;
    transition: all .2s;
}

.block-icon-with-accordions .iwa-card.open .iwa-toggle-icon{
    background-color: var(--brand-1);
}

.block-icon-with-accordions .iwa-card.open .iwa-toggle-icon::before {
    transform: translate(85%, -50%);
    transition: all .2s;
}

/* --------------------------------------------------------------------------
   ROW 2: DESCRIPTION ROW — icon left, WYSIWYG right
   2-column grid keeps them aligned regardless of icon height.
   -------------------------------------------------------------------------- */
.block-icon-with-accordions .iwa-desc-row {
    display: grid;
    grid-template-columns: 10rem 1fr;
    gap: 2rem;
    align-items: start;
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   ICON
   Constrain the image to a consistent size. wp_get_attachment_image()
   outputs a full <img> tag so we target that directly.
   -------------------------------------------------------------------------- */
.block-icon-with-accordions .iwa-icon {
    width: 100%;
    flex-shrink: 0;
}

.block-icon-with-accordions .iwa-icon img {
    width: 100%;
    height: auto;
    display: block;
}

/* --------------------------------------------------------------------------
   DESCRIPTION WYSIWYG
   Light reset on common WYSIWYG elements so they inherit the card styles.
   -------------------------------------------------------------------------- */
.block-icon-with-accordions .iwa-desc { border-top: 3px solid var(--brand-2); padding: 3rem 0 0 2rem; }
.block-icon-with-accordions.has-bg .iwa-desc { border-top: 3px solid #fff; }
.block-icon-with-accordions .iwa-desc p { margin-top: 0; }
.block-icon-with-accordions .iwa-desc p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   ACCORDION PANEL
   Height is animated by JS between 0 and a measured pixel value —
   the same technique used in block-accordions.js.
   overflow: hidden must stay on at all times to clip content during animation.
   -------------------------------------------------------------------------- */
.block-icon-with-accordions .iwa-accordion-panel {
    height: 0;
    overflow: hidden;
    transition: height 0.32s ease;
}

/* --------------------------------------------------------------------------
   ACCORDION INNER
   Provides the visual top border and internal padding.
   This is the element whose offsetHeight JS measures as the target height.
   margin-top pushes it away from the description row above.
   -------------------------------------------------------------------------- */
.block-icon-with-accordions .iwa-accordion-inner {
    margin-top: 1.5rem;
}

/* --------------------------------------------------------------------------
   BENEFIT LIST
   Custom bullet list. Each item has an optional bold title (displayed as a
   block element) followed by the supporting copy inline.
   -------------------------------------------------------------------------- */
.block-icon-with-accordions .iwa-tech-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Bold benefit title — displayed as a block so body copy wraps below it */
.block-icon-with-accordions .iwa-tech-list li strong {
    display: block;
    font-weight: 700;
    color: var(--brand-2);
    margin-bottom: 0.2rem;
}

/* --------------------------------------------------------------------------
   EDITOR EMPTY STATE
   Only visible inside wp-admin when no cards have been added yet.
   -------------------------------------------------------------------------- */
.block-icon-with-accordions .iwa-empty-notice {
    padding: 2rem;
    color: var(--brand-1);
    font-weight: 600;
    font-size: 1.6rem;
}

@media(max-width: 1024px){
    .block-icon-with-accordions .iwa-grid{grid-template-columns: 1fr !important;}
}