/* Direction B: bold and modern. Archivo (condensed, uppercase) + Inter. Keeps River's gold. Dark page. */
:root{
  --font-head:"Archivo",Impact,"Arial Narrow",sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --head-weight:600; --head-transform:uppercase; --head-tracking:-.005em; --head-leading:1; --head-stretch:condensed;
  --h1-size:clamp(3rem,12vw,7rem);
  --body-size:1.0625rem; /* 17px. Jim 10-29 change desk: body text about 2px smaller (was 19px), closer to the 16px notes */
  --nav-size:1.1875rem;  /* header and menu stay at 19px (Jim: "Menu is OK") */

  --bg:#0D0F14;
  --surface:#181B23;
  --surface-2:#E1B04B;   /* gold band (kids) */
  --line:#2C313C;
  --ink:#FFFFFF;
  --muted:#C9CDD6;
  --link:#E1B04B;
  --link-hover:#8DD3F0;  /* Jim 10-28 pass 4: gold links turn the strip-light blue on hover/focus */

  --brand:#181B23;
  --brand-ink:#FFFFFF;
  --accent:#E1B04B;      /* gold buttons, dark text 9:1 (Jim 10-28: desaturated a little from #F6B736, hover was #D99A12) */
  --accent-hover:#C39228;
  --accent-ink:#14161B;
  --eyebrow:#E1B04B;

  --dark:#181B23;
  --dark-2:#08090C;
  --dark-ink:#F4F2ED;
  --highlight:#E1B04B;

  --need-bg:#FFF3C4; --need-ink:#5A3E00;
  --focus:#E1B04B;
  --radius:14px; --radius-lg:20px;
  --hero-shape:14px;
  --wrap:1240px;
  --logo-filter:none;
}
:root{color-scheme:dark} /* dark-only look: native controls (select popups, checkboxes, scrollbars) draw dark too */
/* Text highlight blue (Jim 10-28, pass 3): "the lighter blue that you see in the strip light on the wall" of the home
   hero photo (worship). Sampled from assets/img/worship-1600.jpg: strip cores #97E1FE, inner glow #77CEF2 (hue 199deg);
   #8DD3F0 keeps the strip's hue and saturation with the brightness pulled to 94% so it reads as a color, not a glare.
   Jim first named #6F9FB0 (a muted steel blue, same hue family but darker: 6.6:1); this is the lighter strip tone.
   Contrast: 11.6:1 on the night page #0D0F14, 10.4:1 on the #181B23 panels (AAA). Gold look only.
   Used ONLY for occasional text highlights: .hl headline phrases (home "made simple." and "Grow Wednesdays.") and the dot
   on the LIVE eyebrow. Divider lines, bullets, quote bars and the dashed video border are back to their original
   colors (Jim: "Not loving all of the blue separators"). The gold band (.band-soft) never gets it (1.3:1 there).
   History: a muted red, then a river teal (both earlier on 10-28), both retired. */
:root:not([data-accent]),:root[data-accent="gold"]{--hl:#8DD3F0;--dot:#8DD3F0}
.band-soft{--hl:inherit;--dot:currentColor}
/* The gold band carries dark text in this direction. */
.band-soft{--band-card:rgba(255,255,255,.6);--focus:#14161B;--ink:#14161B;--muted:#2A2D33;--link:#14161B;--link-hover:#000;--eyebrow:#14161B;--line:#C39228;--accent:#14161B;--accent-ink:#FFFFFF;--accent-hover:#000}
/* Cards, tiles and fallbacks on the gold band: light panels with dark text (dark panels made the text unreadable). */
.dir-b .band-soft :is(.card,a.tile,.events-strip li,.unity-fallback){background:var(--band-card);border-color:transparent}
/* Outline buttons on the gold band (site re-check R1, 10-28): site.css hovers them to --ink fill + --bg text, but on this
   band --ink is #14161B while --bg stays the night #0D0F14 (1.06:1). Light gold text on the dark fill instead (14.9:1).
   Keyboard focus keeps the resting style (dark text on gold, 9:1) plus the dark ring. Gold look only: the other accents'
   band text is white, so their hover (white fill, night text) already reads. */
:is(:root:not([data-accent]),:root[data-accent="gold"]) .band-soft .btn-ghost:hover{color:#F3DFB7}

/* ---- Look B photo heroes (Jim picked B on 10-27). Still photos only: no video backgrounds anywhere. ----
   Home hero (.hero) and interior page heads with a wide photo (.page-head.is-wide, set by page.php when the photo
   has a 1600px+ version) share one treatment:
   phone  = the photo as a banner on top, fading into the night background, text below it (faces stay visible);
   desktop = the photo fills the whole block, a left-to-right shade keeps the text readable.
   Page heads with a smaller photo keep the side-by-side layout, so no photo is ever stretched past its size.
   Scoped to .dir-b so it outranks site.css, which loads after this file. To change the look, edit only here. */
.dir-b :is(.hero,.page-head.is-wide){position:relative;overflow:hidden;isolation:isolate;border-bottom:0}
.dir-b .hero{padding:250px 0 56px}
.dir-b .page-head.is-wide{padding:210px 0 40px}
.dir-b :is(.hero,.page-head.is-wide)>.wrap{width:100%}
.dir-b :is(.hero,.page-head.is-wide) .hero-grid{position:static}
.dir-b :is(.hero,.page-head.is-wide) .hero-grid>div{position:relative;z-index:1}
.dir-b :is(.hero,.page-head.is-wide) .hero-photo{position:absolute;inset:0 0 auto 0;height:330px;margin:0;z-index:0}
.dir-b .page-head.is-wide .hero-photo{height:270px}
.dir-b :is(.hero,.page-head.is-wide) .hero-photo picture{display:block;height:100%}
.dir-b :is(.hero,.page-head.is-wide) .hero-photo img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;border-radius:0}
.dir-b .hero .hero-photo img{object-position:62% 40%!important}
.dir-b :is(.hero,.page-head.is-wide) .hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,15,20,.05) 0%,rgba(13,15,20,.2) 45%,#0D0F14 100%)}
.dir-b .hero-tag{display:none}
/* Eyebrow over a photo (a11y H3/M6): a dark backing chip, so the text never depends on the bright parts of the photo
   (gold 6:1 or better and the accent tints 6.5:1 or better even over pure white pixels). */
.dir-b :is(.hero,.page-head.is-wide) .eyebrow{display:inline-block;background:rgba(13,15,20,.82);padding:.3em .65em;border-radius:6px}
.dir-b :is(.hero,.page-head.is-wide) .lede{color:#E4E7ED}
.dir-b .page-head h1{font-size:clamp(2rem,10vw,5.4rem)} /* floor 2rem (was 2.5rem, Jim 10-29 "the S went to the 2nd line"): at 320px a long word (DISCIPLESHIP, WEDNESDAYS.) fits whole instead of breaking; 390px and up unchanged */
/* A head that keeps its photo beside the title (only /hothouse/ now) has half the width: a smaller title there from 900px, so one word never breaks ("HOTHOUSE" split at 1024px). */
@media(min-width:900px){.dir-b .page-head.with-photo:not(.is-wide) h1{font-size:clamp(2.5rem,6vw,4.4rem)}}
.dir-b .page-head .crumbs a{color:#E4E7ED}
@media(min-width:900px){
  .dir-b .hero{min-height:680px;padding:120px 0 96px;display:flex;align-items:center}
  .dir-b .page-head.is-wide{min-height:520px;padding:96px 0 72px;display:flex;align-items:flex-end}
  .dir-b :is(.hero,.page-head.is-wide) .hero-photo{inset:0;height:auto}
  .dir-b :is(.hero,.page-head.is-wide) .hero-grid{grid-template-columns:minmax(0,780px)}
  .dir-b .hero .hero-photo img{object-position:50% 40%!important}
  .dir-b :is(.hero,.page-head.is-wide) .hero-photo::after{background:linear-gradient(90deg,rgba(13,15,20,.92) 0%,rgba(13,15,20,.7) 40%,rgba(13,15,20,.15) 75%,rgba(13,15,20,.25) 100%)}
  .dir-b .page-head.is-wide .hero-photo::after{background:linear-gradient(90deg,rgba(13,15,20,.94) 0%,rgba(13,15,20,.75) 45%,rgba(13,15,20,.2) 80%,rgba(13,15,20,.3) 100%),linear-gradient(0deg,#0D0F14 0%,rgba(13,15,20,0) 35%)}
}

/* ---- Accent switch (Jim 10-27: preview other accents in place of the gold) ----
   Gold is the default and needs nothing. Another accent = one change: the Customizer "River accent color"
   (theme mod river_accent: slate|teal|sage|terracotta), which prints data-accent="<name>" on <html>.
   Gold works as both button fill and text on the dark page (8.6:1 or better). These colors don't, so each has three shades:
     --acc-fill   buttons, the color band, give box: white text on it meets WCAG AA (4.6:1 or better)
     --acc-text   links, eyebrows, highlights, focus ring on the dark page: 5.5:1 or better on #181B23
     --acc-hover  button hover (white text 6.3:1 or better)
   The logo art stays as it is. To add a color: one line below + its name in river_accents() (inc/setup.php). */
:root[data-accent="slate"]{--acc-fill:#55758B;--acc-text:#7E96A7;--acc-hover:#466072}
:root[data-accent="teal"]{--acc-fill:#507B76;--acc-text:#789A96;--acc-hover:#426561}
:root[data-accent="sage"]{--acc-fill:#667A62;--acc-text:#889785;--acc-hover:#546450}
:root[data-accent="terracotta"]{--acc-fill:#A65D4B;--acc-text:#BD877A;--acc-hover:#884C3E}
:root[data-accent]:not([data-accent="gold"]){
  --surface-2:var(--acc-fill);
  --accent:var(--acc-fill); --accent-hover:var(--acc-hover); --accent-ink:#FFFFFF; --accent-text:var(--acc-text);
  --link:var(--acc-text); --link-hover:var(--acc-tint,#FFFFFF); --eyebrow:var(--acc-text); --highlight:var(--acc-text); --focus:var(--acc-text);
}
/* The color band carries white text (gold carried dark text). */
:root[data-accent]:not([data-accent="gold"]) .band-soft{--band-card:rgba(13,15,20,.28);--ink:#FFFFFF;--muted:#FFFFFF;--link:#FFFFFF;--link-hover:#FFFFFF;--eyebrow:#FFFFFF;--line:rgba(255,255,255,.4);--accent:#14161B;--accent-ink:#FFFFFF;--accent-hover:#000;--accent-text:#FFFFFF;--focus:#FFFFFF}
:root[data-accent]:not([data-accent="gold"]) .give-box .btn:hover{background:var(--bg);color:var(--acc-text)}
/* Over a photo the darker accent text is too close to the dark chip: a light tint of the accent instead. */
:root[data-accent="slate"]{--acc-tint:#B9C8D3}
:root[data-accent="teal"]{--acc-tint:#B5CDCA}
:root[data-accent="sage"]{--acc-tint:#C2CDBF}
:root[data-accent="terracotta"]{--acc-tint:#E2C3BB}
:root[data-accent]:not([data-accent="gold"]) .dir-b :is(.hero,.page-head.is-wide) .eyebrow{color:var(--acc-tint,#FFFFFF)}
/* Home hero, every look (10-28 polish; gold added 10-28 late): the headline phrase (h1 em) measured 3.79:1 at 1440 px on blue and 2.59:1 at 900 px / 3.03:1 at 1024 px on gold (5th-percentile pixel over the worship photo). The same slightly darker left shade the home photo options use, and from 900 to 1279 px (the 780 px headline reaches 80 to 90% of the width) pixel stops that follow the text: blue 5.15:1 or better, gold 8.2:1 or better, 900 to 1920 px. :root lifts it over the base rule's :is() specificity; the option pages' own .hv-* rules still win. Desktop only (the phone layout puts the text below the photo). Interior page heads unchanged. */
@media(min-width:900px){:root .dir-b .hero .hero-photo::after{background:linear-gradient(90deg,rgba(13,15,20,.93) 0%,rgba(13,15,20,.88) 42%,rgba(13,15,20,.74) 57%,rgba(13,15,20,.2) 80%,rgba(13,15,20,.25) 100%)}}
@media(min-width:900px) and (max-width:1279px){:root .dir-b .hero .hero-photo::after{background:linear-gradient(90deg,rgba(13,15,20,.93) 0,rgba(13,15,20,.88) 600px,rgba(13,15,20,.8) 860px,rgba(13,15,20,.2) 1180px,rgba(13,15,20,.25) 100%)}}

/* Home hero (Jim 10-29, "Three fresh looks"): one photo per page load, picked at random by assets/js/hero-pick.js (never
   the same one twice in a row). No fade, no rotation, no pause button. Markup from [river_home_hero] (inc/photos.php),
   slides + focal points from data/photos.json "_home_hero" (--hp phone, --hpw 900 px and up). Only .is-on is displayed
   (and only its image is filled in). The shade (::after) sits over the photo. */
.dir-b .hero .hero-photo.hero-pick picture.hf-slide{position:absolute;inset:0;display:none}
.dir-b .hero .hero-photo.hero-pick picture.hf-slide.is-on{display:block}
.dir-b .hero .hero-pick .hf-slide img{object-position:var(--hp,62% 40%)!important}
.dir-b .hero .hero-pick::after{z-index:1}
@media(min-width:900px){.dir-b .hero .hero-pick .hf-slide img{object-position:var(--hpw,50% 40%)!important}}

/* Page titles (Jim 10-28, pass 3): the big hero H1 on each page goes back to the original Archivo 900. Every other
   heading stays at --head-weight 600 (the 10-28 lightening); the hero <em> keeps its own weight. */
.dir-b :is(.hero,.page-head) h1{font-weight:900}