/* Magnalia Foundation — shared styles.
   The design prototype used an <x-dc> runtime with inline `style-hover` attributes;
   this file recreates those hover/interaction states as real CSS so the static pages
   need near-zero JS. Structural layout stays inline in each page to stay pixel-faithful. */

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:#EEF4F9;color:#102A47;font-family:'Hanken Grotesk',system-ui,sans-serif;}
::placeholder{color:#9DB0C2;}
input,textarea{font-family:inherit;outline:none;}
img{max-width:100%;}
a{color:inherit;}

/* In-page anchors clear the fixed nav */
#about,#areas-of-focus,#podcast,#featured-series,#mission,#meshvote,#bco-max,#help-meet-network,#shepherd{scroll-margin-top:84px;}

/* ===================== NAV ===================== */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(9,22,40,0);backdrop-filter:blur(0);border-bottom:1px solid rgba(255,255,255,0);
  transition:background .4s ease, backdrop-filter .4s ease, border-color .4s ease;}
.nav.scrolled{background:rgba(9,22,40,0.92);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,0.08);}
/* Open mobile menu: dark overlay reaches the very top so the logo sits on it (not on the hero) */
.nav.open{background:rgba(9,22,40,0.97);backdrop-filter:blur(10px);}
.nav__inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 28px;}
.nav__logo{height:26px;width:auto;max-width:100%;display:block;object-fit:contain;}
.nav__links{display:flex;align-items:center;gap:26px;}
.nav__right{display:flex;align-items:center;gap:26px;}
/* Donate: outlined cyan pill on wide screens (original look), plain text link on narrow screens */
.nav__donate{display:inline-block;font-family:'Poppins',sans-serif;font-weight:500;font-size:14px;color:#54C0F0;text-decoration:none;cursor:pointer;white-space:nowrap;
  background:transparent;border:1.5px solid #54C0F0;border-radius:30px;padding:9px 20px;box-shadow:none;transition:all .18s ease;}
.nav__donate:hover{background:#54C0F0;color:#fff;box-shadow:0 0 11px rgba(84,192,240,0.5), 0 0 24px rgba(84,192,240,0.3);transform:translateY(-1px);}
.nav__burger{display:none;cursor:pointer;align-items:center;justify-content:center;width:42px;height:42px;
  color:#fff;background:transparent;border:none;padding:0;font-size:20px;line-height:1;}
.nav__burger-ic{display:block;}            /* SVG centers cleanly in the flex button (glyphs didn't) */
.nav__burger .ic-close{display:none;}
.nav.open .nav__burger .ic-menu{display:none;}
.nav.open .nav__burger .ic-close{display:block;}
.nav__panel{overflow:hidden;background:rgba(9,22,40,0.97);max-height:0;opacity:0;
  transition:max-height .34s cubic-bezier(.4,0,.2,1), opacity .26s ease;border-top:1px solid rgba(255,255,255,0);}
.nav.open .nav__panel{max-height:calc(100vh - 70px);max-height:calc(100dvh - 70px);opacity:1;overflow-y:auto;border-top:1px solid rgba(255,255,255,0.08);}
.nav__panel-inner{max-width:1200px;margin:0 auto;padding:6px 28px 18px;display:flex;flex-direction:column;}

.nav-link{cursor:pointer;font-family:'Poppins',sans-serif;font-weight:300;color:#C4D6E6;text-decoration:none;
  transition:color .15s ease;}
.nav-link:hover{color:#54C0F0;}
.nav__links .nav-link{font-size:15px;}
.nav__panel .nav-link{font-size:17px;padding:13px 4px;border-bottom:1px solid rgba(255,255,255,0.06);}

/* Header dropdowns (Bitcoin / AI). Desktop = CSS-only hover + keyboard :focus-within;
   mobile sub-links (.nav-sub) live in #nav-panel and are always shown, indented. */
.nav-item{position:relative;display:flex;align-items:center;}
.nav-link--dd{display:inline-flex;align-items:center;gap:6px;}
.nav-caret{flex:0 0 auto;opacity:.7;transition:transform .18s ease, opacity .18s ease;}
.nav-item:hover .nav-caret,.nav-item:focus-within .nav-caret{transform:rotate(180deg);opacity:1;}
.nav-dd{position:absolute;top:100%;left:0;margin-top:10px;min-width:230px;
  background:rgba(9,22,40,0.97);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:8px;
  box-shadow:0 18px 40px -18px rgba(0,0,0,0.7);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s ease;z-index:60;}
.nav-dd::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px;}  /* hover bridge over the margin gap */
.nav-item:hover .nav-dd,.nav-item:focus-within .nav-dd{opacity:1;visibility:visible;transform:translateY(0);}
.nav-dd-link{display:block;white-space:nowrap;padding:9px 14px;border-radius:8px;
  font-family:'Poppins',sans-serif;font-weight:300;font-size:14px;color:#C4D6E6;text-decoration:none;
  transition:background .14s ease, color .14s ease;}
.nav-dd-link:hover{background:rgba(84,192,240,0.10);color:#54C0F0;}
.nav__panel .nav-sub{font-size:15px;padding-left:18px;color:#9FB6CC;}

/* ===================== BUTTONS ===================== */
.btn-orange,.btn-cyan{display:inline-block;text-decoration:none;cursor:pointer;font-family:'Poppins',sans-serif;
  transition:all .18s ease;}
.btn-orange{background:#E8761C;color:#fff;border:none;box-shadow:0 0 22px rgba(232,118,28,0.6);}
.btn-orange:hover{background:#f5862c;box-shadow:0 0 13px rgba(232,118,28,0.65), 0 0 30px rgba(232,118,28,0.4);transform:translateY(-2px);}
.btn-cyan{background:transparent;color:#54C0F0;border:1.5px solid #54C0F0;box-shadow:none;}
.btn-cyan:hover{background:#54C0F0;color:#fff;box-shadow:0 0 11px rgba(84,192,240,0.5), 0 0 24px rgba(84,192,240,0.3);transform:translateY(-1px);}
button.btn-orange,button.btn-cyan{font-size:inherit;}

/* ===================== TEXT LINKS ===================== */
.link-amber{color:#E8A157;font-family:'Poppins',sans-serif;font-weight:500;text-decoration:none;transition:color .15s ease;}
.link-amber:hover{color:#FBB877;text-decoration:underline;text-underline-offset:4px;}
.link-cyan{font-family:'Space Mono',monospace;color:#9FB6CC;text-decoration:none;transition:color .15s ease;}
.link-cyan:hover{color:#54C0F0;text-decoration:underline;text-underline-offset:3px;}
.link-underline{text-decoration:none;transition:color .15s ease;}
.link-underline:hover{text-decoration:underline;text-underline-offset:3px;}

/* ===================== CARDS ===================== */
.tile{transition:border-color .16s, transform .16s, box-shadow .16s;}
.tile:hover{border-color:#54C0F0;transform:translateY(-3px);box-shadow:0 12px 26px -14px rgba(16,42,71,0.45);}
.card-orange,.card-cyan,.card-lift{transition:border-color .16s, transform .16s, box-shadow .16s;}
.card-orange:hover{border-color:#E8761C;transform:translateY(-4px);box-shadow:0 18px 38px -20px rgba(232,118,28,0.4);}
.card-cyan:hover{border-color:#54C0F0;transform:translateY(-4px);box-shadow:0 18px 38px -20px rgba(84,192,240,0.45);}
.card-lift:hover{border-color:#54C0F0;transform:translateY(-3px);box-shadow:0 16px 34px -18px rgba(16,42,71,0.4);}
/* Card links underline when hovering the whole card */
.card-orange:hover .link-underline,.card-cyan:hover .link-underline,.card-lift:hover .link-underline{text-decoration:underline;text-underline-offset:3px;}

/* Team grid (Who we are): 3 equal-height columns, collapsing to 1 on narrow screens. */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch;}
@media (max-width:760px){ .team-grid{grid-template-columns:1fr;} }

/* Mission mark: large beside the text on wide screens; small & inline with the label on narrow */
.mission-mark-lg{flex:0 0 auto;display:flex;align-items:center;justify-content:center;}
.mission-mark-sm{display:none;}
@media (max-width:760px){
  .mission-mark-lg{display:none;}
  .mission-mark-sm{display:block;}
}

/* ===================== SOCIAL ICON BUTTONS ===================== */
.social-dark{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
  color:#A9C2D8;border:1px solid rgba(255,255,255,0.14);text-decoration:none;transition:border-color .15s,color .15s,background .15s;}
.social-dark:hover{border-color:#54C0F0;color:#fff;background:rgba(84,192,240,0.12);}
.social-light{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
  color:#46617A;border:1px solid #DCE6EF;background:#fff;text-decoration:none;transition:border-color .15s,color .15s,background .15s;}
.social-light:hover{border-color:#54C0F0;color:#1E73B0;background:rgba(84,192,240,0.10);}

/* ===================== FOOTER ===================== */
.foot-link{cursor:pointer;font-size:14px;color:#C4D6E6;text-decoration:none;transition:color .15s ease;}
.foot-link:hover{color:#fff;}

/* ===================== FORMS ===================== */
.hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden;}
.form-error{display:none;color:#C0392B;font-size:13px;margin-top:12px;}

/* ===================== RESPONSIVE ===================== */
@media (max-width:759px){
  .nav__links{display:none;}
  .nav__burger{display:flex;}
  /* Donate now lives outside .nav__links so it stays visible; tighten the bar so logo + Donate + burger fit narrow phones */
  .nav__inner{gap:14px;padding-left:16px;padding-right:16px;}
  .nav__right{gap:14px;}
  .nav__logo{height:22px;}
  /* Donate is a plain text link on narrow screens (outlined pill only on wide) */
  .nav__donate{border:none;background:transparent;padding:0;font-size:15px;box-shadow:none;transform:none;}
  .nav__donate:hover{background:transparent;color:#7FD2F5;box-shadow:none;transform:none;}
}

/* ===================== GIVEBUTTER EMBED (donate) ===================== */
/* The widget renders a form iframe into shadow DOM with no reserved height; this card holds the
   space + shows a spinner until the reveal script adds .gb-loaded (which just fades the card).
   The reserved min-height is KEPT (not dropped to 0) so the column never collapses between the
   placeholder leaving and the form rendering — that mid-transition shrink-then-grow looked broken. */
.gb-embed{position:relative;min-height:510px;}
.gb-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  background:#fff;border:1px solid #DCE6EF;border-radius:18px;box-shadow:0 1px 2px rgba(16,42,71,0.04);
  color:#56708A;font-family:'Space Mono',monospace;font-size:13px;letter-spacing:0.04em;text-align:center;padding:24px;
  transition:opacity .3s ease;}
.gb-spinner{width:34px;height:34px;border-radius:50%;border:3px solid #E0E9F1;border-top-color:#54C0F0;animation:gb-spin .8s linear infinite;}
@keyframes gb-spin{to{transform:rotate(360deg);}}
.gb-embed.gb-loaded .gb-loading{opacity:0;pointer-events:none;}
@media (prefers-reduced-motion:reduce){ .gb-spinner{animation-duration:1.8s;} }

/* ===================== SERIES / ARTICLE PAGES ===================== */
/* Shared primitives for the "Your Church and Bitcoin" sub-section (index + part pages):
   a readable prose column, responsive video embed, table of contents, and prev/next nav.
   Page layout (max-widths, section padding) stays inline per the site convention. */

/* Breadcrumb on dark hero */
.crumb{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:0.03em;color:#7FA1BF;}
.crumb a{color:#A9C2D8;text-decoration:none;transition:color .15s ease;}
.crumb a:hover{color:#54C0F0;}
.crumb .sep{opacity:0.5;margin:0 4px;}

/* Responsive 16:9 video embed (padding-top hack works everywhere) */
.embed-16x9{position:relative;width:100%;padding-top:56.25%;border-radius:16px;overflow:hidden;
  background:#0A1A2F;border:1px solid #DCE6EF;box-shadow:0 18px 44px -22px rgba(16,42,71,0.5);}
.embed-16x9 iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}

/* Readable article column */
.prose{font-family:'Hanken Grotesk',system-ui,sans-serif;color:#2A4259;font-size:17.5px;line-height:1.75;}
.prose p{margin:0 0 22px;}
.prose h2{font-family:'Poppins',sans-serif;font-weight:500;font-size:25px;color:#102A47;
  letter-spacing:-0.01em;line-height:1.25;margin:48px 0 16px;}
.prose h3{font-family:'Poppins',sans-serif;font-weight:500;font-size:19px;color:#102A47;margin:34px 0 12px;}
.prose h2:first-child,.prose h3:first-child{margin-top:0;}
.prose strong{color:#102A47;font-weight:600;}
.prose ul,.prose ol{margin:0 0 22px;padding-left:24px;}
.prose li{margin:0 0 10px;}
.prose a{color:#C2680F;text-decoration:none;border-bottom:1px solid rgba(232,118,28,0.35);
  transition:color .15s ease,border-color .15s ease;}
.prose a:hover{color:#E8761C;border-bottom-color:#E8761C;}
/* ESV scripture links are blue everywhere, regardless of context */
a[href*="esv.org"]{color:#1E73B0;}
.prose a[href*="esv.org"]{color:#1E73B0;border-bottom-color:rgba(30,115,176,0.4);}
.prose a[href*="esv.org"]:hover{color:#0F5D96;border-bottom-color:#0F5D96;}
/* Scripture pull-quotes */
.prose blockquote{margin:30px 0;padding:4px 0 4px 26px;border-left:3px solid #2C7FB8;}
.prose blockquote p{font-size:19px;line-height:1.6;font-style:italic;color:#1B3046;margin:0 0 10px;}
.prose blockquote cite{display:block;font-family:'Space Mono',monospace;font-style:normal;
  font-size:12.5px;letter-spacing:0.04em;text-transform:uppercase;color:#2C7FB8;}

/* References / further-reading list */
.reflist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.reflist a{color:#1E73B0;text-decoration:none;font-size:15px;line-height:1.45;
  border-bottom:1px solid rgba(30,115,176,0.22);transition:border-color .15s ease,color .15s ease;}
.reflist a:hover{color:#0F5D96;border-bottom-color:#1E73B0;}

/* Series table of contents */
.series-toc{display:flex;flex-direction:column;gap:3px;}
.toc-item{display:flex;align-items:baseline;gap:12px;padding:10px 14px;border-radius:10px;
  text-decoration:none;color:#33506B;font-size:15px;line-height:1.4;transition:background .14s,color .14s;}
a.toc-item:hover{background:#EEF4F9;color:#102A47;}
.toc-item .num{font-family:'Space Mono',monospace;font-size:12px;color:#8AA0B5;min-width:24px;flex:0 0 auto;}
.toc-item.cur{background:#EEF4F9;color:#102A47;font-weight:600;}
.toc-item.cur .num{color:#E8761C;}

/* Prev / next navigation */
.partnav{display:flex;gap:16px;justify-content:space-between;}
.partnav .spacer{flex:1 1 0;}
.partnav a{flex:1 1 0;min-width:0;display:block;text-decoration:none;background:#fff;border:1px solid #DCE6EF;
  border-radius:14px;padding:17px 20px;transition:border-color .16s,transform .16s,box-shadow .16s;}
.partnav a:hover{border-color:#54C0F0;transform:translateY(-2px);box-shadow:0 14px 30px -18px rgba(16,42,71,0.4);}
.partnav .dir{display:block;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:0.1em;
  text-transform:uppercase;color:#7E97AE;margin-bottom:7px;}
.partnav .ttl{display:block;font-family:'Poppins',sans-serif;font-size:15.5px;color:#102A47;line-height:1.3;}
.partnav a.next{text-align:right;}
@media (max-width:559px){
  .partnav{flex-direction:column;}
  .partnav a.next{text-align:left;}
}

/* ===================== HERO ===================== */
/* Consolidated from the per-page inline hero blocks (which had drifted: the Bitcoin
   landing hero was 1100px vs 1080 elsewhere). `variant` sets the reading width +
   vertical rhythm; sub-elements share one scale. The home hero is intentionally
   bespoke (2-column, wider) and is not built from this. */
.hero{color:#EAF2F8;background:radial-gradient(120% 140% at 82% -20%, #1C5C9E 0%, #102C4E 46%, #0A1A2F 82%);}
.hero__inner{max-width:1200px;margin:0 auto;}     /* matches the nav frame so hero content lines up with the logo */
.hero__inner--default{padding:104px 28px 64px;}   /* marketing pages: bitcoin, ai, contact, donate */
.hero__inner--narrow{padding:104px 28px 60px;}    /* series index hubs */
.hero__inner--article{padding:104px 28px 56px;}   /* top matches default/narrow so the breadcrumb stays put hub↔article; bottom stays tight before the article body */
.hero__crumb{margin-bottom:22px;}
.hero__eyebrow{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:0.18em;text-transform:uppercase;color:#54C0F0;margin:0 0 16px;}
.hero__markrow{display:flex;align-items:center;gap:16px;}
.hero__mark{flex:0 0 auto;width:46px;height:46px;border-radius:50%;background:#E8761C;display:flex;align-items:center;justify-content:center;color:#fff;font-size:25px;font-weight:700;font-family:'Poppins',sans-serif;box-shadow:0 6px 16px -6px rgba(232,118,28,0.6);}
.hero__mark--ai{background:#54C0F0;font-size:16px;font-family:'Space Mono',monospace;letter-spacing:-0.04em;box-shadow:0 6px 16px -6px rgba(84,192,240,0.6);}
.hero__title{font-family:'Poppins',sans-serif;font-weight:300;font-size:clamp(30px,5vw,44px);margin:0;letter-spacing:-0.01em;}
.hero__summary{font-size:18px;line-height:1.65;color:#A9C2D8;margin:18px 0 0;max-width:640px;}
.hero__cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:28px;}
/* Part pages run a touch tighter than the index hero */
.hero__inner--article .hero__mark{width:44px;height:44px;font-size:24px;}
.hero__inner--article .hero__title{font-size:clamp(28px,4.6vw,40px);}
.hero__inner--article .hero__summary{line-height:1.6;}
/* Hero with an aside (e.g. a video) -> 2-column layout like the home page.
   Crumb/eyebrow live full-width in .hero__head above; the split row top-aligns the title with the aside. */
.hero__inner--split .hero__body{display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start;}
.hero__inner--split .hero__col{flex:1 1 420px;min-width:0;}
.hero__aside{flex:1 1 380px;min-width:0;}

/* Article 2-column layout: prose left (aligned with the logo), "In this series" ToC as a right sidebar */
.article-layout{max-width:1200px;margin:0 auto;padding:48px 28px 90px;display:flex;gap:48px;align-items:flex-start;}
.article-main{flex:0 1 720px;min-width:0;}
/* ToC sticks below the fixed 72px header as the long article scrolls; caps to the
   viewport so a tall (12-part) list scrolls internally instead of clipping. */
.article-toc-wrap{flex:1 1 300px;min-width:0;position:sticky;top:90px;align-self:flex-start;max-height:calc(100vh - 110px);overflow-y:auto;}
@media (max-width:1099px){
  .article-layout{flex-direction:column;align-items:center;gap:40px;}
  .article-main,.article-toc-wrap{flex:1 1 auto;width:100%;max-width:720px;}
  .article-toc-wrap{position:static;max-height:none;overflow:visible;}  /* stacked below the article on mobile -> don't stick */
}