/* page-old.css — Bible page look & feel
 * Lifted from the old Smarty html-header.tpl + read.tpl inline <style> blocks.
 * (eileenregular @font-face moved to fonts-local.css)
 */

#footer h3, #footer h3 small { color:#fff; }

.font-old      { font-family:'IM Fell DW Pica', serif;    font-size:23px; color:#261a0d; }
.font-old-sc   { font-family:'IM Fell DW Pica SC', serif; font-size:23px; color:#392613; }
.font-old-cur  { font-family:'UnifrakturMaguntia', cursive; font-size:23px; color:#392613; }
.font-15 { font-size:15px!important; }
.font-17 { font-size:17px!important; }

.chapter-title-even { text-align:right; }
.chapter-title-odd  { text-align:left; }
.chapter-header-left  { font-size:17px; float:left; }
.chapter-header-right { float:right; font-size:17px; }
.short-title { font-size:23px; }
.page-header { background-color:transparent; border:none; padding:0; }
.outline-header { font-size:19px; margin-bottom:-120px; }

.xref { float:left; clear:left; width:80px; margin-left:-90px; text-align:right; padding-right:8px; font-size:12px; line-height:1.15; }
.xref a { white-space:nowrap; }
#passage  { margin-left:90px; }
#text-body { width:700px; }
.chapterlist { font-size:27px; }

a.chapter-title { color:#261a0d; }

/* words of Christ — only takes effect if build RED_LETTER=true */
.woc { color:#a4282b; }

/* Drop cap.
 * The float BOX is what text wraps around, so the box must contain the glyph's
 * ink or the ornament spills onto the line below (hence line-height, not a fixed
 * height). margin-right = the gap the WRAPPED lines get.
 * .first-word cancels that gap for line 1 only, so the cap butts up against the
 * rest of its word (T|hus, I|n). build.php omits .first-word when the cap IS the
 * whole word ("I", "A"), leaving the gap.
 * KNOBS: font-size = cap size. line-height = how many lines get pushed.
 *        margin-top = vertical alignment against the first line. */
.first-letter{
  float:left; font-family:eileenregular;
  font-size:102px; line-height:1.05; height:auto;
  margin:-10px 10px 0 0; padding:0;
}
.first-word{ margin-left:-10px; }   /* must equal .first-letter margin-right */
/* verses (from read.tpl) */
.justified { text-align:justify; }
.verse { position:relative; padding-top:120px; margin-bottom:-120px; text-indent:10px; }
#verse_1 { text-indent:0; }

@media only screen and (max-device-width:480px){
  .chapterlist { font-size:17px; }
  #text-body { width:100vw; margin-left:-20px!important; }
  #passage { margin-left:60px; }
  .passage-block { width:97%; }
  .chapter-title-even, .chapter-title-odd { text-align:center; float:none; }
  .chapter-header-left, .chapter-header-right { text-align:center; float:none; }
  #jPanelMenu-menu em { color:#aaa; }
  #jPanelMenu-menu .font-old { color:#aaa; padding-right:10px; }
  .font-old { font-size:19px; }
  .chapter-header-left, .chapter-header-right { font-size:15px; }
  .short-title { font-size:23px; }
  .outline-header { font-size:15px; }
  .about { margin-top:10px; margin-right:20px; }
}

@media (max-width:767px){
  #passage { margin-left:56px; margin-right:10px; }
  .xref { width:48px; margin-left:-56px; padding-right:4px; font-size:11px; }
  .first-letter { font-size:80px; margin:-8px 9px 0 0; }
  .first-word { margin-left:-9px; }
}
@media (max-width:767px) and (orientation:portrait){
  #passage { margin-left:0; }
  .xref { display:none; }
}

/* ===== running head: chapter summary on one side, book name on the other =====
 * Flex, not floats. The old float:left/float:right pair collided whenever the
 * summary was long enough to fill col-md-7. Book name never wraps and never
 * shares a line with the summary.
 *   EVEN chapters: summary left,  book right
 *   ODD  chapters: book left,     summary right   (row-reverse)
 */
.chapter-runhead{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:50px;min-height:50px;}
.chapter-runhead .rh-title{flex:1 1 auto;font-size:17px;text-align:left;}
.chapter-runhead .rh-book{flex:0 0 auto;white-space:nowrap;font-size:23px;}
.chapter-runhead.rh-odd{flex-direction:row-reverse;}
.chapter-runhead.rh-odd .rh-title{text-align:right;}

/* ===== chapter nav arrows =====
 * Placement lives here ONLY. Edit this block + hard-refresh -> every page updates.
 * Markup per page is just <a class="pageturn pageturn-next|prev"><i class="fa fa-angle-*"></i></a>.
 * Trigger zone == the arrow strip (one element), so hover-reveal and click target match.
 */
.pageturn{position:fixed;top:160px;bottom:0;width:max(60px, calc(50vw - 400px));display:flex;align-items:center;z-index:400;text-decoration:none;color:#5a0000}
.pageturn:hover,.pageturn:focus{text-decoration:none}
.pageturn-prev{left:0;right:auto;justify-content:flex-end;padding-right:10px}
.pageturn-next{right:0;left:auto;justify-content:flex-start;padding-left:10px}
.pageturn>i{font-size:84px;opacity:0;transition:opacity .15s ease;pointer-events:none}
.pageturn:hover>i{opacity:.85}
@media (max-width:760px){ #content[data-cid] .pageturn{display:none} }  /* read pages: swipe on mobile */

/* ===== mega-menu TOC rows (1769-style: book left, chapter count right) =====
 * NOT keyed on .dropdown-item: the theme's .dropdown-item rules (a chevron pseudo
 * + child-hiding) collide with flex and blank the row. Standalone flex link here.
 * The !important lines defensively override those theme rules on pages still
 * carrying the old .dropdown-item class (i.e. before the next rebuild). */
.toc-row{display:flex!important;justify-content:space-between;align-items:baseline;padding:2px 16px;color:#261a0d;text-decoration:none;}
.toc-row:hover,.toc-row:focus{color:#5a0000;text-decoration:none;background:rgba(0,0,0,.04);}
.toc-row::before,.toc-row::after{content:none!important;display:none!important;}
.toc-row .toc-book,.toc-row .toc-ch{display:inline!important;visibility:visible!important;color:inherit;}
.toc-row .toc-ch{margin-left:14px;white-space:nowrap;}
.toc-row .toc-ch small{font-size:12px;}