/* =========================================================================
   Find Yahweh — Shared styles for content pages, tools & the voice player.
   Builds on styles.css design tokens (--gold, --navy, --font-display, …).
   Self-sufficient: also declares safe fallbacks if loaded alone.
   ========================================================================= */
:root {
  --gold: var(--gold, #c9a84c);
  --maxw: 72rem;
  --readw: 46rem;
}

*, *::before, *::after { box-sizing: border-box; }

body.page {
  margin: 0;
  background:
    radial-gradient(1200px 700px at 50% -10%, #141d39 0%, rgba(20,29,57,0) 60%),
    linear-gradient(180deg, #0a0e1a 0%, #070a14 100%);
  color: #d4cfc4;
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-size: clamp(1.06rem, 0.6vw + 0.95rem, 1.22rem);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.wrap { width: min(100% - 2rem, var(--maxw)); margin-inline: auto; }
.read { max-width: var(--readw); }

a { color: #e6c873; text-decoration: none; }
a:hover { color: #f3e6bd; text-decoration: underline; text-underline-offset: 3px; }

/* ---- Top navigation (shared, static) ---------------------------------- */
.topnav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(12px);
  background: rgba(8, 11, 20, 0.82);
  border-bottom: 1px solid rgba(201, 168, 76, 0.18);
}
.topnav__inner {
  width: min(100% - 2rem, var(--maxw)); margin-inline: auto;
  display: flex; align-items: center; gap: 1rem;
  min-height: 4rem;
}
.topnav__brand { display: flex; align-items: center; gap: .6rem; font-family: 'Cinzel', serif; }
.topnav__brand-heb { font-size: 1.5rem; color: #e6c873; }
.topnav__brand-txt { font-size: 1.05rem; letter-spacing: .04em; color: #f3e6bd; }
.topnav__links { margin-left: auto; display: flex; gap: .25rem; flex-wrap: wrap; align-items: center; }
.topnav__links a {
  font-family: 'Inter', system-ui, sans-serif; font-size: .82rem; letter-spacing: .02em;
  color: #c8c2b4; padding: .45rem .7rem; border-radius: 999px; white-space: nowrap;
  transition: background .25s, color .25s;
}
.topnav__links a:hover { background: rgba(201,168,76,.12); color: #f3e6bd; text-decoration: none; }
.topnav__links a[aria-current="page"] { color: #0a0e1a; background: linear-gradient(180deg,#e6c873,#c9a84c); font-weight: 600; }
.topnav__toggle { display: none; }
@media (max-width: 860px) {
  .topnav__links {
    position: absolute; top: 4rem; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(8,11,20,.98); border-bottom: 1px solid rgba(201,168,76,.18);
    max-height: 0; overflow: hidden; transition: max-height .35s ease;
  }
  .topnav__links a { padding: .9rem 1.2rem; border-radius: 0; border-top: 1px solid rgba(255,255,255,.04); }
  .topnav.open .topnav__links { max-height: 80vh; overflow:auto; }
  .topnav__toggle {
    display: inline-flex; margin-left: auto; background: none; border: 1px solid rgba(201,168,76,.4);
    color: #e6c873; border-radius: 8px; padding: .45rem .6rem; cursor: pointer;
  }
}

/* ---- Page hero -------------------------------------------------------- */
.phero { position: relative; padding: clamp(2.5rem, 7vw, 5rem) 0 clamp(1.5rem,4vw,2.5rem); overflow: hidden; }
.phero__art {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: 82% center;
  opacity: .42;
}
.phero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, #0a0e1a 4%, rgba(10,14,26,.78) 38%, rgba(10,14,26,.25) 70%, rgba(10,14,26,0) 92%),
    linear-gradient(180deg, rgba(10,14,26,0) 52%, #070a14 100%);
}
.phero__inner { position: relative; z-index: 2; }
.phero__eyebrow {
  font-family: 'Inter', sans-serif; font-size: .8rem; letter-spacing: .28em; text-transform: uppercase;
  color: #c9a84c; margin: 0 0 .8rem;
}
.phero h1 {
  font-family: 'Cinzel', serif; font-weight: 700; line-height: 1.08;
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  margin: 0 0 1rem; color: #f6efdb;
  text-wrap: balance;
}
.phero h1 .heb { display:block; font-family:'Times New Roman',serif; color:#e6c873; font-size:.55em; margin-bottom:.3rem; direction: rtl; }
.phero__lead { font-size: clamp(1.15rem,1.4vw,1.4rem); color: #d8d2c4; max-width: 50rem; margin: 0 0 1.4rem; }
.phero__meta { font-family:'Inter',sans-serif; font-size:.8rem; color:#8a857a; letter-spacing:.04em; }

/* ---- Buttons ---------------------------------------------------------- */
.btnrow { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.2rem 0; }
.cbtn {
  display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: .9rem; font-weight: 500; letter-spacing: .02em;
  padding: .7rem 1.3rem; border-radius: 999px; border: 1px solid transparent; transition: .3s;
}
.cbtn--gold { background: linear-gradient(180deg,#efd98a,#c9a84c); color: #1a1206; }
.cbtn--gold:hover { filter: brightness(1.08); text-decoration: none; transform: translateY(-1px); }
.cbtn--ghost { background: transparent; border-color: rgba(201,168,76,.5); color: #e6c873; }
.cbtn--ghost:hover { background: rgba(201,168,76,.12); text-decoration: none; }

/* ---- Article body ----------------------------------------------------- */
.article { padding: clamp(1rem,3vw,2rem) 0 clamp(2.5rem,7vw,5rem); }
.article h2 {
  font-family: 'Cinzel', serif; font-weight: 600; color: #f3e6bd;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem); margin: 2.6rem 0 1rem; line-height: 1.2;
  scroll-margin-top: 5rem;
}
.article h2::before { content: ""; display:block; width:44px; height:2px; background: linear-gradient(90deg,#c9a84c,transparent); margin-bottom: .9rem; }
.article h3 { font-family: 'Cinzel', serif; font-weight: 500; color: #ecd9a6; font-size: clamp(1.2rem,1.6vw,1.45rem); margin: 1.8rem 0 .6rem; }
.article p { margin: 0 0 1.1rem; }
.article ul, .article ol { margin: 0 0 1.2rem; padding-left: 1.3rem; }
.article li { margin: .35rem 0; }
.article strong { color: #f0e7d2; }
.article em { color: #e8dcc0; }
.article .heb { font-family:'Times New Roman',serif; color:#e6c873; direction: rtl; unicode-bidi: isolate; }
.lead-para { font-size: 1.18em; color: #e3ddcf; }

/* Scripture pull-quote */
.scripture {
  margin: 1.8rem 0; padding: 1.4rem 1.6rem; border-left: 3px solid #c9a84c;
  background: linear-gradient(90deg, rgba(201,168,76,.08), transparent);
  border-radius: 0 12px 12px 0; font-style: italic; font-size: 1.18em; color: #ece3cd;
}
.scripture cite { display:block; margin-top:.6rem; font-style: normal; font-family:'Inter',sans-serif; font-size:.82rem; letter-spacing:.08em; color:#c9a84c; }

/* Callout / key fact */
.callout {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start;
  margin: 1.6rem 0; padding: 1.2rem 1.4rem; border-radius: 14px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(201,168,76,.22);
}
.callout__num { font-family:'Cinzel',serif; font-size: 2.4rem; color:#e6c873; line-height: 1; }
.callout__num small { display:block; font-size:.8rem; letter-spacing:.1em; color:#8a857a; font-family:'Inter',sans-serif; }

/* Figure */
.figure { margin: 1.8rem 0; }
.figure img, .figure svg { width: 100%; height: auto; border-radius: 16px; border: 1px solid rgba(201,168,76,.2); display:block; }
.figure figcaption { margin-top:.6rem; font-family:'Inter',sans-serif; font-size:.8rem; color:#8a857a; text-align:center; }

/* Data table */
.tablewrap { overflow-x:auto; margin: 1.4rem 0; border-radius: 14px; border:1px solid rgba(201,168,76,.18); }
table.data { width:100%; border-collapse: collapse; font-family:'Inter',sans-serif; font-size:.9rem; }
table.data caption { caption-side: top; text-align:left; padding:.8rem 1rem; color:#c9a84c; font-family:'Cinzel',serif; }
table.data th, table.data td { padding:.7rem 1rem; text-align:left; border-bottom:1px solid rgba(255,255,255,.06); }
table.data thead th { background: rgba(201,168,76,.1); color:#f3e6bd; letter-spacing:.03em; }
table.data tbody tr:hover { background: rgba(255,255,255,.03); }
table.data td:first-child { color:#e6c873; white-space:nowrap; }

/* Verse card grid */
.verses { display:grid; grid-template-columns: repeat(auto-fill,minmax(min(100%,18rem),1fr)); gap: 1rem; margin: 1.4rem 0; }
.verse {
  padding: 1.1rem 1.2rem; border-radius: 14px; background: rgba(255,255,255,.03);
  border: 1px solid rgba(201,168,76,.16); transition: .3s;
}
.verse:hover { border-color: rgba(201,168,76,.4); transform: translateY(-2px); }
.verse__ref { font-family:'Cinzel',serif; color:#e6c873; font-size:.95rem; margin:0 0 .4rem; }
.verse__text { margin:0; font-size:1.02rem; color:#ddd6c6; }
.verse__tag { display:inline-block; margin-top:.6rem; font-family:'Inter',sans-serif; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:#9a8f6e; }

/* ---- FAQ accordion ---------------------------------------------------- */
.faq { margin: 1.4rem 0; }
.faq__item { border-bottom: 1px solid rgba(201,168,76,.16); }
.faq__q {
  width:100%; text-align:left; cursor:pointer; background:none; border:none; color:#f3e6bd;
  font-family:'Cinzel',serif; font-size: clamp(1.02rem,1.4vw,1.18rem); padding: 1.1rem 2.4rem 1.1rem 0;
  position:relative;
}
.faq__q::after { content:"+"; position:absolute; right:.3rem; top:50%; transform: translateY(-50%); color:#c9a84c; font-size:1.6rem; transition: transform .3s; }
.faq__item.open .faq__q::after { content:"−"; }
.faq__a { max-height:0; overflow:hidden; transition: max-height .4s ease; }
.faq__a > div { padding: 0 0 1.1rem; color:#cfc8b8; }
.faq__item.open .faq__a { max-height: 60rem; }

/* ---- Cross-link cards (internal linking for SEO) ---------------------- */
.related { padding: clamp(2rem,5vw,3.5rem) 0; border-top:1px solid rgba(201,168,76,.16); }
.related h2 { font-family:'Cinzel',serif; color:#f3e6bd; font-size: clamp(1.3rem,2vw,1.7rem); margin:0 0 1.2rem; }
.cardgrid { display:grid; grid-template-columns: repeat(auto-fill,minmax(min(100%,16rem),1fr)); gap: 1rem; }
.lcard {
  display:block; padding: 1.2rem 1.3rem; border-radius:16px; background: rgba(255,255,255,.03);
  border:1px solid rgba(201,168,76,.16); transition:.3s; color: inherit;
}
.lcard:hover { border-color: rgba(201,168,76,.45); transform: translateY(-3px); text-decoration:none; background: rgba(201,168,76,.06); }
.lcard__k { font-family:'Inter',sans-serif; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:#c9a84c; }
.lcard__t { font-family:'Cinzel',serif; color:#f3e6bd; font-size:1.08rem; margin:.4rem 0 .3rem; }
.lcard__d { font-size:.96rem; color:#a9a290; margin:0; }

/* ---- Tools (search / pronounce) -------------------------------------- */
.tool { margin: 1.6rem 0; padding: clamp(1.2rem,3vw,2rem); border-radius:20px;
  background: rgba(255,255,255,.03); border:1px solid rgba(201,168,76,.22); }
.tool__search { display:flex; gap:.6rem; flex-wrap:wrap; }
.tool input[type=search], .tool input[type=text] {
  flex:1 1 14rem; min-width: 0; padding:.8rem 1rem; border-radius:12px;
  background: rgba(0,0,0,.3); border:1px solid rgba(201,168,76,.3); color:#f3e6bd;
  font-family:'Inter',sans-serif; font-size:1rem;
}
.tool input::placeholder { color:#7c7768; }
.tool input:focus { outline:none; border-color:#e6c873; box-shadow:0 0 0 3px rgba(201,168,76,.18); }
.chiprow { display:flex; flex-wrap:wrap; gap:.5rem; margin:1rem 0; }
.chip { cursor:pointer; font-family:'Inter',sans-serif; font-size:.78rem; padding:.4rem .8rem; border-radius:999px;
  background: rgba(201,168,76,.1); border:1px solid rgba(201,168,76,.25); color:#e6c873; }
.chip:hover, .chip.active { background:#c9a84c; color:#1a1206; }
.tool__count { font-family:'Inter',sans-serif; font-size:.82rem; color:#8a857a; margin:.4rem 0 0; }
.tool__results { margin-top:1rem; }

/* Pronunciation guide */
.pron { display:grid; gap:1rem; grid-template-columns: repeat(auto-fit,minmax(min(100%,12rem),1fr)); }
.pron__syl { text-align:center; padding:1.2rem; border-radius:16px; background: rgba(255,255,255,.03); border:1px solid rgba(201,168,76,.2); cursor:pointer; transition:.3s; }
.pron__syl:hover { border-color:#e6c873; transform: translateY(-2px); }
.pron__heb { font-family:'Times New Roman',serif; font-size:3rem; color:#e6c873; }
.pron__say { font-family:'Cinzel',serif; font-size:1.3rem; color:#f3e6bd; margin:.4rem 0 .2rem; }
.pron__note { font-family:'Inter',sans-serif; font-size:.8rem; color:#9a8f6e; }
.bigword { text-align:center; margin:2rem 0; }
.bigword__heb { font-family:'Times New Roman',serif; font-size: clamp(3rem,12vw,7rem); color:#e6c873; direction:rtl; }
.bigword__say { font-family:'Cinzel',serif; font-size: clamp(1.4rem,5vw,2.4rem); color:#f3e6bd; letter-spacing:.1em; }

/* ---- Footer ----------------------------------------------------------- */
.pfooter { border-top:1px solid rgba(201,168,76,.16); padding: clamp(2.5rem,6vw,4rem) 0 2rem; margin-top: 2rem; }
.pfooter__grid { display:grid; gap:2rem; grid-template-columns: repeat(auto-fit,minmax(min(100%,14rem),1fr)); }
.pfooter h4 { font-family:'Cinzel',serif; color:#e6c873; font-size:1rem; margin:0 0 .8rem; }
.pfooter ul { list-style:none; padding:0; margin:0; }
.pfooter li { margin:.35rem 0; }
.pfooter a { color:#b6afa0; font-size:.95rem; }
.pfooter a:hover { color:#f3e6bd; }
.pfooter__heb { font-family:'Times New Roman',serif; font-size:2rem; color:#e6c873; }
.pfooter__legal { margin-top:2rem; padding-top:1.2rem; border-top:1px solid rgba(255,255,255,.06);
  font-family:'Inter',sans-serif; font-size:.8rem; color:#7c7768; text-align:center; }

/* ---- Read-aloud highlight -------------------------------------------- */
.tts-active {
  background: linear-gradient(90deg, rgba(201,168,76,.16), rgba(201,168,76,.04));
  box-shadow: -10px 0 0 rgba(201,168,76,.16), 10px 0 0 rgba(201,168,76,.04);
  border-radius: 6px; transition: background .3s;
}

/* ---- Voice player bar ------------------------------------------------- */
.tts-bar {
  position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%) translateY(140%);
  z-index: 80; display: flex; align-items: center; gap: .5rem;
  width: min(100% - 1.5rem, 40rem); padding: .55rem .7rem;
  background: rgba(12,16,28,.92); backdrop-filter: blur(14px);
  border: 1px solid rgba(201,168,76,.3); border-radius: 999px;
  box-shadow: 0 16px 50px rgba(0,0,0,.5); opacity: 0; transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .4s;
}
.tts-bar { transform: translateX(-50%) translateY(0); opacity: 1; } /* visible once JS adds it */
.tts-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 50%; cursor: pointer;
  background: rgba(201,168,76,.12); border: 1px solid rgba(201,168,76,.3); color: #e6c873; transition: .25s;
}
.tts-btn:hover { background: rgba(201,168,76,.25); color: #f6efdb; }
.tts-play { background: linear-gradient(180deg,#efd98a,#c9a84c); color:#1a1206; border-color: transparent; width:2.8rem; height:2.8rem; }
.tts-stop { width: 2.2rem; height: 2.2rem; }
.tts-meta { flex: 1 1 auto; min-width: 0; display:flex; flex-direction:column; gap:.15rem; padding: 0 .3rem; }
.tts-label { font-family:'Inter',sans-serif; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:#c9a84c; }
.tts-status { font-family:'Inter',sans-serif; font-size:.82rem; color:#d4cfc4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tts-progress { height:3px; border-radius:3px; background: rgba(255,255,255,.1); overflow:hidden; }
.tts-fill { height:100%; width:0; background: linear-gradient(90deg,#c9a84c,#efd98a); transition: width .3s; }
.tts-voice {
  flex: none; max-width: 9rem; padding:.4rem .5rem; border-radius:10px;
  background: rgba(0,0,0,.35); color:#e6c873; border:1px solid rgba(201,168,76,.3);
  font-family:'Inter',sans-serif; font-size:.76rem;
}
.tts-speed { width:auto; padding: 0 .7rem; border-radius:999px; font-family:'Inter',sans-serif; font-size:.78rem; }
@media (max-width: 620px) {
  .tts-voice { display:none; }
  .tts-label { display:none; }
}

/* ---- Reveal-on-scroll ------------------------------------------------- */
.reveal { opacity:0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1; transform:none; transition:none; }
  .tts-bar { transition:none; }
  * { scroll-behavior: auto !important; }
}

/* Skip link */
.skip { position:absolute; left:-999px; top:0; background:#c9a84c; color:#1a1206; padding:.6rem 1rem; z-index:999; border-radius:0 0 8px 0; }
.skip:focus { left:0; }