/*
 * Reading Room — front-end styles for the chapter article, the index page,
 * and the archive listing. Loaded by reading-room.php via wp_enqueue_style.
 *
 * Audience: readers 65+. We bias toward larger text, generous touch targets,
 * strong color contrast, and visible focus rings.
 */

/* -------------------------------------------------------------------------
   Chapter article — headline subtitle + hero image
   ------------------------------------------------------------------------- */

/* Base-rule specificity: every plugin element repeats its tag in the selector
   so the rule sits at 0-1-1 minimum, matching Divi's .entry-content p (0-1-1)
   so source order — and the explicit media-query overrides above — apply
   predictably. Without this, Divi's body-paragraph styles silently re-win. */

p.trr-chapter-headline {
    font-family: Inter, Helvetica, Arial, sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.4;
    color: #555;
    text-align: center;
    margin: 0 auto 24px;
    max-width: 780px;
    font-style: italic;
}

figure.trr-hero {
    margin: 0 0 32px;
    padding: 0;
}

figure.trr-hero img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
}

/* -------------------------------------------------------------------------
   Pagination — top + bottom chapter navigation bar
   Forum-style: First/Previous left, Next/Latest right, full row width.
   ------------------------------------------------------------------------- */

.trr-pagination {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 12px;
    margin: 32px 0;
    padding: 16px 0;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
}

.trr-pag-group {
    display: flex;
    gap: 8px;
    flex: 1 1 0;
}

.trr-pag-right {
    justify-content: flex-end;
}

/* Specificity note: many of the selectors below repeat the element type
   (e.g. `nav.trr-pagination a` rather than `.trr-pagination a`) to outrank
   the parent theme's `.entry-content a` rule (Divi sets it to a 3.95:1
   blue that fails WCAG AA). 0-1-2 beats 0-1-1 without resorting to
   !important.

   IMPORTANT: when bumping any base-selector specificity here, also bump the
   matching rule in the @media blocks below — otherwise the media-query
   override sits at lower specificity than the new base and silently loses,
   and responsive font-size / spacing rules stop applying. See CLAUDE.md
   "Gotcha: plugin CSS vs Divi". */

nav.trr-pagination a,
nav.trr-pagination .trr-disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    min-width: 44px;
    padding: 8px 16px;
    box-sizing: border-box;

    /* position:relative provides a containing block for the .trr-pag-text
       sr-only span (which uses position:absolute on mobile). Without this
       the hidden text anchors to the nearest positioned ancestor and can
       cause layout shifts. */
    position: relative;

    font-family: Inter, Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;

    background: #fff;
    border: 1px solid #d5d5d5;
    border-radius: 6px;
    /* #2c6ea3 yields ~5:1 contrast against #fff (WCAG AA for normal text).
       The lighter brand #3b88c6 is reserved for large/bold headings only. */
    color: #2c6ea3;
    transition: background-color 120ms ease, border-color 120ms ease;
}

nav.trr-pagination a:hover {
    background: #fff;
    border-color: #2c6ea3;
    text-decoration: underline;
    color: #2c6ea3;
}

nav.trr-pagination a:focus-visible {
    outline: 2px solid #2c6ea3;
    outline-offset: 2px;
    background: #fff;
    color: #2c6ea3;
}

nav.trr-pagination .trr-disabled {
    /* #767676 on #f7f7f7 yields ~4.5:1 (WCAG AA). Previous #aaa was 2.3:1
       which is invisible to many readers in the 65+ audience. */
    color: #767676;
    background: #f7f7f7;
    border-color: #e8e8e8;
    cursor: default;
}

.trr-pag-icon {
    font-size: 20px;
    line-height: 1;
    /* Pull the chevron up a hair so it optically centers with the word. */
    position: relative;
    top: -1px;
}

/* Mobile: hide the word label, keep the chevron. Screen readers still see
   the .trr-pag-text content because it's only visually hidden, not removed.
   This matches the forum convention the user asked for. */
@media (max-width: 767px) {
    .trr-pagination {
        gap: 8px;
        padding: 12px 0;
        margin: 24px 0;
    }

    .trr-pag-group {
        gap: 6px;
    }

    nav.trr-pagination a,
    nav.trr-pagination .trr-disabled {
        padding: 12px;
        min-width: 48px;       /* Apple touch target floor on mobile. */
        min-height: 48px;
    }

    .trr-pag-text {
        /* Visually hidden, available to screen readers. clip is the legacy
           technique (universal support); clip-path is the modern equivalent
           and is added for forward compatibility. */
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    .trr-pag-icon {
        font-size: 22px;
        top: 0;
    }
}

/* -------------------------------------------------------------------------
   Archive — "All Chapters" listing at the bottom of every chapter
   ------------------------------------------------------------------------- */

div.trr-archive {
    margin: 40px 0 24px;
    padding: 24px;
    background: #f9f9f9;
    border-radius: 8px;
}

div.trr-archive h3 {
    font-family: Inter, Helvetica, Arial, sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #2c6ea3;
    margin: 0 0 16px;
    padding: 0;
}

ol.trr-archive-list {
    list-style: decimal inside;
    margin: 0;
    padding: 0;
}

ol.trr-archive-list li {
    padding: 14px 8px;
    border-bottom: 1px solid #e8e8e8;
    line-height: 1.5;
}

ol.trr-archive-list li:last-child {
    border-bottom: 0;
}

ol.trr-archive-list li.trr-current {
    background: #eef5fb;
    border-radius: 4px;
    padding-left: 12px;
    font-weight: 600;
}

ol.trr-archive-list li a {
    /* #2c6ea3 yields ~5:1 contrast on white (WCAG AA for normal text);
       the original #3b88c6 was 3.45:1 which fails the 4.5:1 threshold.
       Selector specificity (0-1-3) outranks both Divi's .entry-content a
       (0-1-1) and any 0-1-2 customizer overrides observed in the wild. */
    color: #2c6ea3;
    text-decoration: none;
    font-weight: 500;
    font-size: 17px;
}

ol.trr-archive-list li a:hover,
ol.trr-archive-list li a:focus-visible {
    text-decoration: underline;
    color: #2c6ea3;
}

ol.trr-archive-list li a:focus-visible {
    outline: 2px solid #2c6ea3;
    outline-offset: 2px;
}

div.trr-headline-row {
    display: block;
    margin: 4px 0 0 1.5em;       /* Indent to align under the link text. */
    font-style: italic;
    color: #555;
    font-size: 14px;
    line-height: 1.4;
}

/* -------------------------------------------------------------------------
   Index page — /thereadingroom/
   ------------------------------------------------------------------------- */

ol.trr-index-list {
    list-style: decimal inside;
    margin: 24px 0;
    padding: 0;
}

ol.trr-index-list li {
    padding: 16px 12px;
    border-bottom: 1px solid #e8e8e8;
}

ol.trr-index-list li:last-child {
    border-bottom: 0;
}

ol.trr-index-list li a {
    font-family: Inter, Helvetica, Arial, sans-serif;
    font-size: 22px;
    font-weight: 600;
    /* Match the darkened brand blue used elsewhere in the plugin. Specificity
       0-1-3 beats both Divi's .entry-content a (0-1-1) and the inline
       .trr-index-list li a (0-1-2) rule that a Divi customizer injects. */
    color: #2c6ea3;
    text-decoration: none;
}

ol.trr-index-list li a:hover,
ol.trr-index-list li a:focus-visible {
    text-decoration: underline;
    color: #2c6ea3;
}

ol.trr-index-list li a:focus-visible {
    outline: 2px solid #2c6ea3;
    outline-offset: 2px;
}

p.trr-empty {
    text-align: center;
    color: #666;
    font-style: italic;
    padding: 48px 24px;
    font-size: 18px;
}

/* -------------------------------------------------------------------------
   Tablet refinements
   ------------------------------------------------------------------------- */

@media (max-width: 980px) {
    p.trr-chapter-headline {
        font-size: 18px;
        margin-bottom: 20px;
    }

    div.trr-archive {
        padding: 18px;
    }

    ol.trr-index-list li a {
        font-size: 19px;
    }
}

/* -------------------------------------------------------------------------
   Phone refinements (matches site-wide 767px breakpoint from CLAUDE.md)
   ------------------------------------------------------------------------- */

@media (max-width: 767px) {
    p.trr-chapter-headline {
        font-size: 16px;
        line-height: 1.5;
    }

    div.trr-archive {
        padding: 14px;
    }

    div.trr-archive h3 {
        font-size: 19px;
    }

    ol.trr-archive-list li a {
        font-size: 16px;
    }

    div.trr-headline-row {
        font-size: 13px;
    }

    ol.trr-index-list li a {
        font-size: 18px;
    }
}