/* ==========================================================================
   page-heart.css : the page «הלב» (Change 13, a reader since Change 14): the author's eleven poems as text.
   Loads on that page only (page-<id>.css, inc/enqueue.php). Tokens and the site's two faces from base.css; logical properties only.

   The idea: a quiet reading page. A pen-drawn heart (the same plum pen as the age finder's loop) over the title, the titles of the
   poems as a list, and ONE poem open at a time on a sheet of paper with a coloured bookmark hanging from its top edge and a sprig of the
   logo's leaf to close it (assets/js/page-heart.js opens them; with no script every poem stands on its own sheet, one under the other).
   From 1000px the list stands beside the sheet and stays in view while a long poem is read; below it the list sits behind one button that
   names the open poem. The poems are vocalised, so the lines are set with room for the niqqud, on a whole-pixel line pitch.
   ========================================================================== */

.pil-heart { --poem-accent: var(--plum); --poem-paper: #D3CDBE; }   /* the poems' paper: darker than the site's background (#E5E2D9). The verse is 7.97:1 on it, the ink 6.48:1; the titles are large text (3.4:1 at the least) */

/* ---------- the head ---------- */
.pil-heart__head { text-align: center; margin-block: 0 24px; }
.pil-heart__sub {
  display: flex; align-items: center; justify-content: center; gap: 14px; margin: 2px 0 0;
  font: 400 clamp(1.25rem, .6vw + 1.1rem, 1.5rem)/1.3 var(--font-display); color: var(--ink);
}
.pil-heart__sub::before, .pil-heart__sub::after { content: ""; inline-size: 44px; block-size: 1px; background: currentColor; opacity: .5; }
.pil-heart__title {
  display: inline-flex; align-items: center; gap: 12px; margin: 0;
  font: 700 var(--t-h1)/var(--lh-head) var(--font-heading); color: var(--plum);   /* Change 22 (the owner: «כותרות בדפים על הסופרת, מפגשי ספרות, חנות הספרים, הלב, כותבים אלינו - שיהיו באותו הגודל»): the size of every page title (it was 52 to 80px) */
}
.pil-heart__mark { flex: none; width: .74em; height: auto; fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; transform: translateY(.04em); }

/* ---------- the list of titles: a dot in the colour of each poem's bookmark; the open poem wears the bookmark itself ---------- */
.pil-reader { max-width: 44rem; margin-inline: auto; }
.pil-heart__index ol { margin: 0; padding: 0; list-style: none; }
.pil-heart__index li { break-inside: avoid; }
.pil-heart__index a {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding-block: 3px;
  font: 600 1.125rem/1.3 var(--font-body); color: var(--ink); text-decoration: underline 2px transparent; text-underline-offset: 6px;
  transition: text-decoration-color var(--dur-state) var(--ease-standard);
}
.pil-heart__index a::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--dot, var(--plum)); }
.pil-heart__index a:hover, .pil-heart__index a:focus-visible { text-decoration-color: currentColor; }
.pil-heart__index a[aria-current="true"] { font-weight: 800; }
.pil-heart__index a[aria-current="true"]::before { width: 10px; height: 20px; border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); }
.pil-heart__index li:nth-child(4n + 1) { --dot: var(--plum); }
.pil-heart__index li:nth-child(4n + 2) { --dot: var(--ink); }
.pil-heart__index li:nth-child(4n + 3) { --dot: var(--olive); }
.pil-heart__index li:nth-child(4n + 4) { --dot: var(--blue); }
/* with no script, a phone shows the whole list above the poems, in two columns */
@media (max-width: 999px) { .pil-heart__index ol { column-gap: 20px; } }
@media (min-width: 360px) and (max-width: 999px) { .pil-heart__index ol { column-count: 2; } }
.pil-heart__index { margin-block-end: 36px; }

/* ---------- the picker (script only, below 1000px): one button that names the open poem, and opens the list ---------- */
.pil-picker {
  display: flex; align-items: center; gap: 12px; inline-size: 100%; min-height: 54px; padding: 0 16px; margin: 0;
  font: 600 1.0625rem/1.3 var(--font-body); color: var(--ink); text-align: start; cursor: pointer;
  background: var(--paper-light); border: 1px solid var(--rule); border-radius: var(--r-control); box-shadow: var(--shadow-raise);
}
.pil-picker::before { content: ""; flex: none; width: 10px; height: 20px; background: var(--poem-accent); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); }
.pil-picker__label { flex: none; font-size: .9375rem; color: var(--ink-soft); }
.pil-picker__current { flex: 1; min-width: 0; font-weight: 800; }
.pil-picker__chev { flex: none; width: 18px; height: 18px; transition: transform var(--dur-state) var(--ease-standard); }
.pil-picker[aria-expanded="true"] .pil-picker__chev { transform: rotate(180deg); }
@media (max-width: 999px) {
  /* BEFORE the script has run (the head sets html.js; the script adds .is-reader): the list of titles is about to become the one picker button, so its place is
     held and the list stays out: the sheet below does not jump up when a late script arrives (a 0.18 layout shift, measured with the script held back 2.5 s).
     With no script at all (html.no-js) the list stays. */
  .js .pil-heart:not(.is-reader) .pil-heart__index { min-height: 54px; margin-block-end: 20px; }
  .js .pil-heart:not(.is-reader) .pil-heart__index ol { display: none; }
  .is-reader .pil-heart__index { position: relative; z-index: 5; margin-block-end: 20px; }
  .is-reader .pil-heart__index ol { display: none; }
  .is-reader .pil-heart__index.is-open ol {
    display: block; column-count: 1; position: absolute; inset-inline: 0; inset-block-start: calc(100% + 6px); margin: 0; padding: 6px 12px;
    background: var(--paper-light); border: 1px solid var(--rule); border-radius: var(--r-control); box-shadow: var(--shadow-raise);
  }
}
@media (min-width: 1000px) { .pil-picker { display: none; } }

/* ---------- the sheet ---------- */
.pil-poem {
  position: relative; margin: 0 0 40px; padding: 56px 44px 22px;
  background: var(--poem-paper); border: 1px solid var(--rule); border-radius: var(--r-panel); box-shadow: var(--shadow-raise);
  scroll-margin-block-start: 16px;
}
.is-reader .pil-poem { margin-block-end: 0; }
/* THE STEADY FRAME (Change 15): with the script the sheet is ONE frame, .pil-poems, that never moves; the poems change inside it. Its height follows the poem
   that is open, smoothly (page-heart.js), and its bookmark changes colour with the poem. */
.is-reader .pil-poems {
  position: relative; padding: 56px 44px 22px; overflow: clip; overflow-clip-margin: 0;
  background: var(--poem-paper); border: 1px solid var(--rule); border-radius: var(--r-panel); box-shadow: var(--shadow-raise);
}
.is-reader .pil-poems::before {
  content: ""; position: absolute; inset-block-start: -1px; inset-inline-start: 40px; inline-size: 16px; block-size: 52px;
  background: var(--poem-accent); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
  transition: background-color 420ms var(--ease-standard);
}
.is-reader .pil-poem { padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; scroll-margin-block-start: 57px; }   /* an address naming a poem scrolls the browser to it: leave the frame's own padding above it, so the frame's top edge is in sight */
.is-reader .pil-poem::before { display: none; }
.is-reader .pil-poems.is-swapping { overflow: hidden; }
.pil-poem::before {   /* the bookmark hanging from the top edge, in the poem's colour */
  content: ""; position: absolute; inset-block-start: -1px; inset-inline-start: 40px; width: 16px; height: 52px;
  background: var(--poem-accent); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
}
.pil-poem--plum  { --poem-accent: var(--plum); }
.pil-poem--ink   { --poem-accent: var(--ink); }
.pil-poem--olive { --poem-accent: var(--olive); }
.pil-poem--blue  { --poem-accent: var(--blue); }
.pil-poem__title {
  margin: 0 0 20px; font: 700 clamp(1.75rem, 1vw + 1.45rem, 2.25rem)/1.25 var(--font-heading); color: var(--poem-accent); text-wrap: balance;
}
.pil-poem__title:focus { outline: none; }   /* focus goes to the title when a poem is chosen, to be read out; the sheet is the mark */
.pil-stanza { margin: 0 0 1.125rem; font: 400 1.25rem/2.25rem var(--font-display); color: var(--text); }   /* Alef: the niqqud is drawn with the letters, where Assistant's marks come out thin. A whole-pixel pitch (36px) keeps every line on the pixel grid, so none looks lighter than its neighbours. */
.pil-stanza:last-of-type { margin-block-end: 0; }
.pil-poem--long .pil-poem__text { column-width: 19rem; column-gap: 44px; }   /* as many columns as the sheet holds at this width (one on a phone); the stanzas stay whole */
.pil-poem--long .pil-stanza { break-inside: avoid; }
.pil-poem__end {   /* the logo's leaf, closing the poem */
  display: block; width: 28px; aspect-ratio: 99 / 166; height: auto; margin: 24px auto 0;
  background: var(--poem-accent); opacity: .5;
  -webkit-mask: url(../img/logo-branch-mask.png) center / contain no-repeat;
  mask: url(../img/logo-branch-mask.png) center / contain no-repeat;
}

/* the way to the neighbouring poems: previous at the start, next at the end, the place in the middle */
.pil-poem__pager { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 12px; margin-block-start: 22px; padding-block-start: 14px; border-block-start: 1px solid var(--rule); }
.pil-pager__link { display: flex; flex-direction: column; gap: 1px; min-height: 48px; padding-block: 4px; color: var(--ink); text-decoration: underline 2px transparent; text-underline-offset: 5px; transition: text-decoration-color var(--dur-state) var(--ease-standard); }
.pil-pager__link:hover, .pil-pager__link:focus-visible { text-decoration-color: currentColor; }
.pil-pager__prev { grid-column: 1; justify-self: start; }
.pil-pager__next { grid-column: 3; justify-self: end; text-align: end; align-items: flex-end; }
.pil-pager__dir { display: inline-flex; align-items: center; gap: 6px; font: 600 .875rem/1.3 var(--font-body); color: var(--ink); }
.pil-pager__arrow { flex: none; width: 16px; height: 16px; }
.pil-pager__next .pil-pager__arrow { transform: scaleX(-1); }   /* the arrow is drawn pointing at the start of the line: «previous»; «next» looks the other way */
.pil-pager__name { font: 700 1.0625rem/1.3 var(--font-display); }
.pil-pager__pos { grid-column: 2; font: 600 .9375rem/1 var(--font-body); color: var(--ink); font-variant-numeric: tabular-nums; }


/* ---------- from 1000px: the list beside the sheet, in view while the poem is read ---------- */
@media (min-width: 1000px) {
  .pil-reader { display: grid; grid-template-columns: 16rem minmax(0, 1fr); column-gap: 56px; align-items: start; max-width: 70rem; }
  .pil-poem { max-width: 42rem; margin-inline: auto; }
  .pil-poem--long { max-width: none; }
  .pil-heart__index { position: sticky; inset-block-start: 24px; margin-block-end: 0; padding-inline-end: 28px; border-inline-end: 1px solid var(--rule); }
}
@media (max-width: 599px) {
  .pil-poem { padding: 52px 22px 16px; }
  .pil-poem::before { inset-inline-start: 22px; }
  .is-reader .pil-poems { padding: 52px 22px 16px; }
  .is-reader .pil-poem { scroll-margin-block-start: 53px; }
  .is-reader .pil-poems::before { inset-inline-start: 22px; }
  .pil-heart__index a { font-size: 1.0625rem; }
  .pil-stanza { font-size: 1.1875rem; line-height: 2.125rem; }
  .pil-pager__name { font-size: 1rem; }
}

/* forced colours (Windows contrast themes) drop the paper and the bookmark's fill: the sheet gets an edge, the bookmarks a system colour */
@media (forced-colors: active) {
  .pil-poem, .pil-poems, .pil-picker { border-color: CanvasText; }
  .pil-poem::before, .is-reader .pil-poems::before, .pil-picker::before { background: Highlight; }
  .pil-heart__index a::before { background: CanvasText; }
  .pil-heart__index a[aria-current="true"]::before { background: Highlight; }
  .pil-poem__end { background: CanvasText; opacity: 1; }
}
/* on paper: every poem, one column, no sheet, no bookmark, no list, no way-finding */
@media print {
  .pil-heart__index, .pil-poem::before, .pil-poem__end, .pil-poem__pager { display: none; }
  .pil-reader { display: block; max-width: none; }
  .pil-poem, .pil-poem[hidden] { display: block !important; padding: 0; margin-block-end: 28px; border: 0; box-shadow: none; background: none; break-inside: avoid; }
  .pil-poem__title { color: #000; }
}