/**
 * AWP1 Accordion Widget – Base Styles
 * These are fallback/base styles. Instance-specific overrides are
 * generated as uid-scoped inline <style> inside render().
 *
 * Naming: .awp1-acc-{uid} scopes all rules to the widget instance.
 */

/* ── Wrapper ───────────────────────────────────────────────────── */
.awp1-acc-wrapper {
    width: 100%;
    max-width: 760px;
    margin-inline: auto;
    padding: 16px;
    box-sizing: border-box;
}

/* ── Section Title ──────────────────────────────────────────────── */
.awp1-acc-section-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #111827;
    text-align: center;
    margin-bottom: 2rem;
    line-height: 1.3;
}

/* ── Items Container ────────────────────────────────────────────── */
.awp1-acc-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Single Item ────────────────────────────────────────────────── */
.awp1-acc-item {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    transition: box-shadow .2s ease;
}

.awp1-acc-item.awp1-acc-active {
    box-shadow: 0 4px 16px rgba(99,102,241,.12);
}

/* ── Header Button ──────────────────────────────────────────────── */
.awp1-acc-header {
    width: 100%;
    padding: 18px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background-color .25s ease;
    gap: 12px;
}

.awp1-acc-header:hover { background: #f9fafb; }
.awp1-acc-header:focus { outline: 2px solid #6366f1; outline-offset: -2px; }

.awp1-acc-item.awp1-acc-active .awp1-acc-header {
    background: #f5f3ff;
}

/* ── Item Title ─────────────────────────────────────────────────── */
.awp1-acc-item-title {
    flex: 1;
    font-weight: 600;
    font-size: 1rem;
    color: #374151;
    line-height: 1.5;
    margin: 0;
}

.awp1-acc-item.awp1-acc-active .awp1-acc-item-title {
    color: #6366f1;
}

/* ── Icon ───────────────────────────────────────────────────────── */
.awp1-acc-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6366f1;
    font-size: 1rem;
    flex-shrink: 0;
    transition: transform .3s ease, color .25s ease;
}

.awp1-acc-item.awp1-acc-active .awp1-acc-icon {
    transform: rotate(180deg);
    color: #4f46e5;
}

.awp1-acc-icon-open  { display: none; }
.awp1-acc-icon-close { display: flex; }
.awp1-acc-item.awp1-acc-active .awp1-acc-icon-open  { display: flex; }
.awp1-acc-item.awp1-acc-active .awp1-acc-icon-close { display: none; }

/* ── Content Panel ──────────────────────────────────────────────── */
.awp1-acc-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease-out;
}

.awp1-acc-content-inner {
    padding: 16px 24px;
    border-top: 1px solid #e5e7eb;
    color: #4b5563;
    font-size: 0.9375rem;
    line-height: 1.7;
}

.awp1-acc-content-inner > *:first-child { margin-top: 0; }
.awp1-acc-content-inner > *:last-child  { margin-bottom: 0; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .awp1-acc-wrapper     { padding: 10px; max-width: 100%; }
    .awp1-acc-header      { padding: 14px 18px; }
    .awp1-acc-content-inner { padding: 12px 18px; }
    .awp1-acc-section-title { font-size: 1.375rem; }
}

@media (max-width: 480px) {
    .awp1-acc-wrapper       { padding: 8px; }
    .awp1-acc-header        { padding: 12px 14px; }
    .awp1-acc-item-title    { font-size: 0.9375rem; }
    .awp1-acc-content-inner { padding: 10px 14px; font-size: 0.875rem; }
    .awp1-acc-section-title { font-size: 1.2rem; }
}