/* =====================================================================
   Somasmart — Kids Theme (Grades 1–8)
   Playful & bright UI overlay. Loaded LAST so it wins the cascade.
   Non-destructive: only colors, fonts, radius, shadows & spacing.
   Fonts: Fredoka (headings) + Nunito (body).
   ===================================================================== */

:root {
    /* Brand palette */
    --kids-primary:      #0995A8;   /* friendly blue  */
    --kids-primary-dark: #077A8A;
    --kids-yellow:       #FFC93C;   /* sunny          */
    --kids-coral:        #FF6B6B;   /* warm pop       */
    --kids-mint:         #23C99A;   /* fresh green    */
    --kids-purple:       #8B5CF6;   /* magic purple   */
    --kids-navy:         #1B2559;   /* headings       */
    --kids-body:         #5A6480;   /* body text      */
    --kids-page:         #F6F9FF;   /* soft page bg   */
    --kids-soft:         #E6F5F8;   /* soft tint      */

    --kids-shadow:       0 14px 34px rgba(9, 149, 168, 0.14);
    --kids-shadow-sm:    0 8px 20px rgba(27, 37, 89, 0.08);
    --kids-radius:       22px;
    --kids-radius-lg:    30px;

    /* Re-map the template's core tokens to the kid palette.
       These override the values injected by dynamic-style. */
    --theme-color:       #0995A8;
    --plyr-color-main:   #0995A8;
    --heading-color:     #1B2559;
    --body-font-color:   #5A6480;
    --navbar-bg-color:   #ffffff;
    --light-purple:      rgba(9, 149, 168, 0.10);

    --body-font-family:  'Nunito', sans-serif;

    /* Solid, flat colours (no gradients) */
    --footer-gradient-bg: #1B2559;
    --gradient-banner-bg: #0995A8;
}

/* ------------------------------------------------------------------ */
/* Typography                                                          */
/* ------------------------------------------------------------------ */
body {
    font-family: 'Nunito', sans-serif !important;
    color: var(--kids-body);
    background-color: #ffffff;
}

h1, h2, h3, h4, h5, h6,
.section-heading, .hero-heading, .card-title, .course-title,
.footer-widget-title, .modal-title {
    font-family: 'Fredoka', 'Nunito', sans-serif !important;
    letter-spacing: .2px;
}

/* ------------------------------------------------------------------ */
/* Buttons — chunky, rounded, springy                                  */
/* ------------------------------------------------------------------ */
.theme-btn,
.theme-button1,
.theme-button2,
.theme-button3,
.theme-button11,
.orange-theme-btn,
.btn-violet-transparent {
    border-radius: 50px !important;
    font-family: 'Fredoka', 'Nunito', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: .3px;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease !important;
}

.theme-btn:hover,
.theme-button1:hover,
.theme-button2:hover,
.theme-button3:hover,
.theme-button11:hover,
.orange-theme-btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--kids-shadow);
}

/* Primary solid buttons */
.theme-button1 {
    background-color: var(--kids-primary) !important;
    border-color: var(--kids-primary) !important;
    color: #fff !important;
}
.theme-button1:hover {
    background-color: #fff !important;
    color: var(--kids-primary) !important;
    border-color: #fff !important;
}
.theme-button3 { border-color: var(--kids-primary) !important; }

/* Hero call-to-action — sunny pop against the blue banner */
.hero-btns .theme-button1 {
    background-color: var(--kids-yellow) !important;
    border-color: var(--kids-yellow) !important;
    color: var(--kids-navy) !important;
    padding: 13px 30px !important;
    font-size: 17px !important;
}
.hero-btns .theme-button1:hover {
    background-color: #ffd867 !important;
    color: var(--kids-navy) !important;
    border-color: #ffd867 !important;
}

/* ------------------------------------------------------------------ */
/* Navbar                                                              */
/* ------------------------------------------------------------------ */
.navbar a.theme-button11,
.navbar #librariesDropdown.nav-link,
.menu-sign-in-btn a.theme-button11 {
    background-color: var(--kids-primary) !important;
    border-color: var(--kids-primary) !important;
    color: #fff !important;
    border-radius: 50px !important;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease !important;
}
.navbar a.theme-button11:hover,
.navbar #librariesDropdown.nav-link:hover,
.menu-sign-in-btn a.theme-button11:hover {
    background-color: var(--kids-primary-dark) !important;
    transform: translateY(-2px);
    box-shadow: var(--kids-shadow);
    color: #fff !important;
}

/* Rounded search field */
.header-nav-left-side form {
    border: 2px solid var(--kids-primary) !important;
    border-radius: 50px !important;
    overflow: hidden;
}
.navbar .dropdown-menu {
    border: 0;
    border-radius: 16px;
    box-shadow: var(--kids-shadow-sm);
    padding: 8px;
}
.navbar .dropdown-item { border-radius: 10px; }
.navbar .dropdown-item:hover {
    background-color: var(--kids-soft);
    color: var(--kids-primary);
}
.navbar-toggler-icon { background-color: var(--kids-primary) !important; }

/* Menu text links were a forgettable grey (#7e7d8f) — make them strong & on-brand */
.navbar a.nav-link[style*="7e7d8f"] {
    color: var(--kids-navy) !important;
    font-weight: 600;
    transition: color .15s ease;
}
.navbar a.nav-link[style*="7e7d8f"]:hover,
.navbar a.nav-link[style*="7e7d8f"]:focus {
    color: var(--kids-primary) !important;
}

/* ------------------------------------------------------------------ */
/* Hero banner                                                         */
/* ------------------------------------------------------------------ */
.hero-area .section-overlay {
    background: var(--gradient-banner-bg) !important;
    border-bottom-left-radius: 42px;
    border-bottom-right-radius: 42px;
}
.hero-heading {
    font-weight: 600 !important;
    letter-spacing: .5px;
}
.hero-heading .main-middle-text,
.hero-heading .word { color: var(--kids-yellow) !important; }
.hero-content p { color: rgba(255, 255, 255, 0.9) !important; }
.hero-right-side video {
    border-radius: 20px !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
    border: 5px solid rgba(255, 255, 255, 0.35);
}
.hero-right-side h6 {
    font-family: 'Fredoka', sans-serif;
    letter-spacing: .5px;
}

/* ------------------------------------------------------------------ */
/* Special feature cards (3 up)                                         */
/* ------------------------------------------------------------------ */
.single-feature-item {
    border-radius: var(--kids-radius) !important;
    box-shadow: var(--kids-shadow-sm) !important;
    border: 2px solid #F0F3FA;
    transition: transform .2s ease, box-shadow .2s ease;
}
.single-feature-item:hover {
    transform: translateY(-6px);
    box-shadow: var(--kids-shadow);
}
.special-feature-area .single-feature-item .feature-img-wrap {
    width: 66px;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    padding: 12px;
}
.special-feature-area .row > div:nth-child(1) .feature-img-wrap { background: rgba(9, 149, 168,.12); }
.special-feature-area .row > div:nth-child(2) .feature-img-wrap { background: rgba(255,107,107,.14); }
.special-feature-area .row > div:nth-child(3) .feature-img-wrap { background: rgba(35,201,154,.14); }
.single-feature-item h6 {
    font-family: 'Fredoka', sans-serif !important;
    color: var(--kids-navy);
    font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* Section headings                                                    */
/* ------------------------------------------------------------------ */
.section-heading {
    color: var(--kids-navy) !important;
    font-weight: 600 !important;
}
.section-sub-heading { color: var(--kids-body) !important; }
.section-heading-light,
.section-sub-heading-light { color: #fff !important; }
.section-heading-img img { border-radius: 14px; }

/* ------------------------------------------------------------------ */
/* Course cards                                                        */
/* ------------------------------------------------------------------ */
.card.course-item,
.course-item {
    border-radius: var(--kids-radius) !important;
    box-shadow: var(--kids-shadow-sm) !important;
    border: 2px solid #F0F3FA !important;
    transition: transform .2s ease, box-shadow .2s ease;
    overflow: hidden;
}
.course-item:hover {
    transform: translateY(-8px);
    box-shadow: var(--kids-shadow) !important;
    border-color: rgba(9, 149, 168,.25) !important;
}
.course-img-wrap { border-radius: 16px; overflow: hidden; }
.course-img-wrap img { border-radius: 16px; }
.course-title a {
    font-family: 'Fredoka', sans-serif !important;
    color: var(--kids-navy) !important;
    font-weight: 600;
}
.course-title a:hover { color: var(--kids-primary) !important; }
.color-hover { color: var(--kids-primary) !important; font-weight: 800; }

/* Badges / tags */
.course-tag.badge { border-radius: 50px !important; padding: 7px 15px !important; font-weight: 700; }
.badge.bg-orange, .bg-orange { background-color: var(--kids-coral) !important; }
.badge.bg-green,  .bg-green  { background-color: var(--kids-mint) !important; }
.badge.bg-warning, .bg-warning { background-color: var(--kids-yellow) !important; color: var(--kids-navy) !important; }

/* Wishlist / cart round buttons on hover */
.course-item-btn {
    border-radius: 50% !important;
    background: var(--kids-primary) !important;
    color: #fff !important;
    transition: transform .15s ease;
}
.course-item-btn:hover { transform: scale(1.12); background: var(--kids-primary-dark) !important; }

/* ------------------------------------------------------------------ */
/* Category tabs                                                       */
/* ------------------------------------------------------------------ */
.tab-nav-list .nav-link {
    border-radius: 50px !important;
    font-family: 'Fredoka', sans-serif;
    font-weight: 500;
    color: var(--kids-navy);
    padding: 8px 20px;
    margin: 0 4px;
    background: var(--kids-soft);
}
.tab-nav-list .nav-link.active {
    background: var(--kids-primary) !important;
    color: #fff !important;
}

/* ------------------------------------------------------------------ */
/* Top categories band                                                 */
/* ------------------------------------------------------------------ */
.top-categories-area .section-overlay {
    background: #1B2559 !important;
}
.top-categories-area .single-feature-item.top-cat-item {
    background: #fff !important;
    border-radius: var(--kids-radius) !important;
    border: 0;
}
.top-categories-area .feature-img-wrap {
    background: #E6F5F8 !important;
}

/* ------------------------------------------------------------------ */
/* Footer                                                              */
/* ------------------------------------------------------------------ */
.footer-widget-title {
    font-family: 'Fredoka', sans-serif !important;
    color: #fff !important;
    font-weight: 600;
}
.footer-links ul li a,
.footer-about p { color: rgba(255,255,255,.82) !important; }
.footer-links ul li a:hover { color: var(--kids-yellow) !important; }
.footer-social ul li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    transition: background .18s ease, transform .18s ease;
}
.footer-social ul li a:hover {
    background: var(--kids-yellow);
    color: var(--kids-navy);
    transform: translateY(-3px);
}

/* Copyright bar — blend into the dark footer instead of a white strip */
.footer-area .copyright-wrapper {
    background-color: transparent !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: 18px 0 !important;
    margin-top: 12px;
    align-items: center;
}
.footer-area .copyright-wrapper .copyright-text p {
    color: rgba(255, 255, 255, 0.78) !important;
    margin: 0;
    font-size: 14px;
}
.footer-area .copyright-wrapper .footer-bottom-nav ul,
.footer-area .copyright-wrapper .footer-bottom-nav li,
.footer-area .copyright-wrapper .footer-bottom-nav a {
    color: rgba(255, 255, 255, 0.78) !important;
}
.footer-area .copyright-wrapper .footer-bottom-nav li { margin-left: 20px; }
.footer-area .copyright-wrapper .footer-bottom-nav a { transition: color .15s ease; text-decoration: none; }
.footer-area .copyright-wrapper .footer-bottom-nav a:hover { color: var(--kids-yellow) !important; }
@media (max-width: 991px) {
    .footer-area .copyright-wrapper .footer-bottom-nav ul { justify-content: center !important; margin-top: 8px; }
    .footer-area .copyright-wrapper .footer-bottom-nav li:first-child { margin-left: 0; }
}

/* ------------------------------------------------------------------ */
/* Misc rounding                                                       */
/* ------------------------------------------------------------------ */
.radius-3, .card { border-radius: 16px !important; }
.form-control { border-radius: 12px !important; }
.modal-content { border-radius: 20px !important; }
.popup-form { border-radius: 22px !important; }

/* Book-a-free-class / promo pill buttons keep the springy feel */
.theme-button11 { padding-top: 12px !important; padding-bottom: 12px !important; }

/* ------------------------------------------------------------------ */
/* Bootcamp announcement ribbon (site-wide)                            */
/* ------------------------------------------------------------------ */
.bootcamp-ribbon {
    background: #FFC93C;
    color: #1B2559;
    font-family: 'Nunito', sans-serif;
    padding: 9px 12px;
    font-size: 14.5px;
    position: relative;
    z-index: 1040;
}
.bootcamp-ribbon .ribbon-emoji { font-size: 18px; }
.bootcamp-ribbon .ribbon-text { font-weight: 600; }
.bootcamp-ribbon .ribbon-btn {
    background: #1B2559;
    color: #fff !important;
    text-decoration: none;
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    padding: 6px 18px;
    border-radius: 50px;
    white-space: nowrap;
    transition: transform .15s ease;
}
.bootcamp-ribbon .ribbon-btn:hover { transform: translateY(-2px); }
.bootcamp-ribbon .ribbon-close {
    background: transparent; border: 0; color: #1B2559; font-size: 22px;
    line-height: 1; cursor: pointer; opacity: .7; margin-left: 6px;
}
.bootcamp-ribbon .ribbon-close:hover { opacity: 1; }
@media (max-width: 575px) {
    .bootcamp-ribbon .ribbon-text { font-size: 12.5px; }
}

/* ------------------------------------------------------------------ */
/* Bootcamp promo band on the homepage                                 */
/* ------------------------------------------------------------------ */
.bootcamp-promo { padding: 46px 0; }
.bootcamp-promo .promo-inner {
    background: #0995A8;
    border-radius: 30px;
    padding: 40px 40px;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(9, 149, 168, 0.28);
}
.bootcamp-promo .promo-inner:before {
    content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%;
    background: rgba(255,255,255,.12); top: -90px; right: -60px;
}
.bootcamp-promo .promo-badge {
    display: inline-block; background: #FFC93C; color: #1B2559;
    font-family: 'Fredoka', sans-serif; font-weight: 600;
    padding: 7px 16px; border-radius: 50px; font-size: 13px; margin-bottom: 14px;
}
.bootcamp-promo h2 {
    font-family: 'Fredoka', sans-serif; font-weight: 600; color: #fff;
    font-size: 32px; line-height: 1.15; margin-bottom: 12px;
}
.bootcamp-promo p { color: rgba(255,255,255,.92); font-size: 16px; max-width: 520px; }
.bootcamp-promo .promo-tracks { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 22px; }
.bootcamp-promo .promo-chip {
    background: rgba(255,255,255,.18); color: #fff; font-weight: 600;
    padding: 6px 14px; border-radius: 50px; font-size: 13.5px;
}
.bootcamp-promo .promo-cta {
    display: inline-block; background: #FFC93C; color: #1B2559 !important;
    font-family: 'Fredoka', sans-serif; font-weight: 600; text-decoration: none;
    padding: 14px 30px; border-radius: 50px; font-size: 17px;
    transition: transform .18s ease, box-shadow .18s ease;
}
.bootcamp-promo .promo-cta:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.2); }
.bootcamp-promo .promo-link { display: inline-block; color: #fff !important; margin-left: 18px; font-weight: 600; text-decoration: underline; }
.bootcamp-promo .promo-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bootcamp-promo .promo-card {
    background: rgba(255,255,255,.96); border-radius: 18px; padding: 20px 16px;
    text-decoration: none; text-align: center; transition: transform .18s ease;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.bootcamp-promo .promo-card:hover { transform: translateY(-6px); }
.bootcamp-promo .promo-card .pc-emoji { font-size: 34px; }
.bootcamp-promo .promo-card .pc-name { font-family: 'Fredoka', sans-serif; color: #1B2559; font-weight: 600; font-size: 14.5px; }
.bootcamp-promo .promo-card .pc-date { color: #6b7392; font-size: 12.5px; }
@media (max-width: 991px) {
    .bootcamp-promo .promo-cards { margin-top: 26px; }
    .bootcamp-promo h2 { font-size: 26px; }
    .bootcamp-promo .promo-inner { padding: 30px 24px; }
}