@charset "UTF-8";
/*----------------------------------------------------------------------------
   kids-modern.css — front-end refresh layer
   ---------------------------------------------------------------------------
   Loaded from ghead.php, after main.css, so plain declarations already win.
   `!important` appears only where the markup carries an inline style we
   cannot reach any other way (the menu chips, the breadcrumb title size,
   the breadcrumb background). Nothing here changes markup or behaviour, so
   a page that looked right before still works exactly the same.

   The problems this fixes, in order:
     1. Hero banners printed white text straight onto a full-colour
        illustration — unreadable. Now there is a scrim behind the text.
     2. The header/footer waves bobbed and swelled on a 7s loop, which made
        the banner edge jitter. Now they drift slowly and evenly.
     3. Devanagari had no webfont at all and fell back to the system serif.
        Baloo 2 covers it and is a sibling of Fredoka in shape.
     4. Nav items, breadcrumb links, newsletter inputs and the footer were
        default-browser plain. They now read as designed pieces.
---------------------------------------------------------------------------- */

@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&display=swap");

/*----------------------------------------*/
/*  01. TOKENS
/*----------------------------------------*/

:root {
   /* Fredoka has no Devanagari. Listing Baloo 2 second means Latin keeps
      Fredoka and every Devanagari glyph falls through to Baloo 2, which is
      also rounded — so a mixed Hindi/English line stays visually of a piece. */
   --bd-ff-body: 'Fredoka', 'Baloo 2', sans-serif;
   --bd-ff-heading: 'Fredoka', 'Baloo 2', sans-serif;
   --bd-ff-p: 'Fredoka', 'Baloo 2', sans-serif;

   /* Ink used on top of photographic banners. */
   --kd-scrim: 12, 22, 48;

   --kd-radius-sm: 12px;
   --kd-radius-md: 20px;
   --kd-radius-lg: 28px;
   --kd-pill: 999px;

   --kd-shadow-sm: 0 2px 8px rgba(16, 24, 40, .08);
   --kd-shadow-md: 0 8px 24px rgba(16, 24, 40, .12);
   --kd-shadow-lg: 0 18px 44px rgba(16, 24, 40, .16);

   --kd-ease: cubic-bezier(.22, .61, .36, 1);
}

/*----------------------------------------*/
/*  02. HERO / BREADCRUMB BANNER
/*----------------------------------------*/

/* Every kid-facing page drops a full-colour illustration in
   .bd-breadcrumb-bg with an inline `opacity:1; mix-blend-mode:unset`, which
   defeats the theme's own 10%-luminosity treatment. Rather than fight that
   inline style we lay a scrim over the image and lift the text above it, so
   the artwork still shows through but the copy has something to sit on. */

.bd-breadcrumb-area {
   isolation: isolate;
}

.bd-breadcrumb-area::after {
   content: "";
   position: absolute;
   inset: 0;
   z-index: 1;
   pointer-events: none;
   background:
      radial-gradient(ellipse 58% 72% at 50% 46%,
         rgba(var(--kd-scrim), .58) 0%,
         rgba(var(--kd-scrim), .28) 55%,
         rgba(var(--kd-scrim), 0) 78%),
      linear-gradient(180deg,
         rgba(var(--kd-scrim), .52) 0%,
         rgba(var(--kd-scrim), .22) 42%,
         rgba(var(--kd-scrim), .18) 68%,
         rgba(var(--kd-scrim), .42) 100%);
}

/* Where the hero carries no heading there is nothing to protect, so the
   scrim can step back and let the illustration through — the header's own
   chips supply their contrast. */
.bd-breadcrumb-area:not(:has(.bd-breadcrumb-title))::after {
   opacity: .5;
}

/* Content and waves ride above the scrim. Both are already positioned, so
   this only assigns the stacking order they were implicitly relying on. */
.bd-breadcrumb-area .bd-breadcrumb-wrapper { z-index: 3; }
.bd-breadcrumb-area .bd-wave-wrapper { z-index: 4; }

/* The banner illustrations are detailed; a touch of blur pushes them back
   without washing the colour out. */
.bd-breadcrumb-bg {
   filter: saturate(.92);
}

/* 354px of banner is a lot of nothing on a game page. */
.bd-breadcrumb {
   min-height: 300px;
}

/* Several pages have their <h1> commented out and show only the crumb trail.
   Those don't need a full-height hero. `:has()` cannot be nested inside
   `:has()`, so this has to stay a single level. Browsers without `:has()`
   drop the rule and keep the 300px above. */
.bd-breadcrumb:not(:has(.bd-breadcrumb-title)) {
   min-height: 230px;
}

.bd-breadcrumb-title {
   font-weight: 700;
   letter-spacing: -.01em;
   line-height: 1.15;
   margin-bottom: 14px;
   font-size: clamp(30px, 4.4vw, 54px) !important;
   text-shadow:
      0 1px 2px rgba(var(--kd-scrim), .55),
      0 4px 22px rgba(var(--kd-scrim), .45);
}

/* Crumb trail: glass pills instead of white-on-anything text. */
.bd-breadcrumb-list {
   flex-wrap: wrap;
   gap: 10px;
   align-items: center;
}

.bd-breadcrumb-list span {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 7px 16px;
   border-radius: var(--kd-pill);
   font-size: 15px;
   font-weight: 500;
   color: #fff;
   background: rgba(255, 255, 255, .17);
   border: 1px solid rgba(255, 255, 255, .34);
   -webkit-backdrop-filter: blur(8px);
   backdrop-filter: blur(8px);
   box-shadow: 0 2px 10px rgba(var(--kd-scrim), .22);
   transition: background .25s var(--kd-ease), transform .25s var(--kd-ease);
}

.bd-breadcrumb-list span a { color: #fff; }

.bd-breadcrumb-list span:hover {
   background: rgba(255, 255, 255, .3);
   transform: translateY(-1px);
}

.bd-breadcrumb-list span a:hover { color: #fff; }

/* The pills already read as separate steps; the theme's little dash between
   the first two now just looks like a stray mark. */
.bd-breadcrumb-list span:first-child::before { display: none; }

.bd-breadcrumb-list span i { margin-inline-end: 0; }

/* Floating curved-line decorations over a busy illustration read as noise. */
.bd-breadcrumb-shape-1,
.bd-breadcrumb-shape-2 { opacity: .45; }

@media (max-width: 767px) {
   .bd-breadcrumb { min-height: 240px; }
   .bd-breadcrumb-list span { font-size: 13px; padding: 6px 13px; }
   .bd-breadcrumb-shape { display: none; }
}

/*----------------------------------------*/
/*  03. WAVES
/*----------------------------------------*/

/* The theme runs `wave` and `swell` together: the second one bobs the strip
   up and down, which is what made the banner edge look like it was chewing
   the artwork. Keep the horizontal drift, drop the bob, and slow it right
   down so it reads as ambient rather than busy. */

.bd-wave {
   animation: wave 22s linear infinite;
   will-change: transform;
}

/* Keep this layer opaque: at less than full opacity the two crests show
   through each other and the banner edge turns into a grey haze. */
.bd-wave:nth-of-type(2) {
   animation: wave 30s linear -8s infinite;
   opacity: 1;
}

/*----------------------------------------*/
/*  04. HEADER
/*----------------------------------------*/

.bd-header-top {
   background-image: linear-gradient(100deg, #EBFFFE 0%, #FFF6EB 100%);
   padding-top: 10px;
   padding-bottom: 10px;
   border-bottom: 1px solid rgba(0, 0, 0, .04);
}

.bd-header-meta-text p,
.bd-header-meta-text a {
   font-size: 15px;
   font-weight: 500;
}

/* Language switch: the two links are separated only by &nbsp; and the
   selected one is marked with an inline border-bottom. Match on that inline
   style so the active language gets a proper filled pill. */
.bd-header-top-right .bd-header-meta-text a {
   display: inline-block;
   padding: 5px 15px;
   border-radius: var(--kd-pill);
   font-weight: 600;
   line-height: 1.4;
   color: var(--bd-common-black);
   border: 1px solid transparent;
   transition: all .25s var(--kd-ease);
}

.bd-header-top-right .bd-header-meta-text a:hover {
   background: rgba(0, 187, 174, .12);
   border-color: rgba(0, 187, 174, .3);
}

.bd-header-top-right .bd-header-meta-text a[style*="border-bottom"] {
   background: var(--bd-theme-1);
   color: #fff;
   border-color: transparent;
   border-bottom-color: transparent !important;
   box-shadow: 0 3px 10px rgba(0, 187, 174, .32);
}

/* The logo is a 365x67 transparent PNG whose own lettering is pink, yellow
   and blue — exactly the palette of the banners it sits on, so a glow alone
   never separated it from the artwork. It needs an opaque plate. Reading as
   a sticker suits the site better than a plain white box. */
.bd-header-logo a {
   display: inline-flex;
   align-items: center;
   padding: 7px 16px;
   border-radius: 18px;
   background: rgba(255, 255, 255, .93);
   -webkit-backdrop-filter: blur(6px);
   backdrop-filter: blur(6px);
   border: 1px solid rgba(255, 255, 255, .75);
   box-shadow:
      0 6px 20px rgba(16, 24, 40, .18),
      0 1px 2px rgba(16, 24, 40, .08);
   transition: transform .25s var(--kd-ease), box-shadow .25s var(--kd-ease);
}

.bd-header-logo a:hover {
   transform: translateY(-2px);
   box-shadow:
      0 10px 26px rgba(16, 24, 40, .22),
      0 1px 2px rgba(16, 24, 40, .08);
}

/* header.php pins the wrapper at 375px inline. Shrink-to-fit caps the plate
   at that, so let the image scale down inside the padding rather than spill. */
.bd-header-logo a img {
   max-width: 100%;
   height: auto;
}

/* Top-level nav items carry an inline white box from menu.php. Promote it to
   a real chip — same idea, but sized, rounded and with a hover state. */
.bd-main-menu > nav > ul > li > a > span {
   display: inline-block;
   padding: 9px 18px !important;
   border-radius: var(--kd-pill) !important;
   background: rgba(255, 255, 255, .94) !important;
   border: 1px solid rgba(16, 24, 40, .07) !important;
   box-shadow: var(--kd-shadow-sm);
   font-size: 16px;
   font-weight: 600;
   line-height: 1.35;
   color: var(--bd-common-black);
   white-space: nowrap;
   transition: background .25s var(--kd-ease), color .25s var(--kd-ease),
      box-shadow .25s var(--kd-ease), transform .25s var(--kd-ease);
}

.bd-main-menu > nav > ul > li > a:hover > span {
   background: var(--bd-theme-1) !important;
   color: #fff;
   box-shadow: 0 8px 20px rgba(0, 187, 174, .34);
   transform: translateY(-2px);
}

.bd-main-menu > nav > ul > li.active > a > span {
   background: var(--bd-theme-2) !important;
   color: #fff;
   box-shadow: 0 8px 20px rgba(255, 155, 36, .34);
}

.bd-main-menu ul li a { padding-top: 22px; padding-bottom: 22px; }

.bd-main-menu { gap: 14px; }
.bd-main-menu ul li { margin-inline-end: 10px; }

@media only screen and (min-width: 992px) and (max-width: 1399px) {
   .bd-main-menu > nav > ul > li > a > span {
      padding: 8px 13px !important;
      font-size: 14px;
   }
   .bd-main-menu ul li { margin-inline-end: 5px; }
}

/* Sticky bar: frosted rather than flat white, and tucked into a soft shelf. */
.header-sticky {
   background-color: rgba(255, 255, 255, .88) !important;
   -webkit-backdrop-filter: saturate(180%) blur(14px);
   backdrop-filter: saturate(180%) blur(14px);
   border-bottom-left-radius: var(--kd-radius-md);
   border-bottom-right-radius: var(--kd-radius-md);
   box-shadow: 0 6px 24px rgba(16, 24, 40, .10) !important;
}

/* On the sticky white bar there is nothing to separate the logo from, so
   the plate would just read as a stray box. */
.header-sticky .bd-header-logo a {
   background: transparent;
   border-color: transparent;
   box-shadow: none;
   -webkit-backdrop-filter: none;
   backdrop-filter: none;
}

.header-sticky .bd-main-menu > nav > ul > li > a > span {
   background: transparent !important;
   border-color: transparent !important;
   box-shadow: none;
}

.header-sticky .bd-main-menu > nav > ul > li > a:hover > span,
.header-sticky .bd-main-menu > nav > ul > li.active > a > span {
   background: var(--bd-theme-1) !important;
   color: #fff;
}

.header-sticky .bd-main-menu > nav > ul > li.active > a > span {
   background: var(--bd-theme-2) !important;
}

/* Hamburger sits on the banner on inner pages, where four dark squares on
   busy artwork disappear. It needs a chip behind it — but its four bars are
   absolutely positioned at fixed 0/19px coordinates inside a 36x36 box, so
   padding on the button itself would shove them out of it. The chip goes on
   a pseudo-element bled outwards instead; the bars carry z-index:1 already
   and so stay on top. */
.header-hamburger .hamburger-btn {
   padding: 0;
   background: transparent;
   overflow: visible;
}

.header-hamburger .hamburger-btn::before {
   content: "";
   position: absolute;
   inset: -9px -10px;
   z-index: 0;
   border-radius: 14px;
   background: rgba(255, 255, 255, .94);
   border: 1px solid rgba(16, 24, 40, .07);
   box-shadow: var(--kd-shadow-sm);
   transition: transform .25s var(--kd-ease), box-shadow .25s var(--kd-ease);
}

.header-hamburger .hamburger-btn:hover::before {
   transform: translateY(-2px);
   box-shadow: var(--kd-shadow-md);
}

/* header.php paints the bars near-black inline; on the chip they can go back
   to the brand teal. */
.header-hamburger .hamburger-btn span {
   border-color: var(--bd-theme-1) !important;
   border-width: 3px !important;
}

/* Login / logout control. Both are squeezed by inline padding and a 12px
   label. .bd-btn-hover is an absolutely positioned copy of .bd-btn-normal
   that slides in on hover, so the two must stay the same shape. */
.bd-header-bottom-right .bd-btn {
   height: 42px;
   line-height: 42px;
   padding: 0 20px !important;
   border-radius: var(--kd-pill) !important;
   align-items: center;
}

.bd-header-bottom-right .bd-btn .bd-btn-inner {
   font-size: 14px !important;
   font-weight: 600;
   border-radius: 0 !important;
}

.bd-header-bottom-right .bd-btn .bd-btn-normal,
.bd-header-bottom-right .bd-btn .bd-btn-hover {
   display: flex !important;
   align-items: center;
   gap: 7px;
   white-space: nowrap;
}

/* The inline `margin: 9px 0 -9px` was centring the icon against a 50px
   line-height; the flex row above does that properly. */
.bd-header-bottom-right .bd-btn i {
   margin: 0 !important;
   font-size: 14px;
}

/* Logged-out visitors get a nice-select dropdown here instead. */
.bd-header-bottom-right .nice-select {
   border-radius: var(--kd-pill);
   border: 1px solid rgba(16, 24, 40, .07);
   background: rgba(255, 255, 255, .94);
   box-shadow: var(--kd-shadow-sm);
   height: 42px;
   line-height: 40px;
   padding-inline: 20px 34px;
   font-weight: 600;
}

.bd-header-bottom-right .nice-select .list {
   border-radius: var(--kd-radius-sm);
   box-shadow: var(--kd-shadow-md);
}

/* Writer-panel shortcut in the header. */
.bd-header-menu-meta .bd-header-meta-text {
   border-radius: var(--kd-pill) !important;
   background-color: rgba(255, 255, 255, .94) !important;
   box-shadow: var(--kd-shadow-sm);
   border: 1px solid rgba(16, 24, 40, .07);
   overflow: hidden;
}

.bd-header-menu-meta .bd-header-meta-text a {
   padding: 7px 16px !important;
   font-weight: 600;
   border: 0 !important;
}

/*----------------------------------------*/
/*  05. FOOTER
/*----------------------------------------*/

.bd-footer-area { padding-top: 130px; }

.bd-footer-wrapper { padding-top: 40px; }

.bd-newsletter-content-2 .bd-footer-widget-title {
   font-size: 20px !important;
   font-weight: 600;
   line-height: 1.55;
   letter-spacing: .1px;
}

/* The newsletter inputs were browser default: square, hairline, 1px grey. */
.newsletter-input,
.bd-newsletter-form .form-control {
   height: auto;
   padding: 13px 22px;
   font-size: 16px;
   font-family: var(--bd-ff-body);
   color: var(--bd-common-black);
   background: #fff;
   border: 2px solid transparent;
   border-radius: var(--kd-pill);
   box-shadow: 0 2px 6px rgba(0, 0, 0, .08) inset;
   transition: border-color .2s var(--kd-ease), box-shadow .2s var(--kd-ease);
}

.newsletter-input::placeholder { color: #8A8A8A; opacity: 1; }

.newsletter-input:focus,
.bd-newsletter-form .form-control:focus {
   outline: 0;
   background: #fff;
   border-color: var(--bd-theme-2);
   box-shadow: 0 0 0 4px rgba(255, 155, 36, .28);
}

/* The form separates its inputs from the submit button with two <br>s on
   top of an mb-30, which left a dead band across the footer. */
.bd-newsletter-form .newsletter-box br { display: none; }

.bd-newsletter-form .newsletter-box .newsletter-input {
   margin-bottom: 14px !important;
}

.bd-newsletter-form .newsletter-box > p {
   margin-bottom: 0;
   padding: 4px 10px 0 !important;
}

.newsletter-btn {
   border-radius: var(--kd-pill) !important;
   font-weight: 600;
   box-shadow: 0 8px 22px rgba(255, 155, 36, .35);
   transition: transform .25s var(--kd-ease), box-shadow .25s var(--kd-ease);
}

.newsletter-btn:hover {
   transform: translateY(-2px);
   box-shadow: 0 12px 28px rgba(255, 155, 36, .45);
}

.bd-footer-copyright {
   border-top: 1px solid rgba(255, 255, 255, .18);
   margin-top: 10px;
}

.bd-footer-copyright-text p,
.bd-footer-copyright-text.is-white p {
   font-size: 15px;
   color: rgba(255, 255, 255, .88);
}

.bd-footer-copyright-text p a { color: #fff; font-weight: 600; }
.bd-footer-copyright-text p a:hover { color: var(--bd-theme-2); }

@media (max-width: 767px) {
   .bd-footer-area { padding-top: 90px; }
}

/*----------------------------------------*/
/*  06. OFFCANVAS
/*----------------------------------------*/

.offcanvas__wrapper { border-top-left-radius: var(--kd-radius-lg); }

.offcanvas__about h4,
.offcanvas__contact h4 {
   font-size: 20px;
   font-weight: 700;
   margin-bottom: 10px;
}

.offcanvas__about p,
.offcanvas__contact p {
   font-size: 16px;
   line-height: 1.7;
}

.offcanvas__close-btn {
   border-radius: 50%;
   width: 42px;
   height: 42px;
   background: var(--bd-theme-6);
   transition: background .25s var(--kd-ease), transform .25s var(--kd-ease);
}

.offcanvas__close-btn:hover {
   background: var(--bd-theme-2);
   color: #fff;
   transform: rotate(90deg);
}

/*----------------------------------------*/
/*  07. SHARED TYPE + CONTROLS
/*----------------------------------------*/

/* Content headings from the article editor. Devanagari now has a real face,
   so these can drop the flat navy for something warmer. */
.mukta-heading,
.mukta-heading2,
.mukta-heading3 {
   font-family: 'Baloo 2', 'Fredoka', sans-serif;
   color: #163A6B;
   line-height: 1.35;
   letter-spacing: -.005em;
}

.mukta-heading { font-size: clamp(26px, 3.2vw, 36px) !important; }
.mukta-heading2 { font-size: clamp(23px, 2.7vw, 30px) !important; }
.mukta-heading3 { font-size: clamp(20px, 2.2vw, 24px) !important; }

/* Body copy on story/article pages was set tight for its size. */
.article_description p {
   line-height: 1.8;
   margin-bottom: 14px;
}

.article_description ul li,
.article_description ol li {
   line-height: 1.8;
   margin-bottom: 6px;
}

/* Kids tab through these pages; the theme ships no visible focus ring. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
   outline: 3px solid var(--bd-theme-2);
   outline-offset: 3px;
   border-radius: 6px;
}

.bd-btn {
   transition: transform .25s var(--kd-ease), box-shadow .25s var(--kd-ease);
}

.bd-btn:hover { transform: translateY(-2px); }

/*----------------------------------------*/
/*  08. MOTION
/*----------------------------------------*/

@media (prefers-reduced-motion: reduce) {
   .bd-wave,
   .bd-wave:nth-of-type(2),
   .bd-breadcrumb-shape-1,
   .bd-breadcrumb-shape-2 {
      animation: none !important;
   }

   *,
   *::before,
   *::after {
      transition-duration: .01ms !important;
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
   }
}