/* GospelShelf Easy Mode (step 5j, ux/apply.py). Additive only: new components + accessibility overrides.
   Fonts unchanged (serif headings + Inter body). Navy #14213d, gold accents. Targets >= 48px. */
:root{--ux-navy:#14213d;--ux-ink:#1b2233;--ux-muted:#4a5265;--ux-gold:#7a5c14;--ux-deco:#c9a227;--ux-bg:#faf8f3;--ux-soft:#f3eee2;--ux-line:#e3dccb;--ux-r:18px;--ux-sh:0 1px 2px rgba(20,33,61,.06),0 10px 30px rgba(20,33,61,.08)}
/* ---------- Phase 1: accessibility + readability overrides ---------- */
p,li,dd{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
@media(max-width:600px){p{text-align:justify;text-justify:inter-word;text-align-last:left;word-spacing:-.01em}}
.gd-step legend,.gd-form legend{color:var(--ux-gold)!important}
.sf a[href$="photo-credits.html"],footer a[href$="photo-credits.html"]{color:#fff!important;text-decoration:underline!important}
.topbar .menubtn,.topbar .sizer button,.hsrch button,.hsrch select,.hsrch input,#faithbtn,.faithbtn,.gsfp{min-height:48px}
.topbar .menubtn{min-width:48px}
.topbar .sizer button{min-width:48px}
.hsrch button{min-width:52px}
/* callings checkboxes and quiz radios: bigger hit areas */
input[type=checkbox],input[type=radio]{width:24px;height:24px;accent-color:var(--ux-navy)}
label:has(>input[type=checkbox]),label:has(>input[type=radio]){display:flex;align-items:center;gap:12px;min-height:48px;cursor:pointer}
main p.lead,main p.lede,main .hs-lead,main .hs-mission2,main>p,main section>p,main article p{font-size:max(1em,18px)}
.crumbs a{display:inline-flex;align-items:center;min-height:44px}
/* menu: grouped, shop folded */
.menu .ux-mh{display:block;width:100%;grid-column:1/-1;margin:14px 0 4px;font:700 .8rem Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ux-gold)}
.menu details.ux-md{grid-column:1/-1;width:100%}
.menu details.ux-md>summary{min-height:48px;display:flex;align-items:center;font-weight:600;color:var(--ux-navy);cursor:pointer;list-style:none}
.menu details.ux-md>summary::after{content:"+";margin-left:auto;font-size:1.3em;color:var(--ux-gold)}
.menu details.ux-md[open]>summary::after{content:"–"}
.menu details.ux-md>div{display:flex;flex-wrap:wrap;gap:0 18px}
.menu a{min-height:44px;display:inline-flex;align-items:center}
/* ---------- Phase 2: homepage ---------- */
.ux-me{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;margin:14px auto 0;padding:10px 18px;max-width:900px;border-radius:999px;background:var(--ux-soft);color:var(--ux-muted);font:500 .95rem Inter,system-ui,sans-serif}
.ux-me b{color:var(--ux-navy)}
.ux-me button,.ux-link{min-height:48px;padding:0 10px;background:none;border:0;color:var(--ux-navy);font:600 .95rem Inter,system-ui,sans-serif;text-decoration:underline;cursor:pointer}
.ux-hero{text-align:center;padding:30px 0 6px}
.ux-hero h1{margin:0 0 .3em;font-size:clamp(2rem,4.6vw,3rem)}
.ux-hero .ux-sub{color:var(--ux-muted);font-size:1.1rem;margin:0 auto;text-align:center!important;max-width:40ch}
.ux-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:26px 0 8px;padding:0;list-style:none}
@media(max-width:1000px){.ux-tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.ux-tiles{gap:12px}}
.ux-tile{display:flex;flex-direction:column;align-items:flex-start;gap:10px;height:100%;min-height:150px;padding:22px;border-radius:var(--ux-r);background:#fff;border:2px solid var(--ux-line);box-shadow:var(--ux-sh);text-decoration:none!important;color:var(--ux-ink)!important;transition:border-color .15s,transform .15s}
.ux-tile:hover,.ux-tile:focus-visible{border-color:var(--ux-deco);transform:translateY(-2px)}
.ux-tile .ux-ic{width:52px;height:52px;border-radius:14px;background:var(--ux-navy);display:grid;place-items:center;flex:none}
.ux-ic svg{width:28px;height:28px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ux-tile b{font:700 1.08rem Inter,system-ui,sans-serif;color:var(--ux-navy);line-height:1.25}
.ux-tile span.ux-ts{font-size:.92rem;color:var(--ux-muted);line-height:1.45}
@media(max-width:760px){.ux-tile{min-height:128px;padding:16px}.ux-tile b{font-size:1rem}.ux-tile span.ux-ts{display:none}}
.ux-search{margin:30px auto 10px;max-width:820px}
.ux-search label{display:block;text-align:center;font:700 1.1rem Inter,system-ui,sans-serif;color:var(--ux-navy);margin-bottom:10px}
.ux-sbox{display:flex;gap:10px}
.ux-sbox input{flex:1;min-width:0;width:100%;min-height:62px;font:500 1.05rem Inter,system-ui,sans-serif;padding:0 22px;border:2px solid var(--ux-navy);border-radius:999px;background:#fff;color:var(--ux-ink)}
.ux-sbox button{flex:none;min-height:62px;min-width:62px;padding:0 24px;border:0;border-radius:999px;background:var(--ux-navy);color:#fff;font:700 1.05rem Inter,system-ui,sans-serif;cursor:pointer}
.ux-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px}
.ux-chip{min-height:48px;display:inline-flex;align-items:center;padding:0 18px;border-radius:999px;border:2px solid var(--ux-line);background:#fff;color:var(--ux-navy);font:500 .92rem Inter,system-ui,sans-serif;cursor:pointer}
.ux-sugg{margin-top:12px;display:grid;gap:10px}
.ux-sugg a{display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:62px;padding:12px 20px;border-radius:14px;background:#fff;border:2px solid var(--ux-line);text-decoration:none!important;color:var(--ux-ink)!important}
.ux-sugg a:hover{border-color:var(--ux-deco)}
.ux-sugg b{color:var(--ux-navy)} .ux-sugg small{display:block;color:var(--ux-muted);font-size:.88rem}
.ux-sec{margin:44px 0}
.ux-card{background:#fff;border:1px solid var(--ux-line);border-radius:var(--ux-r);box-shadow:var(--ux-sh);padding:28px}
.ux-steps{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:14px}
@media(max-width:640px){.ux-steps{grid-template-columns:1fr}}
.ux-opt{display:flex;align-items:center;gap:16px;width:100%;min-height:72px;padding:14px 20px;border-radius:16px;border:2px solid var(--ux-line);background:#fff;color:var(--ux-ink)!important;font:600 1.02rem Inter,system-ui,sans-serif;text-align:left;cursor:pointer;text-decoration:none!important;line-height:1.3}
.ux-opt small{display:block;font-weight:400;color:var(--ux-muted);font-size:.88rem;margin-top:3px}
.ux-opt:hover,.ux-opt:focus-visible{border-color:var(--ux-deco)}
.ux-opt .ux-oi{flex:0 0 44px;height:44px;border-radius:12px;background:var(--ux-soft);display:grid;place-items:center}
.ux-oi svg{width:24px;height:24px;stroke:var(--ux-navy);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ux-dir details{border-top:1px solid var(--ux-line)}
.ux-dir summary{list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:62px;font:700 1.08rem Inter,system-ui,sans-serif;color:var(--ux-navy);cursor:pointer}
.ux-dir summary::-webkit-details-marker{display:none}
.ux-dir summary::after{content:"+";font-size:1.6rem;color:var(--ux-gold)}
.ux-dir details[open] summary::after{content:"–"}
.ux-dir .ux-why{margin:-6px 0 10px;color:var(--ux-muted);font-size:.95rem}
.ux-dirgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 24px;padding:0 0 18px}
@media(max-width:760px){.ux-dirgrid{grid-template-columns:1fr}}
.ux-dirgrid a{display:flex;align-items:center;min-height:48px;text-decoration:none;color:var(--ux-ink);border-bottom:1px solid #efe9db}
.ux-dirgrid a:hover{color:var(--ux-navy);text-decoration:underline}
.hs-hero .hs-h1{font-size:inherit}
.hs-hero h2.hs-h1{margin:0;font-family:var(--serif,'Cormorant Garamond',Georgia,serif);font-weight:600;font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.1;color:#fff}
/* ---------- Phone dock + sheet (every page) ---------- */
.ux-dock{display:none}
@media(max-width:760px){
 .ux-dock{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:9990;background:#fff;border-top:1px solid var(--ux-line);box-shadow:0 -4px 18px rgba(20,33,61,.08);padding-bottom:env(safe-area-inset-bottom)}
 .ux-dock a,.ux-dock button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:62px;background:none;border:0;color:var(--ux-navy)!important;font:600 .82rem Inter,system-ui,sans-serif;text-decoration:none!important;cursor:pointer}
 .ux-dock svg{width:24px;height:24px;stroke:var(--ux-navy);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
 body.ux-hasdock{padding-bottom:78px}
 body.ux-hasdock .nlbar{bottom:70px}
}
.ux-sheet{position:fixed;inset:0;z-index:9995;background:rgba(20,33,61,.45);display:flex;justify-content:flex-end}
.ux-sheet[hidden]{display:none}
.ux-panel{background:var(--ux-bg);width:min(560px,100%);height:100%;overflow:auto;padding:20px 22px 110px;box-shadow:-10px 0 40px rgba(20,33,61,.25)}
.ux-panel h2{margin:.2em 0 .6em}
.ux-close{float:right;min-width:48px;min-height:48px;border-radius:999px;border:2px solid var(--ux-line);background:#fff;font:700 1.2rem Inter,system-ui,sans-serif;color:var(--ux-navy);cursor:pointer}
.ux-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:10px 0 18px}
.ux-pill{min-height:48px;min-width:48px;padding:0 16px;border-radius:999px;border:2px solid var(--ux-line);background:#fff;color:var(--ux-navy);font:600 .95rem Inter,system-ui,sans-serif;cursor:pointer;text-decoration:none!important;display:inline-flex;align-items:center}
.ux-pill.on{background:var(--ux-navy);color:#fff;border-color:var(--ux-navy)}
.ux-kl{display:grid;gap:8px;margin:8px 0 18px}
.ux-kl a{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 16px;border-radius:14px;background:#fff;border:1px solid var(--ux-line);color:var(--ux-ink)!important;text-decoration:none!important;font-weight:600}
/* ---------- Age dialog ---------- */
dialog.ux-dlg{border:0;border-radius:22px;padding:26px;max-width:600px;width:calc(100% - 32px);box-shadow:0 20px 60px rgba(20,33,61,.3);background:var(--ux-bg);color:var(--ux-ink)}
dialog.ux-dlg::backdrop{background:rgba(20,33,61,.45)}
dialog.ux-dlg:focus-visible{outline:none}
/* ---------- Phase 3: guided flows ---------- */
.ux-flow{max-width:780px;margin:0 auto;padding:6px 0 40px}
.ux-prog{display:flex;align-items:center;gap:12px;margin:8px 0 22px;font:600 .95rem Inter,system-ui,sans-serif;color:var(--ux-gold)}
.ux-bar{flex:1;height:10px;background:var(--ux-soft);border-radius:999px;overflow:hidden}
.ux-bar i{display:block;height:100%;width:0;background:var(--ux-deco);border-radius:999px;transition:width .25s}
.ux-step h1,.ux-step h2.ux-q{font-size:clamp(1.7rem,4vw,2.4rem);margin:0 0 .3em}
.ux-note{color:var(--ux-muted);font-size:.98rem}
.ux-opts{display:grid;gap:14px;margin-top:20px}
.ux-opts.two{grid-template-columns:1fr 1fr}
@media(max-width:560px){.ux-opts.two{grid-template-columns:1fr}}
.ux-more{width:100%;min-height:62px;margin-top:14px;font:500 1rem Inter,system-ui,sans-serif;padding:0 18px;border:2px solid var(--ux-line);border-radius:16px;background:#fff;color:var(--ux-ink)}
.ux-zip{width:100%;min-height:62px;font:600 1.2rem Inter,system-ui,sans-serif;padding:0 18px;border:2px solid var(--ux-navy);border-radius:16px;background:#fff;letter-spacing:.08em}
.ux-back{display:inline-flex;align-items:center;gap:6px;min-height:48px;margin-top:20px;padding:0 4px;background:none;border:0;color:var(--ux-navy);font:600 1rem Inter,system-ui,sans-serif;text-decoration:underline;cursor:pointer}
.ux-sum{background:var(--ux-soft);border-radius:16px;padding:14px 22px;margin:16px 0 22px}
.ux-sum div{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:56px;border-bottom:1px solid var(--ux-line)}
.ux-sum div:last-child{border:0}
.ux-go{display:flex;align-items:center;justify-content:center;width:100%;min-height:64px;padding:0 28px;border:0;border-radius:999px;background:var(--ux-navy);color:#fff!important;font:700 1.1rem Inter,system-ui,sans-serif;text-decoration:none!important;cursor:pointer}
.ux-go.gold{background:var(--ux-deco);color:var(--ux-navy)!important}
.ux-res{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
@media(max-width:560px){.ux-res{grid-template-columns:1fr}}
.ux-res a{display:block;padding:22px;border-radius:16px;background:#fff;border:2px solid var(--ux-line);text-decoration:none!important;color:var(--ux-ink)!important;min-height:110px}
.ux-res a b{display:block;color:var(--ux-navy);font-size:1.1rem;margin-bottom:4px}
.ux-res a span{color:var(--ux-muted);font-size:.95rem}
.ux-res a:hover{border-color:var(--ux-deco)}
/* quiz stepper */
.ux-quiz fieldset.q{display:none;border:0;padding:0;margin:0}
.ux-quiz fieldset.q.ux-on{display:block}
.ux-quiz fieldset.q legend{font:700 clamp(1.35rem,3.4vw,1.8rem)/1.3 Inter,system-ui,sans-serif;color:var(--ux-navy);margin-bottom:14px}
.ux-quiz fieldset.q label{display:flex;align-items:center;gap:14px;min-height:64px;padding:12px 18px;margin:10px 0;border:2px solid var(--ux-line);border-radius:16px;background:#fff;font-size:1.02rem;line-height:1.4}
.ux-quiz fieldset.q label:has(input:checked){border-color:var(--ux-navy);background:#f4f6fb}
.ux-quiz>button.btn{display:none}
.ux-quiz.ux-last>button.btn{display:flex;width:100%;justify-content:center;min-height:64px;margin-top:16px}
.ux-qnav{display:flex;gap:12px;justify-content:space-between;margin-top:14px}
.ux-qnav button{min-height:56px;padding:0 24px;border-radius:999px;border:2px solid var(--ux-line);background:#fff;color:var(--ux-navy);font:600 1rem Inter,system-ui,sans-serif;cursor:pointer}
.ux-qnav button.ux-next{background:var(--ux-navy);color:#fff;border-color:var(--ux-navy)}
.ux-qnav button[disabled]{opacity:.45;cursor:default}
/* learn the churches */
.ux-tbl{width:100%;border-collapse:collapse;margin:12px 0 24px;font-size:.98rem}
.ux-tbl th,.ux-tbl td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--ux-line);vertical-align:top}
.ux-tbl th{color:var(--ux-navy);font-weight:700;background:var(--ux-soft)}
.ux-tblwrap{overflow-x:auto}
.ux-best{margin:10px 0 24px}
.ux-best h2{margin:.2em 0 .5em}
@media (prefers-reduced-motion:reduce){.ux-tile,.ux-bar i{transition:none}}
@media print{.ux-dock,.ux-sheet{display:none!important}}

nav.ux-cr{display:flex;flex-wrap:wrap;align-items:center;gap:0 .45rem;text-align:left;font-size:1rem;margin:.75rem 0 1rem;color:#555}
nav.ux-cr a{color:#14213d;text-decoration:underline;text-underline-offset:3px}
/* keep the laptop header on one row now that the language button sits there too */
@media (min-width:1024px){.topbar .wrap{flex-wrap:nowrap}.topbar .hsrch{flex:1 1 180px;min-width:0}.topbar .hsrch input{min-width:0}.topbar .sizer{flex:none;display:flex}.topbar .sizer button{min-width:44px;padding-left:.45rem;padding-right:.45rem}}