/* =====================================================================
   "LOGO" LOOK — the colors of the BIAYL Project logo and podcast art:
   soft gray paper, black ink, the four logo colors (coral, lilac, sun
   yellow, green) and the temple line drawing. Loaded after site.css,
   so it only swaps colors and a few backgrounds; the layout is unchanged.
   ===================================================================== */
:root{
  --bg:#f2f2f2; --panel:#e9e9e9; --panel-line:#d5d5d5; --white:#fafafa; --footer:#e6e6e6; --line:#dddddd;
  --ink:#111111; --muted:#636363; --faint:#a0a0a0;
  /* logo colors */
  --coral:#ea706f; --lilac:#c47fea; --sun:#fec02d; --leaf:#51b788;
  /* the calendar's names for things, pointed at the logo colors */
  --teal:#111111; --teal-deep:#000000; --teal-text:#8a44c4; --teal-wash:#efe0fb;
  --terra:#ea706f; --terra-text:#c2474b; --terra-wash:#fbe1e0; --terra-light:#fec02d;
  --night:#111111; --black:#111111; --cream:#fafafa; --err:#c2474b;
  /* "today" keeps the month's podcast art and colors (set by the calendar each month) */
  --open-bg:#ffffff; --res-bg:#efe0fb; --past-bg:#ebebeb; --out-bg:#f5f5f5;
}
body{background:var(--bg);color:var(--ink)}

/* the four-color band under the header (from the logo's web address strip) */
.hero-strip,body.page-home .hero-strip{display:block;height:8px;background:linear-gradient(90deg,var(--coral) 0 25%,var(--lilac) 25% 50%,var(--sun) 50% 75%,var(--leaf) 75% 100%)}
@media (max-width:639px){.hero-strip{height:6px}}
.logo::before{background:var(--ink)}
nav.main a[aria-current="page"]{border-bottom-color:var(--coral)}
.kebab-btn{color:var(--ink)}

/* home hero: light paper, black type, the temple drawing at the bottom right */
.hero{color:var(--ink);border-bottom:1px solid var(--line);background:
  linear-gradient(90deg,var(--bg) 0 42%,rgba(242,242,242,.82) 55%,rgba(242,242,242,0) 75%),
  url("img/temple.jpg") right bottom / auto 100% no-repeat,var(--bg)}
.hero .mark{display:none}
.hero .tab{background:var(--coral)}
.hero .kicker{color:var(--ink)}
.hero h1{color:var(--ink)}
.hero p{color:#3c3c3c}
.hero .inner{padding-bottom:110px}
@media (max-width:820px){.hero{background:url("img/temple-phone.jpg") center bottom / 100% auto no-repeat,var(--bg)}.hero .inner{padding-bottom:92vw}}
.btn-cream{background:var(--ink);color:#fff}
.btn-cream:hover{background:#000}
.btn-outline-light{color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn-outline-light:hover{background:rgba(0,0,0,.05)}

/* "bible in a year live" — each word on its logo color, like the web address on the art */
.wm{letter-spacing:.12em}
.wm span{display:inline-block;padding:2px 6px;color:#fff;font-weight:800}
.wm .w1{background:var(--coral)}
.wm .w2{background:var(--lilac)}
.wm .w3{background:var(--sun);color:var(--ink)}
.wm .w4{background:var(--leaf)}
.wm .w5{background:var(--coral)}
.wm .w6{background:none;color:var(--muted);padding-left:2px}

/* today's reading: black with the drawing in white, sun-yellow accents */
.todaybar{background:linear-gradient(100deg,rgba(17,17,17,.96) 30%,rgba(17,17,17,.75)),url("img/lineart-dark.jpg") right center/cover;box-shadow:0 22px 44px -30px rgba(0,0,0,.7)}
.todaybar .kicker{color:var(--sun)}
.todaybar .meta,.todaybar .soon{color:#d9d9d9}
.todaybar .btn-cream{background:var(--sun);color:var(--ink)}
.todaybar .btn-cream:hover{background:#ffcf55}
.todaybar .btn-outline-light{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.6)}

/* episode cards */
.brief{background:#fafafa;border-color:var(--line)}
.brief .bh{border-bottom-color:var(--line)}
.brief .bh .lab{color:var(--lilac)}
.brief .bh .lab.terra{color:var(--coral)}
.brief.on{border-color:var(--lilac);box-shadow:0 0 0 1px var(--lilac)}
.listen{color:var(--ink)}
.listen .c{box-shadow:inset 0 0 0 2px var(--ink)}
.chip[aria-pressed="true"],.chip.on{background:var(--ink);border-color:var(--ink)}
.stab[aria-selected="true"]{border-bottom-color:var(--coral)}
.soon-tag{background:var(--sun);color:var(--ink)}
.ph{background:var(--lilac);color:#fff}
.ph.terra{background:var(--sun);color:var(--ink)}
.textlink,.sh a{color:var(--teal-text)}

/* banners and panels */
.banner{background:#fafafa;border:1px solid var(--line)}
.banner .bicon{background:var(--sun);color:var(--ink)}
.bbtn{background:var(--ink)}
.bbtn:hover{background:#000}
.panel .kicker,.page-head .kicker{color:var(--coral)}
.give{background:var(--ink)}
.installcard{background:#fafafa;border:1px solid var(--line)}

/* calendar: open = coral outline, reserved = lilac, today = sun yellow */
.gcard::before{background:linear-gradient(var(--coral) 0 25%,var(--lilac) 25% 50%,var(--sun) 50% 75%,var(--leaf) 75% 100%)}
.ev-res{background:var(--lilac);color:#fff}
.ev-res:hover{background:#ad62d8}
.md.r-res,.md.r-res:hover:not(:disabled),.md.inview.r-res:not(.today):not(.out){background:var(--lilac)!important;border-color:var(--lilac)!important}
.minilegend .r{border-color:var(--lilac)!important;background:var(--lilac)!important}
.md.sel{box-shadow:0 0 0 3px rgba(196,127,234,.4)}
.gd .hol{color:#b2474b}
.gd.past .hol{color:#9a8f8f}
.month-icon{border-color:var(--ink);background:#fff}
.month-icon .band{background:var(--ink)}
.month-btn.suggested .month-icon{background:#fff6dc;border-color:var(--sun)}
.month-btn.suggested .band{background:var(--sun);color:var(--ink)}
.modal .mh{background:var(--ink)}
.btn-primary{background:var(--ink)}
.btn-primary:hover:not(:disabled){background:#000}

/* player: black, with a sun-yellow play button */
.player{background:#111}
.player .pp{background:var(--sun);color:var(--ink)}
.player input[type=range]{accent-color:var(--coral)}

/* footer */
footer.site{background:var(--footer)}
footer.site h4{color:var(--muted)}

/* schedule tabs above the calendar (Chronological Project / Kids Proverbs Project) */
.ptab:hover{background:#ececec}
.ptab.active{background:var(--ink);border-color:var(--ink)}
.ptab.active span{filter:none}

/* the Kids Proverbs calendar keeps its own parchment-and-green look */
body.plan-kids .md.r-res,body.plan-kids .md.r-res:hover:not(:disabled),body.plan-kids .md.inview.r-res:not(.today):not(.out){background:#2f6b3a!important;border-color:#2f6b3a!important}
body.plan-kids .minilegend .r{border-color:#2f6b3a!important;background:#2f6b3a!important}
body.plan-kids .md.sel{box-shadow:0 0 0 3px rgba(47,107,58,.35)}
body.plan-kids .month-btn.suggested .month-icon{background:#f6e8c4;border-color:#2f6b3a}
body.plan-kids .month-btn.suggested .band{background:#2f6b3a;color:#fff}
body.plan-kids .ptab.active{background:#2f6b3a;border-color:#1f4a28}
body.plan-kids .ptab:hover:not(.active){background:#efdcae}
body.has-player .vnote{bottom:calc(96px + env(safe-area-inset-bottom,0px))}