/* Every blog's page styles. Each blog's own header color and print tweaks are added after these
   (blogStyles in src/pages.js), and the result is served as /<blog>/blog.<fingerprint>.css. */
:root { --bg:#f6f4ef; --card:#fff; --fg:#222; --muted:#666; --rule:#e2ddd2; --accent:#1364c4; --band:#7a4a2a; --band-fg:#fff; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#17171a; --card:#222226; --fg:#e8e6e1; --muted:#a6a29a; --rule:#38363a; --accent:#7ab0f0; --band:#3a2a20; --band-fg:#f3e9df; }
  .reading .cal td[style*="background-color:#a9a9a9"] { background-color:#7a7a7a !important; }
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
/* In-page links (day bar, back to top, Email/RSS, a month opened at a day) glide rather than jump, unless the reader prefers less motion */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior:smooth; } }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.55 Verdana, Arial, sans-serif; }
a { color:var(--accent); }
.band { background:var(--band); color:var(--band-fg); display:flow-root; } /* flow-root keeps the last line's margin inside the band */
.band-inner { position:relative; max-width:68rem; margin:0 auto; padding:20px 16px 0; }
/* Phones and tablets, where the sidebar is below the posts: buttons in the header's corner jump down to it */
.jump { position:absolute; top:14px; right:16px; display:flex; gap:6px; }
.jump > a { display:flex; align-items:center; gap:5px; color:var(--band-fg); text-decoration:none; font-size:.8rem; padding:3px 10px; border:1px solid rgba(255,255,255,.55); border-radius:4px; }
.jump > a:hover { background:rgba(255,255,255,.12); }
@media (min-width: 900px) { .jump > a { display:none; } }
/* Phones: Email and RSS as icons, so the three buttons clear "Bible Truth Publishers" */
@media (max-width: 520px) {
  .jump > a { padding:4px 7px; }
  .jump > a span, .blogs summary .icon:last-child { display:none; }
  .blogs summary { padding-right:10px; }
}
/* The Blogs menu, in the header's corner on every screen: a button that drops down a card listing
   every blog, each marked in its own header color */
.blogs { position:relative; }
.blogs summary { display:flex; align-items:center; gap:5px; list-style:none; cursor:pointer; color:var(--band-fg); font-size:.8rem; padding:3px 8px 3px 10px; border:1px solid rgba(255,255,255,.55); border-radius:4px; user-select:none; }
.blogs summary::-webkit-details-marker { display:none; }
.blogs summary:hover, .blogs[open] summary { background:rgba(255,255,255,.12); }
.blogs summary .icon:last-child { transition:transform .15s; opacity:.85; }
.blogs[open] summary .icon:last-child { transform:rotate(180deg); }
.blogs-menu { position:absolute; right:0; top:calc(100% + 8px); z-index:20; width:min(21rem, calc(100vw - 32px)); background:var(--card); color:var(--fg); border:1px solid var(--rule); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.18); padding:6px; }
.blogs .blogs-menu p { margin:6px 10px 6px; font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); opacity:1; }
.blogs-menu ul { list-style:none; margin:0; padding:0; }
.blogs-menu a { display:block; position:relative; padding:8px 10px 8px 24px; border-radius:6px; color:inherit; text-decoration:none; }
.blogs-menu a::before { content:''; position:absolute; left:10px; top:13px; width:6px; height:6px; border-radius:50%; background:var(--swatch, var(--band)); box-shadow:0 0 0 2px color-mix(in srgb, var(--swatch, var(--band)) 25%, transparent); }
.blogs-menu a:hover { background:color-mix(in srgb, var(--swatch, var(--band)) 9%, transparent); }
.blogs-menu a[aria-current] { background:color-mix(in srgb, var(--swatch, var(--band)) 14%, transparent); }
.blogs-menu b { display:block; font:600 .98rem/1.3 Georgia, 'Times New Roman', serif; }
.blogs-menu a[aria-current] b::after { content:'You are here'; display:inline-block; white-space:nowrap; margin-left:8px; font:400 .68rem Verdana, Arial, sans-serif; color:var(--muted); vertical-align:1px; }
.blogs .blogs-menu small { display:block; margin-top:1px; font-size:.78rem; line-height:1.35; color:var(--muted); opacity:1; }
aside section { scroll-margin-top:12px; }
.band small { display:block; font-size:.8rem; opacity:.85; }
.band small a { color:inherit; }
.band small img { height:1em; width:auto; margin-right:6px; vertical-align:-1px; }
.band h1 { margin:4px 0 2px; font:600 1.9rem/1.2 Georgia, 'Times New Roman', serif; }
.band h1 a { color:inherit; text-decoration:none; }
.band p { margin:0 0 18px; opacity:.9; font-size:.95rem; }
.band p:last-child { margin-bottom:20px; } /* no tabs below it */
nav { display:flex; flex-wrap:wrap; }
nav a { color:var(--band-fg); text-decoration:none; padding:10px 14px; font-size:.9rem; border-bottom:3px solid transparent; }
nav a[aria-current] { border-bottom-color:#e2b04a; font-weight:bold; }
nav a:hover { background:rgba(255,255,255,.08); }
.wrap { max-width:68rem; margin:0 auto; padding:24px 16px; display:grid; gap:24px; grid-template-columns:minmax(0,1fr); }
@media (min-width: 900px) {
  .wrap { grid-template-columns:minmax(0,1fr) 18rem; }
  /* The sidebar stays in view as the page scrolls (scrolling itself if taller than the window) */
  aside { position:sticky; top:16px; align-self:start; max-height:calc(100vh - 16px - 2.5rem - 32px); overflow-y:auto; scrollbar-width:thin; }
}
article { background:var(--card); border:1px solid var(--rule); border-radius:6px; padding:24px; margin-bottom:24px; }
article h2 { margin:0 0 16px; font:600 1.35rem/1.3 Georgia, serif; }
article h2 a { color:inherit; text-decoration:none; }
/* A post's title with its Copy link and Print buttons beside it */
.post-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin:0 0 16px; }
.post-head h2 { margin:0; }
/* Desktop: once the header scrolls out of view, a compact copy shows at the top of the sidebar. */
.side-head { display:none; background:var(--band); color:var(--band-fg); border-radius:6px; padding:12px 16px 4px; margin-bottom:16px; }
.side-head small { display:block; font-size:.75rem; opacity:.85; }
.side-head small a { color:inherit; text-decoration:none; }
.side-head small img { height:1em; width:auto; margin-right:5px; vertical-align:-1px; }
.side-head b { display:block; margin:2px 0 8px; font:600 1.15rem/1.25 Georgia, 'Times New Roman', serif; }
.side-head b a { color:inherit; text-decoration:none; }
.side-head nav { margin:0 -8px; }
.side-head nav a { padding:6px 8px; font-size:.8rem; }
@media (min-width: 900px) { body.scrolled .side-head { display:block; } }
.month-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 16px; }
.month-title { margin:0; font:600 1.6rem/1.2 Georgia, serif; }
.month-head .btn { font-size:.85rem; padding:3px 12px; align-self:center; }
/* The day bar on pages listing several days: stays at the top of the window; days in view highlighted.
   Wraps on wider screens, one scrolling row on phones. */
.daybar { position:sticky; top:0; z-index:5; background:var(--bg); padding:8px 0; margin:-8px 0 16px; display:flex; flex-wrap:wrap; gap:4px; }
.daybar a { flex:0 0 2.45rem; display:flex; flex-direction:column; align-items:center; padding:3px 0 2px; border:1px solid var(--rule); border-radius:4px; background:var(--card); color:var(--fg); text-decoration:none; line-height:1.15; }
.daybar a b { font-size:.92rem; font-variant-numeric:tabular-nums; }
.daybar a small { font-size:.64rem; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; }
.daybar a:hover { border-color:var(--band); }
.daybar a.inview { background:var(--band); border-color:var(--band); color:var(--band-fg); }
.daybar a.inview small { color:var(--band-fg); opacity:.85; }
.daybar a.newer, .daybar a.older { color:var(--accent); }
article[data-day] { scroll-margin-top:calc(var(--daybar, 110px) + 8px); }
@media (max-width: 700px) {
  .daybar { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin; }
  .daybar a { flex-shrink:0; }
}
/* A day's pager: newer, the month (always centered, even with no newer or older day), older */
.pager.pager-day { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); }
.pager.pager-day > :last-child { text-align:right; }
.pager .month-link { text-align:center; }
.pager-mid { display:flex; flex-direction:column; align-items:center; gap:8px; }
.btn { display:inline-flex; align-items:center; gap:4px; text-decoration:none; font:400 .8rem/1.4 Verdana, Arial, sans-serif; color:var(--accent); background:none; border:1px solid var(--rule); border-radius:4px; padding:2px 10px; cursor:pointer; white-space:nowrap; }
.btn:hover { border-color:var(--accent); }
.actions { display:flex; gap:6px; flex-shrink:0; }
@media (max-width: 520px) { .post-head { flex-direction:column; align-items:flex-start; gap:8px; } }
.reading table { max-width:100%; }
.reading > table { width:100% !important; }
.reading td[width="470"] { width:auto !important; }
.reading img { max-width:100%; height:auto; }
@media (max-width: 520px) { article { padding:16px; } }
.pager { display:flex; justify-content:space-between; gap:12px; font-size:.9rem; }
aside section { background:var(--card); border:1px solid var(--rule); border-radius:6px; padding:16px; margin-bottom:16px; }
aside h3 { margin:0 0 10px; font:600 1.05rem Georgia, serif; display:flex; align-items:center; gap:8px; }
/* The section icons in the blog's header color (its light shade in dark mode, where the band is dark) */
aside h3 .icon { flex-shrink:0; color:var(--band); }
@media (prefers-color-scheme: dark) { aside h3 .icon { color:var(--band-fg); } }
aside ul { margin:0; padding-left:1.1rem; font-size:.9rem; }
aside li { margin:4px 0; }
aside p { margin:0 0 8px; font-size:.9rem; }
.signup { border-top:1px solid var(--rule); padding:6px 0; }
.signup summary { cursor:pointer; font-size:.9rem; font-weight:bold; padding:4px 0; }
/* A form under its own label (Daily Light's Daily tab) leaves out the same title from MailerLite
   (its "Thank you!" after signing up stays) */
.signup .ml-form-embedContent h4 { display:none !important; }
aside p.more { margin:8px 0 0; font-size:.85rem; }
aside ul.feeds { list-style:none; padding:0; }
aside li.feed { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:6px 0; }
/* Each feed's label on one line beside its button */
aside li.feed > span { white-space:nowrap; }
.print-only { display:none; }
.later { color:var(--muted); opacity:.55; }
.years { display:grid; gap:4px; font-variant-numeric:tabular-nums; }
.year { display:grid; grid-template-columns:4rem repeat(12, minmax(0, 1fr)); align-items:center; padding:6px 0; border-bottom:1px solid var(--rule); }
.year h3 { margin:0; font:600 1rem Georgia, serif; }
.year a, .year .later { text-align:center; padding:2px 0; }
.archive-note { margin:14px 0 0; font-size:.85rem; color:var(--muted); }
@media (max-width: 640px) {
  .year { grid-template-columns:repeat(6, minmax(0, 1fr)); row-gap:4px; }
  .year h3 { grid-column:1 / -1; }
}
footer { max-width:68rem; margin:0 auto; padding:8px 16px 40px; color:var(--muted); font-size:.85rem; }
.to-top { position:fixed; right:calc(16px + env(safe-area-inset-right, 0px)); bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:6; width:2.75rem; height:2.75rem; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--band); color:var(--band-fg); font-size:1.3rem; text-decoration:none; box-shadow:0 2px 6px rgba(0,0,0,.25); opacity:.9; }
.to-top:hover { opacity:1; }
.to-top[hidden] { display:none; }
/* Desktop: under the sidebar, lined up with its left edge (the .wrap is 68rem wide, centered, with 16px padding and an 18rem sidebar); the sidebar stops short of it */
@media (min-width: 900px) { .to-top { right:auto; width:2.5rem; height:2.5rem; font-size:1.15rem; left:calc(min(50% + 34rem, 100%) - 16px - 18rem); } }
@page { size:letter; margin:0.5in; }
@media print {
  /* One reading per sheet, sized to fit: heading image at its email width, compact text and notes. */
  body { background:#fff; color:#000; font-size:10.5pt; line-height:1.35; }
  .band, aside, .pager, footer, .btn, .to-top { display:none !important; }
  .print-only { display:block; }
  .wrap { display:block; padding:0; max-width:none; }
  /* The article shrinks to the layout's width and is centered, so the title lines up with the image. */
  article { border:0; padding:0; margin:0 auto; width:fit-content; break-after:page; break-inside:avoid; }
  article h2 { font-size:13pt; margin:0 0 6px; }
  .post-head { margin:0 0 6px; }
  .reading img { width:4.9in !important; max-width:4.9in !important; }
  .reading td[style*="padding-top:15px"] { padding-top:8px !important; }
  .reading td[style*="padding-top:20px"] { padding-top:10px !important; }
  .reading table.notes td[height="30"] { height:0.27in; }
  .reading .blog-link { display:none !important; }
  /* Layout: heading image, verses and references in a column the width of the image; the three
     months stacked beside them; notes full width underneath. */
  .reading { display:grid; grid-template-columns:4.9in auto; column-gap:0.35in; }
  .reading > table, .reading > .print-only { grid-column:1; }
  .reading > table { width:4.9in !important; }
  .reading .print-only { display:contents; }
  .reading .cals { grid-column:2; grid-row:1 / span 4; margin:0 !important; width:auto !important; }
  .reading .cals, .reading .cals > tbody, .reading .cals > tbody > tr { display:block; }
  .reading .cals td.cal-cell { display:block; padding:0 0 8px !important; }
  .reading .notes { grid-column:1 / -1; margin:0.3in 0 0 !important; width:100% !important; }
  article:last-of-type { break-after:auto; }
  /* Each reading (evening, morning) on its own sheet. */
  article + article { break-before:page; page-break-before:always; }
  /* A reading's Print button prints just that reading; the browser's own Print still prints all. */
  body.print-one article:not(.printing) { display:none !important; }
  .daybar { display:none !important; }
  .month-head { display:none; }
  a { color:#000; text-decoration:none; }
  .reading td, .reading img { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}
.blogs-menu .to-dailylight { --swatch:#7a4a2a; }
.blogs-menu .to-comfortofscriptures { --swatch:#2f5f57; }
.blogs-menu .to-growingingrace { --swatch:#2e6b34; }
.blogs-menu .to-christiansdaily { --swatch:#3d4f6b; }
.blogs-menu .to-youngchristians { --swatch:#b8501f; }

:root { --band:#2e6b34; }
@media (prefers-color-scheme: dark) { :root { --band:#1c3d20; } }
@media print { .reading .notes { margin-top:0.1in !important; } }
@media print {
  article { width:auto; }
  .reading { display:block; }
  .reading .cals { float:right; margin:0 0 0.1in 0.25in !important; }
  .reading > table:not(.hdg), .reading > table:not(.hdg) > tbody, .reading > table:not(.hdg) tr, .reading > table:not(.hdg) td { display:block; width:auto !important; }
  .reading .notes { clear:both; }
  .reading .notes tr:first-child td { padding-top:0 !important; }
  /* Long poems: two full-width columns with a rule between them, the author under the right column. */
  .reading td.poem { column-count:2; column-gap:0.3in; column-rule:1px solid #bbb; clear:right; }
  .reading td.poem-by { text-align:right !important; }
}