/*
Theme Name: SelfCraftedLife
Theme URI: https://selfcraftedlife.com
Author: Dilip Thakali
Description: Dark, cinematic personal-finance journey theme with a dynamic net-worth dashboard (Monthly Updates, milestones, YouTube feed, newsletter).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: selfcraftedlife
*/

:root{--navy9:#0a1020;--navy8:#0f1a30;--navy7:#16233f;--line:#22304d;--gold:#f2b84b;--green:#1f7a5c;--light:#f7f9fb;--ink:#0f1a30;--muted:#9aa7bd;--r:12px;--w:1180px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:16px/1.6 Inter,system-ui,-apple-system,Segoe UI,sans-serif;background:var(--navy9);color:#fff;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:Montserrat,Inter,sans-serif;line-height:1.15;margin:0}
.wrap{max-width:var(--w);margin:0 auto;padding:0 24px}
.icon{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.screen-reader-text{position:absolute;left:-9999px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.6em;padding:.85em 1.6em;border-radius:999px;font:700 .8rem Montserrat,sans-serif;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border:1.5px solid var(--gold);cursor:pointer;transition:transform .2s,background .2s}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:var(--gold);color:var(--navy9)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-sm{padding:.6em 1.3em}

/* Section titles */
.sec-title{font:800 1rem Montserrat,sans-serif;letter-spacing:.2em;text-transform:uppercase;padding-bottom:.7rem;position:relative;margin-bottom:1.4rem}
.sec-title::after{content:"";position:absolute;left:0;bottom:0;width:34px;height:3px;background:var(--gold)}
.sec-title small{display:block;color:var(--muted);font-size:.7rem;letter-spacing:.2em;margin-top:.3rem}

/* Header */
.site-header{position:fixed;inset:0 0 auto 0;z-index:60;transition:background .3s,box-shadow .3s}
.site-header.solid,body:not(.home) .site-header{background:rgba(10,16,32,.96);box-shadow:0 1px 0 var(--line)}
.header-in{display:flex;align-items:center;gap:2rem;height:76px}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;font:400 1.7rem Caveat,cursive;color:#fff;margin-right:auto}
.logo svg{width:44px;height:30px;stroke:#fff;fill:none;stroke-width:1.6}
.main-nav ul{display:flex;gap:1.8rem;list-style:none;margin:0;padding:0}
.main-nav a{text-decoration:none;font:600 .72rem Montserrat,sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:.5rem 0;color:#e5eaf3}
.main-nav .current-menu-item>a,.main-nav a:hover{color:var(--gold);box-shadow:0 2px 0 var(--gold)}
.icon-btn{background:none;border:0;color:#fff;cursor:pointer;padding:.4rem}
.nav-toggle{display:none}
.search-overlay{position:fixed;inset:0;background:rgba(10,16,32,.96);z-index:80;display:none;align-items:center;justify-content:center}
.search-overlay.open{display:flex}
.search-overlay input[type=search]{width:min(600px,86vw);padding:1rem 1.2rem;font-size:1.3rem;border-radius:var(--r);border:1px solid var(--line);background:var(--navy8);color:#fff}
.search-overlay input[type=submit]{display:none}

/* Hero */
.hero{position:relative;min-height:640px;display:flex;align-items:center;padding:130px 0 70px;background:linear-gradient(135deg,#1b2845 0%,#3a2f4d 55%,#7a4a3a 100%) center/cover no-repeat}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,16,32,.92) 0%,rgba(10,16,32,.65) 45%,rgba(10,16,32,.05) 100%),linear-gradient(0deg,var(--navy9) 0%,transparent 25%)}
.hero .wrap{position:relative;width:100%}
.hero-label{font:600 .8rem Montserrat;letter-spacing:.55em;text-transform:uppercase;margin-bottom:1.2rem}
.hero h1{font-weight:800;font-size:clamp(2.4rem,5.4vw,4.2rem);text-transform:uppercase;max-width:620px}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero h2{font:700 clamp(1.1rem,2vw,1.5rem) Inter;margin:1rem 0 1.4rem}
.hero-dates{display:flex;align-items:center;gap:1rem;font:600 .8rem Montserrat;letter-spacing:.25em}
.hero-dates::before{content:"";width:44px;height:3px;background:var(--gold)}
.hero p.lead{max-width:440px;margin:1.4rem 0 1.8rem;color:#dbe2ee;white-space:pre-line}
.hero-btns{display:flex;gap:1rem;flex-wrap:wrap}
.hero-quote{position:absolute;right:24px;bottom:-10px;transform:rotate(-7deg);font:400 1.7rem/1.25 Caveat,cursive;text-align:right;max-width:240px}
.hero-quote cite{display:block;font:400 .85rem Inter;font-style:normal;margin-top:.4rem;color:#cbd3e1}

/* Challenge dashboard */
.challenge{background:var(--navy9);border-top:1px solid var(--line);padding:2.6rem 0}
.challenge .wrap{display:grid;grid-template-columns:1.7fr 1fr;gap:3rem;align-items:start}
.ch-title{font:800 1.5rem Montserrat;text-transform:uppercase;letter-spacing:.04em}
.ch-title b{color:var(--gold)}
.ch-meta{font:600 .75rem Montserrat;letter-spacing:.2em;margin:.6rem 0 1.8rem;text-transform:uppercase}
.ch-meta i{margin:0 .8rem;opacity:.4;font-style:normal}
.nw-row{display:flex;justify-content:space-between;align-items:flex-end;color:#dbe2ee;font-size:.85rem}
.nw-now,.nw-target{font:800 1.9rem Montserrat;color:#fff;display:block}
.nw-target{font-size:1.4rem;text-align:right}
.bar{height:14px;background:#233252;border-radius:999px;margin:.8rem 0 .4rem;overflow:hidden}
.bar>span{display:block;height:100%;width:0;background:linear-gradient(90deg,#c98d1d,var(--gold));border-radius:999px;transition:width 1.6s cubic-bezier(.2,.7,.2,1)}
.bar-pct{font:600 .75rem Montserrat}
.milestones{display:grid;grid-template-columns:repeat(4,1fr);margin-top:1.4rem;gap:0}
.ms{padding:0 1rem;border-left:1px solid var(--line);color:#9aa7bd}
.ms:first-child{padding-left:0;border:0}
.ms .icon{width:26px;height:26px;margin-bottom:.4rem}
.ms strong{display:block;font:700 1rem Montserrat;color:#e5eaf3}
.ms span{display:block;font-size:.75rem}
.ms.done{color:var(--gold)}
.ms.done strong{color:var(--gold)}
.situation{border:1px solid var(--line);border-radius:var(--r);padding:1.4rem 1.6rem;background:var(--navy8)}
.situation h3{font:800 .85rem Montserrat;letter-spacing:.15em;text-transform:uppercase;padding-bottom:.6rem;position:relative;margin-bottom:.6rem}
.situation h3::after{content:"";position:absolute;left:0;bottom:0;width:26px;height:2px;background:var(--gold)}
.sit-row{display:flex;align-items:center;gap:.9rem;padding:.85rem 0;border-bottom:1px solid var(--line);font-size:.85rem;color:#c5cddd}
.sit-row:last-child{border:0}
.sit-row .icon{color:var(--gold);width:22px;height:22px}
.sit-row b{margin-left:auto;font:600 .95rem Inter;color:#fff;text-align:right}

/* Pillars */
.light{background:var(--light);color:var(--ink);padding:3rem 0}
.pillars-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.pillars-head p{margin:0 0 1.4rem}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.pillar{background:#fff;border-radius:var(--r);box-shadow:0 4px 18px rgba(15,26,48,.08);overflow:hidden;position:relative;transition:transform .2s}
.pillar:hover{transform:translateY(-4px)}
.pillar-img{height:150px;background:linear-gradient(135deg,#1b2845,#2b3b60) center/cover no-repeat}
.badge{position:absolute;left:20px;top:112px;width:50px;height:50px;border-radius:50%;background:var(--navy8);color:#fff;display:grid;place-items:center;border:3px solid #fff}
.pillar-body{padding:2rem 1.4rem 1.3rem}
.pillar h3{font:800 1.1rem Montserrat;letter-spacing:.04em}
.pillar p{margin:.2rem 0 .8rem;color:#55627a;font-size:.88rem}
.pillar a{color:var(--green);font-weight:600;font-size:.82rem;text-decoration:none}

/* Update + video */
.update-video{display:grid;grid-template-columns:1fr 1fr;gap:0;background:#fff;color:var(--ink);border-top:1px solid #e6ebf2}
.update-video>div{padding:2.2rem 0}
.uv-left{padding-right:2.4rem!important}
.uv-right{padding-left:2.4rem!important;border-left:1px solid #e6ebf2}
.uv-wrap{max-width:calc(var(--w)/2);}
.uv-left .uv-wrap{margin-left:auto;padding-left:24px}
.uv-right .uv-wrap{margin-right:auto;padding-right:24px}
.upd-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid #e3e9f1;border-radius:var(--r);background:#fbfcfe}
.upd-item{display:flex;gap:.9rem;align-items:center;padding:1rem 1.2rem;border-bottom:1px solid #e3e9f1}
.upd-item:nth-child(odd){border-right:1px solid #e3e9f1}
.upd-item:nth-last-child(-n+2){border-bottom:0}
.upd-item .icon{color:var(--green);width:26px;height:26px}
.upd-item small{display:block;color:#66728a;font-size:.72rem}
.upd-item b{font:800 1.1rem Montserrat}
.focus{margin-top:1rem;background:#e7f2ee;border:1px solid #cfe5dd;border-radius:var(--r);padding:1rem 1.2rem;display:flex;gap:1rem;position:relative}
.focus>.icon{color:var(--green);width:32px;height:32px}
.focus h4{font:700 .72rem Inter;margin-bottom:.4rem}
.focus ul{list-style:none;margin:0;padding:0;font-size:.74rem;color:#35524a}
.focus li{display:flex;gap:.4rem;align-items:center}
.focus li .icon{width:12px;height:12px;color:var(--green)}
.focus li.todo{opacity:.65}
.focus a{position:absolute;right:1.2rem;bottom:.8rem;font-size:.72rem;font-weight:600;color:var(--green);text-decoration:none}
.video{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:16/8.3;background:linear-gradient(135deg,#1b2845,#3a2f4d) center/cover;display:block;width:100%;border:0;padding:0;cursor:pointer;color:#fff;text-align:left}
.video::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,16,32,.85),rgba(10,16,32,.1))}
.video .v-title{position:absolute;left:1.4rem;top:1.6rem;font:800 1.1rem/1.2 Montserrat;max-width:60%;text-transform:uppercase}
.video .v-title em{display:block;color:var(--gold);font-style:normal;font-size:1.5rem}
.video .v-play{position:absolute;left:62%;top:50%;transform:translate(-50%,-50%);width:58px;height:40px;background:#ff1f1f;border-radius:12px;display:grid;place-items:center}
.video .v-play .icon{fill:#fff;stroke:none;width:20px;height:20px}
.video-meta h4{font:700 .95rem Inter;margin:.8rem 0 .2rem}
.video-meta p{margin:0;font-size:.8rem;color:#66728a}
.video-meta a{display:inline-block;margin-top:.6rem;color:var(--green);font-weight:600;font-size:.82rem;text-decoration:none}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:90;display:none;align-items:center;justify-content:center;padding:1rem}
.lightbox.open{display:flex}
.lightbox iframe{width:min(960px,100%);aspect-ratio:16/9;border:0;border-radius:var(--r)}
.lightbox .close{position:absolute;top:18px;right:24px;font-size:2rem;background:none;border:0;color:#fff;cursor:pointer}

/* Blog + newsletter strip */
.strip{display:grid;grid-template-columns:1.25fr 1fr;background:var(--navy8)}
.strip>div{padding:2rem 0}
.blog-box{padding-left:max(24px,calc((100vw - var(--w))/2 + 24px))!important;padding-right:2rem!important}
.blog-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.9rem}
.blog-head h3{font:800 .9rem Montserrat;letter-spacing:.15em;text-transform:uppercase}
.blog-head a{font-size:.7rem;color:var(--muted);text-decoration:none}
.blog-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem}
.bc{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--navy9);text-decoration:none;font-size:.72rem;transition:transform .2s}
.bc:hover{transform:translateY(-3px)}
.bc-img{height:82px;background:linear-gradient(135deg,#1b2845,#3a2f4d) center/cover}
.bc-body{padding:.6rem}
.bc-cat{display:inline-block;background:var(--green);color:#fff;font-size:.58rem;padding:.1rem .45rem;border-radius:3px;text-transform:uppercase;letter-spacing:.06em}
.bc h4{font:600 .78rem/1.3 Inter;margin:.35rem 0}
.bc time{color:var(--muted);font-size:.65rem}
.news-box{background:linear-gradient(135deg,#102340,#0f1a30);padding-left:2.4rem!important;padding-right:max(24px,calc((100vw - var(--w))/2 + 24px))!important;border-left:1px solid var(--line)}
.news-box h3{font:800 .9rem Montserrat;letter-spacing:.15em;text-transform:uppercase;margin-bottom:.6rem}
.news-box p{font-size:.8rem;color:#c5cddd;margin:0 0 1rem;max-width:380px}
.news-form{display:flex;max-width:520px}
.news-form input[type=email]{flex:1;padding:.8rem 1rem;border:0;border-radius:6px 0 0 6px;font-size:.85rem;min-width:0}
.news-form button{border:0;background:var(--gold);color:var(--navy9);font:800 .7rem Montserrat;letter-spacing:.08em;text-transform:uppercase;padding:0 1.3rem;border-radius:0 6px 6px 0;cursor:pointer}
.news-form .hp{position:absolute;left:-9999px}
.consent{display:flex;gap:.5rem;font-size:.7rem;color:#c5cddd;margin-top:.7rem;align-items:flex-start}
.news-msg{font-size:.78rem;margin-top:.6rem;min-height:1.2em}
.news-note{font-size:.68rem;color:var(--muted);margin-top:.4rem}

/* Footer */
.site-footer{background:var(--navy9);border-top:1px solid var(--line);padding:1.6rem 0 1rem;font-size:.75rem}
.foot-in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.foot-brand .logo{font-size:1.4rem}
.foot-brand p{margin:.2rem 0 0;color:var(--muted)}
.foot-nav ul{display:flex;gap:1.1rem;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.foot-nav a{text-decoration:underline;text-underline-offset:3px}
.socials{display:flex;gap:1rem}
.socials a{color:#fff}
.legal{text-align:right;color:var(--muted);font-size:.65rem;margin-top:.8rem}
.legal a{margin-left:.8rem}

/* Inner pages */
.page-main{padding:130px 0 70px;min-height:60vh}
.page-main.light{background:var(--light)}
.entry{max-width:760px}
.entry h1{font:800 clamp(1.8rem,4vw,2.6rem) Montserrat;margin-bottom:1rem}
.entry .meta{color:#66728a;font-size:.85rem;margin-bottom:1.6rem}
.entry .content{font-size:1.05rem;line-height:1.8}
.entry .content h2,.entry .content h3{margin:2rem 0 .8rem}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.post-card{background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:0 4px 18px rgba(15,26,48,.08);text-decoration:none;color:var(--ink)}
.post-card .bc-img{height:160px}
.post-card div.in{padding:1rem 1.2rem}
.post-card h2{font:700 1.05rem/1.3 Inter;margin:.4rem 0}
.post-card time{font-size:.75rem;color:#66728a}
.disclaimer{max-width:760px;margin-top:2rem;padding:1rem 1.2rem;border-left:3px solid var(--gold);background:#fff8e8;color:#5a4510;font-size:.85rem}

/* Responsive */
@media(max-width:980px){
  .nav-toggle{display:block}
  .main-nav{position:fixed;inset:76px 0 auto 0;background:var(--navy9);padding:1rem 24px 1.6rem;display:none;border-bottom:1px solid var(--line)}
  .main-nav.open{display:block}
  .main-nav ul{flex-direction:column;gap:.4rem}
  .header-join{display:none}
  .challenge .wrap,.update-video,.strip{grid-template-columns:1fr}
  .update-video>div{padding:1.8rem 24px!important}
  .uv-right{border-left:0;border-top:1px solid #e6ebf2}
  .uv-left .uv-wrap,.uv-right .uv-wrap{margin:0;padding:0;max-width:none}
  .blog-box,.news-box{padding:1.8rem 24px!important}
  .pillars,.post-grid{grid-template-columns:1fr}
  .milestones{grid-template-columns:1fr 1fr;gap:1.2rem 0}
  .ms:nth-child(3){padding-left:0;border:0}
  .blog-cards{grid-template-columns:1fr 1fr}
  .hero-quote{position:static;transform:none;text-align:left;margin-top:2rem}
  .legal{text-align:left}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}