/**
 * File: style.css
 * Version: 1.0.9
 *
 * Changes in 1.0.9:
 * - Added mobile padding override (10px all around for tab and panel)
 * - Mobile breakpoint at max-width: 767.98px
 */

.wp-block-pixelwind-accordion-item.pw-accordion__item {
    box-sizing: border-box;
}

.wp-block-pixelwind-accordion-item.pw-accordion__item .pw-accordion__tab {
    /* Button resets */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 0;
    box-shadow: none;
    margin: 0;
    font-family: inherit;
    letter-spacing: inherit;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    cursor: pointer;
    outline: none !important;

    /* Colors from CSS variables - will cascade to children */
    color: var(--pw-title-color, inherit);
    background: var(--pw-tab-bg, transparent);
}

/* FIXED in 1.0.8: Remove outline on focus */
.wp-block-pixelwind-accordion-item.pw-accordion__item .pw-accordion__tab:focus {
    outline: none !important;
}

/* FIXED in 1.0.8: Active state colors + no outline */
.wp-block-pixelwind-accordion-item.pw-accordion__item .pw-accordion__tab[aria-expanded="true"] {
    background: var(--pw-active-tab-bg, var(--pw-tab-bg, transparent));
    color: var(--pw-active-title-color, var(--pw-title-color, inherit));
    outline: none !important;
}

/* Arrow inherits color from button */
.wp-block-pixelwind-accordion-item.pw-accordion__item .pw-accordion__arrow {
    display: inline-block;
    width: 0.625rem;
    height: 0.625rem;
    margin-left: 0.75rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

/* DESKTOP arrows */
@media (min-width: 768px) {
    .wp-block-pixelwind-accordion-item.pw-accordion__item .pw-accordion__arrow {
        transform: rotate(-45deg);
    }

    .wp-block-pixelwind-accordion-item.pw-accordion__item .pw-accordion__tab[aria-expanded="true"] .pw-accordion__arrow {
        transform: rotate(135deg);
    }
}

/* MOBILE arrows */
@media (max-width: 767.98px) {
    .wp-block-pixelwind-accordion-item.pw-accordion__item .pw-accordion__arrow {
        transform: rotate(45deg);
    }

    .wp-block-pixelwind-accordion-item.pw-accordion__item .pw-accordion__tab[aria-expanded="true"] .pw-accordion__arrow {
        transform: rotate(-135deg);
    }

    /* Mobile panel padding override */
    .wp-block-pixelwind-accordion-item.pw-accordion__item .pw-accordion__panel {
        padding: 10px !important;
    }
}

/* Title gets color directly, not inherited */
.wp-block-pixelwind-accordion-item.pw-accordion__item .pw-accordion__title {
    font-size: var(--pw-title-size);
    font-weight: var(--pw-title-weight);
    color: var(--pw-title-color, currentColor);
}

/* Active state title color */
.wp-block-pixelwind-accordion-item.pw-accordion__item .pw-accordion__tab[aria-expanded="true"] .pw-accordion__title {
    color: var(--pw-active-title-color, var(--pw-title-color, currentColor));
}

/* Panel */
.wp-block-pixelwind-accordion-item.pw-accordion__item .pw-accordion__panel {
    box-sizing: border-box;
    background: var(--pw-panel-bg, transparent);
}

/* ============================================================
   SPLIT MODE SUPPORT (40/60 desktop layout)
   ============================================================ */

.pw-adv__index .pw-accordion__arrow {
    display: inline-block;
    width: 0.625rem;
    height: 0.625rem;
    margin-left: 0.75rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.pw-adv__index .pw-accordion__tab[aria-selected="true"] .pw-accordion__arrow {
    transform: rotate(135deg);
}

.pw-adv__index .pw-accordion__tab {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 0;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: space-between;

    /* Colors from CSS variables */
    color: var(--pw-title-color, inherit);
    background: var(--pw-tab-bg, transparent);
}

.pw-adv__index .pw-accordion__tab[aria-selected="true"],
.pw-adv__index .pw-accordion__tab[aria-expanded="true"] {
    background: var(--pw-active-tab-bg, var(--pw-tab-bg, transparent));
    color: var(--pw-active-title-color, var(--pw-title-color, inherit));
    outline: none !important;
}

.pw-adv__index .pw-accordion__title {
    color: var(--pw-title-color, currentColor);
}

.pw-adv__index .pw-accordion__tab[aria-selected="true"] .pw-accordion__title,
.pw-adv__index .pw-accordion__tab[aria-expanded="true"] .pw-accordion__title {
    color: var(--pw-active-title-color, var(--pw-title-color, currentColor));
}