/*
Theme Name: Kidistan
Theme URI: https://www.kidistan.com
Description: Kidistan child theme for GeneratePress — "The Land of Stories, Festivals & Fun for Indian Kids." Festive India palette (marigold + deep teal) with Indic-friendly typography (Baloo 2 + Hind).
Author: Kidistan Team
Template: generatepress
Version: 1.0
Text Domain: kidistan
*/

/* ==========================================================================
   1. FONTS
   Loaded via functions.php (Google Fonts: Baloo 2 for headings, Hind for body)
   ========================================================================== */

:root {
    /* ---- Kidistan Brand Palette — Vibrant Earthy ---- */
    --kid-marigold: #FF7A30;       /* Vibrant saffron-orange - primary accent */
    --kid-marigold-dark: #E8601C;  /* Hover/darker orange */
    --kid-teal: #0EA5A5;           /* Bright turquoise - secondary accent */
    --kid-teal-light: #E0F7F6;     /* Soft turquoise tint for backgrounds */
    --kid-cream: #FFF8EC;          /* Warm off-white for sections */
    --kid-text: #2D2A26;           /* Warm near-black for body text */
    --kid-muted: #6B6B6B;          /* Muted gray for meta text */
    --kid-white: #FFFFFF;

    /* ---- Category accent colors (vibrant, playground-style) ---- */
    --kid-cat-festival: #FF7A30;   /* Vibrant orange - Festivals */
    --kid-cat-folktale: #0EA5A5;   /* Bright turquoise - Folk Tales */
    --kid-cat-craft: #F0506E;      /* Coral pink - Crafts/Activities */
    --kid-cat-parenting: #6CB33F;  /* Fresh green - Parenting */

    /* ---- Typography ---- */
    --kid-font-heading: 'Baloo 2', 'Baloo Devanagari 2', sans-serif;
    --kid-font-body: 'Hind', 'Hind Devanagari', sans-serif;

    /* ---- Radius & Shadow ---- */
    --kid-radius: 14px;
    --kid-radius-sm: 8px;
    --kid-shadow: 0 4px 14px rgba(45, 42, 38, 0.08);
    --kid-shadow-hover: 0 8px 22px rgba(45, 42, 38, 0.14);
}

/* ==========================================================================
   2. GLOBAL TYPOGRAPHY
   ========================================================================== */

body {
    font-family: var(--kid-font-body);
    color: var(--kid-text);
    line-height: 1.7;
    /* Subtle watermark dot pattern on sides — uses radial gradient tile */
    background-color: #FFF9F5;
    background-image: radial-gradient(circle, rgba(14, 165, 165, 0.12) 1px, transparent 1px),
                      radial-gradient(circle, rgba(255, 122, 48, 0.08) 1px, transparent 1px);
    background-size: 28px 28px, 56px 56px;
    background-position: 0 0, 14px 14px;
}

/* Content area sits on clean white — watermark only shows in the side gutters */
.site-content,
.entry-content,
.inside-article,
.page-content,
.content-area {
    background-color: var(--kid-white);
}

h1, h2, h3, h4, h5, h6,
.site-title,
.entry-title,
.widget-title {
    font-family: var(--kid-font-heading);
    font-weight: 700;
    color: var(--kid-text);
    letter-spacing: 0.2px;
}

.entry-title a {
    color: var(--kid-text);
    transition: color 0.2s ease;
}

.entry-title a:hover {
    color: var(--kid-marigold-dark);
}

a {
    color: var(--kid-teal);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--kid-marigold-dark);
}

/* ==========================================================================
   3. SITE HEADER
   ========================================================================== */

.site-header {
    background: linear-gradient(135deg, #FFF9F0 0%, #E6F2F3 60%, #FFF3E0 100%);
    border-bottom: none;
    position: relative;
    padding: 0.8em 0 0;
}

/* Center the logo/title block and navigation — tighter spacing */
.site-header .inside-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.1em;
    padding: 0 1em;
}

.site-header .site-branding {
    text-align: center;
    margin-bottom: 0.1em;
}

/* Festive multi-color bunting strip below header */
.site-header::after {
    content: "";
    display: block;
    width: 100%;
    height: 40px;
    margin-top: 0.4em;
    background-image: url('assets/bunting.svg');
    background-repeat: repeat-x;
    background-size: 160px 40px;
    background-position: center top;
}

.site-header .site-title,
.site-header .site-description {
    text-align: center;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Multicolor gradient "Kidistan" title */
.site-header .site-title a,
.site-header .main-title a {
    font-family: var(--kid-font-heading) !important;
    font-weight: 800 !important;
    font-size: 3.2rem !important;
    letter-spacing: 1px;
    line-height: 1.1;
    display: inline-flex;
    align-items: center;
    gap: 0.08em;
    background: linear-gradient(90deg,
        #FF7A30 0%,
        #F0506E 28%,
        #0EA5A5 55%,
        #6CB33F 78%,
        #FF7A30 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    text-decoration: none;
}

/* Kidistan logo — two children holding hands, sized to feel like a true brand mark */
.site-header .site-title a::before,
.site-header .main-title a::before {
    content: "";
    display: inline-block;
    width: 1.9em;
    height: 1.9em;
    background-image: url('assets/kidistan-logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-text-fill-color: initial;
    background-color: transparent;
    vertical-align: middle;
    filter: drop-shadow(0 2px 4px rgba(45, 42, 38, 0.18));
    margin-right: -0.05em;
}

.site-header .site-title a:hover,
.site-header .main-title a:hover {
    opacity: 0.88;
}

/* Tagline — compact, coloured, italic */
.site-description {
    font-family: var(--kid-font-body) !important;
    font-style: italic;
    color: var(--kid-teal) !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    opacity: 0.9;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3;
}

/* Primary navigation — simple text links, compact, no buttons */
.main-navigation {
    background-color: transparent;
    width: 100%;
    margin-top: 0.1em;
    padding: 0;
}

.main-navigation .main-nav ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    margin: 0;
    padding: 0.2em 0;
}

/* Force "Home" to appear first (left) regardless of underlying page/menu order.
   NOTE: This assumes exactly 2 top-level items (Sample Page, Home).
   If you add more menu items later, remove this order swap and instead
   reorder items properly in Appearance → Menus. */
.main-navigation .main-nav > ul > li:nth-child(1) { order: 2; }
.main-navigation .main-nav > ul > li:nth-child(2) { order: 1; }

.main-navigation .main-nav ul li a {
    font-family: var(--kid-font-heading);
    font-weight: 700;
    color: var(--kid-teal);
    font-size: 1.05rem;
    padding: 0.5em 1.1em;
    background: transparent;
    border-radius: 0;
    margin: 0;
    display: inline-block;
    box-shadow: none;
    border-bottom: 3px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li:hover > a {
    background: transparent;
    color: var(--kid-marigold-dark);
    border-bottom-color: var(--kid-marigold);
    transform: none;
    box-shadow: none;
}

.main-navigation .main-nav ul ul {
    background-color: var(--kid-white);
    border-top: 3px solid var(--kid-marigold);
    border-radius: var(--kid-radius-sm);
    overflow: hidden;
    box-shadow: var(--kid-shadow);
}

.main-navigation .main-nav ul ul li a {
    color: var(--kid-text);
    border-bottom: none;
    border-radius: 0;
    margin: 0;
    box-shadow: none;
    text-align: center;
}

.main-navigation .main-nav ul ul li a:hover {
    background-color: var(--kid-teal-light);
    color: var(--kid-marigold-dark);
}

/* Mobile menu toggle — simple, colorful icon button */
.menu-toggle {
    background-color: var(--kid-marigold);
    color: var(--kid-white);
    border-radius: var(--kid-radius-sm);
    border: none;
}

.menu-toggle:hover {
    background-color: var(--kid-teal);
}

/* Mobile menu toggle */
.menu-toggle {
    background-color: var(--kid-teal);
    color: var(--kid-white);
    border-radius: var(--kid-radius-sm);
}

/* ==========================================================================
   4. HERO / FRONT PAGE INTRO SECTION
   (Add a "Hero" GenerateBlocks section with class "kidistan-hero")
   ========================================================================== */

.kidistan-hero {
    background: linear-gradient(135deg, #FFD8A8 0%, var(--kid-teal-light) 50%, #FFE0F0 100%);
    border-radius: var(--kid-radius);
    padding: 4.5em 2em;
    margin: 1.5em auto 2.5em;
    text-align: center;
    position: relative;
    overflow: hidden;
    border: 3px solid var(--kid-marigold);
}

.kidistan-hero::before {
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 220px;
    height: 220px;
    background-image: url('assets/motif-mandala.svg');
    background-size: contain;
    opacity: 0.25;
    pointer-events: none;
}

.kidistan-hero::after {
    content: "";
    position: absolute;
    bottom: -70px;
    left: -70px;
    width: 240px;
    height: 240px;
    background-image: url('assets/motif-paisley.svg');
    background-size: contain;
    opacity: 0.22;
    pointer-events: none;
}

.kidistan-hero h1 {
    font-size: 3.2rem;
    color: var(--kid-teal);
    margin-bottom: 0.5em;
    position: relative;
    z-index: 1;
}

.kidistan-hero p {
    font-size: 1.3rem;
    color: var(--kid-text);
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.kidistan-hero .kid-highlight {
    color: var(--kid-marigold-dark);
    font-weight: 700;
}

/* ==========================================================================
   5. POST / ARTICLE CARDS
   (Applies to standard blog loop and GenerateBlocks "Query Loop" cards)
   ========================================================================== */

.inside-article,
.gb-query-loop-item {
    background-color: var(--kid-white);
    border-radius: var(--kid-radius);
    box-shadow: var(--kid-shadow);
    padding: 1.4em;
    margin-bottom: 1.8em;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid rgba(14, 94, 111, 0.06);
}

.inside-article:hover,
.gb-query-loop-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--kid-shadow-hover);
}

/* Featured image rounding */
.post-image img,
.gb-query-loop-item img,
.inside-article img {
    border-radius: var(--kid-radius-sm);
}

/* Excerpt text */
.entry-summary,
.entry-content {
    font-family: var(--kid-font-body);
    color: var(--kid-text);
}

/* Meta info (date, author) */
.entry-meta {
    font-family: var(--kid-font-body);
    font-size: 0.85rem;
    color: var(--kid-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* "Read More" links styled as buttons */
.entry-content .more-link,
a.read-more,
.gb-button {
    display: inline-block;
    font-family: var(--kid-font-heading);
    font-weight: 600;
    background-color: var(--kid-marigold);
    color: var(--kid-text) !important;
    padding: 0.6em 1.4em;
    border-radius: 999px;
    margin-top: 0.8em;
    transition: background-color 0.2s ease, transform 0.15s ease;
}

.entry-content .more-link:hover,
a.read-more:hover,
.gb-button:hover {
    background-color: var(--kid-teal);
    color: var(--kid-white) !important;
    transform: translateY(-2px);
}

/* ==========================================================================
   6. CATEGORY BADGES / TAGS
   Add these classes to category links via Customizer or post settings
   ========================================================================== */

.cat-links a,
.kid-badge {
    display: inline-block;
    font-family: var(--kid-font-heading);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.25em 0.9em;
    border-radius: 999px;
    color: var(--kid-white) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.6em;
}

/* Default badge color */
.cat-links a,
.kid-badge {
    background-color: var(--kid-teal);
}

/* Category-specific colors — match these slugs to your WP category slugs */
.cat-links a[href*="festivals"],
.kid-badge.kid-badge-festival {
    background-color: var(--kid-cat-festival);
    color: var(--kid-text) !important;
}

.cat-links a[href*="folk-tales"],
.kid-badge.kid-badge-folktale {
    background-color: var(--kid-cat-folktale);
}

.cat-links a[href*="crafts"],
.kid-badge.kid-badge-craft {
    background-color: var(--kid-cat-craft);
}

.cat-links a[href*="parenting"],
.kid-badge.kid-badge-parenting {
    background-color: var(--kid-cat-parenting);
}

/* ==========================================================================
   7. SIDEBAR WIDGETS
   ========================================================================== */

.widget {
    background-color: var(--kid-cream);
    border-radius: var(--kid-radius);
    padding: 1.5em;
    margin-bottom: 1.8em;
    border: 1px solid rgba(244, 163, 0, 0.15);
}

.widget-title {
    color: var(--kid-teal);
    font-size: 1.15rem;
    margin-bottom: 0.7em;
    border-bottom: 2px solid var(--kid-marigold);
    padding-bottom: 0.4em;
    display: inline-block;
}

/* ==========================================================================
   8. BUTTONS (GenerateBlocks / general)
   ========================================================================== */

.wp-block-button .wp-block-button__link,
button,
input[type="submit"] {
    font-family: var(--kid-font-heading);
    font-weight: 600;
    border-radius: 999px;
    background-color: var(--kid-teal);
    color: var(--kid-white);
    border: none;
    padding: 0.7em 1.6em;
    transition: background-color 0.2s ease, transform 0.15s ease;
}

.wp-block-button .wp-block-button__link:hover,
button:hover,
input[type="submit"]:hover {
    background-color: var(--kid-marigold);
    color: var(--kid-text);
    transform: translateY(-2px);
}

/* Secondary / outline button style — add class "is-style-kid-outline" */
.wp-block-button.is-style-kid-outline .wp-block-button__link {
    background-color: transparent;
    border: 2px solid var(--kid-teal);
    color: var(--kid-teal);
}

.wp-block-button.is-style-kid-outline .wp-block-button__link:hover {
    background-color: var(--kid-teal);
    color: var(--kid-white);
}

/* ==========================================================================
   9. FOOTER
   ========================================================================== */

.site-footer,
.footer-widgets {
    background: linear-gradient(135deg, var(--kid-teal), #0c8585);
    color: var(--kid-white);
    width: 100%;
    max-width: 100%;
    border-top: 3px solid var(--kid-marigold);
}

.site-footer a,
.footer-widgets a {
    color: var(--kid-marigold);
}

.site-footer a:hover,
.footer-widgets a:hover {
    color: var(--kid-white);
}

.footer-widgets .widget {
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-widgets .widget-title {
    color: var(--kid-marigold);
    border-bottom-color: rgba(255, 255, 255, 0.3);
}

.site-footer .site-info,
.site-footer .inside-site-info {
    width: 100%;
    max-width: 100%;
    font-size: 0.95rem;
    text-align: center;
    padding: 1.8em 1em;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--kid-font-body);
    background: transparent;
    border: none;
}

.site-footer .site-info a,
.site-footer .inside-site-info a {
    color: var(--kid-marigold);
    font-weight: 600;
}

.site-footer .site-info a:hover,
.site-footer .inside-site-info a:hover {
    color: var(--kid-white);
    text-decoration: underline;
}

/* ==========================================================================
   10. RESPONSIVE TWEAKS
   ========================================================================== */

@media (max-width: 768px) {
    .kidistan-hero h1 {
        font-size: 1.9rem;
    }

    .kidistan-hero {
        padding: 2.5em 1.2em;
    }

    .site-header .site-title a {
        font-size: 1.5rem;
    }
}

/* ==========================================================================
   11. HOMEPAGE — CATEGORY PREVIEW CARDS
   Used inside the "What's Inside Kidistan?" section on the homepage
   ========================================================================== */

.kid-category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5em;
    margin: 2.5em 0;
}

/* Ensure NOTHING except the 4 category cards sits inside the grid */
.kid-section-title,
.kid-section-subtitle,
.kid-latest-stories,
.kid-coming-soon,
.kid-empty-state {
    grid-column: unset !important;
}

.kid-category-card {
    background-color: var(--kid-white);
    border-radius: var(--kid-radius);
    box-shadow: var(--kid-shadow);
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid rgba(14, 94, 111, 0.06);
    overflow: hidden;
    padding: 0;
}

.kid-category-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--kid-shadow-hover);
}

/* Activity "scene" banner — combo emojis on a vibrant gradient.
   Can be replaced later with a real <img class="kid-category-image"> */
.kid-category-scene {
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3em;
    font-size: 2.6rem;
    line-height: 1;
}

.kid-category-card.cat-festival .kid-category-scene {
    background: linear-gradient(135deg, #FFD8A8, var(--kid-cat-festival));
}

.kid-category-card.cat-folktale .kid-category-scene {
    background: linear-gradient(135deg, #B6F2EE, var(--kid-cat-folktale));
}

.kid-category-card.cat-craft .kid-category-scene {
    background: linear-gradient(135deg, #FFD3DC, var(--kid-cat-craft));
}

.kid-category-card.cat-parenting .kid-category-scene {
    background: linear-gradient(135deg, #DFF3CB, var(--kid-cat-parenting));
}

/* If/when you add a real photo, give the <img> this class —
   it will replace the emoji scene with the same sizing/crop */
.kid-category-image {
    width: 100%;
    height: 130px;
    object-fit: cover;
    display: block;
}

.kid-category-content {
    padding: 1.6em 1.4em;
}

.kid-category-card h3 {
    font-family: var(--kid-font-heading);
    color: var(--kid-teal);
    margin: 0.2em 0 0.4em;
    font-size: 1.5rem;
}

.kid-category-card p {
    font-family: var(--kid-font-body);
    color: var(--kid-muted);
    font-size: 1rem;
    margin: 0;
}

.kid-category-card.cat-festival  .kid-category-content { border-top: 5px solid var(--kid-cat-festival); }
.kid-category-card.cat-folktale  .kid-category-content { border-top: 5px solid var(--kid-cat-folktale); }
.kid-category-card.cat-craft     .kid-category-content { border-top: 5px solid var(--kid-cat-craft); }
.kid-category-card.cat-parenting .kid-category-content { border-top: 5px solid var(--kid-cat-parenting); }

/* ==========================================================================
   12. HOMEPAGE — SECTION TITLES
   ========================================================================== */

.kid-section-title {
    font-family: var(--kid-font-heading);
    color: var(--kid-teal);
    text-align: center;
    font-size: 2rem;
    margin-top: 2em;
    margin-bottom: 0.3em;
}

.kid-section-subtitle {
    text-align: center;
    color: var(--kid-muted);
    font-family: var(--kid-font-body);
    font-size: 1.05rem;
    margin-bottom: 1.5em;
}

/* ==========================================================================
   13. HOMEPAGE — "COMING SOON" BANNER
   ========================================================================== */

.kid-coming-soon {
    background: linear-gradient(135deg, var(--kid-teal), #0c8585);
    border-radius: var(--kid-radius);
    padding: 2.5em 1.5em;
    text-align: center;
    color: var(--kid-white);
    margin: 3em 0;
}

.kid-coming-soon h2 {
    font-family: var(--kid-font-heading);
    color: var(--kid-marigold);
    font-size: 1.8rem;
    margin-bottom: 0.5em;
}

.kid-coming-soon p {
    font-family: var(--kid-font-body);
    font-size: 1.05rem;
    max-width: 600px;
    margin: 0 auto;
    opacity: 0.95;
}

.kid-emoji-row {
    text-align: center;
    font-size: 1.6rem;
    margin-top: 1em;
    letter-spacing: 0.4em;
}

/* ==========================================================================
   14. HOMEPAGE RESPONSIVE TWEAKS
   ========================================================================== */

/* ==========================================================================
   15. HOMEPAGE — LATEST STORIES (POSTS) GRID
   This styles a GenerateBlocks "Query Loop" or Latest Posts block
   placed on the homepage to show your published articles as cards.
   ========================================================================== */

.kid-latest-stories {
    margin: 3em 0;
}

.kid-latest-stories .gb-query-loop-wrapper,
.kid-latest-stories ul.wp-block-latest-posts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.6em;
    list-style: none;
    padding: 0;
}

.kid-latest-stories .wp-block-latest-posts__post-title {
    font-family: var(--kid-font-heading);
    color: var(--kid-teal);
    font-size: 1.2rem;
    font-weight: 700;
}

.kid-latest-stories li {
    background-color: var(--kid-white);
    border-radius: var(--kid-radius);
    box-shadow: var(--kid-shadow);
    padding: 1.4em;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid rgba(14, 94, 111, 0.06);
}

.kid-latest-stories li:hover {
    transform: translateY(-4px);
    box-shadow: var(--kid-shadow-hover);
}

.kid-latest-stories .wp-block-latest-posts__featured-image img {
    border-radius: var(--kid-radius-sm);
    margin-bottom: 0.6em;
}

.kid-empty-state {
    text-align: center;
    padding: 2.5em 1.5em;
    background-color: var(--kid-teal-light);
    border-radius: var(--kid-radius);
    border: 2px dashed var(--kid-marigold);
}

.kid-empty-state p {
    font-family: var(--kid-font-body);
    color: var(--kid-muted);
    font-size: 1.05rem;
    margin: 0;
}

/* ==========================================================================
   16. CONTENT WIDTH — FULL WIDTH / NO SIDEBAR PAGES
   Ensures content doesn't stretch edge-to-edge uncomfortably
   when "No Sidebar" layout is used
   ========================================================================== */

.full-width-content .site-main,
.no-sidebar .site-main {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   17. HIDE PAGE TITLE ON HOMEPAGE ONLY
   WordPress adds the class "home" to <body> on the front page,
   so this hides just the page title there — other pages keep titles.
   ========================================================================== */

.home .entry-header {
    display: none;
}

/* Tablet: 2-column cards */
@media (max-width: 900px) {
    .kid-category-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.2em;
    }
}

/* Mobile: single column, everything stacked */
@media (max-width: 600px) {
    .kid-category-grid {
        grid-template-columns: 1fr;
        gap: 1em;
    }

    .kid-category-card {
        padding: 0;
    }

    .kidistan-hero h1 {
        font-size: 2rem;
    }

    .site-header .site-title a,
    .site-header .main-title a {
        font-size: 2.2rem !important;
    }
}