/*
Theme Name: Life's Focus — Design 2.0
Theme URI: https://lifesfocus.com
Author: Built for Jason Skinner
Description: THE NEW DESIGN. A calm, reader-focused theme built around the six doorways — it meets a visitor where they stand and offers one step from there. Requires the Life's Focus Library plugin, which owns the videos. (Your original theme is the one simply called "Life's Focus".)
Version: 2.0.0
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: lifesfocus
*/

/* ==========================================================================
   Life's Focus — Design 2.0
   Direction B, "The Standing Place", applied site-wide.

   Organised the way the WordPress theme will be, so this file ports across
   with minimal rework:
     1  Tokens
     2  Base & typography
     3  Layout
     4  Masthead & navigation
     5  Hero
     6  The road
     7  Verse
     8  Video embed (click-to-play facade)
     9  Video cards  <- format follows the current live site
    10  Compact video rows
    11  Chips & filters
    12  Sections & page headers
    13  Article prose
    14  Next-step band
    15  Forms
    16  Pagination & breadcrumbs
    17  Footer
    18  Utilities & motion
   ========================================================================== */

/* -------------------------------------------------- 1  Tokens */
:root{
  --paper:#F7F9FA;
  --panel:#FFFFFF;
  --deep:#EDF2F3;
  --ink:#16211F;
  --ink-soft:#38484B;
  --muted:#5A6A6D;
  --line:rgba(22,33,31,.12);
  --line-faint:rgba(22,33,31,.065);
  --accent:#2F6F66;
  --accent-deep:#22544D;
  --accent-wash:rgba(47,111,102,.06);

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
  --shell:74rem;
  --measure:38rem;
  --radius:4px;
}

/* -------------------------------------------------- 2  Base & typography */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
::selection{background:rgba(47,111,102,.16)}
img{max-width:100%;display:block}
a{color:inherit}

h1,h2,h3,h4{font-family:var(--serif);font-weight:300;letter-spacing:-.018em;line-height:1.2;margin:0}
.h-xl{font-size:clamp(2rem,5vw,3.15rem);line-height:1.14;letter-spacing:-.022em}
.h-lg{font-size:clamp(1.6rem,3.6vw,2.3rem)}
.h-md{font-size:clamp(1.35rem,2.8vw,1.75rem)}
em{font-style:italic}
.h-xl em,.h-lg em{color:var(--accent)}

p{margin:0 0 1rem}
.lede{font-size:1.0625rem;color:var(--muted);max-width:var(--measure)}
.prose-muted{color:var(--ink-soft);max-width:var(--measure)}

.kicker{
  font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:500;color:var(--muted);margin:0 0 .35rem;
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* -------------------------------------------------- 3  Layout */
.wrap{width:min(100% - 2.5rem,var(--shell));margin-inline:auto}
.wrap--narrow{width:min(100% - 2.5rem,46rem);margin-inline:auto}
.section{padding:clamp(3rem,7vw,5rem) 0}
.section--tight{padding:clamp(2rem,4vw,3rem) 0}
.section--deep{background:var(--deep)}
.rule{border:0;border-top:1px solid var(--line-faint);margin:0}

/* two-column: sticky rail + main */
.stage{
  display:grid;grid-template-columns:16.5rem 1fr;
  gap:clamp(2rem,5vw,4.5rem);padding-bottom:clamp(3rem,7vw,5rem);
}
@media(max-width:900px){.stage{grid-template-columns:1fr;gap:2rem}}

/* -------------------------------------------------- 4  Masthead & navigation */
.masthead{
  position:sticky;top:0;z-index:60;
  background:rgba(247,249,250,.85);backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease);
}
.masthead.is-stuck{border-bottom-color:var(--line-faint)}
.masthead .wrap{display:flex;align-items:center;gap:2rem;height:4.5rem}
.mark{display:flex;align-items:baseline;gap:.6rem;text-decoration:none;flex:0 0 auto}
.mark b{font-family:var(--serif);font-weight:400;font-size:1.3rem;letter-spacing:-.01em}
.mark span{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
@media(max-width:520px){.mark span{display:none}}

.nav{display:flex;gap:1.9rem;margin-left:auto;align-items:center}
.nav a{
  text-decoration:none;font-size:.875rem;color:var(--ink-soft);
  padding-bottom:.15rem;border-bottom:1px solid transparent;
  transition:color .25s,border-color .25s;
}
.nav a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.nav a[aria-current]{color:var(--accent);border-bottom-color:var(--accent)}

.navtoggle{display:none;all:unset;cursor:pointer;margin-left:auto;padding:.5rem;
  font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
@media(max-width:760px){
  .navtoggle{display:block}
  .nav{
    position:absolute;top:4.5rem;left:0;right:0;margin:0;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);
    padding:.5rem 1.25rem 1.25rem;display:none;
  }
  .nav.is-open{display:flex}
  .nav a{padding:.7rem 0;width:100%;border-bottom:1px solid var(--line-faint)}
}

/* -------------------------------------------------- 5  Hero */
.hero{position:relative;padding:clamp(2.75rem,6vw,4.5rem) 0 clamp(1.5rem,3vw,2.5rem);overflow:hidden}
.hero__light{
  position:absolute;inset:-12rem 0 auto;height:32rem;pointer-events:none;
  background:
    radial-gradient(52% 44% at 44% 32%,rgba(255,255,255,.9),rgba(255,255,255,0) 70%),
    radial-gradient(44% 38% at 68% 22%,rgba(47,111,102,.085),rgba(47,111,102,0) 72%),
    radial-gradient(50% 42% at 26% 28%,rgba(118,158,190,.10),rgba(118,158,190,0) 72%);
}
.hero .wrap{position:relative}
.hero h1{margin:.9rem 0 0;max-width:18ch}
.hero .lede{margin-top:1.15rem}

/* page header for interior pages */
.pagehead{padding:clamp(2rem,4vw,3rem) 0 clamp(1.25rem,2.5vw,2rem);position:relative}
.pagehead h1{margin:.5rem 0 0;max-width:24ch}
.pagehead .lede{margin-top:.9rem}

/* -------------------------------------------------- 6  The road */
.road{position:sticky;top:6.5rem;align-self:start}
.rail{position:relative;padding-left:1.6rem;margin-top:1.25rem}
.rail::before{content:"";position:absolute;left:.3rem;top:.8rem;bottom:.8rem;width:1px;background:var(--line)}
.rail__fill{position:absolute;left:.3rem;top:.8rem;width:1px;background:var(--accent);border-radius:1px;
  transition:height .55s var(--ease)}
.stop{
  display:block;position:relative;text-decoration:none;
  padding:.62rem 0;font-size:.9375rem;color:var(--muted);
  transition:color .3s var(--ease);
}
.stop::before{
  content:"";position:absolute;left:-1.6rem;top:50%;transform:translate(-50%,-50%);
  width:7px;height:7px;border-radius:50%;background:var(--paper);
  box-shadow:0 0 0 1px var(--line) inset,0 0 0 1px var(--line);
  transition:box-shadow .35s var(--ease),background-color .35s var(--ease);
}
.stop:hover{color:var(--ink-soft)}
.stop:hover::before{box-shadow:0 0 0 1px var(--accent) inset,0 0 0 1px var(--accent)}
.stop.is-here{color:var(--ink);font-weight:500}
.stop.is-here::before{background:var(--accent);
  box-shadow:0 0 0 1px var(--accent) inset,0 0 0 4px rgba(47,111,102,.15)}
.stop:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* homepage road: larger, serif, the main event */
.rail--lead .stop{font-family:var(--serif);font-size:clamp(1.1rem,2.4vw,1.4rem);
  font-weight:300;color:var(--ink);padding:.85rem 0;line-height:1.35}
.rail--lead .stop:hover{color:var(--accent);padding-left:.6rem}
.rail--lead .stop{transition:color .3s var(--ease),padding-left .35s var(--ease)}
.rail--lead .stop small{
  display:block;font-family:var(--sans);font-size:.8125rem;color:var(--muted);
  font-weight:400;margin-top:.15rem;letter-spacing:0;
}

@media(max-width:900px){
  .road{position:static}
  .rail{display:flex;gap:.45rem;padding:0 0 .5rem;margin-top:.75rem;
    overflow-x:auto;scrollbar-width:none}
  .rail::-webkit-scrollbar{display:none}
  .rail::before,.rail__fill{display:none}
  .stop{flex:0 0 auto;padding:.45rem .9rem;border:1px solid var(--line);
    border-radius:99px;white-space:nowrap;font-size:.875rem}
  .stop::before{display:none}
  .stop.is-here{background:var(--accent);color:#fff;border-color:var(--accent)}
  .rail--lead{flex-direction:column;overflow:visible}
  .rail--lead .stop{width:100%;white-space:normal;border-radius:var(--radius);padding:.85rem 1rem}
}

/* -------------------------------------------------- 7  Verse */
.verse{border-left:2px solid var(--accent);padding:.15rem 0 .15rem 1.2rem;margin:0 0 1.75rem;max-width:36rem}
.verse p{font-family:var(--serif);font-style:italic;font-weight:300;font-size:1.2rem;
  line-height:1.5;margin:0}
.verse cite{display:block;margin-top:.6rem;font-family:var(--sans);font-style:normal;
  font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}

/* -------------------------------------------------- 8  Video embed facade */
.embed{
  position:relative;aspect-ratio:16/9;width:100%;background:#0d1413;
  border-radius:var(--radius);overflow:hidden;margin:0 0 .9rem;
}
.embed img{width:100%;height:100%;object-fit:cover;opacity:.82;
  transition:opacity .4s var(--ease),transform .6s var(--ease)}
.embed iframe{width:100%;height:100%;border:0;display:block}
.embed__play{
  all:unset;position:absolute;inset:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.embed__play::after{
  content:"";width:4.5rem;height:4.5rem;border-radius:50%;
  background:rgba(255,255,255,.94);
  box-shadow:0 8px 30px -8px rgba(0,0,0,.5);
  transition:transform .35s var(--ease),background-color .3s;
  background-image:linear-gradient(transparent,transparent);
}
.embed__play::before{
  content:"";position:absolute;z-index:1;
  border-style:solid;border-width:.62rem 0 .62rem 1.05rem;
  border-color:transparent transparent transparent var(--accent-deep);
  margin-left:.28rem;transition:transform .35s var(--ease);
}
.embed:hover img{opacity:.7;transform:scale(1.02)}
.embed:hover .embed__play::after{transform:scale(1.07)}
.embed__play:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.embed--wide{max-width:100%}

/* -------------------------------------------------- 9  Video cards
   Format follows the current live lifesfocus.com card:
   thumbnail (topic badge + duration) / channel · teacher / title / keyword tags  */
.vgrid{
  display:grid;gap:clamp(1.5rem,3vw,2.25rem);
  grid-template-columns:repeat(auto-fill,minmax(16.5rem,1fr));
}
.vgrid--2{grid-template-columns:repeat(auto-fill,minmax(21rem,1fr))}

.vcard{display:flex;flex-direction:column;min-width:0}
.vcard__media{
  position:relative;display:block;aspect-ratio:16/9;border-radius:var(--radius);
  overflow:hidden;background:var(--deep);margin-bottom:.85rem;
  text-decoration:none;
}
.vcard__media img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.88) contrast(.98);
  transition:filter .45s var(--ease),transform .6s var(--ease);
}
.vcard:hover .vcard__media img{filter:none;transform:scale(1.035)}
.vcard__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,18,17,.55),rgba(10,18,17,0) 42%);
  opacity:.9;transition:opacity .4s;
}
.vcard__topic{
  position:absolute;top:.6rem;left:.6rem;z-index:2;
  background:rgba(255,255,255,.94);color:var(--accent-deep);
  font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  padding:.28rem .55rem;border-radius:2px;
}
.vcard__time{
  position:absolute;bottom:.6rem;right:.6rem;z-index:2;
  background:rgba(10,18,17,.78);color:#fff;
  font-size:.6875rem;font-weight:500;font-variant-numeric:tabular-nums;
  padding:.18rem .45rem;border-radius:2px;letter-spacing:.02em;
}
.vcard__chan{
  font-size:.75rem;color:var(--muted);margin:0 0 .35rem;
  text-transform:none;letter-spacing:.01em;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.vcard__title{
  font-family:var(--serif);font-size:1.0625rem;font-weight:400;line-height:1.32;
  letter-spacing:-.01em;margin:0 0 .6rem;
}
.vcard__title a{
  text-decoration:none;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .4s var(--ease),color .3s;
}
.vcard:hover .vcard__title a{background-size:100% 1px;color:var(--accent)}
.vcard__tags{
  list-style:none;display:flex;flex-wrap:wrap;gap:.3rem;
  margin:auto 0 0;padding:0;
}
.vcard__tags li{margin:0}
.vcard__tags a{
  display:inline-block;text-decoration:none;
  font-size:.6875rem;color:var(--muted);
  border:1px solid var(--line);border-radius:99px;padding:.12rem .5rem;
  transition:border-color .25s,color .25s,background-color .25s;
}
.vcard__tags a:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-wash)}

/* featured variant: one big card */
.vcard--lead .vcard__title{font-size:clamp(1.25rem,2.4vw,1.6rem);line-height:1.26}
.vcard--lead .vcard__chan{font-size:.8125rem}

/* -------------------------------------------------- 10  Compact video rows */
.vrow{
  display:grid;grid-template-columns:7.5rem 1fr auto;gap:1.1rem;align-items:center;
  padding:.85rem .3rem;border-bottom:1px solid var(--line-faint);text-decoration:none;
  transition:background-color .3s,padding-left .35s var(--ease);
}
.vrow:hover{background:var(--accent-wash);padding-left:.8rem}
.vrow__thumb{aspect-ratio:16/9;border-radius:2px;overflow:hidden;background:var(--deep)}
.vrow__thumb img{width:100%;height:100%;object-fit:cover;filter:saturate(.85);transition:filter .4s}
.vrow:hover .vrow__thumb img{filter:none}
.vrow__t{font-family:var(--serif);font-size:1.0625rem;font-weight:400;line-height:1.3;
  display:block;margin-bottom:.15rem}
.vrow:hover .vrow__t{color:var(--accent)}
.vrow__b{font-size:.8125rem;color:var(--muted);display:block}
.vrow__len{font-size:.75rem;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
@media(max-width:560px){.vrow{grid-template-columns:5.5rem 1fr;gap:.9rem}.vrow__len{display:none}}

/* -------------------------------------------------- 11  Chips & filters */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:.75rem 0 0}
.chip{
  display:inline-block;text-decoration:none;cursor:pointer;
  padding:.42rem .95rem;border-radius:99px;border:1px solid var(--line);
  font-family:var(--sans);font-size:.875rem;color:var(--ink-soft);background:none;
  transition:border-color .28s,color .28s,background-color .28s;white-space:nowrap;
}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip.is-on,.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.chip__x{opacity:.7;margin-left:.35rem}

.facets{display:grid;gap:1.75rem}
.facet__q{font-size:.9375rem;color:var(--ink-soft);margin:0;font-weight:500}
.filterbar{
  display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;
  padding:.9rem 0;border-top:1px solid var(--line-faint);border-bottom:1px solid var(--line-faint);
  margin:1.5rem 0;font-size:.875rem;color:var(--muted);
}

/* -------------------------------------------------- 12  Sections & headers */
.sechead{display:flex;justify-content:space-between;align-items:baseline;gap:2rem;
  flex-wrap:wrap;margin-bottom:clamp(1.5rem,3vw,2.25rem)}
.sechead h2{margin:.35rem 0 0}
.link{
  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  font-size:.8125rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent);padding-bottom:.3rem;border-bottom:1px solid rgba(47,111,102,.3);
  transition:border-color .3s,gap .3s var(--ease);
}
.link:hover{border-bottom-color:var(--accent);gap:.85rem}
.btn{
  display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;
  background:var(--accent);color:#fff;padding:.75rem 1.4rem;border-radius:3px;
  font-size:.875rem;font-weight:500;border:0;cursor:pointer;font-family:var(--sans);
  transition:background-color .3s,gap .3s var(--ease);
}
.btn:hover{background:var(--accent-deep);gap:.9rem}
.btn--ghost{background:none;color:var(--accent);border:1px solid var(--line)}
.btn--ghost:hover{background:var(--accent-wash);border-color:var(--accent)}

/* -------------------------------------------------- 13  Article prose */
.prose{max-width:var(--measure);font-size:1.0625rem;color:var(--ink-soft)}
.prose h2{font-size:1.5rem;margin:2.5rem 0 .85rem;color:var(--ink)}
.prose h3{font-size:1.2rem;margin:2rem 0 .6rem;color:var(--ink)}
.prose p{margin:0 0 1.15rem;line-height:1.72}
.prose ul,.prose ol{margin:0 0 1.15rem;padding-left:1.3rem}
.prose li{margin:.35rem 0}
.prose blockquote{margin:1.75rem 0;padding-left:1.2rem;border-left:2px solid var(--accent)}
.prose blockquote p{font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:1.15rem;color:var(--ink)}
.prose a{color:var(--accent)}
.byline{font-size:.8125rem;color:var(--muted);margin:.75rem 0 0}

/* -------------------------------------------------- 14  Next-step band */
.next{
  margin:2.5rem 0 0;padding:1.6rem 1.75rem;background:var(--deep);border-radius:var(--radius);
  display:flex;gap:1.5rem;align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.next p{margin:0;font-family:var(--serif);font-size:1.15rem;font-weight:300;
  line-height:1.4;max-width:32ch}
.panelcard{background:var(--panel);border:1px solid var(--line-faint);
  border-radius:var(--radius);padding:1.5rem}

/* -------------------------------------------------- 15  Forms */
.search{display:flex;align-items:center;gap:.75rem;border-bottom:1px solid var(--line);
  max-width:32rem;transition:border-color .3s}
.search:focus-within{border-bottom-color:var(--accent)}
.search input{all:unset;flex:1;padding:.7rem 0;font-family:var(--sans);font-size:1rem;color:var(--ink)}
.search input::placeholder{color:var(--muted);opacity:.75}
.search button{all:unset;cursor:pointer;font-size:.75rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);padding:.4rem 0}
.formfield{display:block;margin:0 0 1.25rem;max-width:32rem}
.formfield span{display:block;font-size:.8125rem;color:var(--muted);margin-bottom:.4rem}
.formfield input,.formfield textarea{
  width:100%;font-family:var(--sans);font-size:1rem;color:var(--ink);
  background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:.7rem .85rem;
}
.formfield textarea{min-height:8rem;resize:vertical}
.formfield input:focus,.formfield textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}

/* -------------------------------------------------- 16  Pagination & breadcrumbs */
.crumb{font-size:.8125rem;color:var(--muted);margin:0;padding:1rem 0 0}
.crumb a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent}
.crumb a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.crumb span{opacity:.5;margin:0 .45rem}
.pager{display:flex;gap:.5rem;justify-content:center;margin-top:2.5rem}
.pager a,.pager span{
  min-width:2.25rem;text-align:center;padding:.4rem .6rem;text-decoration:none;
  font-size:.875rem;border:1px solid var(--line);border-radius:3px;color:var(--ink-soft);
}
.pager .is-here{background:var(--accent);border-color:var(--accent);color:#fff}
.pager a:hover{border-color:var(--accent);color:var(--accent)}

/* -------------------------------------------------- 17  Footer */
.sitefoot{border-top:1px solid var(--line);padding:3.5rem 0 4rem;font-size:.875rem;margin-top:2rem}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2.5rem}
@media(max-width:760px){.fgrid{grid-template-columns:1fr 1fr;gap:2rem}}
.fgrid h4{font-family:var(--sans);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 1rem;font-weight:500}
.fgrid a{display:block;text-decoration:none;color:var(--ink-soft);padding:.28rem 0;transition:color .25s}
.fgrid a:hover{color:var(--accent)}
.colophon{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line-faint);
  color:var(--muted);font-size:.8125rem;display:flex;justify-content:space-between;
  gap:1rem;flex-wrap:wrap}

/* -------------------------------------------------- 18  Utilities & motion */
.stack>*+*{margin-top:1rem}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.center{text-align:center}
.empty{padding:3rem 0;text-align:center;color:var(--muted);max-width:34rem;margin-inline:auto}

.reveal{opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}