/*
Theme Name: DrawBuds
Description: Theme for a free printable children's drawing and tracing book site. Books are a custom post type; the shelf and every cover are drawn with CSS 3D transforms.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: drawbuds
*/
/* ── tokens: crayon box on warm paper ───────────────────────────── */
:root{
  --paper:#FFFCF5;
  --paper-2:#FFF7E8;
  --card:#FFFFFF;
  --ink:#1E1B32;
  --ink-soft:#5B5670;
  --muted:#8B8579;
  --rule:#EBE3D3;
  --crayon-red:#FF5A3C;
  --crayon-sky:#2E9BD6;
  --crayon-sun:#F2B705;
  --crayon-grass:#3FA96A;
  --crayon-grape:#7A5CD6;
  --shadow-lo:0 2px 6px rgba(30,27,50,.07);
  --shadow-hi:0 22px 44px -18px rgba(30,27,50,.34);
  --edge:rgba(30,27,50,.10);
  --desk:linear-gradient(180deg,#FFF7E8 0%,#FFFCF5 62%);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#16142A;
    --paper-2:#1D1A36;
    --card:#221E3D;
    --ink:#F4F0FF;
    --ink-soft:#B9B2D6;
    --muted:#8B85A8;
    --rule:#332D55;
    --crayon-red:#FF7358;
    --crayon-sky:#54B4E8;
    --crayon-sun:#FFC933;
    --crayon-grass:#5CC286;
    --crayon-grape:#9B80F0;
    --shadow-lo:0 2px 6px rgba(0,0,0,.4);
    --shadow-hi:0 22px 44px -18px rgba(0,0,0,.72);
    --edge:rgba(255,255,255,.13);
    --desk:linear-gradient(180deg,#1D1A36 0%,#16142A 62%);
  }
}
:root[data-theme="dark"]{
  --paper:#16142A; --paper-2:#1D1A36; --card:#221E3D;
  --ink:#F4F0FF; --ink-soft:#B9B2D6; --muted:#8B85A8; --rule:#332D55;
  --crayon-red:#FF7358; --crayon-sky:#54B4E8; --crayon-sun:#FFC933;
  --crayon-grass:#5CC286; --crayon-grape:#9B80F0;
  --shadow-lo:0 2px 6px rgba(0,0,0,.4);
  --shadow-hi:0 22px 44px -18px rgba(0,0,0,.72);
  --edge:rgba(255,255,255,.13);
  --desk:linear-gradient(180deg,#1D1A36 0%,#16142A 62%);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 17px/1.65 Nunito,"Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
h1,h2,h3{font-family:"Baloo 2",Nunito,system-ui,sans-serif;text-wrap:balance;margin:0;line-height:1.12}
a{color:inherit}
:focus-visible{outline:3px solid var(--crayon-sky);outline-offset:3px;border-radius:6px}

.spec{
  font:500 12px/1 "IBM Plex Mono",ui-monospace,monospace;
  letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
}

/* ── top bar ────────────────────────────────────────────────────── */
.bar{border-bottom:1px solid var(--rule);background:var(--paper)}
.bar__in{display:flex;align-items:center;gap:14px;padding:15px 0}
.logo{display:flex;align-items:center;gap:9px;font:800 22px/1 "Baloo 2",sans-serif;letter-spacing:-.01em}
.logo__mark{width:32px;height:32px;flex:none;display:block}
.logo__word{color:var(--crayon-red)}
.logo__word span{color:var(--ink)}
.bar__spacer{flex:1}
.bar__link{font-weight:700;font-size:15px;color:var(--ink-soft);text-decoration:none}
.bar__link:hover{color:var(--ink)}

/* ── hero ───────────────────────────────────────────────────────── */
.hero{background:var(--desk);border-bottom:1px solid var(--rule)}
.hero__in{
  display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;
  padding:64px 0 72px;
}
.eyebrow{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--crayon-grass)}
h1{font-size:clamp(38px,5.2vw,60px);font-weight:800;letter-spacing:-.02em}
h1 em{font-style:normal;color:var(--crayon-red)}
.lede{font-size:19px;color:var(--ink-soft);margin:18px 0 0;max-width:52ch}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font:700 16px/1 Nunito,sans-serif;text-decoration:none;
  padding:15px 22px;border-radius:14px;border:2px solid transparent;cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease;
}
.btn--go{background:var(--crayon-red);color:#fff;box-shadow:0 6px 0 rgba(0,0,0,.14)}
.btn--go:hover{transform:translateY(-2px);box-shadow:0 8px 0 rgba(0,0,0,.14)}
.btn--ghost{border-color:var(--edge);color:var(--ink);background:transparent}
.btn--ghost:hover{border-color:var(--ink-soft)}
.hero__note{margin-top:18px;display:flex;gap:18px;flex-wrap:wrap}

/* ── the 3D book ────────────────────────────────────────────────── */
.stage{perspective:1400px;display:flex;justify-content:center;align-items:flex-end;min-height:390px}
.book{
  position:relative;width:250px;height:340px;
  transform-style:preserve-3d;transform:rotateX(6deg) rotateY(-26deg);
  transition:transform .55s cubic-bezier(.22,.8,.3,1);
}
.stage:hover .book{transform:rotateX(4deg) rotateY(-13deg)}
.face{position:absolute;inset:0;border-radius:5px 12px 12px 5px;backface-visibility:hidden}
.book__cover{
  background:linear-gradient(150deg,var(--crayon-sky),var(--crayon-grape));
  transform:translateZ(19px);
  box-shadow:var(--shadow-hi);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:22px 20px;color:#fff;overflow:hidden;
}
.book__cover::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(255,255,255,.34),rgba(255,255,255,0) 42%);
}
.book__title{font:800 30px/1.06 "Baloo 2",sans-serif;position:relative;z-index:1}
.book__sub{font:600 13px/1.3 Nunito,sans-serif;opacity:.9;position:relative;z-index:1}
.book__art{position:relative;z-index:1;align-self:center}
/* page stack — the thing that makes it a book and not a rectangle */
.book__pages{
  position:absolute;top:5px;bottom:5px;right:0;left:auto;width:38px;
  transform:rotateY(90deg) translateZ(19px);
  background:repeating-linear-gradient(90deg,#fff 0 2px,#E9E2D2 2px 3px);
  border-radius:2px;
}
.book__spine{
  position:absolute;top:0;bottom:0;left:0;width:38px;
  transform:rotateY(-90deg) translateZ(19px);
  background:linear-gradient(180deg,var(--crayon-grape),var(--crayon-sky));
  border-radius:6px 0 0 6px;
}
.book__shadow{
  position:absolute;left:8%;right:-6%;bottom:-26px;height:26px;
  background:radial-gradient(ellipse at 50% 50%,rgba(30,27,50,.30),transparent 68%);
  filter:blur(2px);
}

/* ── section frame ──────────────────────────────────────────────── */
section{padding:66px 0}
.head{margin-bottom:30px;max-width:60ch}
.head h2{font-size:clamp(27px,3.4vw,36px);font-weight:800;letter-spacing:-.015em}
.head p{color:var(--ink-soft);margin:10px 0 0}

/* ── shelf of books ─────────────────────────────────────────────── */
.shelf{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.item{
  background:var(--card);border:1px solid var(--rule);border-radius:16px;
  padding:18px 18px 16px;box-shadow:var(--shadow-lo);
  display:flex;flex-direction:column;gap:12px;
}
.mini{perspective:900px;height:158px;display:flex;align-items:center;justify-content:center}
.mini__book{
  position:relative;width:112px;height:150px;border-radius:4px 9px 9px 4px;
  transform:rotateY(-17deg);transform-style:preserve-3d;
  transition:transform .4s cubic-bezier(.22,.8,.3,1);
  box-shadow:var(--shadow-hi);
  display:flex;align-items:center;justify-content:center;color:#fff;
}
.item:hover .mini__book{transform:rotateY(-6deg) translateY(-5px)}
.mini__book::before{ /* page edge */
  content:"";position:absolute;top:3px;bottom:3px;right:-7px;width:8px;border-radius:2px;
  background:repeating-linear-gradient(90deg,#fff 0 2px,#E4DCCA 2px 3px);
  transform:rotateY(28deg);
}
.mini__glyph{font:800 52px/1 "Baloo 2",sans-serif;text-shadow:0 2px 0 rgba(0,0,0,.16)}
.item h3{font-size:19px;font-weight:700}
.item__row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto}
.dl{
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  font:700 14px/1 Nunito,sans-serif;color:#fff;background:var(--ink);
  padding:11px 15px;border-radius:11px;transition:background .15s ease;
}
.dl:hover{background:var(--crayon-red)}

/* ── how it works: a real 3-step sequence ───────────────────────── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;counter-reset:s}
.step{counter-increment:s;padding-top:16px;border-top:3px solid var(--rule);position:relative}
.step::before{
  content:counter(s);position:absolute;top:-16px;left:0;
  font:800 13px/26px "IBM Plex Mono",monospace;
  width:26px;height:26px;text-align:center;border-radius:50%;
  background:var(--crayon-sun);color:#1E1B32;
}
.step h3{font-size:18px;font-weight:700;margin-bottom:6px}
.step p{margin:0;color:var(--ink-soft);font-size:15.5px}

/* ── why / facts strip ──────────────────────────────────────────── */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:16px;overflow:hidden}
.fact{background:var(--card);padding:24px 22px}
.fact b{display:block;font:800 15px/1.3 "Baloo 2",sans-serif;margin-bottom:5px}
.fact p{margin:0;color:var(--ink-soft);font-size:15px}

/* ── footer ─────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--rule);background:var(--paper-2);padding:40px 0 52px}
.foot{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start;justify-content:space-between}
.foot p{margin:8px 0 0;color:var(--ink-soft);font-size:15px;max-width:46ch}
.foot nav{display:flex;flex-wrap:wrap;gap:16px}
.foot nav a{color:var(--ink-soft);font-size:15px;text-decoration:none;font-weight:600}
.foot nav a:hover{color:var(--ink)}
.soon{
  display:inline-block;margin-top:6px;padding:5px 11px;border-radius:999px;
  background:var(--crayon-grass);color:#08301C;font:700 12.5px/1 Nunito,sans-serif;
}

@media (max-width:900px){
  .hero__in{grid-template-columns:1fr;gap:36px;padding:46px 0 54px}
  .stage{order:-1;min-height:320px}
  .shelf{grid-template-columns:repeat(2,1fr)}
  .steps,.facts{grid-template-columns:1fr}
  .facts{border-radius:14px}
}
@media (max-width:520px){
  .shelf{grid-template-columns:1fr 1fr;gap:14px}
  .mini{height:132px}
  .mini__book{width:92px;height:124px}
  .mini__glyph{font-size:42px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .book{transform:rotateX(4deg) rotateY(-18deg)}
}

/* ── WordPress-specific additions ─────────────────────────────────── */
.item h3 a{color:inherit;text-decoration:none}
.item h3 a:hover{color:var(--crayon-red)}
.mini{text-decoration:none}
.mini__img{width:100%;height:100%;object-fit:cover;border-radius:4px 9px 9px 4px;display:block}
.mini__book{overflow:hidden}

/* single book page */
.book-page{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:46px;align-items:start;padding:52px 0}
.book-page__preview{border:1px solid var(--rule);border-radius:16px;overflow:hidden;background:var(--card);box-shadow:var(--shadow-lo)}
.book-page__preview img{width:100%;height:auto;display:block}
.book-page h1{font-size:clamp(30px,4vw,44px);margin-bottom:14px}
.facts-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:14px;overflow:hidden;margin:24px 0}
.facts-list div{background:var(--card);padding:14px 16px}
.facts-list dt{font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.facts-list dd{margin:0;font-weight:700;font-size:16px}

/* The download button is deliberately alone with clear space around it.
   AdSense treats an ad placed beside a download button as a violation,
   because users mistake the ad for the link. Nothing goes in this block. */
.download{margin:30px 0;padding:24px;border:2px dashed var(--rule);border-radius:16px;text-align:center}
.download .btn--go{font-size:18px;padding:17px 28px}
.download p{margin:12px 0 0;color:var(--ink-soft);font-size:15px}

.prose{max-width:66ch}
.prose h2{font-size:26px;font-weight:800;margin:34px 0 10px}
.prose h3{font-size:20px;font-weight:700;margin:26px 0 8px}
.prose p,.prose li{color:var(--ink-soft)}
.prose ul,.prose ol{padding-left:22px}

.pager{display:flex;gap:12px;justify-content:center;padding:10px 0 60px}
.pager a,.pager span{padding:10px 15px;border:1px solid var(--rule);border-radius:11px;
  text-decoration:none;font-weight:700;font-size:15px}
.pager .current{background:var(--ink);color:var(--paper);border-color:var(--ink)}

.empty{padding:46px 0;color:var(--ink-soft)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--card);padding:10px 14px;border-radius:10px;z-index:99}

@media (max-width:900px){
  .book-page{grid-template-columns:1fr;gap:30px;padding:34px 0}
}