/*
Theme Name: WishJoy
Theme URI: https://wishjoy.in/
Author: WishJoy
Description: A bright, playful, mobile-first theme for the WishJoy surprise builder. App-style bottom navigation on phones, sticker-style cards, Baloo 2 and Figtree fonts. Works best with the WishJoy Core plugin.
Version: 1.1.0
Requires at least: 6.3
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wishway-theme
Tags: one-column, custom-logo, custom-menu, featured-images, translation-ready, accessibility-ready
*/

:root{
  --ww-ink:#24103F; --ww-muted:#5B4B78; --ww-bg:#FFF6FA; --ww-surface:#FFFFFF; --ww-tint:#FFE6F1; --ww-tint-2:#FFF3CC;
  --ww-pink:#F2186B; --ww-pink-strong:#E0115F; --ww-yellow:#FFB800; --ww-violet:#7B4DFF; --ww-mint:#18C79A; --ww-sky:#3EB8FF; --ww-orange:#FF7A2F;
  --ww-display:'Baloo 2',ui-rounded,system-ui,sans-serif; --ww-body:'Figtree',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --ww-hand:'Caveat',cursive;
  --wwt-header-h:64px; --wwt-tabbar-h:68px;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--wwt-header-h) + 12px)}
body{margin:0; background:var(--ww-bg); color:var(--ww-ink); font:400 1rem/1.6 var(--ww-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden}
img,svg,video,iframe{max-width:100%}
img{height:auto}
a{color:var(--ww-ink); text-decoration-color:var(--ww-pink); text-decoration-thickness:2px; text-underline-offset:3px}
a:hover{color:var(--ww-pink)}
h1,h2,h3,h4,h5{font-family:var(--ww-display); font-weight:800; line-height:1.1; color:var(--ww-ink); letter-spacing:-.005em}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:3px solid var(--ww-violet); outline-offset:3px}
.screen-reader-text{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.wwt-skip{position:absolute; left:12px; top:-60px; z-index:10001; background:var(--ww-ink); color:#fff; padding:10px 16px; border-radius:999px; font-weight:700; text-decoration:none}
.wwt-skip:focus{top:10px; color:#fff}
.wwt-ic{width:24px; height:24px; display:block}

/* ---------- header ---------- */
.wwt-header{position:sticky; top:0; z-index:1000; background:rgba(255,246,250,.92); backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px); border-bottom:2.5px solid transparent; transition:border-color .2s, box-shadow .2s}
.wwt-header.is-scrolled{border-bottom-color:var(--ww-ink)}
.admin-bar .wwt-header{top:32px}
@media (max-width:782px){ .admin-bar .wwt-header{top:46px} }
.wwt-header-in{max-width:1180px; margin:0 auto; height:var(--wwt-header-h); padding:0 16px; display:flex; align-items:center; gap:18px}
.wwt-logo{display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:var(--ww-ink); flex:none}
.wwt-logo-mark{display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:var(--ww-tint-2); border:2.5px solid var(--ww-ink); box-shadow:2px 2px 0 var(--ww-ink); transform:rotate(-6deg); transition:transform .2s}
.wwt-logo:hover .wwt-logo-mark{transform:rotate(6deg) scale(1.05)}
.wwt-logo-mark svg{width:28px; height:28px}
.wwt-logo-text{font:800 1.5rem/1 var(--ww-display); letter-spacing:-.01em}
.custom-logo-link{display:inline-flex; align-items:center; flex:none}
.custom-logo{display:block; height:46px; max-height:46px; width:auto}
@media (min-width:900px){ .custom-logo{height:52px; max-height:52px} }
.wwt-logo-footer{display:inline-block}
.wwt-logo-footer img{display:block; height:58px; width:auto}
.wwt-nav{display:none; margin-left:12px}
.wwt-menu{list-style:none; margin:0; padding:0; display:flex; gap:4px}
.wwt-menu a{display:block; padding:8px 12px; border-radius:999px; font-weight:700; text-decoration:none; color:var(--ww-ink); white-space:nowrap}
.wwt-menu a:hover,.wwt-menu .current-menu-item > a{background:var(--ww-tint)}
.wwt-actions{margin-left:auto; display:flex; align-items:center; gap:6px}
.wwt-iconlink{display:grid; place-items:center; width:44px; height:44px; border-radius:50%; border:2px solid transparent; background:transparent; color:var(--ww-ink); cursor:pointer; text-decoration:none; padding:0}
.wwt-iconlink:hover{border-color:var(--ww-ink); background:var(--ww-surface); color:var(--ww-ink)}
.wwt-actions .wwt-iconlink:not(.wwt-burger){display:none}
.wwt-cta{display:none}
@media (min-width:1100px){
  .wwt-nav{display:block}
  .wwt-actions .wwt-iconlink:not(.wwt-burger){display:grid}
  .wwt-cta{display:inline-flex; margin-left:6px}
  .wwt-burger{display:none}
}

/* ---------- drawer ---------- */
.wwt-drawer{position:fixed; inset:0; z-index:10000; background:rgba(36,16,63,.55); opacity:0; transition:opacity .25s}
.wwt-drawer.is-open{opacity:1}
.wwt-drawer-panel{position:absolute; top:0; right:0; bottom:0; width:min(380px,90vw); background:var(--ww-bg); border-left:2.5px solid var(--ww-ink); padding:14px 18px calc(24px + env(safe-area-inset-bottom,0px)); display:flex; flex-direction:column; gap:18px; overflow-y:auto; transform:translateX(100%); transition:transform .25s cubic-bezier(.2,.8,.3,1)}
.wwt-drawer.is-open .wwt-drawer-panel{transform:none}
.wwt-drawer-top{display:flex; align-items:center; justify-content:space-between}
.wwt-menu-big{flex-direction:column; gap:2px}
.wwt-menu-big a{font:800 1.4rem/1.2 var(--ww-display); padding:10px 12px; border-radius:14px}

/* ---------- bottom tab bar (phones) ---------- */
.wwt-tabbar{position:fixed; left:0; right:0; bottom:0; z-index:999; height:calc(var(--wwt-tabbar-h) + env(safe-area-inset-bottom,0px)); padding:0 6px env(safe-area-inset-bottom,0px); display:grid; grid-template-columns:repeat(5,1fr); align-items:center; background:var(--ww-surface); border-top:2.5px solid var(--ww-ink)}
.wwt-tabbar a{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; height:100%; text-decoration:none; color:var(--ww-muted); font:700 .7rem/1 var(--ww-body); -webkit-tap-highlight-color:transparent}
.wwt-tabbar a .wwt-ic{width:24px; height:24px}
.wwt-tabbar a[aria-current="page"]{color:var(--ww-ink)}
.wwt-tabbar a[aria-current="page"] .wwt-ic{color:var(--ww-pink); stroke-width:2.4}
.wwt-tab-create{position:relative}
.wwt-plus{display:grid; place-items:center; width:54px; height:54px; margin-top:-26px; border-radius:50%; background:var(--ww-pink); color:#fff; border:2.5px solid var(--ww-ink); box-shadow:3px 3px 0 var(--ww-ink); transition:transform .15s}
.wwt-tab-create:active .wwt-plus{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ww-ink)}
.wwt-plus .wwt-ic{width:28px; height:28px; stroke-width:3}
.wwt-content{min-height:60vh; padding-bottom:calc(var(--wwt-tabbar-h) + env(safe-area-inset-bottom,0px))}
.wwt-tab-create .wwt-tabbar{display:none}
body.wwt-tab-create .wwt-tabbar{display:none}
body.wwt-tab-create .wwt-content{padding-bottom:0}
@media (min-width:900px){ .wwt-tabbar{display:none} .wwt-content{padding-bottom:0} }

/* ---------- pages ---------- */
.wwt-page,.wwt-blog,.wwt-app-page{padding-top:10px; padding-bottom:56px}
.wwt-page-head{padding:26px 0 14px}
.entry-content{max-width:760px; font-size:1.06rem; line-height:1.72}
.entry-content > *{margin-top:0; margin-bottom:1.1em}
.entry-content h2{font-size:clamp(1.5rem,4vw,2rem); margin-top:1.8em}
.entry-content h3{font-size:1.3rem; margin-top:1.5em}
.entry-content ul,.entry-content ol{padding-left:1.3em}
.entry-content li{margin:.35em 0}
.entry-content li::marker{color:var(--ww-pink)}
.entry-content blockquote{margin:1.5em 0; padding:16px 20px; border-left:5px solid var(--ww-pink); background:var(--ww-surface); border-radius:0 14px 14px 0}
.entry-content table{border-collapse:collapse; width:100%}
.entry-content th,.entry-content td{border:1.5px solid var(--ww-ink); padding:8px 10px; text-align:left}
.entry-content img{border-radius:14px}
.entry-content .wp-block-button__link{background:var(--ww-pink-strong); color:#fff; border:2.5px solid var(--ww-ink); border-radius:999px; box-shadow:3px 3px 0 var(--ww-ink); font-weight:700}
.wwt-meta{margin:0 0 6px; color:var(--ww-muted); font-weight:600; font-size:.9rem}
.wwt-hero-img{margin:0 0 24px}
.wwt-hero-img img{border-radius:20px; border:2.5px solid var(--ww-ink)}
.wwt-cta-box{max-width:760px; margin:40px 0 0; padding:24px; border-radius:22px; background:var(--ww-tint); border:2.5px solid var(--ww-ink); box-shadow:4px 4px 0 var(--ww-ink)}
.wwt-cta-box h2{margin:0 0 8px; font-size:1.5rem}
.wwt-cta-box p{margin:0 0 16px}
.alignwide{max-width:1180px}
.alignfull{width:100vw; margin-left:calc(50% - 50vw)}
.wp-caption-text,figcaption{font-size:.88rem; color:var(--ww-muted)}
.search-form{display:flex; gap:8px; max-width:520px; margin-top:14px}
.search-form .search-field{flex:1; border:2px solid var(--ww-ink); border-radius:999px; padding:10px 16px; background:#fff}
.search-form .search-submit{border:2px solid var(--ww-ink); border-radius:999px; padding:10px 18px; background:var(--ww-ink); color:#fff; font-weight:700; cursor:pointer}

/* posts */
.wwt-posts{display:grid; gap:20px; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.wwt-post-card{background:var(--ww-surface); border:2.5px solid var(--ww-ink); border-radius:18px; overflow:hidden; box-shadow:4px 4px 0 var(--ww-ink)}
.wwt-post-thumb img{display:block; width:100%; aspect-ratio:16/10; object-fit:cover; border-bottom:2.5px solid var(--ww-ink)}
.wwt-post-body{padding:16px 18px 20px}
.wwt-post-title{margin:0 0 8px; font-size:1.3rem}
.wwt-post-title a{text-decoration:none}
.wwt-post-body p:last-child{margin:0; color:var(--ww-muted)}
.nav-links{display:flex; gap:8px; flex-wrap:wrap; margin-top:30px}
.nav-links .page-numbers{display:grid; place-items:center; min-width:44px; height:44px; padding:0 12px; border:2px solid var(--ww-ink); border-radius:999px; text-decoration:none; font-weight:700; background:#fff}
.nav-links .current{background:var(--ww-ink); color:#fff}

/* 404 */
.wwt-404{text-align:center; padding-top:40px; padding-bottom:70px; display:flex; flex-direction:column; align-items:center}
.wwt-404 .ww-lead{margin-left:auto; margin-right:auto}
.wwt-404-art{display:flex; gap:10px; margin-bottom:10px}
.wwt-404-art span{display:grid; place-items:center; width:clamp(72px,22vw,120px); aspect-ratio:.82; border-radius:50% 50% 46% 46%; background:var(--c); color:#fff; border:3px solid var(--ww-ink); font:800 clamp(2.4rem,9vw,4rem)/1 var(--ww-display); box-shadow:4px 4px 0 var(--ww-ink); animation:wwt-float 3s ease-in-out infinite; animation-delay:var(--d)}
@keyframes wwt-float{50%{transform:translateY(-12px) rotate(3deg)}}

/* ---------- footer ---------- */
.wwt-footer{position:relative; background:var(--ww-ink); color:#EDE6F7; margin-top:40px; padding-bottom:calc(var(--wwt-tabbar-h) + env(safe-area-inset-bottom,0px))}
@media (min-width:900px){ .wwt-footer{padding-bottom:0} }
.wwt-wave{position:absolute; left:0; right:0; top:-39px; width:100%; height:40px; color:var(--ww-ink); display:block}
.wwt-footer-in{max-width:1180px; margin:0 auto; padding:44px 16px 20px; display:grid; gap:30px; grid-template-columns:1fr 1fr}
@media (min-width:900px){ .wwt-footer-in{grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-top:56px} }
.wwt-fbrand{grid-column:1/-1}
@media (min-width:900px){ .wwt-fbrand{grid-column:auto} }
.wwt-footer .wwt-logo{color:#fff}
.wwt-footer .wwt-logo-mark{box-shadow:2px 2px 0 var(--ww-pink); border-color:#fff}
.wwt-fbrand p{margin:14px 0; max-width:34ch; color:#CFC3E6}
.wwt-fh{margin:0 0 12px; font-size:1.05rem; color:#fff}
.wwt-flinks{list-style:none; margin:0; padding:0; display:grid; gap:4px}
.wwt-flinks a{color:#CFC3E6; text-decoration:none; font-size:.95rem; display:inline-block; padding:4px 0}
.wwt-flinks a:hover{color:var(--ww-yellow); text-decoration:underline}
.wwt-drawer .wwt-flinks a{color:var(--ww-muted)}
.wwt-socials{display:flex; gap:8px; flex-wrap:wrap}
.wwt-social{display:grid; place-items:center; width:42px; height:42px; border-radius:50%; border:2px solid #fff; color:#fff}
.wwt-social:hover{background:var(--ww-pink-strong); color:#fff; border-color:var(--ww-pink-strong)}
.wwt-social .wwt-ic{width:20px; height:20px}
.wwt-footer-bottom{max-width:1180px; margin:0 auto; padding:18px 16px 26px; border-top:1px solid rgba(255,255,255,.15); font-size:.88rem; color:#B9ABD6}
.wwt-footer-bottom p{margin:0}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
}