@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;font-style:italic}
.prayer-box ol{list-style:none;padding-left:0;margin:.5rem 0}
.prayer-box ol li {margin-bottom: 10px;}
.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 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 auto;min-width:2.6rem;font-weight:bold;color:#8a6d2f}

.proto-note{background:#fff6da;border:1px solid #e6cf8a;border-radius:6px;padding:.8rem 1.1rem;font-size:.85rem;margin-bottom:1.5rem}
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}
  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{min-width: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}