/* =========================
   Jesus Loves You — styles.css
   Modern minimalist refresh: compact nav on hover, softer shadows,
   improved spacing, dark-mode polish. All features preserved.
========================= */

/* ================== THEME VARS ================== */
:root{
  --brand-deep:#001f3f;
  --brand-mid:#003366;
  --brand-accent:#0ea5e9;
  --brand-gold:#f5c542;

  --ink:#1f2937;
  --muted:#6b7280;
  --paper:#f9fafb;
  --card:#ffffff;

  --ring: rgba(14,165,233,.35);
  --shadow: 0 8px 24px rgba(2,6,23,.08);
  --radius: 14px;
  --danger:#ef4444;

  /* Sizes */
  --max-wrap: 1100px;
  --pad: 1rem;

  /* Type */
  --fs-0: .95rem;
  --fs-1: 1rem;
  --fs-2: 1.1rem;
  --fs-3: clamp(1.4rem, 2vw + .6rem, 2rem);
}

@media (prefers-color-scheme: dark){
  :root{
    --ink:#ffffff;
    --muted:#cbd5e1;
    --paper:#0b1220;
    --card:#0f172a;
    --brand-deep:#031a33;
    --brand-mid:#052b52;
    --shadow: 0 10px 30px rgba(0,0,0,.25);
  }
}

html[data-theme="dark"] { color-scheme: dark; }

/* High-contrast mode */
body.hc{
  --ink:#ffffff;
  --muted:#e5e7eb;
  --paper:#08121f;
  --card:#0b1628;
  --ring: #7dd3fc;
  --brand-accent:#22d3ee;
  --brand-gold:#ffdb70;
}

/* Compact density */
body.compact{
  --pad: .75rem;
  --radius: 12px;
}

/* ================== RESET & BASE ================== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 700px at 10% 0%, #eaf3ff 0%, transparent 60%),
    radial-gradient(1000px 600px at 100% 20%, #eef7ff 0%, transparent 60%),
    var(--paper);
  color:var(--ink);
  line-height:1.65;
  font-size: var(--fs-1);
}
a{ text-decoration:none; color:inherit; }
h1,h2,h3{ margin-bottom:.6rem; line-height:1.25; }
p{ margin: .5rem 0; font-size: var(--fs-1); }
img{ max-width:100%; display:block; }
[hidden]{ display:none !important; }

/* Wrap */
.container-narrow{ max-width:var(--max-wrap); margin:2rem auto; padding:0 1rem; }

/* Section heading cluster */
.section-head{
  max-width:var(--max-wrap);
  margin:0 auto 0.25rem auto;
  padding:0 1rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.75rem;
}
.section-title{
  text-align:center;
  margin:0 auto 1rem auto;
  font-size:var(--fs-3);
  color:#002244;
  font-weight:800;
  letter-spacing:.2px;
}
@media (prefers-color-scheme: dark){
  .section-title{ color:#ffffff; }
}
.section-sub{
  text-align:center;
  color:var(--muted);
  margin-bottom:1.1rem;
  font-size:var(--fs-0);
}
.head-toggle{ white-space:nowrap; }

/* Accessibility */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:1rem; top:1rem; width:auto; height:auto;
  padding:.5rem .75rem; z-index:1100;
  background:#fff; color:#000; border-radius:8px; box-shadow:var(--shadow);
}
:focus-visible{
  outline:2px solid var(--ring);
  outline-offset:2px;
  border-radius:10px;
}

/* ================== HEADER / NAV ================== */
header{
  background: linear-gradient(45deg, var(--brand-deep), var(--brand-mid));
  color:#fff;
  position:sticky; top:0; z-index:1000;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
.nav-container{
  max-width:var(--max-wrap); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:.65rem 1rem; gap:.35rem;
}
.logo{
  display:flex; align-items:center; gap:.6rem;
  font-size:1.05rem; font-weight:800; letter-spacing:.2px;
}
.logo i{ color:var(--brand-gold); }

.menu-toggle{
  display:none; border:none; background:transparent; color:#fff;
  font-size:1.05rem; padding:.35rem .55rem; border-radius:8px;
}
.menu-toggle:hover{ background: rgba(255,255,255,.08); }

nav ul{ list-style:none; display:flex; gap:1rem; }
nav a{
  display:flex; align-items:center; gap:.4rem;
  color:#fff; font-weight:600; letter-spacing:.2px;
  padding:.35rem .55rem; border-radius:999px;
  transition:all .25s ease;
}
nav a:hover{ color:var(--brand-gold); background: rgba(255,255,255,.06); }
nav a[aria-current="page"]{
  color:var(--brand-gold); background: rgba(255,255,255,.10);
  text-decoration: underline; text-underline-offset: 4px;
}

/* Desktop: compact-on-idle nav (hover/tap to expand) */
@media (min-width: 769px){
  #mainNav.compact ul{ gap:.35rem; }
  #mainNav.compact a{ padding:.35rem .5rem; border-radius:999px; }
  #mainNav.compact a .label{
    max-width:0; opacity:0; transform:translateX(-6px);
    white-space:nowrap; overflow:hidden; display:inline-block;
    transition:max-width .28s ease, opacity .22s ease, transform .22s ease, margin-left .22s ease;
  }
  #mainNav.compact ul li{ transform:translateX(-8px); transition:transform .28s ease; }

  #mainNav.compact:hover a .label,
  #mainNav.compact:focus-within a .label,
  #mainNav.compact.expanded a .label{
    max-width:180px; opacity:1; transform:none; margin-left:.35rem;
  }
  #mainNav.compact:hover ul li,
  #mainNav.compact:focus-within ul li,
  #mainNav.compact.expanded ul li{
    transform:none;
  }
}

/* Mobile dropdown */
@media (max-width: 768px){
  .menu-toggle{ display:inline-flex; }
  nav{ position:relative; }
  nav ul{
    display:none; flex-direction:column; gap:.5rem;
    background: linear-gradient(45deg, var(--brand-deep), var(--brand-mid));
    position:absolute; right:0; top:110%;
    padding:.75rem; min-width:230px; border-radius:12px; box-shadow:var(--shadow);
  }
  nav.open ul{ display:flex; }
}

/* ================== OFFLINE BANNER ================== */
.offline {
  position: sticky; top:0; z-index:1101; display:none;
  text-align:center; background:#3f1d1d; color:#fff;
  padding:.35rem .75rem; border-bottom:1px solid rgba(255,255,255,.15);
  font-weight:800;
}
.offline.show{ display:block; }

/* ================== CARDS / EFFECTS ================== */
.card-ui{
  background:var(--card);
  border-radius:var(--radius);
  border:1px solid rgba(2,6,23,.06);
  box-shadow:var(--shadow);
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
  position:relative; overflow:hidden;
}
.card-ui:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(2,6,23,.14); }
.card-ui:focus-within{ outline:2px solid var(--ring); outline-offset:2px; }

.halo::after{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(150px 90px at 10% 0%, rgba(245,197,66,.14), transparent 70%),
    radial-gradient(180px 100px at 100% 0%, rgba(14,165,233,.14), transparent 70%);
  pointer-events:none;
}

.gradient-card{
  background: radial-gradient(120% 140% at 0% 0%, #0b264c 0%, #0a1b33 60%, #08152a 100%) !important;
  color:#fff !important; border:1px solid rgba(255,255,255,.08);
}

/* ================== HERO ================== */
.hero-callout{
  background: radial-gradient(160% 140% at 0% 0%, #0b264c 0%, #0a1b33 50%, #08152a 100%);
  color:#fff; border:1px solid rgba(255,255,255,.08);
  padding:1.25rem 1.1rem; text-align:center;
}
.hero-callout .verse-ref{ color:#9fd1ff; font-weight:800; }

/* ================== SPOTLIGHT VERSES ================== */
.spotlight-grid{
  display:grid; gap:1rem; grid-template-columns:1fr; margin-top:1rem;
}
@media (min-width:768px){
  .spotlight-grid{ grid-template-columns:repeat(2,1fr); }
}
.spot-card{
  background: radial-gradient(140% 130% at 100% 0%, #0b264c 0%, #0a1b33 50%, #08152a 100%);
  color:#fff; padding:1rem 1.1rem; border:1px solid rgba(255,255,255,.08);
}
.spot-card h3{ color:#fff; font-weight:800; margin-bottom:.4rem; }

/* ================== START HERE (NEW) ================== */
.start-grid{ display:grid; gap:1rem; grid-template-columns:1fr; }
@media (min-width: 992px){ .start-grid{ grid-template-columns: repeat(2, 1fr); } }
.start-card{ padding: var(--pad); }
.bullets{ margin-left:1.1rem; }
.bullets li{ margin:.25rem 0; }
.checklist{ list-style:none; padding-left:0; }
.checklist li{ margin:.35rem 0; }
.mem-card{
  border:1px dashed rgba(255,255,255,.25);
  border-radius:12px; padding:.75rem .9rem; background: rgba(255,255,255,.03);
}
.mem-ref{ font-weight:800; color:#9fd1ff; margin-bottom:.25rem; }
.mem-text{ color:#e5f2ff; }
.plan{ display:grid; gap:.25rem; margin:.5rem 0; }

/* ================== DAILY VERSE ================== */
.verse-row{ display:grid; grid-template-columns:1fr; gap:1rem; margin-bottom:2rem; }
@media (min-width: 768px){ .verse-row{ grid-template-columns:repeat(2, 1fr); } }
.verse-card{
  padding:1.15rem; text-align:center;
  background: radial-gradient(120% 140% at 0% 0%, #0b264c 0%, #0a1b33 60%, #08152a 100%);
  color:#fff; border: 1px solid rgba(255,255,255,.08); position: relative;
}
.verse-badge{
  position:absolute; left:14px; top:14px; width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); color:#fff;
}
.verse-card h3{ font-size:1.05rem; color:#fff; margin-bottom:.35rem; font-weight:800; }
.verse-text{ font-size:1rem; color:#fff; margin-bottom:.5rem; }
.cite-ref{ font-weight:800; color:#9fd1ff; letter-spacing:.25px; }
.verse-actions{
  text-align:center; margin-top:.5rem;
  display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap;
}

/* ================== BIBLE VERSION GRID ================== */
.bible-grid{ display:grid; gap:1rem; margin-bottom:2rem; grid-template-columns:1fr; }
@media (min-width:576px){ .bible-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (min-width:768px){ .bible-grid{ grid-template-columns:repeat(3, 1fr); } }
.bible-card{
  padding:1.05rem; text-align:center; color:#0b2c5a;
  border:1px solid rgba(2,6,23,.06);
  background: var(--card);
}
.bible-card i{
  font-size:1.7rem; margin-bottom:.55rem;
  background: radial-gradient(40px 40px at 50% 50%, rgba(14,165,233,.25), transparent 60%);
  padding:.75rem; border-radius:50%;
}
.bible-card span{ display:block; font-size:1rem; font-weight:800; margin-top:.15rem; }
.bible-card:hover{ background:#eef6ff; border-color:rgba(2,6,23,.12); }
@media (prefers-color-scheme: dark){
  .bible-card{ color:#dbeafe; border-color:rgba(255,255,255,.06); }
  .bible-card:hover{ background:#122742; }
}

/* ================== DEVOTIONAL METHODS ================== */
.devotion-grid{ display:grid; gap:1rem; grid-template-columns:1fr; }
@media (min-width: 992px){ .devotion-grid{ grid-template-columns: repeat(3, 1fr); } }
.devotion-card{
  background:var(--card);
  border:1px solid rgba(2,6,23,.08);
  padding:1.1rem; border-radius:var(--radius); box-shadow:var(--shadow);
}
@media (prefers-color-scheme: dark){
  .devotion-card{ background:#0f172a; border-color:rgba(255,255,255,.06); }
}
.devotion-card h3{ display:flex; align-items:center; gap:.5rem; margin-bottom:.4rem; }
.devotion-card ul{ margin-left:1rem; margin-bottom:.4rem; }
.devotion-card .example{ font-style:italic; color:var(--muted); }
.devotion-links{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.4rem; justify-content:center; }

/* ================== MATERIALS/TIKTOK ================== */
.tiktok-live{ display:flex; justify-content:center; margin:2rem 0 0 0; }
.tiktok-live a, .btn-drive{
  display:inline-flex; align-items:center; gap:.6rem;
  background: linear-gradient(135deg, #25F4EE, #1da3ff);
  color:#fff; padding:.8rem 1.35rem; border-radius:12px; font-size:1.02rem; font-weight:800;
  box-shadow:var(--shadow); transition: transform .2s ease, filter .2s ease;
  text-align:center;
}
.tiktok-live a:hover, .btn-drive:hover{ transform:translateY(-3px); filter:saturate(1.05); }

/* ================== TWO-UP (Contact + Church) ================== */
.two-up{ margin-top:1rem; }
.two-up-grid{ display:grid; gap:1rem; grid-template-columns: 1fr; }
@media (min-width: 992px){ .two-up-grid{ grid-template-columns: 1fr 1fr; } }
.two-up .card-box{
  padding:1.2rem 1.4rem; text-align:center; border:1px solid rgba(255,255,255,.08);
}
.two-up .card-box p{ margin-left:auto; margin-right:auto; max-width:820px; }

/* ================== TOOLS ================== */
.tools-grid{ display:grid; gap:1rem; grid-template-columns:1fr; }
@media (min-width: 992px){ .tools-grid{ grid-template-columns: repeat(3, 1fr); } }
.tool-card{ padding:1rem 1.1rem; }
.timer-display{ font: 800 1.9rem/1.1 'Inter',sans-serif; letter-spacing:.5px; }
.timer-controls{ display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; margin-top:.5rem; }
.timer-pills{ display:flex; gap:.4rem; flex-wrap:wrap; justify-content:center; }
.timer-pills button{
  border:1px solid rgba(255,255,255,.25);
  background:transparent; color:#fff; padding:.25rem .5rem; border-radius:999px; font-weight:700;
}
.timer-pills button.active{ background:#22d3ee; color:#000; border-color:#22d3ee; }
.streak-stats{ display:flex; gap:1rem; justify-content:center; font-weight:800; }
.streak-stats .num{ font-size:1.5rem; }

/* Journal */
.journal-wrap textarea{
  width:100%; min-height:120px; border-radius:12px; padding:.75rem;
  border:1px solid rgba(255,255,255,.2); background:transparent; color:#fff;
}
.journal-actions{ display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center; margin-top:.5rem; }
.journal-list{ max-height:260px; overflow:auto; }

/* Search box */
.search-box{ display:flex; gap:.5rem; justify-content:center; margin:.5rem 0 0 0; }
.search-box input{ padding:.55rem .75rem; border-radius:10px; border:1px solid rgba(2,6,23,.12); min-width: 240px; }
.search-box button{
  padding:.55rem .9rem; border-radius:10px; border:1px solid rgba(2,6,23,.12);
  background:#0ea5e9; color:#001; font-weight:800;
}
/* compact for Tools lookup */
.search-box.compact input{min-width:0;width:100%;max-width:220px;padding:.45rem .6rem;}
.search-box.compact button{padding:.45rem .6rem;}

/* ================== MODALS & UTIL ================== */
.modal-dark{ background:#0f172a; color:#fff; border:1px solid rgba(255,255,255,.08); }
.modal-dark .modal-header{ border-bottom:1px solid rgba(255,255,255,.12); }
.modal-dark .modal-body{ color:#e5e7eb; }
.vm-ref{ color:#9fd1ff; font-weight:800; margin-bottom:.5rem; }
.vm-text{ font-size:1.12rem; line-height:1.6; margin:0; }
.lookup-ref{ color:#9fd1ff; font-weight:800; }
.lookup-content{ white-space:pre-wrap; font-size:1.06rem; line-height:1.65; }

/* QR modal sizing */
#qrcode { display:flex; justify-content:center; padding:1rem; }

/* ================== FOOTER & MISC ================== */
#follow-latest{
  text-align:center; margin:0 0 .75rem 0;
  font-size:1.03rem; font-weight:800; color:#0b2c5a;
}
@media (prefers-color-scheme: dark){ #follow-latest{ color:#dbeafe; } }

footer{
  background:#0b1220; color:#e5e7eb; text-align:center; padding:1rem;
  font-size:.95rem; margin-top:2rem; border-top:1px solid rgba(255,255,255,.06);
}

.section-divider{ max-width:var(--max-wrap); margin:2.25rem auto; padding:0 1rem; }
.section-divider hr{ border:0; height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent); }

/* Back to top */
.back-to-top{
  position:fixed; right:1rem; bottom:4.5rem; z-index:999;
  border:0; border-radius:50%; width:44px; height:44px; display:none;
  align-items:center; justify-content:center;
  background: linear-gradient(45deg, var(--brand-accent), #9ae6ff);
  color:#000; box-shadow:var(--shadow); cursor:pointer;
}
.back-to-top.show{ display:flex; }
.back-to-top i{ font-size:1.05rem; }

/* Buttons */
.btn-outline-primary{ color:#ffffff; border-color:#9ae6ff; }
.btn-outline-primary:hover{ background:#22d3ee; color:#000; border-color:#22d3ee; }
.btn-danger{ border-color:#ef4444 !important; color:#ef4444 !important; }
.btn-danger:hover{ background:#ef4444 !important; color:#000 !important; }

/* Headline style used in hero quote */
h5 {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 2.05rem;
  color: #ffffff; text-align: center;
  text-shadow: 0 0 8px rgba(255,255,255,.7), 0 0 15px rgba(0,153,255,.4);
  letter-spacing: .6px;
}

/* ================== BOTTOM BAR (MOBILE) ================== */
.bottom-bar{
  position:fixed; bottom:0; left:0; right:0; z-index:1000;
  display:flex; justify-content:space-around; align-items:center;
  padding:.35rem .5rem; backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.12)) , rgba(2,6,23,.45);
  border-top:1px solid rgba(255,255,255,.12);
}
.bottom-item{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#e5e7eb; gap:.2rem; padding:.25rem .5rem; border-radius:10px; font-size:.8rem;
}
.bottom-item i{ font-size:1.05rem; }
.bottom-item:active{ background: rgba(255,255,255,.08); }
@media (min-width: 768px){ .bottom-bar{ display:none; } }

/* prevent overlap with bottom bar */
@media (max-width: 767px){ body{ padding-bottom: 64px; } }

/* ================== COLLAPSIBLE SECTIONS ================== */
/* JS toggles [hidden] on targets; button just needs style. */
button[data-collapse] .fa-minus, button[data-collapse].collapsed .fa-minus{ display:none; }
button[data-collapse].collapsed .fa-plus{ display:inline-block; }
button[data-collapse] .fa-plus{ display:none; }

/* ================== LANGUAGE HELPERS ================== */
body.lang-tl .only-en{ display:none !important; }
body.lang-en .only-tl{ display:none !important; }

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

/* ================== READABILITY LIMITS ================== */
p, li, .lookup-content, .vm-text{
  max-width: 70ch; margin-left:auto; margin-right:auto;
}

/* ================== UTIL CLASSES ================== */
.muted{ color:var(--muted); }
.modal-dark .placeholder{ background: rgba(255,255,255,.06); }
.placeholder-wave .placeholder{ border-radius:6px; }