/* ═══════════════════════════════════════════════════
   Trent Bridge — Matchday FAQ accordion + pill filter
   For: Matchday Guide news articles
   Version: 2.0 — blend-in with article body typography
   ═══════════════════════════════════════════════════ */

/* ─── Wrapper ─── */
.matchday-faq {
    font-family: 'Merriweather', Georgia, "Times New Roman", Times, serif;
    color: #33312f;
    margin: 0 0 24px;
}

.matchday-faq__heading {
    font-family: 'Merriweather', Georgia, "Times New Roman", Times, serif;
    font-size: 24px;
    font-weight: 500;
    color: #33312f;
    margin: 0 0 16px;
    line-height: 1.2;
}

/* ─── Filter pills ─── */
.matchday-faq .filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 0 20px;
    margin: 0 0 8px;
    border-bottom: 1px solid #e5e5e5;
}

.matchday-faq .pill {
    padding: 7px 16px;
    border: 1px solid #e5e5e5;
    border-radius: 999px;
    background: white;
    color: #33312f;
    font-family: 'Merriweather', Georgia, "Times New Roman", Times, serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.matchday-faq .pill:hover {
    background: #f5f5f5;
    border-color: #387c2c;
    color: #387c2c;
}

.matchday-faq .pill.active {
    background: #387c2c;
    border-color: #387c2c;
    color: white;
}

.matchday-faq .group-count {
    font-size: 13px;
    color: #a7a9ac;
    font-style: italic;
    padding: 4px 0 0;
    min-height: 1.6em;
}

/* ─── Accordion (details / summary) ─── */
.matchday-faq details {
    margin: 0;
    border: none;
    border-bottom: 1px solid #e5e5e5;
    border-radius: 0;
    background: transparent;
    /* Offset deep-link anchor targets so they clear the sticky nav (native #hash scroll
       + scrollIntoView both respect this). Matches the site's ~150px sticky-nav clearance. */
    scroll-margin-top: 150px;
}

.matchday-faq details:first-of-type {
    border-top: 1px solid #e5e5e5;
}

.matchday-faq details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    font-family: 'Merriweather', Georgia, "Times New Roman", Times, serif;
    font-size: 16px;
    font-weight: 500;
    color: #33312f;
    line-height: 1.3;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: color 0.2s ease;
}

.matchday-faq details summary:hover {
    color: #387c2c;
}

/* Suppress native disclosure marker (Safari + spec) */
.matchday-faq details summary::-webkit-details-marker { display: none; }
.matchday-faq details summary::marker { content: ''; }

/* Custom chevron — inherits text colour via currentColor */
.matchday-faq details summary::after {
    content: '';
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
    flex-shrink: 0;
    margin-left: 16px;
    align-self: center;
}

.matchday-faq details[open] > summary {
    color: #387c2c;
}

.matchday-faq details[open] > summary::after {
    transform: rotate(-135deg);
}

/* ─── Smooth open/close animation ───
   Uses ::details-content (Interop 2025). Older browsers
   show content immediately — graceful degradation.        */
.matchday-faq details::details-content {
    block-size: 0;
    overflow-y: clip;
    transition: block-size 0.3s ease,
                content-visibility 0.3s ease allow-discrete;
}

.matchday-faq details[open]::details-content {
    block-size: auto;
}

/* ─── Answer body — inherit article-body typography ─── */
.matchday-faq details [itemprop="text"] {
    padding: 0 0 24px;
    font-family: 'Merriweather', Georgia, "Times New Roman", Times, serif;
    font-size: 14px;
    line-height: 1.4;
    color: #33312f;
}

.matchday-faq details [itemprop="text"] img {
    display: block;
    max-width: min(100%, 560px);
    height: auto;
    margin: 0 auto 16px;
}

.matchday-faq details [itemprop="text"] p {
    margin: 0 0 13px;
}

.matchday-faq details [itemprop="text"] h3 {
    font-family: 'Merriweather', Georgia, "Times New Roman", Times, serif;
    font-size: 18px;
    font-weight: 500;
    color: #33312f;
    margin: 16px 0 6px;
    line-height: 1.2;
}

.matchday-faq details [itemprop="text"] ul {
    margin: 0 0 13px 22px;
    padding: 0;
}

.matchday-faq details [itemprop="text"] li {
    margin: 0 0 6px;
}

.matchday-faq details [itemprop="text"] a,
.matchday-faq details [itemprop="text"] a:link,
.matchday-faq details [itemprop="text"] a:visited {
    color: #387c2c;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.matchday-faq details [itemprop="text"] a:hover,
.matchday-faq details [itemprop="text"] a:focus {
    color: #2d6624;
}

/* ─── Filter hide/show ─── */
.matchday-faq details.hidden-by-filter {
    display: none;
}

/* ─── Responsive ─── */
@media (max-width: 640px) {
    .matchday-faq .filter-pills {
        gap: 6px;
        padding-bottom: 16px;
    }
    .matchday-faq .pill {
        padding: 6px 12px;
        font-size: 12px;
    }
    .matchday-faq details summary {
        font-size: 15px;
        padding: 14px 0;
    }
    .matchday-faq__heading {
        font-size: 20px;
    }
}