/* =============================================================================
   topic-reading.css - readability tweaks for topic pages (my-epiphany.com)
   v1.16 2026-11-08. Loaded only by topic-template.php.
   Applied incrementally: quotation, paragraph spacing, image caption, solid blue buttons, PDF button, button row, topic image shadow, Citations button, Email Topic button.
   Each numbered block is independent: delete a block to undo just that change,
   or remove the <link> line in topic-template.php to undo everything.
   Sizes are in px on purpose: Bootstrap 3 sets 1rem = 10px.
   ============================================================================= */

/* 1. QUOTATION - a pull quote with a thin blue rule instead of bold centred text. */
article .topic-body p.quote {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-style: italic;
    font-size: 18px;
    line-height: 1.55;
    color: #0080B8;
    text-align: left;
    border-left: 3px solid #009EE3;
    margin: 0 0 6px;
    padding: 2px 0 2px 18px;
    display: flow-root;   /* v1.13: sit beside a left-floated topic image instead of behind it, so the blue rule stays visible */
}
article .topic-body p.author {
    font-size: 13.5px;
    line-height: 1.5;
    color: #666;
    text-align: left;
    margin: 0 0 26px;
    padding: 0 0 0 21px;
    display: flow-root;   /* keeps the author line aligned with the quote beside a left-floated image */
}
@media (max-width: 600px) {
    article .topic-body p.quote { font-size: 16px; }
}

/* 2. PARAGRAPH SPACING - a 14px gap between paragraphs (was 10px) and slightly
      more generous line spacing. */
article .topic-body p.topic,
.topic-updates p.topic {          /* v1.16: Updates paragraphs (below the topic body) match too */
    margin: 0 0 14px;
    padding: 0;
    line-height: 1.65;
}
article .topic-body p.introduction {   /* v1.16: introduction used 25px lines; now matches the body */
    line-height: 1.65;
}
article .topic-body > p:not([class]),
article .topic-body > ul,
article .topic-body > ol {
    margin: 0 0 14px;
    line-height: 1.65;
}

/* 3. IMAGE CAPTION - same font as the page, smaller and muted. */
article .caption2-right {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: #666;
}

/* 4. SOLID BLUE BUTTONS - PDF, Bookmark, Listen, Pause/Resume and Stop: solid site
      blue (#009EE3) with white icons and text, each button as wide as its label.
      Hover is a shade darker; the active state (bookmarked / reading aloud) is darker
      still so it stays recognisable. */
article .me-bm {
    background: #009EE3;
    border-color: #009EE3;
    color: #fff;
    margin: 0;                        /* was -14px, which pulled the row up onto Category */
    padding: 2.3px 6.9px 2.3px 2.3px; /* 15% more than the original 2px 6px 2px 2px */
}
article .me-bm .me-bm__icon {
    fill: #fff;
    stroke: #fff;
}
/* The speaker's sound waves are open curves, so they stay as lines */
article .me-bm .me-bm__icon path + path {
    fill: none;
}
article .me-bm:hover {
    background: #006FA6;   /* same deeper blue as the active (Pause / Bookmarked) state */
    border-color: #006FA6;
    color: #fff;
}
article .me-bm[aria-pressed="true"] {
    background: #006FA6;
    border-color: #006FA6;
    color: #fff;
}
article .me-bm[aria-pressed="true"]:hover {
    background: #005F8F;
    border-color: #005F8F;
}

/* 5. PDF BUTTON - same shape and height as the others; white document icon with a
      faint fold line that shows on any shade of blue. */
article .me-bm.me-pdf { padding: 2.3px 9.2px 2.3px 4.6px; }
article .me-bm.me-pdf .me-bm__icon .me-pdf__fold {
    fill: none;
    stroke: rgba(0, 0, 0, .28);
    stroke-width: 1.5;
}

/* 6. BUTTON ROW - lay PDF, Bookmark and Listen out as one evenly spaced row, with a
      clear gap below the topic details (Topic ID / Date / Category). */
article form[action="pdf-print.php"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 14px 0 24px !important;
}
article form[action="pdf-print.php"] > br { display: none; }

/* 7. TOPIC IMAGE - a soft, layered shadow so the image lifts off the grey page, and a
      slightly deeper shadow on hover as a hint that the card can be clicked to flip.
      The shadow sits on .card-inner, which already carries a faint one, so it turns
      with the card when it flips; the caption and the flip itself are untouched. */
article .card .card-inner {
    box-shadow: 0 1px 3px rgba(0, 0, 0, .10), 0 8px 22px rgba(0, 0, 0, .16);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .25s ease;
}
article .card:hover .card-inner {
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 12px 30px rgba(0, 0, 0, .22);
}
/* Thin white frame around the image and its credits side (change 1.5px to adjust,
   or delete these lines to remove the frame) */
article .card .card-front,
article .card .card-back { border: 1.5px solid #fff; box-sizing: border-box; }

/* 8. CITATIONS BUTTON - replaces the "View Citations (n)" text link below the topic.
      It sits outside <article>, so it repeats the solid-blue look of blocks 4 and 5
      here. White page icon with faint lines, like the PDF button's fold. */
.me-cite-row {
    margin: 10px 0 44px;   /* 24px + about one line break (20px) before Related Topics */
}
.me-bm.me-cite,
.me-bm.me-cite:visited,
.me-bm.me-cite:focus {
    background: #009EE3;
    border-color: #009EE3;
    color: #fff;
    text-decoration: none;
    margin: 0;
    padding: 2.3px 9.2px 2.3px 4.6px; /* same as the PDF button */
}
.me-bm.me-cite:hover {
    background: #006FA6;
    border-color: #006FA6;
    color: #fff;
    text-decoration: none;
}
.me-bm.me-cite .me-bm__icon {
    fill: #fff;
    stroke: #fff;
}
.me-bm.me-cite .me-bm__icon .me-cite__lines {
    fill: none;
    stroke: rgba(0, 0, 0, .28);
    stroke-width: 1.5;
    stroke-linecap: round;
}

/* 9. EMAIL TOPIC BUTTON - same look as the Citations button: pill shape, 2px border,
      solid #009EE3 (hover #006FA6), 14px semi-bold label and a white envelope icon
      with a faint flap line, like the page and PDF icons.
      The button and its stylesheet (css/style.css) are injected by load.php after this
      file loads, so "body" is added to out-rank its rules. Its old ::before (a darker
      panel that slid in on hover) is re-used here to draw the envelope. The text comes
      from load.php ("Email Topic"); only its upper-case styling is removed here. */
body #pjSendURLContainer .pjDbPopupBtnPrimary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: auto;
    margin: 0;
    padding: 2.3px 9.2px 2.3px 4.6px;   /* same as the Citations and PDF buttons */
    border: 2px solid #009EE3;
    border-radius: 999px;
    background: #009EE3;
    color: #fff;
    font: 600 14px/1.2 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    text-transform: none;
    letter-spacing: 0;
    vertical-align: middle;
    transition: background-color .2s, border-color .2s, transform .1s;
}
body #pjSendURLContainer .pjDbPopupBtnPrimary:hover,
body #pjSendURLContainer .pjDbPopupBtnPrimary:focus {
    background: #006FA6;
    border-color: #006FA6;
    color: #fff;
}
body #pjSendURLContainer .pjDbPopupBtnPrimary:active { transform: scale(.97); }
body #pjSendURLContainer .pjDbPopupBtnPrimary:focus-visible { outline: 3px solid #19adfd; outline-offset: 2px; }
body #pjSendURLContainer .pjDbPopupBtnPrimary:before,
body #pjSendURLContainer .pjDbPopupBtnPrimary:hover:before,
body #pjSendURLContainer .pjDbPopupBtnPrimary:focus:before {
    content: '';
    position: static;
    display: block;
    flex: none;
    width: 20px;
    height: 20px;
    border: 0;
    z-index: auto;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='1' fill='%23fff' stroke='%23fff' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M4 7l8 6 8-6' fill='none' stroke='rgba(0,0,0,.28)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
    transition: none;
}