/* =====================================================================
   Pointing People to Jesus — shared design system
   One source of truth for brand tokens + reused components.
   Visual language echoes the printed workbook: oversized stacked
   League Spartan headlines, a gold brush swoosh, the steeple/cross
   emblem, and generous, quiet whitespace.
   NOTE: class/id names used by js/lesson.js and js/dashboard.js are
   preserved here (.part-card, .lesson-row, .n/.t/.d, .is-complete,
   .is-soon, .is-locked, .tag-soon, .script, .btn*, auth toggles, .avatar).
   ===================================================================== */

/* Script accent font. Playlist Script is the true brand font (from the
   printed materials). It is not on Google Fonts, so drop the font file into
   assets/fonts/ (see the README there). Until it's present, the .script
   stack falls back to Give You Glory, then generic cursive. */
@font-face{
  font-family:'Playlist Script';
  src:url('../assets/fonts/playlist-script.otf') format('opentype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  /* Core brand */
  --dark-azure:#003654;
  --gold:#FDD05A;
  --gray-azure:#5986AA;
  --light-azure:#D9F0FB;
  --off-white:#FBFCFD;
  --ink:#0F2233;

  /* Derived shades for depth */
  --azure-deep:#012234;   /* darkest, gradient base */
  --azure-800:#01314c;
  --azure-600:#0d4568;
  --gold-deep:#E7B53E;     /* gold for hairlines/borders on light */
  --panel-tint:#EEF7FC;    /* softer than light-azure for large fills */
  --paper:#FFFFFF;
  --muted:#3c5266;         /* readable body-muted on light */
  --muted-2:#4b6072;
  --line:rgba(0,54,84,.10);
  --line-strong:rgba(0,54,84,.16);

  /* Radii */
  --r-sm:10px;
  --r:16px;
  --r-lg:22px;
  --r-xl:28px;

  /* Shadows */
  --sh-sm:0 2px 10px -3px rgba(0,54,84,.14);
  --sh-md:0 20px 44px -24px rgba(0,54,84,.30);
  --sh-lg:0 34px 70px -28px rgba(0,54,84,.40);
  --sh-gold:0 12px 30px -8px rgba(253,208,90,.50);

  --max:1160px;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* Reusable gold brush swoosh (matches assets/swoosh.svg) */
  --swoosh:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 34'%3E%3Cpath d='M5 25 C 70 14 150 10 250 9 C 300 8.5 335 8 356 5 C 336 15 300 17 250 17.5 C 150 18.5 80 23 5 25 Z' fill='%23FDD05A'/%3E%3C/svg%3E");
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Jost', sans-serif;
  color:var(--ink);
  background:var(--off-white);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,.eyebrow{
  font-family:'League Spartan', sans-serif;
  text-transform:uppercase;
  color:var(--dark-azure);
  letter-spacing:0;
  line-height:1.02;
}
a{color:inherit; text-decoration:none;}
img,svg{max-width:100%;}
::selection{background:var(--gold); color:var(--dark-azure);}

.wrap{max-width:var(--max); margin:0 auto; padding:0 28px;}

/* Script accent (Playlist Script) — used sparingly for "Part One" etc. */
.script{font-family:'Playlist Script', 'Give You Glory', cursive; text-transform:none; color:var(--gold-deep); line-height:1;}

/* Eyebrow / kicker label */
.eyebrow{
  font-family:'League Spartan'; font-weight:700; text-transform:uppercase;
  font-size:.78rem; letter-spacing:.2em; color:var(--gray-azure);
}

/* ---- Gold brush swoosh ---------------------------------------------
   Put <span class="swoosh"></span> under a headline. Width is set where
   used; it keeps the brush's aspect ratio and never distorts the type. */
.swoosh{
  display:block; width:min(260px, 60%); aspect-ratio:360/34; margin-top:.28em;
  background:var(--swoosh) left center/contain no-repeat;
}
.swoosh.center{margin-left:auto; margin-right:auto;}

/* ---- Emblem (steeple / cross / open doors) -------------------------
   Inline the SVG where used and set stroke-width per size for crispness.
   .emblem just gives it currentColor so color/opacity control it. */
.emblem{color:var(--dark-azure);}
.emblem svg{display:block; width:100%; height:100%;}

/* Large faint watermark version */
.watermark{
  position:absolute; pointer-events:none; color:var(--dark-azure);
  opacity:.05;
}

/* =====================================================================
   Buttons
   ===================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 30px; border-radius:999px;
  font-family:'League Spartan'; font-weight:700; text-transform:uppercase;
  font-size:.8rem; letter-spacing:.07em; line-height:1;
  border:1.8px solid transparent; cursor:pointer;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}
.btn:focus-visible{outline:3px solid rgba(253,208,90,.6); outline-offset:2px;}
.btn:disabled{opacity:.55; cursor:not-allowed; transform:none; box-shadow:none;}
.btn .arrow{transition:transform .18s var(--ease);}
.btn:hover .arrow{transform:translateX(3px);}

.btn-gold{background:var(--gold); color:var(--dark-azure); box-shadow:var(--sh-gold);}
.btn-gold:hover{box-shadow:0 16px 38px -8px rgba(253,208,90,.62);}
.btn-outline{background:transparent; color:var(--dark-azure); border-color:var(--dark-azure);}
.btn-outline:hover{background:var(--dark-azure); color:#fff;}
.btn-outline-light{background:rgba(255,255,255,.04); color:#fff; border-color:rgba(255,255,255,.5);}
.btn-outline-light:hover{background:rgba(255,255,255,.12); border-color:#fff;}
.btn-ghost{background:transparent; color:var(--gray-azure); border-color:transparent; padding-left:8px; padding-right:8px;}
.btn-ghost:hover{color:var(--dark-azure);}
.btn-lg{padding:17px 36px; font-size:.86rem;}
.btn-sm{padding:10px 20px; font-size:.74rem;}

/* =====================================================================
   Auth-state visibility toggles (body.is-authed / body.is-guest)
   ===================================================================== */
body:not(.is-authed) .auth-only{display:none !important;}
body.is-authed .guest-only{display:none !important;}
body:not(.is-authed):not(.is-guest) .auth-only,
body:not(.is-authed):not(.is-guest) .guest-only{display:none !important;}

.avatar{
  width:38px; height:38px; border-radius:50%; background:var(--gold); color:var(--dark-azure);
  font-family:'League Spartan'; font-weight:800; display:inline-flex; align-items:center; justify-content:center;
  font-size:.82rem; flex-shrink:0; box-shadow:0 4px 12px -4px rgba(253,208,90,.7);
}

/* =====================================================================
   Section heading block (eyebrow + h2 + swoosh + lede)
   ===================================================================== */
.section{padding:clamp(64px,9vw,108px) 0;}
.section-head{max-width:660px; margin-bottom:52px;}
.section-head .eyebrow{display:block; margin-bottom:16px;}
.section-head h2{font-size:clamp(1.8rem,3.4vw,2.7rem); font-weight:800; line-height:1.08;}
.section-head .swoosh{width:150px; margin-top:14px;}
.section-head p{margin-top:20px; color:var(--muted); font-size:1.08rem; font-weight:300; max-width:560px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-head.center p{margin-left:auto; margin-right:auto;}

/* =====================================================================
   Two-part course grid  (index.html + dashboard.html + JS-rendered)
   ===================================================================== */
.part-grid{display:grid; grid-template-columns:1fr 1fr; gap:28px;}
.part-card{
  position:relative; overflow:hidden;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:38px 36px 30px; box-shadow:var(--sh-md);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease);
}
.part-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--gold), #ffe49a);
  transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
}
.part-card:hover{transform:translateY(-4px); box-shadow:var(--sh-lg);}
.part-card:hover::before{transform:scaleX(1);}
.part-card .script{display:block; font-size:1.7rem; margin-bottom:2px;}
.part-card h3{font-size:1.55rem; margin-bottom:8px;}
.part-card .sub{
  color:var(--gray-azure); font-size:.76rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.12em; margin-bottom:22px;
}

.lesson-row{
  display:flex; align-items:center; gap:15px; padding:14px 0;
  border-top:1px solid var(--line); font-size:.96rem;
}
a.lesson-row{cursor:pointer; transition:padding-left .18s var(--ease);}
a.lesson-row:hover{padding-left:6px;}
.lesson-row:first-of-type{border-top:none;}
.lesson-row .n{
  font-family:'League Spartan'; font-weight:800; color:var(--gold);
  background:var(--dark-azure); width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:.78rem; flex-shrink:0;
  box-shadow:0 4px 10px -4px rgba(0,54,84,.5);
}
.lesson-row .t{font-weight:500; color:var(--dark-azure);}
.lesson-row .d{color:var(--muted-2); font-weight:300;}
.lesson-row.is-complete .n{background:var(--dark-azure); color:var(--gold);}
.lesson-row.is-soon{opacity:.5;}
.lesson-row.is-soon .n{background:#eef1f3; color:#b6c0c8; box-shadow:none;}
.lesson-row.is-locked{opacity:.62;}
.lesson-row.is-locked .n{background:#eef1f3; color:#8fa0ac; box-shadow:none;}
.lesson-row.is-locked .n svg{width:13px; height:13px;}
.lesson-row.is-locked .t{color:var(--gray-azure);}
.tag-soon{
  margin-left:auto; font-size:.64rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gray-azure); background:var(--panel-tint); padding:5px 11px; border-radius:99px; flex-shrink:0;
  font-family:'League Spartan';
}
a.lesson-row .go{
  margin-left:auto; color:var(--gray-azure); flex-shrink:0; opacity:0; transform:translateX(-4px);
  transition:opacity .18s var(--ease), transform .18s var(--ease); font-weight:700;
}
a.lesson-row:hover .go{opacity:1; transform:translateX(0);}
a.lesson-row.is-complete .go,
a.lesson-row.is-soon .go{display:none;}

/* =====================================================================
   Progress ring (dashboard + lesson sidebar). --p is 0..100.
   ===================================================================== */
.ring{
  position:relative; width:72px; height:72px; border-radius:50%; flex-shrink:0;
  background:conic-gradient(var(--gold) calc(var(--p,0)*1%), rgba(0,54,84,.12) 0);
}
.ring::after{content:""; position:absolute; inset:7px; border-radius:50%; background:var(--ring-hole, #fff);}
.ring b{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:1;
  font-family:'League Spartan'; font-weight:800; color:var(--dark-azure); font-size:1rem;
}

/* =====================================================================
   Split-panel auth layout (login.html / signup.html)
   ===================================================================== */
.auth-split{min-height:100vh; display:grid; grid-template-columns:1.05fr 1fr;}
.auth-aside{
  position:relative; overflow:hidden; color:#fff;
  background:radial-gradient(120% 120% at 15% 0%, var(--azure-600) 0%, transparent 55%), linear-gradient(160deg, var(--azure-800), var(--azure-deep));
  padding:56px 56px 48px; display:flex; flex-direction:column; justify-content:space-between;
}
.auth-aside .a-brand{display:flex; align-items:center; gap:12px; font-family:'League Spartan'; font-weight:800; font-size:1rem; position:relative; z-index:2; color:#fff;}
.auth-aside .a-brand .mk{width:36px; height:36px;}
.auth-aside .a-mid{position:relative; z-index:2; max-width:420px;}
.auth-aside .a-mid .script{font-size:2rem; color:var(--gold); display:block; margin-bottom:6px;}
.auth-aside .a-mid h2{color:#fff; font-size:clamp(1.8rem,2.6vw,2.4rem); font-weight:800; line-height:1.1;}
.auth-aside .a-mid p{margin-top:18px; color:rgba(255,255,255,.8); font-weight:300; font-size:1.02rem;}
.auth-aside .a-verse{position:relative; z-index:2; color:rgba(255,255,255,.78); font-size:1rem; font-weight:300; font-style:italic; border-left:2px solid var(--gold); padding-left:18px; max-width:380px; line-height:1.55;}
.auth-aside .a-verse b{display:block; font-style:normal; color:var(--gold); font-family:'League Spartan'; font-weight:700; margin-top:10px; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase;}
.auth-aside .a-wm{position:absolute; right:-80px; bottom:-80px; width:340px; max-width:none; opacity:.07; z-index:1;}

.auth-panel{display:flex; align-items:center; justify-content:center; padding:56px 28px; background:var(--off-white);}
.auth-card{width:100%; max-width:400px;}
.auth-card .eyebrow{display:block; margin-bottom:12px;}
.auth-card h1{font-size:1.9rem; margin-bottom:10px;}
.auth-card .swoosh{width:120px; margin-bottom:18px;}
.auth-card p.sub{color:var(--muted); font-weight:300; font-size:.98rem; margin-bottom:28px;}

.field{margin-bottom:18px;}
.field label{display:block; font-size:.82rem; font-weight:600; color:var(--dark-azure); margin-bottom:8px; letter-spacing:.02em;}
.field input{
  width:100%; border:1.5px solid #d7e3ea; border-radius:12px; padding:14px 15px;
  font-family:'Jost'; font-size:.98rem; color:var(--ink); background:var(--paper);
  transition:border-color .15s, box-shadow .15s;
}
.field input:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 4px rgba(253,208,90,.22);}
.auth-card .btn{width:100%; padding:15px 26px; margin-top:6px;}
.auth-foot{margin-top:22px; text-align:center; font-size:.92rem; color:var(--muted);}
.auth-foot a{color:var(--dark-azure); font-weight:600; text-decoration:underline; text-underline-offset:2px;}
.link-small{font-size:.86rem; color:var(--gray-azure); text-decoration:underline; text-underline-offset:2px; cursor:pointer; background:none; border:0; padding:0; font-family:inherit;}
.link-small:hover{color:var(--dark-azure);}
.form-msg{font-size:.9rem; padding:13px 15px; border-radius:12px; margin-bottom:20px; display:none; line-height:1.5;}
.form-msg.show{display:block;}
.form-msg.error{background:#fdeceb; color:#b3261e;}
.form-msg.success{background:var(--light-azure); color:var(--dark-azure);}

/* =====================================================================
   Scroll reveal (progressive enhancement; safe with no JS)
   ===================================================================== */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease);}
.reveal.is-in{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1 !important; transform:none !important; transition:none;}
  html{scroll-behavior:auto;}
}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width:900px){
  .part-grid{grid-template-columns:1fr;}
  .auth-split{grid-template-columns:1fr;}
  .auth-aside{display:none;}
}