/*
Theme Name: Coloring Lover Pro
Theme URI: https://example.com/coloringlover-pro
Author: ChatGPT
Description: Pixel‑perfect replica of ColoringLover.com — mobile‑first, fully responsive.
Version: 1.0
License: GPL-2.0+
Text Domain: coloringlover
*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
:root{
  --primary:#ff6fb1;
  --secondary:#ffd166;
  --dark:#222;
  --light:#fff;
  --gray:#f5f5f5;
  --max-width:1280px;
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Poppins',sans-serif;color:var(--dark);background:var(--light);line-height:1.6}

/* ---------- Top Header ----------*/
.site-header{background:var(--primary);color:var(--light);position:sticky;top:0;z-index:999}
.header-inner{max-width:var(--max-width);margin:auto;display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem}
.logo img{max-height:44px}

/* Navigation */
.nav-primary ul{list-style:none;display:flex;gap:1.25rem}
.nav-primary a{color:var(--light);font-weight:600;text-transform:capitalize}
.nav-primary li:hover>a{color:var(--secondary)}

/* Offcanvas Mobile Nav */
.offcanvas{position:fixed;inset:0 0 0 -100%;background:var(--primary);transition:transform .3s ease;width:70%;max-width:320px;padding:1.5rem}
.offcanvas.open{transform:translateX(100%)}
.offcanvas ul{list-style:none;margin-top:1rem}
.offcanvas li{margin-bottom:.75rem}
.offcanvas a{color:var(--light);font-size:1.1rem}

.overlay{content:'';position:fixed;inset:0;background:rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .3s}
.overlay.show{opacity:1;pointer-events:auto}

/* Search */
.search-form{position:relative}
.search-form input{padding:.4rem .75rem;border-radius:20px;border:none;width:160px}
.search-form button{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--primary);font-size:1rem}

/* ---------- Home Sections ----------*/
.home-section{padding-top:2.5rem}
.home-section h2{font-size:1.5rem;margin-bottom:1rem;text-transform:capitalize;text-align:left;color:var(--primary)}
.posts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.25rem;max-width:var(--max-width);margin:auto}
.card{border:1px solid var(--gray);border-radius:8px;overflow:hidden;transition:transform .2s;box-shadow:0 2px 4px rgba(0,0,0,.05)}
.card:hover{transform:translateY(-3px)}
.card img{width:100%;height:200px;object-fit:cover}
.card .info{padding:.9rem}
.card h3{font-size:1rem;margin-bottom:.4rem}
.card .meta{font-size:.8rem;color:#666}

/* View all link */
.view-all{display:inline-block;margin-top:1rem;font-weight:600;color:var(--primary)}

/* ---------- Single ----------*/
.single-wrapper{max-width:840px;margin:2rem auto;padding:0 1rem}
.single-wrapper img{max-width:100%}

/* ---------- Footer ----------*/
.site-footer{background:var(--gray);padding:2rem 1rem;text-align:center;color:#666;}
.footer-inner{max-width:var(--max-width);margin:auto}

/* ---------- Responsive ----------*/
@media(max-width:768px){
  .nav-primary{display:none}
  .nav-toggle{display:block}
}
.single-thumbnail img{
	    box-sizing: border-box;
    height: auto;
    max-width: 100%;
    vertical-align: bottom;
    box-shadow: 0 3px 8px 0 rgba(0, 0, 0, .34);
    margin-bottom: 10px;
}
.related,.more-coloring {
    padding: 10px;
    border: 2px dashed;
    border-radius: 20px;
    margin: 10px 0;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
}
.related a,.more-coloring a {
    text-decoration: unset;
	padding: 5px;
    display: inline-block;
    white-space: nowrap;
    margin-bottom: 0.5rem;
}