/* =======================================================================
   EPW Physio Accordion  –  style.css  v3.0.0
   Single-item widget; users stack multiple items in one Elementor column.
   ======================================================================= */

/* ── CSS custom properties ──────────────────────────────────────────── */
.epw-item {
    --epw-bg:              #d5e3da;
    --epw-icon-inactive:   #1a3835;
    --epw-icon-active:     #2aa39a;
    --epw-title-inactive:  #1a3835;
    --epw-title-active:    #2aa39a;
    --epw-desc:            #4d5e5a;
    --epw-btn-bg:          #1a3835;
    --epw-btn-hover:       #248079;
    --epw-radius:          36px;
    --epw-ease:            cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Strip default Elementor widget margin around each item ─────────── */
.elementor-widget-epw_accordion_item {
    margin-bottom: 0 !important;
}

/* Give each item the visual card spacing */
.elementor-widget-epw_accordion_item + .elementor-widget-epw_accordion_item {
    margin-top: 16px !important;
}

/* ── Card shell ─────────────────────────────────────────────────────── */
.epw-item {
    background:    var(--epw-bg);
    border-radius: var(--epw-radius);
    overflow:      hidden;
    box-shadow:    0 2px 10px rgba(0, 0, 0, 0.06);
    transition:    box-shadow 0.3s var(--epw-ease);
    position:      relative;
}

.epw-item:hover {
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.11);
}

/* Subtle divider appears only when expanded */
.epw-item.active .epw-top {
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

/* ── Header row ─────────────────────────────────────────────────────── */
.epw-top {
    display:     grid;
    /* icon  |  clickable text area  |  arrow button */
    grid-template-columns: 68px 1fr auto;
    align-items: center;
    gap:         0 20px;
    padding:     20px 24px;
    cursor:      default;
}

/* ── Icon circle ────────────────────────────────────────────────────── */
.epw-icon-wrap {
    width:           64px;
    height:          64px;
    border-radius:   50%;
    background:      var(--epw-icon-inactive);
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    overflow:        hidden;
    transition:      background 0.35s var(--epw-ease);
    pointer-events:  none;
}

.epw-item.active .epw-icon-wrap {
    background: var(--epw-icon-active);
}

.epw-icon-wrap img {
    width:      55%;
    height:     55%;
    object-fit: contain;
    display:    block;
    /* Tint any icon white – works for SVG + transparent PNG */
    filter:     brightness(0) invert(1);
}

/* ── Text area (title + description) ───────────────────────────────── */
.epw-left {
    display:     grid;
    /* Desktop: title left | description right, side by side */
    grid-template-columns: 1fr;
    align-items: center;
    cursor:      pointer;
    user-select: none;
    min-width:   0;
    transition:  transform 0.2s ease;
    border-radius: 6px;
}

.epw-left:focus-visible {
    outline:        2px solid var(--epw-icon-active);
    outline-offset: 4px;
}

.epw-left:hover {
    transform: translateX(3px);
}

/* On wider screens, put title + description on one row */
@media (min-width: 768px) {
    .epw-left {
        grid-template-columns: auto 1fr;
    }
    .epw-text {
        display:               contents; /* let h3 and p each be their own grid cell */
    }
}

.epw-text {
    display:    contents;
}

.epw-left h3 {
    margin:      0;
    padding:     0;
    font-size:   1.2rem;
    font-weight: 700;
    line-height: 1.25;
    color:       var(--epw-title-inactive);
    white-space: nowrap;
    transition:  color 0.35s var(--epw-ease);
    padding-right: 28px; /* gap between title and description */
}

.epw-item.active .epw-left h3 {
    color: var(--epw-title-active);
}

.epw-left p {
    margin:      0;
    padding:     0;
    font-size:   0.875rem;
    color:       var(--epw-desc);
    line-height: 1.55;
    min-width:   0;
}

/* ── Arrow / link button ────────────────────────────────────────────── */
.epw-btn,
.epw-btn--no-link {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           52px;
    height:          52px;
    min-width:       52px;
    border-radius:   50%;
    background:      var(--epw-btn-bg);
    color:           #fff;
    font-size:       1.2rem;
    line-height:     1;
    flex-shrink:     0;
    text-decoration: none;
    border:          none;
    cursor:          pointer;
    transition:      background  0.25s ease,
                     transform   0.35s var(--epw-ease);
    /* keep the button from triggering the header click */
    position:        relative;
    z-index:         2;
}

.epw-btn:hover {
    background:      var(--epw-btn-hover);
    color:           #fff;
    text-decoration: none;
}

.epw-btn:focus-visible {
    outline:        2px solid var(--epw-icon-active);
    outline-offset: 3px;
}

/* Rotate the arrow 45 ° when active (↗ becomes ↙ visually closing) */
.epw-item.active .epw-btn,
.epw-item.active .epw-btn--no-link {
    transform: rotate(45deg);
}

/* ── Expandable content wrapper ─────────────────────────────────────── */
.epw-content {
    height:     0;
    overflow:   hidden;
    transition: height 0.4s var(--epw-ease);
}

/* ── Inner container (the Elementor nested area lives here) ─────────── */
.epw-container {
    /* No min-height on the frontend — size is driven entirely by its children */
    padding: 12px 24px 24px;
}

/* In the Elementor editor, show a placeholder when nothing is dropped yet */
.elementor-editor-active .epw-container:empty,
.elementor-editor-active .epw-container > .e-con:empty {
    min-height:    80px;
    border:        2px dashed #b0c4bc;
    border-radius: 20px;
    position:      relative;
}

.elementor-editor-active .epw-container:empty::after {
    content:     'Drop widgets here';
    position:    absolute;
    inset:       0;
    display:     flex;
    align-items: center;
    justify-content: center;
    color:       #98b3ab;
    font-size:   0.8rem;
    font-style:  italic;
}

/* Let the nested Elementor container inherit the card's background */
.epw-container > .e-con,
.epw-container > .elementor-section {
    background: transparent !important;
}

/* Upgrade-notice fallback */
.epw-upgrade-notice {
    padding:     20px;
    color:       #666;
    font-style:  italic;
    font-size:   0.875rem;
    text-align:  center;
    border:      2px dashed #b0c4bc;
    border-radius: 20px;
    margin:      0;
}

/* ── Tablet ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .epw-top    { padding: 18px 20px; gap: 0 16px; }
    .epw-icon-wrap { width: 56px; height: 56px; }
    .epw-left h3  { font-size: 1.05rem; padding-right: 20px; }
    .epw-left p   { font-size: 0.84rem; }
    .epw-btn, .epw-btn--no-link { width: 46px; height: 46px; min-width: 46px; font-size: 1.05rem; }
    .epw-container { padding: 10px 20px 20px; }
}

/* ── Mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .epw-item   { --epw-radius: 24px; }

    .epw-top {
        /* Stack: icon + text full width, button top-right */
        grid-template-columns: auto 1fr auto;
        grid-template-rows:    auto auto;
        gap:     10px 14px;
        padding: 16px 16px;
        align-items: start;
    }

    .epw-icon-wrap {
        grid-row:    1;
        grid-column: 1;
        width:  50px;
        height: 50px;
        align-self: center;
    }

    /* Text block spans below icon */
    .epw-left {
        grid-row:    1;
        grid-column: 2;
        display:     flex;
        flex-direction: column;
        gap: 6px;
        align-self: center;
    }

    /* On mobile, title + desc stack vertically inside .epw-left */
    .epw-text {
        display: contents;
    }

    .epw-left h3 {
        white-space:   normal;
        font-size:     1rem;
        padding-right: 0;
    }

    .epw-left p {
        font-size: 0.82rem;
    }

    .epw-btn,
    .epw-btn--no-link {
        grid-row:    1;
        grid-column: 3;
        align-self:  center;
        width:  42px;
        height: 42px;
        min-width: 42px;
        font-size: 0.9rem;
    }

    .epw-container { padding: 8px 16px 18px; }

    .elementor-widget-epw_accordion_item + .elementor-widget-epw_accordion_item {
        margin-top: 12px !important;
    }
}

/* ── Small mobile ────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .epw-item   { --epw-radius: 18px; }
    .epw-top    { padding: 12px; gap: 8px 10px; }
    .epw-icon-wrap { width: 44px; height: 44px; }
    .epw-left h3  { font-size: 0.95rem; }
    .epw-left p   { font-size: 0.78rem; }
    .epw-btn, .epw-btn--no-link { width: 38px; height: 38px; min-width: 38px; font-size: 0.85rem; }
    .epw-container { padding: 6px 12px 14px; }

    .elementor-widget-epw_accordion_item + .elementor-widget-epw_accordion_item {
        margin-top: 10px !important;
    }
}