/* PORCH — desktop readability layer (≥ 821px).
   Loaded last on every page. The mobile walk (≤ 820px) is untouched: every
   size rule below sits inside the desktop query. Selectors are prefixed with
   html.riverlight so they outrank each page's inline <style> blocks, several
   of which sit in <body> after this file.

   Scale: the rem base rises from 16px to 19px, so everything already sized in
   rem (most of riverlight.css) grows in proportion — headings keep today's
   ratios. Px-sized copy is lifted explicitly below, and porch-desktop.js
   floors anything still under 15px (inline styles, late-injected UI). */

/* ---------- 1. Type scale ---------- */
@media (min-width: 821px){
  html.riverlight{ font-size: 118.75%; } /* 19px rem */

  /* Body copy: 20px, 1.7, ≤ 70ch */
  html.riverlight body p.body-text,
  html.riverlight body .body-text,
  html.riverlight body .brief-note,
  html.riverlight body a.believe-card p,
  html.riverlight body .step .gloss,
  html.riverlight body .mission-verse,
  html.riverlight body [data-page="gather"] .block p:not(.label):not(.lead):not(.venue):not(.meal):not(.headline):not(.found):not(.wiggles):not(.expect-verse),
  html.riverlight body[data-page="gather"] .block p:not(.label):not(.lead):not(.venue):not(.meal):not(.headline):not(.found):not(.wiggles):not(.expect-verse):not(.cal-wrap),
  html.riverlight body[data-page="gather"] .invite p:not(.headline),
  html.riverlight body[data-page="connect"] .welcome p:not(.closing),
  html.riverlight body[data-page="connect"] .card p.sub,
  html.riverlight body[data-page="connect"] .card .step > p[style],
  html.riverlight body[data-page="our-story"] .story p,
  html.riverlight body[data-page="convictions"] .rd p,
  html.riverlight body[data-page="our-dna"] #this-is-porch ~ p,
  html.riverlight body .give-how-text,
  html.riverlight body[data-page="connect"] .success p,
  html.riverlight body[data-page="connect"] .card :is(input, textarea),
  html.riverlight body .question-line{
    font-size: max(1.0625rem, 20px) !important;
    line-height: 1.7 !important;
  }
  html.riverlight body :is(p.body-text, .brief-note, .step .gloss){ max-width: min(70ch, 680px); }
  html.riverlight main > p.body-text,
  html.riverlight .dna-read p.body-text{ margin-left: auto; margin-right: auto; }
  html.riverlight body .brief{ font-size: max(1.25rem, 23px); line-height: 1.6; }

  /* Uppercase labels, kickers, nav, pills, captions: 15px floor, tracking eased
     a little so the larger caps don't sprawl. */
  html.riverlight body :is(
    .page-kicker, .eyebrow, .anchor-ref, .hub-crumb, .hub-crumb a,
    .short-version .label, .short-version li b,
    .section-head-text .direction, .card-cue, details.deeper > summary,
    a.believe-card .job, a.believe-card .more, a.name-invite .job, a.name-invite .more,
    .pull-quote .ref, .mission-statement .ref, .expect-verse .ref, .ref,
    .mission-ref, .mission-summary span, .scripture-pill,
    .label, .steps figcaption, .translation-note, .foot-place, .cf-place,
    .constellation-invite .ci-label, .constellation-invite .ci-sub,
    .dna-hint, .dna-acronym-sub, .dna-rail-back, .skip-link,
    .window-label, .door-label, .door-cue, .start-here, p.welcome, .discover-more,
    .next-line, .next-line b, .story-sub, .rings-lede, .rings-hint, .ring-label, .hold,
    .hero-ref, .pa-sub, .give-how-label, .give-sub, .church-name, .quiet-cta, .foot-sep, .cf-tag
  ){
    font-size: max(15px, 0.8125rem) !important;
  }
  html.riverlight body .tag-small{ font-size: max(17px, 1rem) !important; }

  /* Navigation: top bar, footer railing, Connect footer */
  html.riverlight body .topbar .site-nav,
  html.riverlight body .topbar .site-nav a{ font-size: 16px !important; }
  html.riverlight body .topbar .site-nav a.nav-cta,
  html.riverlight body .topbar .site-nav a.nav-cta-outline{ font-size: 15px !important; }
  html.riverlight body .topbar-mark{ font-size: 1.125rem; }
  html.riverlight body :is(footer .footer-nav a, footer .footer-nav .fn-actions a.fn-give, .connect-foot .cf-links a, .home-foot a){
    font-size: 16px !important;
    letter-spacing: .08em;
  }
  html.riverlight body .nav-page-name{ font-size: 15px !important; }

  /* Statement of Faith: inline-styled section heads and the short list scale with the copy */
  html.riverlight body[data-page="statement-of-faith"] main h2[style]{ font-size: 1.6rem !important; }
  html.riverlight body .short-version li{ font-size: max(1.0625rem, 20px); }
  html.riverlight body .short-version{ max-width: 720px; }
  /* Pills stay comfortable targets at the new size */
  html.riverlight body .scripture-pill{ padding: 6px 14px; line-height: 1.4; }
}

/* ---------- 1b. Contrast: muted text raised to ≥ 4.5:1 on every dark surface ----------
   (The three old greys are also replaced in place across the site's files;
   these cover colour-mix() and state rules that build on them.) */
@media (min-width: 821px){
  /* Greys shared with the walk stay put at source; lifted here for desktop
     only, at base specificity so hover/selected states still win. */
  :where(html.riverlight) .railing a,
  :where(html.riverlight) .pa-sub,
  :where(html.riverlight) .ring-label,
  :where(html.riverlight) .ring-hand{ color: #C4D2D9; }
  :where(html.riverlight) .home-foot,
  :where(html.riverlight) .home-foot a,
  :where(html.riverlight) .rings-hint{ color: #B4C4CC; }
  html.riverlight body .section:not(.lit) .section-head-text .direction{ color: #B4C4CC; }
  html.riverlight body details.letter .card-cue{ color: var(--porch-amber-soft, #F4C97A); }
  html.riverlight body .hub-crumb a{ color: #C4D2D9; }
  html.riverlight body .expect-verse .ref{ color: #C4D2D9; }
  html.riverlight body .step .word{ color: #9DB0BC; }
  html.riverlight body .step.lit .word{ color: var(--cream); }
  html.riverlight body .dna-rail li a{ color: #C4D2D9; }
  html.riverlight body .dna-rail-back{ color: #C4D2D9; }
}

@media (min-width: 1460px){ html.riverlight body .dna-rail{ width: 210px; } }

@media (min-width: 821px){ html.riverlight body[data-page="our-mission"] .mission-statement{ font-size: clamp(26px, 1.9vw, 32px); max-width: 760px; line-height: 1.5; } }

/* ---------- 2. Cursor: only real controls say "clickable" ---------- */
html.riverlight body{ cursor: default; }
html.riverlight :is(a[href], button, summary, select, label[for], [role="button"], [role="tab"],
  input[type="checkbox"], input[type="radio"], input[type="submit"], input[type="button"]){ cursor: pointer; }
html.riverlight :is(input:not([type]), input[type="text"], input[type="email"], input[type="tel"],
  input[type="search"], input[type="url"], textarea){ cursor: text; }
html.riverlight button:disabled{ cursor: not-allowed; }
/* Open DNA/letter content is reading text, not a close control. */
html.riverlight details.letter[open] > *:not(summary){ cursor: default; }
html.riverlight details.letter[open] :is(a[href], button){ cursor: pointer; }
/* Programmatic focus targets (skip-link target, headings focused on arrival)
   never show a ring or caret for mouse users; keyboard focus still does. */
html.riverlight :focus:not(:focus-visible){ outline: none; }
html.riverlight :is(#main-content, [tabindex="-1"]):focus{ outline: none; }
html.riverlight :is(#main-content, [tabindex="-1"]){ caret-color: transparent; }

/* ---------- 6. Scripture modal (porch-verse-modal.js), every width ---------- */
html.riverlight .pv-backdrop{ position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(6,16,21,.78); }
html.riverlight .pv-backdrop[hidden]{ display: none; }
html.riverlight .pv-modal{ display: flex; flex-direction: column; width: min(720px, 100%); max-height: min(86vh, 900px); background: #163039; border: 1px solid #748b89; box-shadow: 0 24px 80px rgba(0,0,0,.5); cursor: default; }
html.riverlight .pv-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 28px 16px; border-bottom: 1px solid rgba(230,187,121,.3); background: #163039; }
html.riverlight .pv-ref{ margin: 0; font-family: 'Karla', sans-serif; font-size: 17px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--porch-amber-soft, #f1d4a0); }
html.riverlight .pv-note{ margin: 4px 0 0; font-size: 15px; color: #C4D2D9; }
html.riverlight .pv-close{ flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px; background: transparent; border: 1px solid rgba(244,239,227,.3); color: var(--cream, #f4f0e6); font-family: 'Karla', sans-serif; font-size: 16px; cursor: pointer; }
html.riverlight .pv-close span{ font-size: 22px; line-height: 1; }
html.riverlight .pv-close:hover, html.riverlight .pv-close:focus-visible{ border-color: var(--porch-amber, #e6bb79); color: var(--porch-amber-soft, #f1d4a0); }
html.riverlight .pv-body{ overflow-y: auto; overscroll-behavior: contain; padding: 24px 28px 8px; font-family: 'EB Garamond', 'Fraunces', Georgia, serif; font-style: normal; font-size: 21px; line-height: 1.7; color: var(--cream, #f4f0e6); }
html.riverlight .pv-body:focus-visible{ outline: 2px solid rgba(241,212,160,.6); outline-offset: -4px; }
html.riverlight .pv-body p{ margin: 0 0 1em; max-width: 64ch; text-wrap: pretty; }
html.riverlight .pv-num{ font-family: 'Karla', sans-serif; font-size: .6em; font-weight: 700; line-height: 0; vertical-align: .75em; margin: 0 .3em 0 .1em; color: var(--porch-amber, #e6bb79); }
html.riverlight .pv-missing{ font-style: italic; color: #C4D2D9; }
html.riverlight .pv-foot{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 14px 28px 18px; border-top: 1px solid rgba(244,239,227,.12); font-size: 15px; color: #C4D2D9; }
html.riverlight .pv-links{ display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 18px; }
html.riverlight .pv-link-alt{ font-weight: 500 !important; color: #C4D2D9 !important; }
html.riverlight .pv-link{ display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--porch-amber-soft, #f1d4a0); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 600px){
  html.riverlight .pv-backdrop{ padding: 12px; }
  html.riverlight .pv-head, html.riverlight .pv-body, html.riverlight .pv-foot{ padding-left: 18px; padding-right: 18px; }
  html.riverlight .pv-body{ font-size: 19px; }
}

/* ---------- 8. Connect: "Let's talk" at the visual centre ---------- */
@media (min-width: 821px){
  html.riverlight body[data-page="connect"] .wrap{ max-width: 780px; }
  html.riverlight body[data-page="connect"] .welcome:not(.gone){
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    min-height: min(calc(100vh - var(--interior-nav-height, 96px) - 260px), 620px);
    padding: 12px 0 24px;
  }
  /* connect.html centres the whole body vertically; with a short form that
     left a large empty band under the nav. Start at the top instead. */
  html.riverlight body[data-page="connect"]{ align-items: flex-start; }
  html.riverlight body[data-page="connect"] .rail{ gap: 10px; }
  html.riverlight body[data-page="connect"] .rail .letter{ height: 46px; }
  html.riverlight body[data-page="connect"] .form-zone.shown{ padding-top: 8px; }
  html.riverlight body[data-page="connect"] .wrap{ padding-top: 40px; }
  html.riverlight body[data-page="connect"] .welcome h1{ order: 1; margin: 0 0 22px; }
  html.riverlight body[data-page="connect"] .welcome p:nth-of-type(1){ order: 2; }
  html.riverlight body[data-page="connect"] .welcome p:nth-of-type(2){ order: 3; margin-bottom: 30px; }
  html.riverlight body[data-page="connect"] .welcome .begin{
    order: 4; margin: 0 auto;
    min-height: 60px; padding: 16px 40px;
    font-size: 18px !important; letter-spacing: .06em;
    box-shadow: 0 0 40px rgba(230,187,121,.22);
  }
  html.riverlight body[data-page="connect"] .welcome .w-rule{ order: 5; margin: 34px auto 26px; }
  html.riverlight body[data-page="connect"] .welcome p:nth-of-type(3){ order: 6; }
  html.riverlight body[data-page="connect"] .welcome p.closing{ order: 7; margin: 6px 0 0; font-size: 1.6rem; }
  html.riverlight body[data-page="connect"] .welcome p{ max-width: 36em; margin-left: auto; margin-right: auto; }
}