/* Shared site styles — loaded on every page before the page's own stylesheet */
:root{--ink:#27214d;--muted:#5d5889;--bg:#fffaf0;--sun:#ffc83d;--coral:#ff6b6b;--sky:#3ec5ff;--mint:#2fd6a1;--grape:#7a5cff;--peach:#ff9a5a;
  --font-display:'Baloo 2','Nunito',sans-serif;--font-body:'Nunito',system-ui,sans-serif;
  --accent-deep:color-mix(in srgb,var(--grape),#000 25%);--sun-deep:color-mix(in srgb,var(--sun),#000 22%)}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--ink);background:var(--bg);line-height:1.6;overflow-x:hidden}
h1,h2,h3,.brand{font-family:var(--font-display);line-height:1.1}
a{color:inherit;text-decoration:none}
.wrap{width:min(1120px,100% - 32px);margin-inline:auto}

/* header */
header{position:sticky;top:0;z-index:50;background:rgba(255,250,240,.88);backdrop-filter:blur(14px);border-bottom:2px dashed rgba(39,33,77,.12)}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px;gap:12px}
.brand{font-size:1.3rem;font-weight:800;display:flex;align-items:center;gap:10px;white-space:nowrap}
.brand i{display:grid;place-items:center;width:40px;height:40px;border-radius:14px;background:var(--grape);color:#fff;font-style:normal;transform:rotate(-8deg);box-shadow:0 4px 0 var(--accent-deep)}
.back{font-weight:800;padding:8px 16px;border-radius:999px;border:2px solid var(--ink);background:#fff;box-shadow:0 4px 0 var(--ink);transition:.15s;font-size:.92rem}
.back:hover{transform:translateY(2px);box-shadow:0 2px 0 var(--ink);background:var(--sun)}
.crumbs{font-weight:700;font-size:.9rem}
.crumbs a:hover{text-decoration:underline}

/* shared site menu */
nav ul{display:flex;gap:4px;list-style:none;padding:0}
nav a{display:block;padding:8px 14px;border-radius:999px;font-weight:700;font-size:.95rem;transition:.2s;white-space:nowrap}
nav a:hover{background:var(--sun);transform:translateY(-2px) rotate(-2deg)}
nav a.cur{background:var(--sun)}
.menu-btn{display:none;border:0;background:var(--sun);width:44px;height:44px;border-radius:14px;font-size:1.3rem;cursor:pointer;box-shadow:0 4px 0 var(--sun-deep)}
@media(max-width:1180px){
  .menu-btn{display:block}
  nav{position:absolute;top:68px;left:0;right:0;background:var(--bg);padding:12px 16px 20px;display:none;border-bottom:2px dashed rgba(39,33,77,.12)}
  nav.open{display:block} nav ul{flex-direction:column}
}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* PDF viewer pop-up (js/pdf-viewer.js): the browser's own PDF viewer, on desktop */
.pdfv{margin:auto;width:min(1100px,100vw - 48px);height:calc(100vh - 48px);max-width:none;max-height:none;padding:0;border:3px solid var(--ink);border-radius:22px;box-shadow:0 10px 0 var(--ink);background:#fff;color:var(--ink);overflow:hidden}
.pdfv[open]{display:flex;flex-direction:column}
.pdfv::backdrop{background:rgba(39,33,77,.6)}
.pdfv-bar{display:flex;align-items:center;gap:10px;padding:10px 12px 10px 20px;border-bottom:3px solid var(--ink);background:var(--sun)}
.pdfv-bar b{flex:1;min-width:0;font-family:var(--font-display);font-weight:800;font-size:1.2rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdfv-btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-weight:800;font-size:.9rem;padding:7px 16px;border-radius:999px;border:2px solid var(--ink);background:#fff;color:var(--ink);cursor:pointer;box-shadow:0 3px 0 var(--ink);text-decoration:none}
.pdfv-btn:hover{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.pdfv-x{width:40px;height:40px;padding:0;font-size:1.1rem}
.pdfv iframe{flex:1;width:100%;border:0;background:#525659}   /* the PDF viewer's own grey, so no white flash while it loads */
body:has(.pdfv[open]){overflow:hidden}
/* embedded players (Prezi): the whole screen on phones and small tablets */
@media(max-width:899px){
  .pdfv.embed{width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;border:0;border-radius:0;box-shadow:none}
  .pdfv.embed .pdfv-bar{padding:8px 10px 8px 14px;padding-top:max(8px,env(safe-area-inset-top))}
  .pdfv.embed .pdfv-bar b{font-size:1rem}
  .pdfv.embed #pdfv-tab{font-size:.8rem;padding:6px 12px}
}

/* "Save offline" buttons (js/pwa.js fills them in; empty = this browser can't keep files, so hidden) */
button.offl{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-weight:800;font-size:.82rem;line-height:1.2;padding:6px 13px;border-radius:999px;border:2px solid var(--ink);background:#fff;color:var(--ink);cursor:pointer;box-shadow:0 3px 0 var(--ink);transition:transform .12s,box-shadow .12s,background .12s;white-space:nowrap}
button.offl:empty{display:none}
button.offl:hover{transform:translateY(2px);box-shadow:0 1px 0 var(--ink);background:#eafff6}
button.offl[data-state=saved]{background:#c8f6e6}
button.offl[data-state=busy]{cursor:progress;background:#fff6dc}
button.offl[data-state=fail]{background:#ffe3e3}
/* a link that is a whole card can't hold a button: the card sits in .has-offl and the button is a tab on its bottom edge */
.has-offl{position:relative;display:flex;flex-direction:column;min-width:0}
.has-offl>a{flex:1}
button.offl.badge{position:absolute;z-index:3;bottom:-15px;right:16px;font-size:.78rem;padding:4px 12px}

/* header name: "Church in Irvine" under "Children's Service" */
.bname{display:flex;flex-direction:column}
.bname small{font-family:var(--font-body);font-size:.8em;font-weight:800;color:var(--muted);letter-spacing:.02em;line-height:1.2}

/* Page heroes: a colour picked in the Admin UI (Page heroes tab) — js/hero.js sets data-bg on the page's .hero.
   .hero.hero beats each page's own .hero rules, which load after this file. */
.hero.hero[data-bg]{background:var(--hbg);color:var(--hfg)}
.hero.hero[data-bg] :is(h1~p,.crumbs){color:var(--hfg);opacity:1}
.hero.hero[data-bg] :is(.chip,.pill,.btn){color:var(--ink)}   /* chips, the home page's pill and buttons keep dark text on any colour */
.hero.hero[data-bg] h1 em{background:var(--hem);color:var(--hemfg)}
.hero.hero[data-bg]{--hfg:var(--ink);--hem:var(--sun);--hemfg:var(--ink)}
.hero.hero[data-bg=sun]{--hbg:var(--sun);--hem:var(--coral);--hemfg:#fff}
.hero.hero[data-bg=coral]{--hbg:var(--coral);--hfg:#fff}
.hero.hero[data-bg=grape]{--hbg:var(--grape);--hfg:#fff}
.hero.hero[data-bg=mint]{--hbg:var(--mint)}
.hero.hero[data-bg=sky]{--hbg:var(--sky)}
.hero.hero[data-bg=peach]{--hbg:var(--peach)}
.hero.hero[data-bg=coral] h1 .a{background:var(--grape)}   /* the home page's first highlight is coral */
.hero.hero[data-bg=sky] h1 .b{background:var(--grape)}     /* …and its second is sky */
.hero.hero[data-bg] .shelf-wrap>.hint{color:var(--hfg)}   /* Booklets: "TAP A BOOK" is sun-coloured on its usual grape */

/* Formatted words (js/hero.js richFill: data-h* attributes on <em>, <mark>, <span>) in the page heroes and in any .rich area
   (the Fellowship letter);
   a size in pixels and a picked highlight colour are set on the element itself). .hero.hero.hero(.hero) beats the colour rules above and each page's own. */
:is(.hero.hero.hero,.rich.rich.rich) [data-hf=playful]{font-family:'Baloo 2','Nunito',sans-serif}
:is(.hero.hero.hero,.rich.rich.rich) [data-hf=rounded]{font-family:'Quicksand','Nunito',sans-serif}
:is(.hero.hero.hero,.rich.rich.rich) [data-hf=friendly]{font-family:'Fredoka','Nunito',sans-serif}
:is(.hero.hero.hero,.rich.rich.rich) [data-hf=hand]{font-family:'Patrick Hand','Comic Sans MS',cursive}
:is(.hero.hero.hero,.rich.rich.rich) [data-hf=clear]{font-family:'Atkinson Hyperlegible',system-ui,sans-serif}
:is(.hero.hero.hero,.rich.rich.rich) [data-hf=serif]{font-family:Georgia,'Times New Roman',serif}
:is(.hero.hero.hero,.rich.rich.rich) [data-hf=plain]{font-family:system-ui,-apple-system,'Segoe UI',sans-serif}
:is(.hero.hero.hero,.rich.rich.rich) [data-hb="1"]{font-weight:800}
:is(.hero.hero.hero,.rich.rich.rich) [data-hb="0"]{font-weight:400}
:is(.hero.hero.hero,.rich.rich.rich) [data-hi="1"]{font-style:italic}
:is(.hero.hero.hero,.rich.rich.rich) [data-hi="0"]{font-style:normal}
:is(.hero.hero.hero,.rich.rich.rich) [data-hu="1"]{text-decoration:underline;text-decoration-thickness:.07em;text-underline-offset:.14em}
:is(.hero.hero.hero p,.rich.rich.rich) mark{background:var(--sun);color:var(--ink);padding:0 .2em;border-radius:.3em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
:is(.hero.hero.hero.hero,.rich.rich.rich.rich) [data-hm]{background:var(--hm);color:var(--hmfg,var(--ink))}
:is(.hero.hero.hero.hero,.rich.rich.rich.rich) [data-hm=sun]{--hm:var(--sun)}
:is(.hero.hero.hero.hero,.rich.rich.rich.rich) [data-hm=coral]{--hm:var(--coral);--hmfg:#fff}
:is(.hero.hero.hero.hero,.rich.rich.rich.rich) [data-hm=grape]{--hm:var(--grape);--hmfg:#fff}
:is(.hero.hero.hero.hero,.rich.rich.rich.rich) [data-hm=mint]{--hm:var(--mint)}
:is(.hero.hero.hero.hero,.rich.rich.rich.rich) [data-hm=sky]{--hm:var(--sky)}
:is(.hero.hero.hero.hero,.rich.rich.rich.rich) [data-hm=peach]{--hm:var(--peach)}