/* ─────────────────────────────────────────────────────────────────────────
   Ben's shared theme — one palette, one navbar, one set of components for
   every page. Subpages used to each carry their own colours (and no dark
   mode), which is why they drifted apart from the home page. Load this
   FIRST, then a page may add only what is genuinely its own.
   ───────────────────────────────────────────────────────────────────────── */
:root{
  --ink:#3a2f24; --soft:#6a5c49; --gold:#a9863f; --faint:#8c7a60;
  --line:#e7dcc4; --bg1:#fffdf7; --bg2:#f4eede; --card:#fffdf8;
  --serif:'Cormorant Garamond','EB Garamond',Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --bar:#17120b; --bar-line:#2c2418; --bar-ink:#f6efdd; --bar-soft:#c6baa0;
}
@media (prefers-color-scheme:dark){ :root{
  --ink:#ece3d2; --soft:#c3b79f; --gold:#d0aa5e; --faint:#a2957c;
  --line:#3a3226; --bg1:#1c1811; --bg2:#12100b; --card:#221c15; } }
:root[data-theme="dark"]{
  --ink:#ece3d2; --soft:#c3b79f; --gold:#d0aa5e; --faint:#a2957c;
  --line:#3a3226; --bg1:#1c1811; --bg2:#12100b; --card:#221c15; }
:root[data-theme="light"]{
  --ink:#3a2f24; --soft:#6a5c49; --gold:#a9863f; --faint:#8c7a60;
  --line:#e7dcc4; --bg1:#fffdf7; --bg2:#f4eede; --card:#fffdf8; }

*{ box-sizing:border-box; }
body{ margin:0; font-family:var(--serif); color:var(--ink); background:var(--bg2);
  line-height:1.6; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; }
a{ color:inherit; }

/* ── the shared top bar (matches the home page: always dark, gold accent) ── */
.bvnav{ position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:14px;
  padding:0 clamp(12px,3vw,22px); min-height:56px; background:var(--bar);
  border-bottom:1px solid var(--bar-line); }
.bvnav::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:230px; max-width:55%;
  background:linear-gradient(105deg, rgba(208,170,94,.30), rgba(208,170,94,0) 72%); pointer-events:none; }
.bvnav .bvhome{ position:relative; z-index:1; font-family:var(--serif); font-weight:600; font-size:21px;
  color:var(--bar-ink); text-decoration:none; white-space:nowrap; }
.bvnav .bvhome .x{ color:var(--gold); }
.bvnav .bvlinks{ position:relative; z-index:1; display:flex; align-items:stretch; align-self:stretch; margin-left:auto; }
.bvnav .bvlinks a{ display:flex; align-items:center; padding:0 11px; border-bottom:2px solid transparent;
  font-family:var(--sans); font-size:12.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--bar-soft); text-decoration:none; white-space:nowrap; }
.bvnav .bvlinks a:hover{ color:#fff; border-bottom-color:var(--gold); }
.bvnav .bvlinks a i{ font-style:normal; }
.bvnav .bvlinks a .ic{ display:none; }
@media (max-width:760px){
  .bvnav{ gap:8px; }
  .bvnav .bvhome{ font-size:18px; }
  .bvnav .bvhome span{ display:none; }             /* just "✝ Benjamin Vo" */
  .bvnav .bvlinks a{ padding:0 7px; font-size:19px; }
  .bvnav .bvlinks a i{ display:none; }             /* icons only on small screens */
  .bvnav .bvlinks a .ic{ display:inline; }
}

/* ── Shared ESPN-style top bar — IDENTICAL to the home page (nav.top), so every
      page (saints, prayers, music, visit…) has the same header: hamburger +
      language picker + underlined desktop links. Always dark. (Alan 2026-07-25.) */
nav.top{ position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:14px;
  padding:0 clamp(12px,3vw,22px); min-height:56px; background:#17120b; border-bottom:1px solid #2c2418; }
nav.top::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:230px; max-width:55%;
  background:linear-gradient(105deg, rgba(208,170,94,.30), rgba(208,170,94,0) 72%); pointer-events:none; }
nav.top .ham{ position:relative; z-index:1; display:inline-flex; flex-direction:column; justify-content:center; gap:5px; width:30px; height:30px; padding:0; border:0; background:transparent; cursor:pointer; }
nav.top .ham span{ display:block; height:2.5px; width:24px; background:#f3ead7; border-radius:2px; }
/* 24px, not 21: Cormorant Garamond has a small x-height, so 21px read visibly smaller
   than the Georgia fallback the home page used to show. Keep this in sync with the
   identical rule in home.php. (Alan 2026-07-30) */
nav.top .brand{ position:relative; z-index:1; font-family:var(--serif); font-weight:600; font-size:24px; color:#f6efdd; text-decoration:none; white-space:nowrap; }
nav.top .brand .x{ color:var(--gold); }
nav.top .tright{ position:relative; z-index:1; margin-left:auto; display:flex; align-items:center; gap:14px; }
nav.top .langpick{ display:inline-flex; align-items:center; gap:5px; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16); border-radius:999px; padding:4px 8px 4px 10px; }
nav.top .langpick select{ appearance:none; -webkit-appearance:none; border:0; background:transparent; font-family:var(--sans); font-size:13px; color:#f3ead7; padding-right:4px; max-width:30vw; cursor:pointer; }
nav.top .langpick select option{ color:#222; }
nav.top .nav-links{ display:none; align-items:stretch; align-self:stretch; margin-left:8px; position:relative; z-index:1; }
@media (min-width:900px){ nav.top .nav-links{ display:flex; } }
nav.top .nav-links a{ display:flex; align-items:center; padding:0 11px; border-bottom:2px solid transparent;
  font-family:var(--sans); font-size:12.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:#c6baa0; text-decoration:none; white-space:nowrap; }
nav.top .nav-links a:hover{ color:#fff; border-bottom-color:var(--gold); }
nav.top .nav-links a.lead{ color:#f6efdd; }
nav.top .menu{ position:absolute; top:100%; left:0; right:0; z-index:39; display:none; background:#17120b; border-bottom:1px solid #2c2418; padding:6px clamp(12px,3vw,22px) 12px; }
nav.top .menu.open{ display:block; }
@media (min-width:900px){ nav.top .ham{ display:none; } }   /* desktop shows inline links, no hamburger */
nav.top .menu a{ display:block; font-family:var(--sans); font-size:15px; font-weight:600; color:#e8dfca; text-decoration:none; padding:11px 6px; border-bottom:1px solid #2c2418; }
nav.top .menu a:last-child{ border-bottom:0; } nav.top .menu a:hover{ color:var(--gold); }
@media (max-width:600px){ nav.top{ gap:10px; } nav.top .brand{ font-size:21px; } nav.top .tright{ gap:9px; } }

/* ── shared page furniture ── */
.bvwrap{ max-width:900px; margin:0 auto; padding:clamp(22px,4vw,40px) clamp(16px,3.5vw,28px) 12vh; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:22px; }
.btn{ display:inline-block; font-family:var(--sans); font-weight:700; font-size:14px; text-decoration:none;
  padding:11px 20px; border-radius:999px; background:var(--gold); color:#241c10;
  border:1px solid var(--gold); letter-spacing:.02em; cursor:pointer; }
.btn:hover{ filter:brightness(1.06); }
.btn.ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.eyebrow{ font-family:var(--sans); font-weight:800; letter-spacing:.22em; text-transform:uppercase;
  font-size:12px; color:var(--gold); }
h1.bvtitle{ font-family:var(--serif); font-weight:600; font-size:clamp(32px,6vw,54px);
  line-height:1.08; margin:8px 0 6px; }
.bvlead{ color:var(--soft); font-size:clamp(16px,2.2vw,19px); }
.sechead{ font-family:var(--sans); font-size:14px; font-weight:800; letter-spacing:.02em;
  text-transform:uppercase; color:var(--ink); margin:0 0 14px; display:flex; align-items:center; gap:10px; }
.sechead::before{ content:''; width:4px; height:17px; background:var(--gold); border-radius:2px; }
footer.bvfoot{ text-align:center; margin-top:44px; padding-top:26px; border-top:1px solid var(--line);
  color:var(--faint); font-size:14px; }
footer.bvfoot a{ color:var(--gold); text-decoration:none; }