/* ===========================================================================
 * Collapsible article chapters and FAQ
 * ---------------------------------------------------------------------------
 * Each <h2> section of an article is wrapped by chapterizeContent() in a
 * <details class="c-article-chapter">; FAQ items are <details class="c-faq__item">.
 * Chapter one and nothing else ships open. An inline script reopens everything
 * above the desktop breakpoint, so desktop reads as it always has.
 *
 * NO SUMMARY IN THIS FILE IS A FLEX CONTAINER, AND NONE MAY BECOME ONE.
 * Safari does not support display:flex on <summary>: it mis-slots the details
 * content, which lays the body out beside the heading when open and leaves
 * reserved empty space when closed. See flexbugs bug 9. The usual workaround is
 * a wrapper element inside the summary, but summary only accepts phrasing and
 * heading content, so a wrapper div would be invalid. Instead the chevron is an
 * absolutely positioned pseudo-element and the summary keeps its default
 * display. Do not add display:flex or display:grid to these selectors.
 *
 * The wrapper class is .c-article-chapter, NOT .c-chapter: main.css uses
 * .c-chapter for the homepage's full-bleed chapter sections (min-height:80vh,
 * display:flex), which is a <details>-breaking combination.
 *
 * All selectors are scoped to .c-article-content or .c-faq.
 * ======================================================================== */

/* ---- 1. Chapters, all widths ------------------------------------------- */

.c-article-content .c-article-chapter {
    margin: 0;
}

.c-article-content .c-article-chapter__head {
    position: relative;
    list-style: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.c-article-content .c-article-chapter__head::-webkit-details-marker { display: none; }
.c-article-content .c-article-chapter__head::marker { content: ''; }

.c-article-content .c-article-chapter__head:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* ---- 2. Below the desktop breakpoint ----------------------------------- */
/* The article h2 is clamp(2rem, 5vw, 3rem), 32px on a phone, which wraps a
   title like "The Medieval Dates on Oak Island" to three lines and stops the
   chapter list reading as a list. Chapter heads come down to a size that fits
   one line, two at worst, and stay that size open or closed so nothing jumps
   when tapped. */

@media (max-width: 1099.98px) {

    .c-article-content .c-article-chapter {
        border-bottom: 1px solid var(--border);
    }

    .c-article-content .c-article-chapter:first-of-type {
        border-top: 1px solid var(--border);
        margin-top: 1.5rem;
    }

    /* Right padding reserves a column for the absolutely positioned reading
       time label so long titles wrap before running under it. It lives HERE,
       not in main.css: this file loads after main.css, and this shorthand
       resets padding-right, so a reservation made in main.css is silently
       lost. Constant open or closed so the title never rewraps on tap. */
    .c-article-content .c-article-chapter__head {
        padding: 15px 56px 15px 24px;
        min-height: 48px;           /* touch target floor */
    }

    /* Reading time beside the closed heading, hidden once open. Positioned
       against the first line of the title; the 56px reservation above is its
       column. Widest label is "5 min". */
    .c-article-chapter__min {
        display: block;
        position: absolute;
        right: 0;
        top: 19px;
        font-family: var(--font-display);
        font-size: .62rem;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: var(--text-faint);
    }
    .c-article-content .c-article-chapter[open] > .c-article-chapter__head .c-article-chapter__min { display: none; }

    .c-article-content .c-article-chapter__head::before {
        content: '';
        position: absolute;
        left: 3px;
        top: 21px;                  /* optical centre of the first line */
        width: 8px;
        height: 8px;
        border-right: 1.5px solid var(--accent);
        border-bottom: 1.5px solid var(--accent);
        transform: rotate(45deg);
        transition: transform .2s ease;
    }

    .c-article-content .c-article-chapter[open] > .c-article-chapter__head::before {
        transform: rotate(-135deg);
        top: 24px;
    }

    .c-article-content .c-article-chapter__head > h2 {
        font-size: 1.15rem;
        line-height: 1.28;
        margin: 0;
        padding-top: 0;
        border-top: 0;
    }

    /* Body copy keeps the same left edge as the lead paragraphs above the
       first chapter. Only the header row is indented, to make room for the
       chevron in the margin, which is how the mobile Wikipedia sets it. */
    .c-article-content .c-article-chapter__body {
        padding: 0 0 1.25rem;
    }

    .c-article-content .c-article-chapter__body > *:first-child { margin-top: 0; }
}

/* ---- 3. Desktop -------------------------------------------------------- */
/* Chapters are reopened by the inline script, so the h2 keeps its own margins,
   padding and rule and the article is unchanged. The chevron is suppressed only
   while a chapter is open: if the script fails, the control must stay visible
   and usable. */

@media (min-width: 1100px) {
    .c-article-content .c-article-chapter[open] > .c-article-chapter__head { cursor: default; }

    .c-article-content .c-article-chapter:not([open]) {
        border-bottom: 1px solid var(--border);
    }
    .c-article-content .c-article-chapter:not([open]) > .c-article-chapter__head {
        padding: 14px 0 14px 24px;
    }
    .c-article-content .c-article-chapter:not([open]) > .c-article-chapter__head::before {
        content: '';
        position: absolute;
        left: 3px;
        top: 22px;
        width: 8px;
        height: 8px;
        border-right: 1.5px solid var(--accent);
        border-bottom: 1.5px solid var(--accent);
        transform: rotate(45deg);
    }
    .c-article-content .c-article-chapter:not([open]) > .c-article-chapter__head > h2 {
        font-size: 1.35rem;
        margin: 0;
        padding-top: 0;
        border-top: 0;
    }
}

/* ---- 4. FAQ ------------------------------------------------------------ */
/* Same treatment, same Safari constraint: no flex on the summary. */

.c-faq .c-faq__item > .c-faq__q {
    position: relative;
    list-style: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.c-faq .c-faq__item > .c-faq__q::-webkit-details-marker { display: none; }
.c-faq .c-faq__item > .c-faq__q::marker { content: ''; }

.c-faq .c-faq__item > .c-faq__q:focus-visible {
    outline: 2px solid var(--accent, #c9a962);
    outline-offset: 4px;
}

@media (max-width: 1099.98px) {

    .c-faq .c-faq__item > .c-faq__q {
        padding: 2px 0 2px 24px;
        min-height: 48px;
    }

    .c-faq .c-faq__item > .c-faq__q::before {
        content: '';
        position: absolute;
        left: 3px;
        top: 9px;
        width: 8px;
        height: 8px;
        border-right: 1.5px solid var(--accent, #c9a962);
        border-bottom: 1.5px solid var(--accent, #c9a962);
        transform: rotate(45deg);
        transition: transform .2s ease;
    }

    .c-faq .c-faq__item[open] > .c-faq__q::before {
        transform: rotate(-135deg);
        top: 12px;
    }

    /* "Question One" is decorative and doubles the height of every collapsed
       row, so it comes out on narrow screens. */
    .c-faq .c-faq__item > .c-faq__q > .c-faq__num { display: none; }

    .c-faq h3.c-faq__question {
        margin: 0;
        font-size: 1rem;
        line-height: 1.35;
    }

    .c-faq .c-faq__item[open] > .c-faq__answer { padding: .85rem 0 0; }

    /* Flattened list: the wrapper is opened by script, which also adds this
       class. Without the script the toggle stays visible and behaves as before. */
    .c-faq details.c-faq__more.is-flattened > summary { display: none; }
    .c-faq details.c-faq__more.is-flattened { border: 0; padding: 0; }
}

@media (min-width: 1100px) {
    .c-faq .c-faq__item[open] > .c-faq__q { cursor: default; }
    .c-faq .c-faq__item:not([open]) > .c-faq__q { padding-left: 24px; }
    .c-faq .c-faq__item:not([open]) > .c-faq__q::before {
        content: '';
        position: absolute;
        left: 3px;
        top: 10px;
        width: 8px;
        height: 8px;
        border-right: 1.5px solid var(--accent, #c9a962);
        border-bottom: 1.5px solid var(--accent, #c9a962);
        transform: rotate(45deg);
    }
}

/* The last item's border is suppressed by a :last-of-type rule in main.css
   written when items were <div>. They are <details> now, and so is the "show
   more" wrapper, so the rule no longer lands on the item it was meant for. */
.c-faq .c-faq__inner > .c-faq__item:last-of-type { border-bottom: none; }

/* ---- 5. Print and reduced motion --------------------------------------- */

@media print {
    .c-article-content .c-article-chapter { border: 0; }
    .c-article-content .c-article-chapter__head { padding-left: 0; }
    .c-article-content .c-article-chapter__head::before,
    .c-faq .c-faq__item > .c-faq__q::before { display: none; }
    .c-article-content .c-article-chapter__body { padding-left: 0; }
    .c-faq .c-faq__item > .c-faq__q { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .c-article-content .c-article-chapter__head::before,
    .c-faq .c-faq__item > .c-faq__q::before { transition: none; }
}