/* ============================================================
   Homepage Theme: KIDS  (playful, colorful, ages ~5-12)
   UX rationale:
   - Rounded shapes, candy colors, bouncy motion: signals "this
     is for children" instantly and keeps taps big and friendly.
   - Course "books" become a rainbow card grid (every card fully
     tappable); student activity answers are promoted right after
     courses — kids' own work is the strongest social proof.
   - Baloo 2 (LTR) / Baloo Bhaijaan 2 (Arabic) are rounded display
     fonts made for children's content, both highly legible.
   - Scoped to html.hp-theme-kids; RTL + LTR, mobile-first.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&family=Baloo+Bhaijaan+2:wght@500;700;800&display=swap');

html.hp-theme-kids body,
html.hp-theme-kids h1, html.hp-theme-kids h2, html.hp-theme-kids h3,
html.hp-theme-kids h4, html.hp-theme-kids h5, html.hp-theme-kids h6,
html.hp-theme-kids .use-text-title,
html.hp-theme-kids .use-text-subtitle,
html.hp-theme-kids .use-text-subtitle2,
html.hp-theme-kids .use-text-paragraph,
html.hp-theme-kids .button, html.hp-theme-kids .btn {
    font-family: 'Baloo 2', 'Baloo Bhaijaan 2', system-ui, sans-serif !important;
}
html.hp-theme-kids[dir="rtl"] body,
html.hp-theme-kids[dir="rtl"] h1, html.hp-theme-kids[dir="rtl"] h2,
html.hp-theme-kids[dir="rtl"] h3, html.hp-theme-kids[dir="rtl"] h4,
html.hp-theme-kids[dir="rtl"] h5, html.hp-theme-kids[dir="rtl"] h6,
html.hp-theme-kids[dir="rtl"] .use-text-title,
html.hp-theme-kids[dir="rtl"] .use-text-subtitle,
html.hp-theme-kids[dir="rtl"] .use-text-subtitle2,
html.hp-theme-kids[dir="rtl"] .use-text-paragraph,
html.hp-theme-kids[dir="rtl"] .button, html.hp-theme-kids[dir="rtl"] .btn {
    font-family: 'Baloo Bhaijaan 2', 'Baloo 2', system-ui, sans-serif !important;
}

/* candy accents used across the page */
html.hp-theme-kids {
    --kids-1: #ff6b6b;  /* coral   */
    --kids-2: #feca57;  /* sun     */
    --kids-3: #1dd1a1;  /* mint    */
    --kids-4: #54a0ff;  /* sky     */
    --kids-5: #b980ff;  /* grape   */
    --kids-ink: #2e2a5e;
}
html.hp-theme-kids body { background: #fffdf5; }

/* ---- Block order: kids' own work promoted after courses ---- */
html.hp-theme-kids main.container-wrap { display: flex; flex-direction: column; background: #fffdf5; }
html.hp-theme-kids main.container-wrap > section { order: 50; }
html.hp-theme-kids main.container-wrap > #banner            { order: 1; }
html.hp-theme-kids main.container-wrap > #slide-blocks      { order: 2; }
html.hp-theme-kids main.container-wrap > #explore           { order: 3; }
html.hp-theme-kids main.container-wrap > #testimonials      { order: 4; }
html.hp-theme-kids main.container-wrap > #f2f-consultations { order: 6; }
html.hp-theme-kids main.container-wrap > #blog-home         { order: 7; }
html.hp-theme-kids main.container-wrap > #about             { order: 8; }
html.hp-theme-kids main.container-wrap > #feature           { order: 9; }

/* ============ SLIDER: candy sky hero ============ */
html.hp-theme-kids .banner-slider .slide {
    background:
        radial-gradient(600px 300px at 12% 110%, rgba(29,209,161,.18), transparent 65%),
        radial-gradient(700px 320px at 90% -20%, rgba(84,160,255,.20), transparent 65%),
        linear-gradient(180deg, #fff7e0 0%, #fdefff 100%);
}
html.hp-theme-kids #banner .bg-deco { opacity: 0; }
html.hp-theme-kids .banner-slider .use-text-title { color: var(--kids-ink) !important; }
html.hp-theme-kids .banner-slider .img img,
html.hp-theme-kids .f2f-slide-img {
    border-radius: 38% 62% 55% 45% / 45% 42% 58% 55%;
    animation: kids-float 5s ease-in-out infinite;
}
@keyframes kids-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}
html.hp-theme-kids .banner-slider .btn-area .btn {
    border-radius: 999px;
    font-weight: 800;
    text-transform: none;
    box-shadow: 0 6px 0 color-mix(in srgb, var(--v-primary-base, #83a323) 60%, #000 40%);
    transition: transform .15s ease, box-shadow .15s ease;
}
html.hp-theme-kids .banner-slider .btn-area .btn:hover {
    transform: translateY(3px);
    box-shadow: 0 3px 0 color-mix(in srgb, var(--v-primary-base, #83a323) 60%, #000 40%);
}
html.hp-theme-kids .banner-arrow {
    border-radius: 999px;
    background: #fff;
    border: 3px solid var(--kids-2);
    color: var(--kids-ink);
}
html.hp-theme-kids #banner_nav a { font-size: 1.2em; }
html.hp-theme-kids #banner_nav a.active { color: var(--kids-1); }

/* ============ BROCHURES: sticker cards ============ */
html.hp-theme-kids #slide-blocks { padding: 30px 0 10px; }
html.hp-theme-kids .slide-blocks-row { gap: 18px; }
html.hp-theme-kids .slide-block-card {
    border-radius: 26px;
    border: 4px solid #fff;
    box-shadow: 0 8px 0 rgba(46, 42, 94, .10);
    transform: rotate(-1.2deg);
}
html.hp-theme-kids .slide-block-card:nth-child(even) { transform: rotate(1.2deg); }
html.hp-theme-kids .slide-block-card:hover { transform: rotate(0) translateY(-6px) scale(1.03); }
html.hp-theme-kids .slide-block-img-wrap { height: 170px; }

/* ============ COURSES: rainbow card grid ============ */
html.hp-theme-kids #explore .rack { margin-top: 44px; margin-bottom: 52px; }
html.hp-theme-kids #explore .rack:before { display: none; }
html.hp-theme-kids #explore .rack .category-title h4 {
    color: var(--kids-ink);
    font-weight: 800;
}
html.hp-theme-kids #explore .content {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0 !important;
    overflow: visible !important;
    height: auto !important;
}
@media (min-width: 600px)  { html.hp-theme-kids #explore .content { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px)  { html.hp-theme-kids #explore .content { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1400px) { html.hp-theme-kids #explore .content { grid-template-columns: repeat(4, 1fr); } }

html.hp-theme-kids #explore .book,
html.hp-theme-kids #explore .book.collapsed,
html.hp-theme-kids #explore .book.expanded {
    display: flex !important;
    flex-direction: column !important;
    transform: none !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    left: 0 !important;
    overflow: hidden;
    cursor: pointer;
    background: #fff !important;
    border-radius: 26px !important;
    border: 4px solid var(--kids-4) !important;
    box-shadow: 0 8px 0 color-mix(in srgb, var(--kids-4) 35%, transparent) !important;
    transition: transform .2s ease !important;
}
html.hp-theme-kids #explore .book:nth-child(5n+1) { border-color: var(--kids-1) !important; box-shadow: 0 8px 0 color-mix(in srgb, var(--kids-1) 35%, transparent) !important; }
html.hp-theme-kids #explore .book:nth-child(5n+2) { border-color: var(--kids-2) !important; box-shadow: 0 8px 0 color-mix(in srgb, var(--kids-2) 40%, transparent) !important; }
html.hp-theme-kids #explore .book:nth-child(5n+3) { border-color: var(--kids-3) !important; box-shadow: 0 8px 0 color-mix(in srgb, var(--kids-3) 35%, transparent) !important; }
html.hp-theme-kids #explore .book:nth-child(5n+4) { border-color: var(--kids-4) !important; box-shadow: 0 8px 0 color-mix(in srgb, var(--kids-4) 35%, transparent) !important; }
html.hp-theme-kids #explore .book:nth-child(5n)   { border-color: var(--kids-5) !important; box-shadow: 0 8px 0 color-mix(in srgb, var(--kids-5) 35%, transparent) !important; }
html.hp-theme-kids #explore .book:hover { transform: translateY(-6px) rotate(-1deg) !important; }

html.hp-theme-kids #explore .book figcaption { display: none !important; }
html.hp-theme-kids #explore .book figure {
    width: 100% !important;
    height: 165px !important;
    margin: 0 !important;
    border-radius: 0 !important;
}
html.hp-theme-kids #explore .book figure img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}
html.hp-theme-kids #explore .book .desc {
    display: flex !important;
    flex-direction: column !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    padding: 14px 16px 16px !important;
    flex: 1 1 auto !important;
    overflow: visible !important;
    gap: 4px;
}
html.hp-theme-kids #explore .book .desc h6 {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-family: inherit !important;
    color: var(--kids-ink) !important;
    font-weight: 800 !important;
    font-size: 1.02rem;
}
html.hp-theme-kids #explore .book .desc p {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
    color: #57538a !important;
    margin: 0;
}
html.hp-theme-kids #explore .book .desc-more {
    display: inline-block !important;
    margin-top: 10px;
    padding: 4px 14px;
    border-radius: 999px;
    background: var(--kids-2);
    color: var(--kids-ink);
    font-weight: 800;
    border: none;
}
html.hp-theme-kids #explore .book .book-link-overlay {
    display: block !important;
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* ============ ACTIVITY ANSWERS / TESTIMONIALS: speech bubbles ============ */
html.hp-theme-kids .testimonial-card {
    background: #fff;
    border: 4px solid var(--kids-3);
    border-radius: 30px;
    box-shadow: 0 8px 0 color-mix(in srgb, var(--kids-3) 30%, transparent);
    position: relative;
}
html.hp-theme-kids .item:nth-child(even) .testimonial-card { border-color: var(--kids-5); box-shadow: 0 8px 0 color-mix(in srgb, var(--kids-5) 30%, transparent); }
html.hp-theme-kids .item:nth-child(3n)  .testimonial-card { border-color: var(--kids-1); box-shadow: 0 8px 0 color-mix(in srgb, var(--kids-1) 30%, transparent); }
html.hp-theme-kids .testimonial-card h6 { color: var(--kids-ink); font-weight: 800; }

/* ============ F2F: friendly rounded cards ============ */
html.hp-theme-kids .f2f-section-bg {
    background: linear-gradient(180deg, #fdefff 0%, #fffdf5 80%);
}
html.hp-theme-kids .f2f-card { border-radius: 28px; border: 3px solid #f0ecff; }
html.hp-theme-kids .f2f-card-btn { border-radius: 999px; font-weight: 800; }
html.hp-theme-kids .f2f-connect-pill { border-radius: 999px; }

/* ============ NEWS: pinboard notes ============ */
html.hp-theme-kids .announcement-feature-card {
    background: linear-gradient(140deg, var(--kids-4) 0%, var(--kids-5) 100%);
    border-radius: 32px;
    border: 5px dashed rgba(255, 255, 255, .55);
    box-shadow: 0 14px 0 rgba(46, 42, 94, .12);
}
html.hp-theme-kids .announcement-home-card {
    border-radius: 22px;
    border: 3px solid #ffe9b8;
    background: #fffaf0;
    box-shadow: 0 6px 0 rgba(254, 202, 87, .35);
    transform: rotate(-.6deg);
}
html.hp-theme-kids .announcement-list-home > div:nth-child(even) .announcement-home-card {
    transform: rotate(.6deg);
    border-color: #d9f4ec;
    background: #f4fffb;
    box-shadow: 0 6px 0 rgba(29, 209, 161, .25);
}
html.hp-theme-kids .announcement-home-tags span { border-radius: 999px; font-weight: 800; }

/* ============ STATS: balloons ============ */
html.hp-theme-kids #feature { background: #fff7e0; padding: 44px 0; }
html.hp-theme-kids #feature .counter-item .use-text-title { color: var(--kids-ink) !important; }

/* ---- Mobile ---- */
@media (max-width: 640px) {
    html.hp-theme-kids .slide-block-img-wrap { height: 150px; }
    html.hp-theme-kids #explore .book figure { height: 150px !important; }
    html.hp-theme-kids .banner-slider .img img { max-height: 220px; }
}

/* ============================================================
   SITE-WIDE: course cards (category/tutor/related) + course landing.
   ============================================================ */
html.hp-theme-kids .card.product-card {
    background: #fff;
    border: 4px solid var(--kids-4);
    border-radius: 26px;
    box-shadow: 0 8px 0 color-mix(in srgb, var(--kids-4) 35%, transparent);
    overflow: hidden;
    transition: transform .2s ease;
}
html.hp-theme-kids .card.product-card:hover { transform: translateY(-6px) rotate(-1deg); }
/* rainbow cycle matches homepage course grid */
html.hp-theme-kids [class*="col"]:nth-child(5n+1) .card.product-card { border-color: var(--kids-1); box-shadow: 0 8px 0 color-mix(in srgb, var(--kids-1) 35%, transparent); }
html.hp-theme-kids [class*="col"]:nth-child(5n+2) .card.product-card { border-color: var(--kids-2); box-shadow: 0 8px 0 color-mix(in srgb, var(--kids-2) 40%, transparent); }
html.hp-theme-kids [class*="col"]:nth-child(5n+3) .card.product-card { border-color: var(--kids-3); box-shadow: 0 8px 0 color-mix(in srgb, var(--kids-3) 35%, transparent); }
html.hp-theme-kids [class*="col"]:nth-child(5n+4) .card.product-card { border-color: var(--kids-4); box-shadow: 0 8px 0 color-mix(in srgb, var(--kids-4) 35%, transparent); }
html.hp-theme-kids [class*="col"]:nth-child(5n)   .card.product-card { border-color: var(--kids-5); box-shadow: 0 8px 0 color-mix(in srgb, var(--kids-5) 35%, transparent); }
html.hp-theme-kids .product-card .desc .title { color: var(--kids-ink); font-weight: 800; }
html.hp-theme-kids .product-card .desc .button {
    border-radius: 999px;
    font-weight: 800;
    text-transform: none;
}
/* course landing page */
html.hp-theme-kids .image-detail,
html.hp-theme-kids .detail-carousel .figure .img {
    border-radius: 26px;
    border: 4px solid var(--kids-2);
}
html.hp-theme-kids .btn-area.main .btn {
    border-radius: 999px;
    font-weight: 800;
    text-transform: none;
    box-shadow: 0 6px 0 color-mix(in srgb, var(--v-primary-base, #83a323) 60%, #000 40%);
}
html.hp-theme-kids .btn-area.main .btn:hover {
    transform: translateY(3px);
    box-shadow: 0 3px 0 color-mix(in srgb, var(--v-primary-base, #83a323) 60%, #000 40%);
}