@import url('https://fonts.googleapis.com/css2?family=Zen+Dots&display=swap');
:root{
  --gold:#facc72;
  --title-font:"Zen Dots", sans-serif;
  --cream:#faf6ee;
  --parchment:#fdfbf5;
  --ink:#333333;
  --red-line:#c0232d;
  --red-tint:#fbeeee;
  --green-line:#3f6b46;
  --green-tint:#eef5ef;
  --blue-label:#2f5496;
  --blue-tint:#eef1f8;
  --muted:#6b6152;
  --body-font:-apple-system,"system-ui","Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --head-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}
*{box-sizing:border-box}
html{scroll-padding-top:190px}
body{margin:0;font-family:var(--body-font);background:var(--cream) url("images/background.png") repeat;color:var(--ink);line-height:1.55}
/* Base link color -- plain, unstyled links (no class) fall back to this
   instead of the browser default blue/purple. Anything with a more
   specific selector elsewhere (nav links, row links, muted citation
   links, etc.) keeps its own color since class selectors outrank this. */
a{color:var(--red-line);text-decoration:none}
a:hover{text-decoration:underline}
header.banner{
  background-image:linear-gradient(rgba(20,12,6,.55),rgba(20,12,6,.55)), url("images/header.jpeg");
  background-size:cover;
  background-position:center;
  padding:1.3rem 1.5rem 1.1rem;
  text-align:left;
  position:relative;
}
header.banner .wrap{
  max-width:1100px;margin:0 auto;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:start;
  gap:.3rem 1.2rem;
}
header.banner .wrap > div:first-child, a.site-logo-link{grid-column:1;grid-row:1 / 3;align-self:center}
a.site-logo-link{display:block;text-decoration:none;color:inherit}
a.site-logo-link:hover h1{color:#fff}
header.banner h1{
  font-family:var(--title-font);
  color:var(--gold);
  font-size:1.4rem;
  font-weight:600;
  margin:0;
  line-height:1.3;
  letter-spacing:.5px;
}
header.banner .tagline{color:#f1e6d0;font-size:.85rem;font-style:italic;margin-top:.4rem}
nav.topnav{grid-column:2;grid-row:1;justify-self:end;display:flex;gap:1.1rem;flex-wrap:wrap}
nav.topnav a{color:#f1e4c8;text-decoration:none;font-family:var(--body-font);font-size:.95rem;border-bottom:1px solid transparent;padding-bottom:2px}
nav.topnav a:hover, nav.topnav a.active{border-bottom-color:var(--gold);color:var(--gold)}
.nav-toggle{grid-column:2;grid-row:1;justify-self:end;display:none;background:none;border:none;outline:none;color:var(--gold);font-size:2.1rem;line-height:1;padding:.15rem .3rem;cursor:pointer}
.nav-toggle:focus{outline:none}
@media (max-width:800px){
  header.banner .wrap{display:flex;flex-direction:column;position:relative}
  header.banner .wrap > div:first-child{padding-right:3rem}
  .nav-toggle{display:block;position:absolute;top:0;right:0}
  nav.topnav{display:none;width:100%;flex-direction:column;gap:.2rem;background:rgba(20,12,6,.92);padding:.6rem;border-radius:6px;margin-top:.6rem;order:2}
  nav.topnav.nav-open{display:flex}
  nav.topnav a{padding:.5rem .3rem;border-bottom:1px solid rgba(255,255,255,.08)}
}
.searchbox{display:flex;align-items:center;gap:.4rem}
.searchbox input{border:1px solid #7a6448;background:#fffaf0;border-radius:4px;padding:.35rem .6rem;font-family:var(--body-font);font-size:.85rem;width:180px}

main{max-width:1100px;margin:0 auto;padding:2rem 1.5rem 4rem}
.page-body{background:var(--parchment);border:1px solid #e4dcc8;border-radius:6px;padding:2rem 2.4rem;box-shadow:0 1px 3px rgba(0,0,0,.06)}

.intro h2{font-family:var(--head-font);font-size:1.3rem;color:#8a6d2f;border-bottom:2px solid var(--gold);padding-bottom:.5rem}
.prayer-box{background:var(--blue-tint);border-left:4px solid var(--blue-label);padding:1rem .8rem;margin:1.2rem 0}
.prayer-box ol{list-style:none;padding-left:0;margin:.5rem 0}
.prayer-box ol li {margin-bottom: 10px;}
/* JD's original draft color-coded parts of the prayer using the same
   red/green/blue as the biblical-text/Hebrew-Bible/commentary legend
   elsewhere on the site. Reusing the site's actual legend colors here
   (rather than JD's raw docx hex values, which didn't quite match) so
   the prayer's coloring is consistent with that legend instead of
   introducing a fourth, different palette. */
.prayer-blue{color:var(--blue-label)}
.prayer-green{color:var(--green-line)}
.prayer-red{color:var(--red-line)}
.legend{display:flex;gap:1.2rem;flex-wrap:wrap;margin:1.3rem 0;font-size:.85rem}
.swatch{display:inline-block;width:.8rem;height:.8rem;border-radius:2px;margin-right:.4rem;vertical-align:middle}
.sw-red{background:var(--red-line)} .sw-green{background:var(--green-line)} .sw-blue{background:var(--blue-label)}

.key-bar{background:#f1e9d6;border-bottom:1px solid #e4dcc8}
.key-bar-inner{max-width:1100px;margin:0 auto;padding:.55rem 1.5rem;display:flex;gap:1.6rem;flex-wrap:wrap;font-size:.8rem;color:#5a4826}
.key-item{display:inline-flex;align-items:center}

.toc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:1.2rem}
.toc-card{border:1px solid #e4dcc8;border-radius:6px;padding:1rem 1.2rem;background:#fff;text-decoration:none;color:var(--ink);transition:box-shadow .15s;display:block}
.toc-card:hover{box-shadow:0 2px 8px rgba(0,0,0,.1)}
.toc-card h3{margin:.1rem 0;font-family:var(--head-font);font-size:1rem;color:#8a6d2f}
.toc-card p{margin:0;font-size:.85rem;color:var(--muted)}

.layout{display:grid;grid-template-columns:260px 1fr;gap:2rem;align-items:start}
.sidebar{position:sticky;top:1.2rem;background:var(--parchment);border:1px solid #e4dcc8;border-radius:6px;padding:1rem;max-height:85vh;overflow:auto}
.sidebar h4{margin:.2rem 0 .6rem;font-family:var(--head-font);color:#8a6d2f;font-size:.85rem;text-transform:uppercase;letter-spacing:.5px}
.sidebar ul{list-style:none;margin:0;padding:0}
.sidebar li{margin:.15rem 0}
.sidebar a.nav-link{display:block;padding:.4rem .5rem;border-radius:4px;color:var(--ink);text-decoration:none;font-size:.92rem}
.sidebar a.nav-link:hover{background:var(--blue-tint)}
.sidebar .nav-sub{display:block;font-size:.75rem;color:var(--muted);font-style:italic}
.chapter-summary{margin:.2rem 0 .6rem;font-family:var(--head-font);color:#8a6d2f;font-size:.85rem;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;list-style:revert}
#chapterDetails[open] .chapter-summary{margin-bottom:.6rem}
.chapter-details-body{margin-top:.4rem}

.chapter-title{font-family:var(--head-font);font-size:1.2rem;color:#8a6d2f;border-bottom:2px solid var(--gold);padding-bottom:.4rem;margin-top:2.4rem}
.pericope-title{color:#5a4826;font-size:1.05rem;margin-top:1.6rem;font-weight:bold}
.block{border-radius:5px;padding:.7rem 1rem;margin:.5rem 0;font-size:.97rem}
.verse-block{background:var(--red-tint);border-left:4px solid var(--red-line)}
.verse-block .ref{font-weight:bold;color:var(--red-line)}
.verse-block .quote{font-style:italic}
.ot-block{background:var(--green-tint);border-left:4px solid var(--green-line)}
.ot-block .tag{display:inline-block;font-size:.68rem;text-transform:uppercase;letter-spacing:.4px;background:var(--green-line);color:#fff;border-radius:3px;padding:.05rem .4rem;margin-right:.4rem;vertical-align:middle}
.ot-block .ref{font-weight:bold;color:var(--green-line)}
.ot-block .quote{font-style:italic}
.commentary-block{background:var(--blue-tint);border-left:4px solid var(--blue-label)}
.commentary-block .commentator{font-weight:bold;color:var(--blue-label);text-transform:uppercase;font-size:.85rem;letter-spacing:.3px}
.commentary-block .cite{float:right;font-size:.78rem}
.commentary-block .cite a{color:var(--muted);text-decoration:none;border-bottom:1px dotted var(--muted)}

.bib-list{list-style:none;padding:0}
/* Flexbox hanging indent instead of the old negative-text-indent trick
   -- text-indent on a line starting with an inline-block (.bib-id) is
   unreliable and was rendering the number to the left of the rest of
   the page's content instead of flush with it. With flex, the number
   is a fixed-width column and the text is its own column that wraps
   cleanly underneath itself, matching every other browser reliably. */
.bib-list-header{display:flex;align-items:baseline;gap:.4rem;margin-top:1rem;padding:.35rem 0;border-bottom:2px solid var(--gold)}
.bib-th{display:flex;align-items:baseline;gap:.3rem;font-family:inherit;font-weight:bold;color:#8a6d2f;font-size:.85rem;text-transform:uppercase;letter-spacing:.4px;background:none;border:none;padding:0;cursor:pointer;text-align:left}
.bib-th:hover{color:var(--blue-label)}
/* Fixed width (not just min-width) so this column is exactly as wide as
   .bib-id below, regardless of how much space "Code" + the sort arrow
   need -- otherwise the header button's own content could push it
   wider than the row column it's supposed to line up with. */
.bib-th-code{flex:0 0 2.6rem}
.bib-th-text{flex:1 1 auto}
.bib-sort-arrow{font-size:.65rem;visibility:hidden}
.bib-th.active .bib-sort-arrow{visibility:visible}
.bib-list li{display:flex;align-items:baseline;gap:.4rem;padding:.35rem 0;border-bottom:1px solid #eee2c9;font-size:.92rem}
.bib-text{flex:1 1 auto;min-width:0}
tbody tr{border-bottom:1px solid #eee2c9}
tbody td{padding:.4rem}
.cal-bible{color:var(--red-line);font-style:italic}
.cal-cite{color:var(--muted);text-decoration:none;border-bottom:1px dotted var(--muted);font-size:.85rem}
.cal-intro p{margin:.7rem 0}
.cal-search-row{margin-bottom:1rem}
#calSearch{border:1px solid #e4dcc8;border-radius:4px;padding:.5rem .7rem;font-family:var(--body-font);font-size:.9rem;width:100%;max-width:360px}

/* Month tabs and the table's column headers stick together, one under
   the other, below the main site header. Both live inside the SAME
   wrapper (.cal-sticky-wrap) that spans the whole table -- not just a
   small strip -- so they stay stuck for the entire scroll through all
   366 rows instead of popping out early. */
.cal-sticky-wrap{position:relative}
.month-tabs{display:flex;flex-wrap:wrap;gap:.4rem;position:sticky;top:var(--sticky-h,88px);z-index:96;background:var(--parchment);padding:.6rem 0;border-bottom:1px solid #e4dcc8}
.month-tab{border:1px solid #e4dcc8;background:#fff;border-radius:4px;padding:.3rem .7rem;font-size:.82rem;cursor:pointer;color:var(--ink)}
.month-tab.active,.month-tab:hover{background:var(--blue-tint);border-color:var(--blue-label)}
.cal-table thead th{position:sticky;top:calc(var(--sticky-h,88px) + var(--month-tabs-h,46px));background:var(--parchment);z-index:95;box-shadow:0 2px 0 var(--gold)}
/* No overflow-x here at the base/desktop level on purpose: ANY
   overflow-x value other than "visible" makes this div a scroll
   container per spec, which makes it the containing block for the
   sticky thead th's above -- meaning they'd stick to THIS div's own
   (never-moving) internal scroll instead of the page's scroll, and
   just silently fail to stick at all. The horizontal scroll is only
   actually needed on narrow screens anyway (see the mobile media
   query below, where the table's min-width exceeds the viewport), so
   it's scoped there instead of applied globally. */
.cal-table-scroll{-webkit-overflow-scrolling:touch}
/* border-collapse MUST be "separate" here, not "collapse" -- sticky
   positioning on th/td is unreliable (detached-looking content, or no
   stick at all) in Chrome/Safari whenever a table uses border-collapse:
   collapse. border-spacing:0 keeps rows visually seamless despite the
   switch, since we only ever set bottom borders (no side borders that
   would otherwise double up under "separate"). */
.cal-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.88rem}
.cal-table th{text-align:left;padding:.5rem .4rem;border-bottom:2px solid var(--gold)}
.cal-table td{padding:0;border-bottom:1px solid #eee2c9;vertical-align:top}
.cal-table tr.hidden{display:none}
.cal-table tr{cursor:pointer}
.cal-table a.row-link{display:block;padding:.4rem;color:var(--ink);text-decoration:none}
.cal-table a.row-link.title-link{color:var(--red-line)}
.cal-table tr:hover{background:var(--red-tint)}
.cal-table tr:hover a.row-link{color:var(--red-line)}
.day-meta{color:var(--muted);font-size:.85rem;text-transform:uppercase;letter-spacing:.4px}
.day-pager{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:start;margin-top:2rem;padding-top:1rem;border-top:1px solid #e4dcc8}
.day-nav-link{text-decoration:none;color:var(--blue-label);font-size:.92rem}
.day-nav-link .nav-sub{display:block;color:var(--muted);font-style:italic;font-size:.8rem}
.day-nav-next{text-align:right}

.bib-id{flex:0 0 2.6rem;font-weight:bold;color:#8a6d2f}

footer{text-align:center;color:var(--muted);font-size:.8rem;padding:1.5rem}
@media (max-width:800px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:static;max-height:none}
  .cal-table{min-width:640px}
  /* Horizontal scroll only kicks in here, where the table's min-width
     actually exceeds the viewport -- see the note on .cal-table-scroll
     above for why this can't just be a permanent, always-on rule. This
     does mean the column headers won't stay sticky on narrow screens
     specifically (that's the trade-off), but the month tabs above them
     still do. */
  .cal-table-scroll{overflow-x:auto}
  /* overflow-x:auto above makes this div a scroll container, which
     hijacks the containing block for the sticky thead th's (see the
     note on .cal-table-scroll higher up). Left as position:sticky, the
     header sticks relative to that small scroll container instead of
     the page, which is why it was rendering mid-table or clipping short
     result lists. Since sticky column headers were already an accepted
     trade-off we're not getting on mobile anyway, just turn it off
     cleanly here instead of letting it misbehave. */
  .cal-table thead th{position:static;box-shadow:none}
  main{padding:1.2rem .7rem 3rem}
  .page-body{padding:1.2rem 1.3rem}
  main.main-bib{max-width:98%}
  .bib-page-body{padding:1.2rem .8rem}
  .bib-list li{font-size:.85rem;gap:.3rem}
  .bib-id{flex:0 0 2.2rem}
  .bib-list-header{gap:.3rem}
  .bib-th-code{flex:0 0 2.2rem}
  html{scroll-padding-top:230px}
}

/* --- sticky header + key bar --- */
.sticky-top{position:sticky;top:0;z-index:100;box-shadow:0 2px 6px rgba(0,0,0,.15)}

/* --- back to top --- */
.back-to-top{position:fixed;right:1.2rem;bottom:1.2rem;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--red-line);color:#fff;border:none;font-size:1.3rem;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.25);z-index:150;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease,visibility .2s}
.back-to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top:hover{background:#9c1c22}

/* --- site-wide search --- */
.site-search{grid-column:2;grid-row:2;justify-self:end;position:relative;min-width:200px;flex:0 0 auto}
.site-search input{width:220px;max-width:100%;border:1px solid #7a6448;background:#fffaf0;border-radius:4px;padding:.4rem .6rem;font-family:var(--body-font);font-size:.85rem}
.site-search-results{display:none;position:absolute;top:calc(100% + 6px);right:0;width:340px;max-width:90vw;max-height:70vh;overflow:auto;background:var(--parchment);border:1px solid #e4dcc8;border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.25);z-index:200}
.site-search-results.open{display:block}
.site-search-result{display:block;padding:.6rem .8rem;text-decoration:none;color:var(--ink);border-bottom:1px solid #eee2c9}
.site-search-result:hover{background:var(--blue-tint)}
.site-search-result .ssr-badge{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}
.site-search-result .ssr-title{display:block;font-weight:bold;color:var(--wood-mid,#8a6d2f);font-size:.88rem;margin:.1rem 0}
.site-search-result .ssr-snippet{display:block;font-size:.8rem;color:var(--muted)}
.site-search-empty{padding:.6rem .8rem;font-size:.82rem;color:var(--muted)}
@media (max-width:800px){
  .site-search{order:3;width:100%;margin-top:.5rem}
  .site-search input{width:100%}
  .site-search-results{left:0;right:0;width:auto}
}

/* --- login gate --- */
.login-wrap{max-width:420px;margin:0 auto;padding:3rem 1.5rem}
.login-box{text-align:center}
.login-box form{display:flex;flex-direction:column;gap:.9rem;margin-top:1rem}
.login-box input[type="password"]{border:1px solid #7a6448;background:#fffaf0;border-radius:6px;padding:.7rem 1rem;font-family:var(--body-font);font-size:1rem}
.login-box button{background:var(--red-line);color:#fff;border:none;border-radius:6px;padding:.7rem 1rem;font-family:var(--body-font);font-size:1rem;cursor:pointer}
.login-box button:hover{background:#9c1c22}
.login-error{background:var(--red-tint);border:1px solid var(--red-line);color:var(--red-line);border-radius:6px;padding:.6rem .9rem;font-size:.88rem;margin:0}

/* --- dedicated search page --- */
.search-page-box{margin:1.2rem 0}
.search-page-box input{width:100%;max-width:500px;border:1px solid #7a6448;background:#fffaf0;border-radius:6px;padding:.7rem 1rem;font-family:var(--body-font);font-size:1rem}
.search-page-meta{font-size:.85rem;color:var(--muted);margin:.3rem 0 1rem}
.search-page-results{display:flex;flex-direction:column;gap:.6rem}
a.search-result-card{display:block;text-decoration:none;color:inherit;transition:box-shadow .15s}
a.search-result-card:hover{box-shadow:0 2px 8px rgba(0,0,0,.12)}
.site-search-viewall{display:block;text-align:center;padding:.6rem;font-size:.82rem;color:var(--blue-label);text-decoration:none;border-top:1px solid #e4dcc8;background:var(--blue-tint)}
.site-search-viewall:hover{text-decoration:underline}
.search-result-badge{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin-bottom:.3rem}