/* site.css — the shared shell for every inner page of christianadultblocker.com.
   2026-10-12 redesign: the website now speaks the same language as the app and the staff console.
   Instrument Serif for headlines (the app's display face), Geist for everything else, solid surfaces
   with hairlines instead of frosted glass, the Lightpath violet, and a white primary button.
   Gold (--dawn) stays SACRED: Scripture and Premium only.
   Every class name from the 2026-09-17 shell is kept, so no page loses its styling; pages add their
   own CSS inline. help.christianadultblocker.com serves only /help-center/, so help-center/site.css is
   a COPY of this file — keep the two identical. */
@font-face{font-family:"Geist";src:url(/fonts/geist-regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Geist";src:url(/fonts/geist-medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Geist";src:url(/fonts/geist-semibold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Geist";src:url(/fonts/geist-bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/fonts/instrumentserif-regular.woff2) format("woff2");font-weight:400;font-display:swap}
:root{
  /* ground and surfaces */
  --night:#0B0820; --ground-2:#0F0C26;
  --panel:#15112C; --panel-2:#1B1638; --panel-3:#241E47;
  --line:rgba(198,192,255,.11); --line-2:rgba(198,192,255,.18); --line-3:rgba(198,192,255,.30);
  /* brand */
  --violet:#7A5CFF; --violet-2:#6A4CF0; --lilac:#C6C0FF;
  --dawn:#FFC46B;                                   /* SACRED: Scripture and Premium only */
  /* type colours */
  --text:#F7F5FF; --body:#D3CEEC; --mist:#A7A1C9; --faint:#8E88B3;
  /* the white primary, the app's own */
  --cta:#F4F1FF; --cta-ink:#1B1640;
  /* status */
  --ok:#3FD68F; --warn:#F4A340; --bad:#F47272;
  /* faces. --display is the UI face (labels, buttons, small headings); --headline is the serif. */
  --headline:"Instrument Serif","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --display:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Georgia,"Times New Roman",serif;
  --gut:clamp(18px,4.5vw,40px);
  --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:28px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;color:var(--text);font:400 17px/1.7 var(--sans);overflow-x:hidden;
  background:radial-gradient(90% 55% at 50% -10%,rgba(122,92,255,.20),transparent 62%),var(--night);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:var(--lilac);text-underline-offset:3px}
a:hover{color:var(--text)}
::selection{background:rgba(122,92,255,.45);color:#fff}
:focus-visible{outline:2px solid var(--lilac);outline-offset:3px;border-radius:8px}
.wrap{max-width:1180px;margin:0 auto;padding-inline:var(--gut)}

/* ── nav ─────────────────────────────────────────────────────────────────── */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;padding-top:12px}
.bar{display:flex;align-items:center;gap:6px;height:60px;padding:0 8px 0 18px;border-radius:18px;
  background:rgba(17,13,38,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 0 0 1px var(--line),0 10px 30px rgba(4,2,14,.25)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font:600 16px/1.1 var(--display);letter-spacing:-.01em;margin-right:auto}
.brand img{width:22px}
.bar .links{display:flex;gap:2px}
.bar .links a{padding:10px 14px;border-radius:12px;text-decoration:none;color:var(--mist);font:500 15px/1 var(--display);transition:color .18s,background .18s}
.bar .links a:hover{color:var(--text);background:rgba(198,192,255,.07)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:999px;
  font:600 15px/1 var(--display);letter-spacing:-.005em;text-decoration:none;white-space:nowrap;border:0;cursor:pointer;
  transition:background .18s var(--ease),transform .15s var(--ease),box-shadow .18s var(--ease)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--cta);color:var(--cta-ink);box-shadow:0 10px 26px -12px rgba(244,241,255,.55)}
.btn-primary:hover{background:#fff;color:var(--cta-ink)}
.btn-ghost{background:rgba(198,192,255,.08);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn-ghost:hover{background:rgba(198,192,255,.13);color:var(--text)}
@media (max-width:760px){.bar .links{display:none}.bar .btn{min-height:40px;padding:0 14px;font-size:14px}}
@media (max-width:430px){.brand{font-size:14.5px;gap:8px;white-space:nowrap}.brand img{width:20px}.bar .btn{padding:0 12px;font-size:13.5px;white-space:nowrap}}

/* ── article ─────────────────────────────────────────────────────────────── */
.crumbs{margin:34px 0 0;font:500 13.5px/1.4 var(--display);color:var(--faint)}
.crumbs a{color:var(--mist);text-decoration:none}
.crumbs a:hover{color:var(--text)}
article{max-width:720px;margin:0 auto;padding:10px 0 72px}
.kicker{font:600 12px/1.2 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--lilac);margin:28px 0 14px}
article h1{font:400 clamp(40px,6.2vw,64px)/1.02 var(--headline);letter-spacing:-.012em;margin:0;text-wrap:balance}
.meta{color:var(--faint);font-size:14.5px;margin:18px 0 0}
.intro{font-size:clamp(18px,2vw,20px);line-height:1.65;color:var(--body);margin:22px 0 0}
.takeaways{margin:32px 0;padding:22px 24px;border-radius:var(--r-lg);background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.takeaways h2{font:600 12px/1.2 var(--display) !important;letter-spacing:.16em;text-transform:uppercase;color:var(--mist);margin:0 0 10px !important}
.takeaways ul{margin:0;padding-left:20px}
.takeaways li{margin:6px 0;color:var(--body)}
article h2{font:400 clamp(30px,3.6vw,38px)/1.1 var(--headline);letter-spacing:-.008em;margin:52px 0 0;text-wrap:balance}
article h3{font:600 20px/1.3 var(--display);letter-spacing:-.01em;margin:34px 0 0}
article p,article li{color:var(--body)}
article p{margin:16px 0 0}
article ul,article ol{margin:14px 0 0;padding-left:22px}
article li{margin:8px 0}
article li::marker{color:var(--mist)}
article strong{color:var(--text);font-weight:600}
.scripture{margin:28px 0;padding:20px 24px;border-radius:var(--r-md);background:rgba(255,196,107,.07);box-shadow:inset 0 0 0 1px rgba(255,196,107,.24)}
.scripture p{margin:0;font:italic 20px/1.55 var(--serif);color:#FFE2B5}
.scripture cite{display:block;margin-top:10px;font:600 11.5px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--dawn);font-style:normal}
.callout{margin:28px 0;padding:18px 22px;border-radius:var(--r-md);background:rgba(122,92,255,.10);box-shadow:inset 0 0 0 1px rgba(122,92,255,.32)}
.callout p{margin:0}
.appcta{margin:44px 0;padding:28px;border-radius:var(--r-xl);display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;
  background:radial-gradient(90% 160% at 100% 0%,rgba(122,92,255,.28),transparent 62%),var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.appcta h3{margin:0;font:400 28px/1.1 var(--headline)}
.appcta p{margin:6px 0 0;color:var(--mist);font-size:16px}
@media (max-width:620px){.appcta{grid-template-columns:1fr}.appcta .btn{width:100%}}
.faq{margin-top:12px}
details{margin:10px 0;border-radius:var(--r-md);background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .18s}
details[open]{box-shadow:inset 0 0 0 1px var(--line-2)}
summary{cursor:pointer;list-style:none;padding:17px 52px 17px 20px;font:600 16.5px/1.4 var(--display);position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:22px;top:50%;width:9px;height:9px;margin-top:-6px;border-right:2px solid var(--mist);border-bottom:2px solid var(--mist);transform:rotate(45deg);transition:transform .2s var(--ease)}
details[open] > summary::after{transform:rotate(-135deg);margin-top:-2px}
details p{margin:0;padding:0 20px 18px}
.crisis{margin:44px 0 0;padding:16px 20px;border-radius:var(--r-md);background:rgba(244,114,114,.08);box-shadow:inset 0 0 0 1px rgba(244,114,114,.28);font-size:15.5px;color:var(--body)}
.related{margin:56px 0 0}
.related h2{margin-top:0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.gcard{display:flex;flex-direction:column;padding:22px;border-radius:var(--r-lg);text-decoration:none;color:var(--text);background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);
  transition:box-shadow .18s var(--ease),transform .18s var(--ease),background .18s}
.gcard:hover{background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line-3);transform:translateY(-2px);color:var(--text)}
.gcard small{font:600 11.5px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--lilac)}
.gcard b{display:block;margin:12px 0 6px;font:400 24px/1.15 var(--headline)}
.gcard span{color:var(--mist);font-size:15px;line-height:1.55}
@media (max-width:860px){.cards{grid-template-columns:1fr}}

/* ── hub (an index page) ─────────────────────────────────────────────────── */
.hub{padding-block:30px 76px}
.hub h1{font:400 clamp(46px,7vw,76px)/1 var(--headline);letter-spacing:-.015em;margin:18px 0 0;max-width:16ch}
.hub .intro{max-width:60ch}
.hub .cards{margin-top:40px}

/* ── footer ──────────────────────────────────────────────────────────────── */
footer{padding:40px 0 40px;border-top:1px solid var(--line);color:var(--faint);font-size:14px;margin-top:20px}
footer .row{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;justify-content:space-between}
footer a{color:var(--mist);text-decoration:none}
footer a:hover{color:var(--text)}
footer nav{display:flex;flex-wrap:wrap;gap:8px 20px}

/* studio sign-off at the foot of every page */
.studio{display:flex;justify-content:center;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.studio a{display:inline-flex;align-items:center;gap:12px;min-height:44px;color:var(--faint);text-decoration:none;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;opacity:1}
.studio img{display:block;height:26px;width:auto;opacity:.9;transition:opacity .2s}
.studio a:hover img,.studio a:focus-visible img{opacity:1}

/* nothing decorative may widen the page on a phone */
html,body{overflow-x:clip}

/* ── phone menu (built by /site.js from the bar's own links) ─────────────── */
.menu-btn{display:none}
.site-menu{display:none}
.nav .bar{transition:background .25s,box-shadow .25s}
.nav.scrolled .bar{background:rgba(14,11,32,.94);box-shadow:inset 0 0 0 1px var(--line-2),0 14px 34px rgba(4,2,14,.45)}
@media (max-width:760px){
  .menu-btn{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:44px;height:44px;margin-left:2px;border:0;border-radius:12px;background:rgba(198,192,255,.08);cursor:pointer;flex:0 0 auto}
  .menu-btn span{display:block;width:17px;height:2px;border-radius:2px;background:var(--text);transition:transform .22s ease,opacity .18s}
  .menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
  .menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .site-menu{display:grid;gap:2px;margin-top:8px;padding:10px;border-radius:var(--r-lg);background:rgba(14,11,32,.97);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:inset 0 0 0 1px var(--line-2),0 24px 50px rgba(4,2,14,.6);opacity:0;transform:translateY(-6px);transition:opacity .2s ease,transform .2s ease}
  .site-menu.on{opacity:1;transform:none}
  .site-menu[hidden]{display:none}
  .site-menu a{display:flex;align-items:center;min-height:50px;padding:0 16px;border-radius:14px;color:var(--text);text-decoration:none;font:500 17px/1 var(--display)}
  .site-menu a:hover,.site-menu a[aria-current="page"]{background:rgba(198,192,255,.07)}
  .site-menu a[aria-current="page"]{color:var(--lilac)}
  .site-menu .site-menu-cta{justify-content:center;margin-top:8px;min-height:50px;color:var(--cta-ink)}
}
/* once the phone menu exists it carries "Get the app", so the bar keeps only brand + menu */
@media (max-width:760px){.bar:has(.menu-btn) > .btn{display:none}}

/* arrival: transform only, so text is readable even if the script never runs */
.reveal.pre{transform:translateY(22px)}
.reveal.pre.in{transform:none;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){.site-menu,.menu-btn span,.nav .bar,.gcard,.btn,details,summary::after{transition:none}}