/*
 * Post FAQ Manager — Frontend Styles
 * Base structural styles only.
 * Colors, font sizes, and border-radius are injected via wp_head
 * by PFM_Settings::output_global_styles() using !important overrides.
 */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&display=swap');

/* ── Section wrapper ───────────────────────────────────────────────────── */
.pfm-section {
    max-width: 100%;
    margin: 40px 0;
    padding: 0;
    box-sizing: border-box;
}

/* ── Section title ─────────────────────────────────────────────────────── */
.pfm-title {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    font-size: 42px;
    font-weight: 400;
    letter-spacing: -0.02em;
    margin: 0 0 32px;
    line-height: 1.15;
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
}

/* ── Accordion list ────────────────────────────────────────────────────── */
.pfm-accordion {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ── Item card ─────────────────────────────────────────────────────────── */
.pfm-item {
    border: 1px solid #e2e2e2;
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.pfm-item:hover {
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
}

/* ── Trigger button ────────────────────────────────────────────────────── */
.pfm-trigger {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    background: transparent;
    border: none;
    border-radius: 0;
    cursor: pointer;
    text-align: left;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 0.15s ease, color 0.15s ease;
    margin: 0;
    box-shadow: none;
    outline: none;
}

.pfm-trigger:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -2px;
}

/* ── Question text ─────────────────────────────────────────────────────── */
.pfm-question {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -0.01em;
    transition: color 0.15s ease;
    flex: 1;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* ── Icon ──────────────────────────────────────────────────────────────── */
.pfm-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    min-width: 28px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease;
    margin-top: 1px; /* align icon with first line of text */
}

.pfm-ico-plus,
.pfm-ico-minus {
    position: absolute;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Default: show + */
.pfm-ico-plus  { opacity: 1; transform: rotate(0deg)   scale(1);   }
.pfm-ico-minus { opacity: 0; transform: rotate(-90deg) scale(0.5); }

/* Open: show − */
.pfm-trigger[aria-expanded="true"] .pfm-ico-plus  { opacity: 0; transform: rotate(90deg)  scale(0.5); }
.pfm-trigger[aria-expanded="true"] .pfm-ico-minus { opacity: 1; transform: rotate(0deg)   scale(1);   }

/* ── Panel ─────────────────────────────────────────────────────────────── */
.pfm-panel {
    display: block;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    /* Opening: ease-out feels instant at start, smooth finish */
    transition: max-height 0.35s ease-out,
                opacity    0.25s ease;
}

/* When open, use ease-in for closing so it feels snappy */
.pfm-panel.pfm-open {
    opacity: 1;
    transition: max-height 0.35s ease-in-out,
                opacity    0.3s ease;
}

/* ── Panel inner ───────────────────────────────────────────────────────── */
.pfm-panel-inner {
    padding: 4px 24px 24px;
    font-size: 15px;
    line-height: 1.78;
}

.pfm-panel-inner > *:first-child { margin-top: 0; }
.pfm-panel-inner > *:last-child  { margin-bottom: 0; }

.pfm-panel-inner a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .pfm-trigger     { padding: 16px 16px; gap: 12px; }
    .pfm-panel-inner { padding: 4px 16px 20px; }
}

@media (max-width: 380px) {
    .pfm-trigger     { padding: 14px 14px; gap: 10px; }
    .pfm-panel-inner { padding: 4px 14px 18px; }
}