/*
Theme Name: Croc & Roxi Adventures
Theme URI: https://croxi-animation.bronzemole4.chatgpt.site
Author: Croxi Animation
Description: A cheerful, responsive home for Croc & Roxi stories, videos and books.
Version: 1.2.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: croc-roxi-adventures
*/

:root{--ink:#233a32;--green:#29664e;--green-light:#dcebd9;--cream:#f8f4e9;--paper:#fffdf7;--coral:#ed805b;--gold:#f1bf57;--blue:#83b8ca;--muted:#687970;--serif:Georgia,'Times New Roman',serif;--sans:'Trebuchet MS','Avenir Next',Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:var(--cream);font-family:var(--sans)}
a{color:inherit}
.wrap{width:min(1160px,calc(100% - 44px));margin:0 auto}
.topbar{position:relative;z-index:2;background:rgba(248,244,233,.96);border-bottom:1px solid rgba(35,58,50,.1)}
.nav{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none;font-size:15px;font-weight:800;letter-spacing:.02em}
.brand-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:50% 50% 44% 44%;background:var(--green);color:#fff;font-family:var(--serif);font-size:22px;transform:rotate(-7deg)}
.brand .custom-logo-link{display:flex;align-items:center}.brand .custom-logo{width:auto;max-height:54px}
.brand small{display:block;margin-top:3px;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.navlinks{display:flex;align-items:center;gap:29px}
.navlinks ul{display:flex;align-items:center;gap:22px;list-style:none;margin:0;padding:0}.navlinks li{position:relative}.navlinks .sub-menu{display:none;position:absolute;top:100%;left:0;z-index:5;min-width:220px;margin:0;padding:9px;background:var(--paper);border-radius:12px;box-shadow:0 10px 28px #233a3226}.navlinks li:hover>.sub-menu,.navlinks li:focus-within>.sub-menu{display:block}.navlinks .sub-menu li{padding:0}.navlinks .sub-menu a{display:block;padding:10px 12px;white-space:nowrap;border-radius:7px}.navlinks .sub-menu a:hover{background:#edf5e9}
.navlinks a{font-size:13px;font-weight:700;text-decoration:none;color:#496055}.navlinks li.nav-cta>a{background:var(--green);border-radius:99px;color:white;padding:12px 19px}
.navlinks a:hover{color:var(--coral)}
.navlinks .nav-cta{background:var(--green);border-radius:99px;color:white;padding:12px 19px}
.hero{position:relative;overflow:hidden;padding:74px 0 80px;background:radial-gradient(circle at 76% 35%,#fff0c4 0 10%,transparent 10.2%),linear-gradient(180deg,#f8f4e9 0%,#f4eddb 100%)}
.hero:before,.hero:after{content:'';position:absolute;border:1px dashed rgba(41,102,78,.2);border-radius:50%;width:440px;height:230px;right:-80px;bottom:-130px;transform:rotate(-19deg)}
.hero:after{width:580px;height:340px;right:-130px;bottom:-208px}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:.92fr 1.08fr;gap:28px;align-items:center}
.eyebrow{margin:0 0 17px;color:var(--green);text-transform:uppercase;letter-spacing:.19em;font-size:11px;font-weight:800}
h1,h2,h3,p{margin-top:0}
h1{max-width:570px;margin-bottom:20px;font-family:var(--serif);font-size:clamp(46px,6vw,76px);line-height:.99;letter-spacing:-.045em;font-weight:700}
h1 span{color:var(--green);font-style:italic}
.hero-copy{max-width:450px;color:#53675d;font-size:17px;line-height:1.7}
.button-row{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 25px}
.button{display:inline-flex;align-items:center;gap:9px;padding:14px 21px;border:0;border-radius:99px;background:var(--green);color:white;text-decoration:none;font-size:13px;font-weight:800;box-shadow:0 7px 18px rgba(41,102,78,.16);transition:transform .18s ease,box-shadow .18s ease}
.button:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(41,102,78,.2)}
.button.secondary{background:transparent;color:var(--green);box-shadow:inset 0 0 0 1.5px rgba(41,102,78,.34)}
.hero-note{font-size:12px;color:#78847c;letter-spacing:.04em}
.hero-art{display:grid;place-items:center;position:relative}
.art-frame{width:min(100%,640px)}
.art-frame img{display:block;width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 16px 22px rgba(61,79,55,.14))}
.section{padding:86px 0}
.section-heading{max-width:650px;margin:0 auto 43px;text-align:center}
.section-heading h2{margin-bottom:12px;font:700 clamp(34px,4vw,48px)/1.08 var(--serif);letter-spacing:-.035em}
.section-heading>p:not(.eyebrow){color:var(--muted);font-size:15px;line-height:1.7}
.friends{background:var(--paper)}
.friend-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.friend-card{position:relative;min-height:238px;padding:29px 27px;border-radius:18px;overflow:hidden;background:#edf5e9}
.friend-card-link{display:block;color:inherit;text-decoration:none;border-radius:18px}.friend-card-link:hover .friend-card{transform:translateY(-3px);box-shadow:0 12px 26px #233a3219}.friend-card-link:focus-visible{outline:3px solid var(--coral);outline-offset:4px}.friend-card{transition:transform .18s ease,box-shadow .18s ease}
.friend-card-link:nth-child(2) .friend-card{background:#f5eee0}.friend-card-link:nth-child(3) .friend-card{background:#e8f1f1}
.friend-card .number{position:absolute;top:15px;right:20px;color:rgba(35,58,50,.13);font:700 48px/1 var(--serif)}
.friend-card h3{margin:28px 0 9px;font:700 27px/1.1 var(--serif)}
.friend-card p{max-width:300px;margin:0;color:#637269;font-size:14px;line-height:1.65}
.friend-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:17px;background:white;font-size:25px;box-shadow:0 6px 18px #233a3210}
.friend-card small{display:inline-block;margin-top:16px;color:var(--green);font-size:10px;text-transform:uppercase;letter-spacing:.15em;font-weight:800}
.stories{position:relative;overflow:hidden;background:#f1e9d7}
.stories:after{content:'✦';position:absolute;right:8%;top:38px;color:#e6b85a;font-size:58px;opacity:.6}
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.story-card{display:grid;grid-template-columns:1fr;gap:18px;align-content:start;padding:20px;background:var(--paper);border-radius:19px;box-shadow:0 9px 30px rgba(77,72,49,.06)}
.story-card-link{display:block;color:inherit;text-decoration:none;border-radius:19px}.story-card-link:hover .story-card{transform:translateY(-3px);box-shadow:0 12px 28px #4d48311c}.story-card-link:focus-visible{outline:3px solid var(--coral);outline-offset:4px}.story-card{transition:transform .18s ease,box-shadow .18s ease}
.book-cover{position:relative;display:grid;place-items:center;aspect-ratio:16/9;min-height:0;border-radius:12px;padding:13px;overflow:hidden;color:#fffdf1;text-align:center;box-shadow:inset 5px 0 0 rgba(255,255,255,.2),6px 7px 13px #2e453121}
.book-cover.map{background:linear-gradient(145deg,#a65d3d,#e8b45a 66%,#6d8654)}
.book-cover strong{position:relative;font:700 20px/1.05 var(--serif);text-shadow:0 2px 4px #3c281c66}
.book-cover span{position:absolute;bottom:12px;font:800 8px/1.2 var(--sans);text-transform:uppercase;letter-spacing:.12em}
.story-art{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:center;border-radius:12px;box-shadow:0 9px 22px rgba(46,69,49,.12)}
.story-copy small{color:var(--coral);text-transform:uppercase;letter-spacing:.14em;font-weight:800;font-size:10px}
.story-copy h3{margin:8px 0 9px;font:700 24px/1.1 var(--serif)}
.story-copy p{margin:0;color:#69776e;font-size:13px;line-height:1.6}
.story-link{display:inline-block;margin-top:15px;color:var(--green);text-decoration:none;font-size:12px;font-weight:800}
.watch{background:var(--green);color:#fffdf7}
.watch-grid{display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;gap:54px}
.watch .eyebrow{color:#f3c75d}
.watch h2{margin-bottom:18px;font:700 clamp(37px,4.5vw,56px)/1.03 var(--serif);letter-spacing:-.035em}
.watch p{max-width:450px;color:#d2e2d4;font-size:15px;line-height:1.7}
.watch-tiles{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.watch-tile{position:relative;min-height:188px;padding:25px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;border-radius:18px;color:var(--ink);background:#d8e8d5;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease}.watch-tile:hover{transform:translateY(-3px);box-shadow:0 12px 26px #13251d33}.watch-tile:focus-visible{outline:3px solid #fff;outline-offset:4px}
.watch-tile:nth-child(2){background:#f5ce79;margin-top:28px}.watch-tile:nth-child(3){background:#9cc9d1;margin-top:-28px}.watch-tile:nth-child(4){background:#f4ddd0}
.watch-tile b{font:700 20px/1.1 var(--serif);max-width:190px}.watch-tile span{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.12em}
.watch-tile i{position:absolute;right:15px;bottom:8px;font-style:normal;font-size:53px;opacity:.22}
.closing{padding:78px 0 84px;text-align:center;background:var(--paper)}
.closing h2{margin:0 auto 14px;font:700 clamp(37px,4.5vw,54px)/1.04 var(--serif);letter-spacing:-.035em}
.closing p:not(.eyebrow){max-width:510px;margin:0 auto 23px;color:var(--muted);line-height:1.65;font-size:15px}
footer{padding:24px 0;background:#ede6d7;color:#718077;font-size:11px}
.footer-row{display:flex;align-items:center;justify-content:space-between;gap:20px}
.footer-brand{color:var(--green);font-weight:800;letter-spacing:.04em}
.top-link{text-decoration:none;font-weight:800;color:var(--green)}
.page-banner{padding:56px 0 52px;background:linear-gradient(180deg,#f8f4e9,#f1e9d7)}.page-banner h1{margin:0;font-size:clamp(38px,5vw,60px)}.page-content{padding-top:50px;padding-bottom:72px}.entry-content{max-width:760px;margin:0 auto;color:#53675d;font-size:16px;line-height:1.8}.entry-content h2,.entry-content h3{color:var(--ink);font-family:var(--serif);line-height:1.15}.entry-content a{color:var(--green)}.page-content-wide .entry-content{max-width:none}.page-layout-with-sidebar{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:44px;align-items:start}.page-layout-with-sidebar .entry-content{max-width:none;margin:0}.page-sidebar-left{grid-template-columns:250px minmax(0,1fr)}.page-sidebar{padding:24px;background:var(--paper);border-radius:16px;color:var(--muted);font-size:14px}.page-sidebar ul{padding-left:20px;line-height:2}.page-sidebar a{color:var(--green)}.widget-title{font:700 21px/1.2 var(--serif);color:var(--ink)}.gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:40px}.gallery-grid figure{margin:0;padding:14px;background:var(--paper);border-radius:18px;box-shadow:0 9px 30px #4d48310f}.gallery-grid img{display:block;width:100%;height:auto;max-height:420px;object-fit:contain;border-radius:10px}.gallery-grid figcaption{padding:12px 4px 2px;color:var(--green);font-size:13px;font-weight:800}.friend-card-link .friend-card,.watch-tile{height:100%}.home-page-content:empty{display:none}.post-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.post-card{padding:22px;background:var(--paper);border-radius:18px}.post-card h2{font-family:var(--serif);font-size:27px}.post-card h2 a{text-decoration:none;color:var(--ink)}.post-image img{width:100%;height:auto;border-radius:12px}
.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}
@media(max-width:820px){.hero{padding:55px 0 60px}.hero-grid{grid-template-columns:1fr}.hero-art{margin-top:6px}.art-frame{width:min(100%,620px)}.friend-grid{grid-template-columns:1fr}.friend-card{min-height:205px}.watch-grid{grid-template-columns:1fr;gap:24px}}
@media(max-width:820px){.navlinks ul{gap:12px;flex-wrap:wrap;justify-content:flex-end}.gallery-grid,.post-list{grid-template-columns:1fr}.page-layout-with-sidebar,.page-sidebar-left{grid-template-columns:1fr}}
@media(max-width:620px){.wrap{width:min(calc(100% - 32px),500px)}.nav{min-height:68px;flex-wrap:wrap;padding:10px 0}.navlinks{width:100%;gap:6px 14px}.navlinks ul{align-items:flex-start;justify-content:flex-start;gap:7px 12px;flex-wrap:wrap}.navlinks a{font-size:11px}.navlinks .nav-cta{padding:8px 11px}.navlinks .sub-menu{display:block;position:static;min-width:0;padding:0 0 0 10px;background:transparent;box-shadow:none}.navlinks .sub-menu a{padding:4px 6px;font-size:10px}.hero{padding-top:43px}h1{font-size:clamp(44px,13vw,65px)}.hero-copy{font-size:15px}.section{padding:66px 0}.section-heading{margin-bottom:30px}.story-grid{grid-template-columns:1fr}.story-card{grid-template-columns:1fr;gap:14px;padding:14px}.book-cover strong{font-size:16px}.story-copy h3{font-size:21px}.watch-tiles{gap:9px}.watch-tile{min-height:160px;padding:17px}.watch-tile b{font-size:17px}.footer-row{align-items:flex-start;flex-direction:column;gap:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition-duration:.01ms!important}}