/* ═══════════════════════════════════════════════════════════════
 * BNP Collapsible Section
 * ───────────────────────────────────────────────────────────────
 * Universal "Read More / Show Less" pattern for long-form content.
 *
 * Usage:
 *   <div class="bnp-collapse" data-collapse-cap="480">
 *       <!-- long content here -->
 *   </div>
 *
 * The `data-collapse-cap` attribute sets the max-height in pixels
 * for the collapsed view (default 480; mobile uses 380). The
 * companion JS (collapsible.js) measures actual content height and
 * only shows the toggle when content actually exceeds the cap, so
 * short sections stay uncluttered.
 *
 * SEO note: full content is always present in the DOM. We only
 * change `max-height` and `overflow` — Google and LLM crawlers
 * see everything.
 * ═══════════════════════════════════════════════════════════════ */

.bnp-collapse {
    position: relative;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
}

.bnp-collapse.is-collapsed {
    /* Actual cap is set inline by JS based on data-collapse-cap. */
}

.bnp-collapse.is-expanded {
    max-height: none !important;
}

/* Fully-hidden mode: section starts completely hidden, the toggle
   reveals it as a whole (no fade-out gradient, no cap). Useful for
   secondary metadata grids that should only be shown on demand. */
.bnp-collapse[data-collapse-mode="hide"].is-collapsed {
    display: none;
}
.bnp-collapse[data-collapse-mode="hide"]::after {
    display: none;
}

/* Fade-out gradient at the bottom of the collapsed view. Only shown
   when the section is actually capped (JS adds .has-overflow). */
.bnp-collapse::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 80px;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 70%, #ffffff 100%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.bnp-collapse.is-collapsed.has-overflow::after {
    opacity: 1;
}

/* ── Toggle button ────────────────────────────────────────────── */
/* Subdued gray to match site neutrals, no orange gradient. The
   button sits OUTSIDE the .bnp-collapse element so it's visible
   even when content is collapsed. JS injects it dynamically. */
.bnp-collapse-toggle-wrap {
    display: none; /* Hidden until JS confirms overflow. */
    margin-top: 14px;
    text-align: center;
}
.bnp-collapse-toggle-wrap.is-visible {
    display: block;
}
/* Toggle button — defensive specificity. Some global theme/plugin
   button rules try to inject pink/purple/orange. We pin colour values
   and use a high-specificity selector to keep the gray subdued look. */
.bnp-collapse-toggle-wrap .bnp-collapse-toggle,
button.bnp-collapse-toggle {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: #f8fafc !important;
    background-image: none !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;
    padding: 9px 22px !important;
    border-radius: 999px !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: none !important;
    text-transform: none !important;
    text-decoration: none !important;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.05s ease;
}
.bnp-collapse-toggle-wrap .bnp-collapse-toggle:hover,
button.bnp-collapse-toggle:hover {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
}
.bnp-collapse-toggle:active {
    transform: translateY(1px);
}
.bnp-collapse-toggle svg {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.25s ease;
}
.bnp-collapse-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

/* Reading-time hint — small, optional, gray */
.bnp-readtime {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 600;
    color: #94a3b8;
    margin-left: 8px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

/* ── Pros/Cons styling lives in expert-review.php (.er-pc-body li),
 *    which is theme-specific. This file only needs the universal
 *    collapse/cap behaviour, so nothing extra goes here. */

/* ── Mobile ───────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .bnp-collapse::after { height: 60px; }
    .bnp-collapse-toggle { padding: 8px 18px; font-size: 12.5px; }
}