/*
Theme Name: Playful Publisher Custom
Theme URI: https://example.com/playful-publisher
Author: Custom Development
Description: An illustrated, full-width storybook theme for book series, games, educator resources, and creator profiles.
Version: 1.2.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: playful-publisher
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

:root { --ink:#2d2a27; --red:#cf5257; --red-deep:#af3d46; --green:#28693c; --green-bright:#35a46c; --blue:#445d73; --purple:#755d9b; --books-bg:#cf5257; --games-bg:#445d73; --resources-bg:#755d9b; --creators-bg:#35a46c; --paper:#fffef8; --book-paper:#fffef8; --content:1120px; --display:Georgia,"Times New Roman",serif; --body:Georgia,"Times New Roman",serif; }
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#eee; font-family:var(--body); font-size:18px; line-height:1.6; }
a { color:var(--red-deep); }
img { max-width:100%; height:auto; }
.screen-reader-text { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.screen-reader-text:focus { position:fixed; z-index:100000; top:8px; left:8px; width:auto; height:auto; padding:.75rem 1rem; clip:auto; background:#fff; color:#000; }

/* Floating navigation over the illustrated landing panel. */
.site-header { position:absolute; z-index:20; top:0; left:0; width:100%; padding:14px 24px; }
.site-branding { display:none; }
.main-nav ul { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 34px; margin:0; padding:0; list-style:none; }
.main-nav a { color:#202020; font-size:.95rem; font-variant:small-caps; letter-spacing:.025em; text-decoration:none; text-shadow:0 1px rgba(255,255,255,.65); }
.main-nav a:hover,.main-nav a:focus { color:var(--red-deep); text-decoration:underline; text-underline-offset:4px; }
body:not(.home) .site-header { position:relative; background:var(--green); }
body:not(.home) .site-branding { display:flex; justify-content:center; margin-bottom:.5rem; }
body:not(.home) .site-title { margin:0; }
body:not(.home) .site-title a,body:not(.home) .main-nav a { color:#fff; }
.custom-logo { width:auto; max-height:84px; }

.story-hero { position:relative; display:grid; min-height:700px; place-items:start center; overflow:hidden; padding:56px 24px 50px; background-color:#f8f5d8; background-image:linear-gradient(180deg,#bfe5ec 0%,#f7f7d8 42%,#fffce5 78%,#9fcf6b 100%); background-position:center; background-size:cover; text-align:center; }
.story-hero::after { position:absolute; right:0; bottom:0; left:0; height:18%; content:""; opacity:.35; background:repeating-linear-gradient(7deg,#388342 0 5px,transparent 5px 17px); clip-path:polygon(0 58%,10% 40%,20% 62%,31% 34%,45% 60%,57% 40%,70% 64%,84% 35%,100% 55%,100% 100%,0 100%); }
.hero-inner { position:relative; z-index:2; width:min(100%,900px); }
.hero-title { margin:8px 0 4px; color:#df3e4d; font-family:var(--display); font-size:clamp(3.6rem,9vw,7rem); font-weight:400; line-height:.95; text-shadow:0 2px 0 rgba(63,74,73,.5); }
.hero-subtitle { max-width:690px; margin:18px auto 0; font-size:1.2rem; }
.hero-character { position:absolute; z-index:3; bottom:44px; left:50%; max-width:min(46vw,520px); max-height:63%; object-fit:contain; transform:translateX(-50%); filter:drop-shadow(0 10px 8px rgba(0,0,0,.2)); }
.hero-scroll { position:absolute; z-index:5; bottom:9px; left:50%; width:0; height:0; border-right:28px solid transparent; border-bottom:31px solid rgba(255,255,255,.95); border-left:28px solid transparent; transform:translateX(-50%); }

.storybook-section { position:relative; overflow:hidden; min-height:620px; padding:0 24px 70px; }
.section-heading { margin:0 -24px 52px; padding:14px 24px 18px; color:#fff; background:rgba(0,0,0,.27); font-family:var(--display); font-size:clamp(2.3rem,5vw,4rem); font-weight:400; line-height:1.1; text-align:center; text-shadow:0 2px 1px rgba(0,0,0,.65); }
.section-inner { position:relative; z-index:2; width:min(100%,var(--content)); margin:0 auto; }
.books-section { --section-color:var(--books-bg); }
.games-section { --section-color:var(--games-bg); }
.resources-section { --section-color:var(--resources-bg); }
.creators-section { --section-color:var(--creators-bg); }
.pattern-diamond { background-color:var(--section-color); background-image:linear-gradient(30deg,rgba(255,255,255,.08) 12%,transparent 12.5%,transparent 87%,rgba(255,255,255,.08) 87.5%,rgba(255,255,255,.08)),linear-gradient(150deg,rgba(255,255,255,.08) 12%,transparent 12.5%,transparent 87%,rgba(255,255,255,.08) 87.5%,rgba(255,255,255,.08)),linear-gradient(30deg,rgba(0,0,0,.05) 12%,transparent 12.5%,transparent 87%,rgba(0,0,0,.05) 87.5%,rgba(0,0,0,.05)),linear-gradient(150deg,rgba(0,0,0,.05) 12%,transparent 12.5%,transparent 87%,rgba(0,0,0,.05) 87.5%,rgba(0,0,0,.05)); background-position:0 0,0 0,30px 52px,30px 52px; background-size:60px 104px; }
.pattern-solid { background-color:var(--section-color); background-image:none; }
.pattern-none { background-color:transparent; background-image:none; }

.books-section { padding-bottom:78px; }
.book-stage { padding:48px clamp(20px,5vw,70px); background:rgba(255,254,238,.94); border-radius:12px; box-shadow:0 10px 28px rgba(0,0,0,.2); }
.book-stage::before,.paper-scalloped::before { position:absolute; top:-15px; right:0; left:0; height:30px; content:""; }
.book-stage::before { background:radial-gradient(circle at 15px 15px,var(--book-paper) 14px,transparent 15px) 0 0/30px 30px repeat-x; }
.paper-scalloped::before { background:radial-gradient(circle at 15px 15px,var(--paper) 14px,transparent 15px) 0 0/30px 30px repeat-x; }
.book-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:34px 24px; align-items:end; }
.book-card { text-align:center; transition:transform .2s ease; }
.book-card:hover { transform:translateY(-8px) rotate(-.5deg); }
.book-card a { color:inherit; text-decoration:none; }
.book-card img { display:block; width:100%; max-width:210px; margin:0 auto; box-shadow:4px 6px 5px rgba(0,0,0,.45); }
.book-card h2 { margin:14px 0 0; font-size:1rem; line-height:1.25; }
.book-card p { margin:7px 0 0; font-size:.88rem; }

.game-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:32px; max-width:820px; margin:0 auto; }
.game-card { overflow:hidden; color:#fff; background:rgba(255,255,255,.12); border:8px solid rgba(22,65,59,.78); border-radius:18px; box-shadow:0 8px 18px rgba(0,0,0,.28); text-align:center; }
.game-card a { color:inherit; text-decoration:none; }
.game-card img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--paper); }
.game-card h2 { margin:0; padding:12px 14px; background:rgba(0,0,0,.5); font-size:1.15rem; font-weight:400; font-variant:small-caps; }

.paper-panel { position:relative; display:grid; grid-template-columns:minmax(0,1.5fr) minmax(220px,.7fr); min-height:390px; margin-top:70px; padding:62px 54px 46px; background:var(--paper); box-shadow:0 12px 28px rgba(0,0,0,.18); }
.paper-straight::before,.paper-none::before { display:none; }
.paper-none { color:#fff; background:transparent; box-shadow:none; }
.paper-copy { position:relative; z-index:2; align-self:center; }
.paper-copy p { max-width:700px; }
.resource-link { display:inline-block; margin:14px 18px 0 0; padding:11px 18px; color:#fff; background:var(--red); border-radius:4px; text-decoration:none; }
.resource-link:hover,.resource-link:focus { background:var(--red-deep); }
.resource-character { align-self:end; width:100%; max-height:440px; margin:-110px 0 -46px; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 9px 7px rgba(0,0,0,.2)); }

.creator-intro { max-width:850px; margin:-22px auto 42px; color:#fff; font-size:1.15rem; text-align:center; text-shadow:0 1px 2px rgba(0,0,0,.45); }
.creator-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:50px; max-width:820px; margin:0 auto; }
.creator-card { color:#fff; text-align:center; }
.creator-card img { width:280px; height:340px; padding:14px; border:8px solid #9c641c; border-radius:48% 48% 45% 45%; object-fit:cover; filter:grayscale(1); box-shadow:0 8px 20px rgba(0,0,0,.3),inset 0 0 0 3px #e1b75a; }
.creator-card h2 { display:block; width:max-content; min-width:150px; margin:-20px auto 0; padding:4px 18px; color:#24170a; background:#e4ad34; border-radius:50%; font-size:1.35rem; font-weight:400; }
.creator-card p { font-size:.92rem; }

.site-content { width:min(100% - 40px,900px); margin:3rem auto; padding:35px; background:var(--paper); box-shadow:0 7px 24px rgba(0,0,0,.12); }
.entry-title { font-family:var(--display); font-weight:400; line-height:1.15; }
.entry-thumbnail { margin-bottom:2rem; text-align:center; }
.post-list article { padding:1.5rem 0; border-bottom:1px solid rgba(0,0,0,.16); }
.nav-links { display:flex; justify-content:space-between; gap:1rem; margin-top:2rem; }
.empty-note { color:#fff; text-align:center; }
.site-footer { padding:24px; color:#fff; background:#51301f; font-size:.82rem; text-align:center; }
.site-footer p { margin:0; }

@media (max-width:760px) {
  body { font-size:16px; }
  .site-header { position:relative; padding:12px; background:rgba(255,255,255,.88); }
  .main-nav ul { gap:6px 18px; }
  .story-hero { min-height:570px; padding-top:30px; }
  .hero-character { bottom:40px; max-width:85vw; max-height:55%; }
  .storybook-section { min-height:auto; padding-right:16px; padding-left:16px; }
  .section-heading { margin-right:-16px; margin-left:-16px; }
  .paper-panel { grid-template-columns:1fr; padding:48px 28px 35px; }
  .resource-character { max-height:310px; margin:15px 0 -35px; }
  .creator-card img { height:300px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .book-card { transition:none; } }