/*
Theme Name: DotWealthy v1
Theme URI: https://dotwealthy.com/
Author: Lemon Salad Studio
Author URI: https://dotwealthy.com/about/
Description: Hand-drawn notebook style theme for DotWealthy — personal finance education, for education only. Cream paper, ink borders, mascot-forward layouts.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dotwealthy
*/

/* ============ Tokens ============ */
:root{
  --cream:#FFF6E5;
  --cream-2:#FFFDF7;
  --teal:#14B8A6;
  --teal-dark:#0E9A8C;
  --coral:#FF7A59;
  --coral-dark:#E85D3F;
  --yellow:#FFD166;
  --ink:#2B2B2B;
  --ink-soft:#4a4a4a;
  --hand:'Comic Sans MS','Chalkboard SE','Segoe Print','Bradley Hand','Comic Neue',cursive;
  --body:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

/* ============ Base ============ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  background-image:
    radial-gradient(circle at 12% 8%, rgba(20,184,166,.06) 0 3px, transparent 3px),
    radial-gradient(circle at 88% 22%, rgba(255,122,89,.08) 0 3px, transparent 3px),
    radial-gradient(circle at 70% 90%, rgba(255,209,102,.12) 0 4px, transparent 4px);
}
h1,h2,h3,h4{font-family:var(--hand);line-height:1.25;margin:0 0 .6em;color:var(--ink);font-weight:700}
p{margin:0 0 1em}
a{color:var(--teal-dark);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
.container{max-width:1080px;margin:0 auto;padding:0 20px}

/* Skip link */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:8px 14px;z-index:999}
.skip-link:focus{left:8px;top:8px}

/* ============ Hand-drawn bits ============ */
.section-title{
  font-size:2rem;display:inline-block;position:relative;padding-bottom:.15em;margin-bottom:1em;
  background:linear-gradient(transparent 62%, var(--yellow) 62%, var(--yellow) 92%, transparent 92%);
}
.dashed-rule{border:0;border-top:2px dashed #c9c2b0;margin:2.5rem auto;max-width:1080px}
.card{
  background:var(--cream-2);
  border:2.5px solid var(--ink);
  border-radius:18px 24px 20px 26px / 24px 18px 26px 20px;
  box-shadow:3px 4px 0 rgba(43,43,43,.12);
  padding:1.6rem;
}
.card:hover{transform:translateY(-2px);box-shadow:4px 6px 0 rgba(43,43,43,.14)}
.card h3{margin-top:.7em}

/* ============ Header ============ */
.site-header{padding:14px 0 6px;position:relative}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{width:52px;height:auto;display:block}
.wordmark{font-family:var(--hand);font-size:2rem;font-weight:700;color:var(--ink);line-height:1;position:relative;padding-bottom:8px}
.wordmark::after{
  content:"";position:absolute;left:2px;right:0;bottom:0;height:8px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='8' viewBox='0 0 120 8'><path d='M2 5 Q 12 1 24 4 T 46 4 T 68 5 T 90 3 T 118 5' fill='none' stroke='%23FF7A59' stroke-width='3.5' stroke-linecap='round'/></svg>") no-repeat left center/120px 8px;
}
.main-nav{display:flex;gap:26px;align-items:center}
.main-nav a{font-family:var(--hand);font-size:1.15rem;color:var(--ink);text-decoration:none;position:relative;padding:4px 2px}
.main-nav a:hover{color:var(--teal-dark);text-decoration:none}
.main-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;border-bottom:3px solid var(--coral);border-radius:3px;transition:right .2s}
.main-nav a:hover::after{right:0}
.menu-toggle{display:none;background:none;border:2.5px solid var(--ink);border-radius:12px 14px 12px 16px;font-family:var(--hand);font-size:1rem;padding:6px 14px;cursor:pointer}

/* ============ Buttons ============ */
.btn{
  display:inline-block;font-family:var(--hand);font-size:1.2rem;font-weight:700;color:#fff;
  background:var(--teal);border:2.5px solid var(--ink);
  border-radius:20px 24px 22px 26px / 26px 20px 24px 22px;
  padding:.55em 1.6em;box-shadow:3px 4px 0 rgba(43,43,43,.2);cursor:pointer;text-decoration:none;
}
.btn:hover{background:var(--teal-dark);text-decoration:none;color:#fff}
.btn-coral{background:var(--coral)}
.btn-coral:hover{background:var(--coral-dark);color:#fff}

/* ============ Hero ============ */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center;padding:2.5rem 0 1rem}
.hero h1{font-size:3.2rem;margin-bottom:.3em}
.hero .sub{font-size:1.2rem;color:var(--ink-soft);margin-bottom:1.2em}
.hero-art{position:relative;text-align:center}
.hero-art .mascot{max-width:420px;width:100%}
.doodle{position:absolute;opacity:.9}

/* ============ Sections ============ */
.section{padding:2rem 0}
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.video-card{text-align:center}
.video-thumb{
  width:74px;height:54px;margin:0 auto;border:2.5px solid var(--ink);border-radius:14px 16px 14px 18px;
  display:flex;align-items:center;justify-content:center;box-shadow:2px 3px 0 rgba(43,43,43,.15);
}
.video-thumb svg{width:26px;height:26px}
.video-card h3{font-size:1.35rem;margin:.5em 0 .2em}
.video-card p{color:var(--ink-soft);font-size:.95rem}
.empty-note{
  text-align:center;color:var(--ink-soft);font-family:var(--hand);font-size:1.15rem;
  border:2px dashed #c9c2b0;border-radius:18px;padding:1.4rem;margin-top:1.2rem;background:rgba(255,253,247,.6);
}

/* ============ Teal brush band ============ */
.brush-band{
  background:linear-gradient(180deg, rgba(20,184,166,.82), rgba(20,184,166,.9));
  border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);
  padding:2.6rem 0;margin:2.5rem 0;text-align:center;position:relative;
}
.brush-band::before,.brush-band::after{
  content:"";position:absolute;left:0;right:0;height:10px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='10' viewBox='0 0 60 10'><path d='M0 7 Q 15 2 30 6 T 60 5' fill='none' stroke='%232B2B2B' stroke-width='2'/></svg>") repeat-x;
}
.brush-band::before{top:-2px}
.brush-band::after{bottom:-2px;transform:scaleY(-1)}
.brush-band h2{color:#fff;font-size:1.9rem;margin-bottom:.8em;text-shadow:2px 2px 0 rgba(43,43,43,.25)}
.brush-band .btn{background:#fff;color:var(--ink)}
.brush-band .btn:hover{background:var(--yellow);color:var(--ink)}

/* ============ Money basics ============ */
.basics-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.basic-card{text-align:center;display:block;color:var(--ink);text-decoration:none}
.basic-card:hover{text-decoration:none}
.basic-card .icon{
  width:64px;height:64px;margin:0 auto;display:flex;align-items:center;justify-content:center;
}
.basic-card .icon svg{width:52px;height:52px}
.basic-card h3{font-size:1.5rem;margin:.4em 0 .3em}
.basic-card p{color:var(--ink-soft)}

/* ============ Content pages ============ */
.page-hero{padding:2.5rem 0 1rem;text-align:center}
.page-hero h1{font-size:2.6rem}
.page-body{max-width:760px;margin:0 auto;padding:0 20px 3rem}
.page-body h2{font-size:1.6rem;margin-top:1.8em}
.page-body ul{padding-left:1.4em}
.learn-group{margin-bottom:2.2rem}
.learn-group h2{font-size:1.7rem}
.post-list{list-style:none;padding:0;margin:0}
.post-list li{margin-bottom:.9rem}
.post-list a.card{display:block;text-decoration:none;color:var(--ink);padding:1rem 1.3rem}
.post-list a.card:hover{text-decoration:none}
.post-list .meta{font-size:.9rem;color:var(--ink-soft)}

/* ============ Calculators ============ */
.calc-wrap{display:grid;gap:2rem;margin:2rem 0}
.calc-frame{
  border:2.5px solid var(--ink);border-radius:20px 24px 22px 26px/26px 20px 26px 22px;
  overflow:hidden;box-shadow:4px 5px 0 rgba(43,43,43,.12);background:#fff;
}
.calc-frame iframe{width:100%;height:560px;border:0;display:block}
.disclaimer-note{
  font-family:var(--hand);font-size:1.05rem;background:#FFF3C4;border:2px dashed var(--ink);
  border-radius:14px;padding:.8rem 1.2rem;text-align:center;
}

/* ============ Videos ============ */
.video-single .embed{
  position:relative;padding-bottom:56.25%;height:0;overflow:hidden;
  border:2.5px solid var(--ink);border-radius:20px;margin:1.5rem 0;background:#000;
}
.video-single .embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

/* ============ Footer ============ */
.site-footer{margin-top:3rem;padding:0 0 2.5rem}
.foot-inner{text-align:center;color:var(--ink-soft);font-size:.95rem}
.foot-nav{margin:.8em 0}
.foot-nav a{color:var(--ink-soft);margin:0 .5em}
.foot-mascots{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 0 10px;font-family:var(--hand);font-size:1.05rem}
.foot-mascots img{border-radius:8px}
.foot-disclaimer{font-family:var(--hand);font-size:1.02rem}

/* ============ Cookie consent ============ */
.cookie-consent{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:9999;
  background:var(--cream-2);border:2.5px solid var(--ink);
  border-radius:18px 22px 18px 24px;padding:1rem 1.3rem;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  box-shadow:4px 5px 0 rgba(43,43,43,.18);
}
.cookie-consent[hidden]{display:none!important}
.cookie-consent p{margin:0;font-size:.95rem}
.cookie-consent .cc-btns{display:flex;gap:10px;flex-shrink:0}
.cookie-consent button{
  font-family:var(--hand);font-size:1rem;cursor:pointer;
  border:2px solid var(--ink);border-radius:12px 14px 12px 16px;padding:.35em 1.2em;background:var(--teal);color:#fff;
}
.cookie-consent button.ghost{background:#fff;color:var(--ink)}

/* ============ Responsive ============ */
@media (max-width:820px){
  .hero{grid-template-columns:1fr;text-align:center}
  .hero h1{font-size:2.5rem}
  .hero-art .mascot{max-width:300px}
  .video-grid,.basics-grid{grid-template-columns:1fr}
  .menu-toggle{display:block}
  .main-nav{
    display:none;position:absolute;top:100%;left:0;right:0;background:var(--cream-2);
    border-top:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);
    flex-direction:column;gap:0;padding:.5rem 0;z-index:50;
  }
  .main-nav.open{display:flex}
  .main-nav a{padding:.7rem 1.5rem;width:100%}
  .site-header{position:relative}
  .cookie-consent{flex-direction:column;text-align:center}
}
.section-title .topic-ico{vertical-align:middle;margin-right:12px;border-radius:12px}

/* Newsletter band (2026-10-11) */
.dw-nl-band{background:#FFF6E5;border-top:2px dashed #14B8A6;border-bottom:2px dashed #14B8A6;padding:36px 0;text-align:center}
.dw-nl-band h3{font-size:24px;margin:0 0 8px;color:#0f172a}
.dw-nl-band p{margin:0 auto 18px;max-width:560px;color:#475569;font-size:15px;line-height:1.6}
.dw-nl-band form[data-newsletter-form]{max-width:480px;margin:0 auto}
.dw-nl-band form[data-newsletter-form] button[type="submit"]{background:#14B8A6}