/*
Belinda Jackson — Radial Universe
Core design tokens, reset, typography, buttons, header nav, forms, footer.
Ported from the approved HTML/JS/CSS prototype (belinda-jackson-radial-prototype.zip),
adapted for real WordPress page URLs instead of the prototype's single-page
JS view-switcher. Colors/type/spacing are unchanged from what was signed off.
*/

:root{
  --gold:#C89B3C;
  --ivory:#F8F5EF;
  --ink:#3A2E27;
  --navy:#14233B;
  --teal:#2D6F73;
  --sand:#DDD3C5;
  --display: 'Cormorant Garamond', Georgia, serif;
  --body: 'Inter', Arial, sans-serif;
  --fantasy: 'Cinzel', Georgia, serif;
  --dur: .5s;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
}
body{
  margin:0; background:var(--ivory); color:var(--ink); font-family:var(--body);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4,.display{font-family:var(--display); font-weight:600; line-height:1.08; margin:0 0 .4em;}
p{line-height:1.65; margin:0 0 1em;}
a{color:inherit;}
img{max-width:100%; display:block;}
button{font-family:var(--body); cursor:pointer;}

/* ---------- Skip link / a11y ---------- */
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--navy); color:#fff; padding:.8em 1.2em;
  z-index:999; border-radius:0 0 8px 0; text-decoration:none;
}
.skip-link:focus{left:0;}
:focus-visible{outline:3px solid var(--teal); outline-offset:3px;}
.screen-reader-text{
  border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); height:1px; margin:-1px; overflow:hidden;
  padding:0; position:absolute !important; width:1px; word-wrap:normal !important;
}
.screen-reader-text:focus{
  background:#fff; border-radius:3px; box-shadow:0 0 2px 2px rgba(0,0,0,.6); clip:auto !important; clip-path:none;
  color:#21759b; display:block; font-size:.9rem; font-weight:600; height:auto; left:5px; line-height:normal;
  padding:1em 1.5em; text-decoration:none; top:5px; width:auto; z-index:100000;
}

/* ---------- Persistent micro-nav (site header) ---------- */
.microNav{
  position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center;
  justify-content:space-between; padding:.7em 1.6em; transition:background var(--dur), box-shadow var(--dur);
  font-family:var(--body);
}
.microNav.show, .microNav.static{ background:rgba(248,245,239,.92); backdrop-filter:blur(6px); box-shadow:0 2px 18px rgba(20,35,59,.08);}
.microNav .brand{display:flex; align-items:center; gap:.6em; font-family:var(--fantasy); font-size:1rem; letter-spacing:.04em; color:var(--ink); text-decoration:none;}
.microNav.show .brand, .microNav.static .brand, .microNav.inWorld .brand{ opacity:1; }
.microNav .brand img{height:34px; width:34px; object-fit:contain; border-radius:50%; background:#fff;}
.microNav .backBtn{
  background:var(--navy); color:#fff; border:none; border-radius:999px; text-decoration:none;
  padding:.55em 1.2em; font-size:.85rem; font-weight:600; display:none; align-items:center; gap:.5em;
}
.microNav.inWorld .backBtn{display:inline-flex;}
.microNav .primaryMenu{ list-style:none; display:flex; gap:1.2em; margin:0; padding:0; font-size:.88rem; }
.microNav .primaryMenu a{ text-decoration:none; padding:.3em 0; }
.microNav .navToggle{ display:none; background:none; border:none; padding:.4em; }
@media (max-width:820px){
  .microNav .primaryMenu{ display:none; }
  .microNav .navToggle{ display:inline-flex; }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; padding:.9em 1.7em; border-radius:999px;
  font-weight:600; font-size:.92rem; text-decoration:none; border:2px solid transparent; min-height:44px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn:hover{ transform:translateY(-2px);}
.btn-gold{ background:var(--gold); color:var(--navy);}
.btn-outline{ background:transparent; border-color:currentColor;}
.btn-dark{ background:var(--navy); color:#fff;}
.wp-element-button, .wp-block-button__link{ border-radius:999px; min-height:44px; font-weight:600; }

/* ---------- Layout helpers shared by world pages & templates ---------- */
.worldInner{ max-width:1180px; margin:0 auto; padding:0 1.6em 5em;}
.hero{ padding:3.5em 0 3em; }
.hero .eyebrow{ font-family:var(--fantasy); letter-spacing:.14em; text-transform:uppercase; font-size:.75rem; margin-bottom:.8em; display:block;}
.hero h1, .hero h2{ font-size:clamp(2rem, 5vw, 3.4rem); max-width:14ch;}
.hero p.lede{ max-width:56ch; font-size:1.08rem;}
.ctaRow{ display:flex; gap:.9em; flex-wrap:wrap; margin-top:1.4em;}

.grid{ display:grid; gap:1.4em; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); margin:2em 0;}
.bookCard{ background:rgba(255,255,255,.6); border-radius:16px; overflow:hidden; border:1px solid rgba(0,0,0,.06); text-decoration:none; display:block; color:inherit;}
.bookCard img{ aspect-ratio:2/3; object-fit:cover; width:100%;}
.bookCard .cap{ padding:.8em .9em 1em;}
.bookCard .cap strong{ font-family:var(--display); font-size:1.02rem; display:block;}
.bookCard .cap span{ font-size:.78rem; opacity:.75;}

section.block{ padding:3em 0; border-top:1px solid rgba(0,0,0,.08);}
section.block h3{ font-size:1.6rem; margin-bottom:.6em;}

.faq details{ border-bottom:1px solid rgba(0,0,0,.1); padding:1em 0;}
.faq summary{ font-weight:600; cursor:pointer; font-size:1rem; min-height:44px; display:flex; align-items:center;}
.faq summary::-webkit-details-marker{ color:var(--gold);}

.placeholder{ background:rgba(200,155,60,.14); border:1px dashed var(--gold); padding:.15em .5em; border-radius:6px; font-size:.85em;}

/* ---------- FluentCRM-style opt-in form panel ---------- */
.crmForm{
  background:var(--navy); color:#fff; border-radius:22px; padding:2.2em; position:relative; overflow:hidden;
}
.world-childrens .crmForm{ background:#3f5a26; }
.world-journals .crmForm{ background:#8CA89A; color:#2b3730;}
.world-speaking .crmForm{ background:var(--ink);}
.crmForm h3{ color:#fff; font-size:1.5rem;}
.world-journals .crmForm h3{ color:#2b3730;}
.crmForm p.small{ font-size:.85rem; opacity:.8; margin-top:1em;}
.crmForm .tag{
  display:inline-block; font-family:var(--fantasy); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  background:rgba(255,255,255,.14); padding:.3em .8em; border-radius:999px; margin-bottom:.9em;
}
.formRow{ display:flex; gap:.8em; flex-wrap:wrap; margin-top:1em;}
.formRow input[type=text], .formRow input[type=email]{
  flex:1; min-width:180px; padding:.85em 1em; border-radius:10px; border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08); color:#fff; font-size:.95rem; min-height:44px;
}
.world-journals .formRow input{ background:rgba(255,255,255,.5); color:#2b3730; border-color:rgba(0,0,0,.1);}
.formRow input::placeholder{ color:rgba(255,255,255,.6);}
.consentRow{ display:flex; align-items:flex-start; gap:.6em; margin-top:1em; font-size:.82rem; opacity:.85;}
.consentRow input{ margin-top:.3em; width:18px; height:18px; flex:none;}
.formSubmit{ margin-top:1.2em;}
.formNote{
  margin-top:1.4em; padding-top:1.2em; border-top:1px dashed rgba(255,255,255,.25); font-size:.76rem; opacity:.75;
}
.thanksMsg{ display:none; margin-top:1em; background:rgba(255,255,255,.14); padding:1em; border-radius:10px; font-size:.9rem;}
.thanksMsg.show{ display:block;}
.crmForm label{ display:block; font-size:.8rem; margin-bottom:.3em; opacity:.85;}

/* ---------- Footer ---------- */
footer.rich{ background:var(--ink); color:#e9e2d6; padding:3.5em 1.6em 2em;}
.footInner{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:2em;}
@media (max-width:820px){ .footInner{ grid-template-columns:1fr 1fr;} }
footer.rich h5{ font-family:var(--fantasy); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-bottom:.9em;}
footer.rich ul{ list-style:none; padding:0; margin:0;}
footer.rich li{ margin-bottom:.5em; font-size:.88rem; opacity:.85;}
footer.rich .bottom{ max-width:1180px; margin:2.5em auto 0; padding-top:1.5em; border-top:1px solid rgba(255,255,255,.12); font-size:.78rem; opacity:.6; text-align:center;}
footer.rich a{ text-decoration:none; }
footer.rich a:hover{ text-decoration:underline; }