/* ==========================================================================
   World Kids – responsive fixes for tablet & mobile only.
   Everything here is gated behind (max-width: 991.98px); the desktop design
   (>= 992px) is never affected.
   Added 2026-09 – webjongens.
   ========================================================================== */

/* Hide our injected mobile UI on desktop */
#wk-mnav, #wk-mnav-menu, #wk-mnav-backdrop { display: none; }

@media (max-width: 991.98px) {

  /* --- 1. Kill the broken astroid header bars that overlap content -------- */
  .astroid-header-sticky,
  header.astroid-header { display: none !important; }

  /* --- 2. Our clean fixed top bar --------------------------------------- */
  #wk-mnav {
    display: flex;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 64px;
    padding: 0 16px;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(0,0,0,.12);
    z-index: 99999;
  }
  #wk-mnav .wk-mnav-logo { display: flex; align-items: center; height: 100%; }
  #wk-mnav .wk-mnav-logo img { height: 44px; width: auto; display: block; }

  #wk-mnav-btn {
    -webkit-appearance: none; appearance: none;
    border: 0; background: transparent; cursor: pointer;
    width: 46px; height: 46px; padding: 10px;
    display: flex; flex-direction: column; justify-content: space-between;
  }
  #wk-mnav-btn span {
    display: block; height: 3px; width: 100%; border-radius: 3px;
    background: #6e125e; transition: transform .25s ease, opacity .2s ease;
  }
  #wk-mnav-btn.open span:nth-child(1) { transform: translateY(9.5px) rotate(45deg); }
  #wk-mnav-btn.open span:nth-child(2) { opacity: 0; }
  #wk-mnav-btn.open span:nth-child(3) { transform: translateY(-9.5px) rotate(-45deg); }

  /* dropdown panel */
  #wk-mnav-menu {
    display: block;
    position: fixed;
    top: 64px; left: 0; right: 0;
    background: #ffffff;
    box-shadow: 0 8px 16px rgba(0,0,0,.14);
    z-index: 99998;
    max-height: 0; overflow: hidden;
    transition: max-height .3s ease;
  }
  #wk-mnav-menu.open { max-height: 85vh; overflow-y: auto; }
  #wk-mnav-menu a {
    display: block;
    padding: 15px 22px;
    font-size: 17px;
    font-weight: 600;
    color: #4a2a4a;
    text-decoration: none;
    border-bottom: 1px solid #f0e9f0;
  }
  #wk-mnav-menu a:last-child { border-bottom: 0; }
  #wk-mnav-menu a:active { background: #faf5fa; }

  #wk-mnav-backdrop {
    display: block; position: fixed; inset: 64px 0 0 0;
    background: rgba(0,0,0,.28); z-index: 99997;
    opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease;
  }
  #wk-mnav-backdrop.open { opacity: 1; visibility: visible; }

  /* push page content below the fixed bar */
  body { padding-top: 64px !important; }

  /* anchor targets clear the fixed bar when jumped to */
  [id]{ scroll-margin-top: 74px; }

  /* --- 3. Action buttons: tidy centered grid ---------------------------- */
  .color-squares {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 22px;
    width: 100% !important;
    max-width: 380px;
    margin: 26px auto !important;
    padding: 0 10px;
  }
  .color-squares .item-square { margin: 0 !important; }
  /* NB: scoped to .color-squares so copies of these buttons inside pop-ups
     (EngageBox / modals) are NOT affected. */
  .color-squares .b1, .color-squares .b2, .color-squares .b3 {
    width: 104px !important;
    height: 104px !important;
    margin: 0 !important;
    padding: 5px !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.15 !important;
    font-size: 13px !important;
    word-break: break-word;
    hyphens: auto;
  }
  .color-squares .b1 a, .color-squares .b2 a, .color-squares .b3 a { color: #fff; text-decoration: none; }
  .color-squares .b1::before, .color-squares .b2::before, .color-squares .b3::before,
  .color-squares .b1::after,  .color-squares .b2::after,  .color-squares .b3::after {
    width: 104px !important;
    height: 104px !important;
  }
  .color-squares .b3 img { max-width: 40px !important; margin-bottom: 2px; }

  /* --- 4. Hero "boy brushing" image: clean full-width band on mobile ------ */
  /* Theme sets .f2::before background-size:14% on a 2396px-wide element (white
     gap) and .f2 has a 175px bottom padding (empty gap below). Turn .f2 into a
     tidy fixed-height full-width image band. */
  .f2 {
    height: 230px !important;
    min-height: 230px !important;
    max-height: 230px !important;
    padding: 0 !important;
    overflow: hidden;
  }
  .f2::before {
    width: 100% !important;
    height: 230px !important;
    min-height: 230px !important;
    left: 0 !important;
    top: 0 !important;
    background-size: cover !important;
    background-position: center 22% !important;
  }

  /* keep the absolutely-positioned button block in normal flow on mobile */
  .buttonsabs { position: static !important; }
  .buttonsabs .sppb-column, .buttonsabs .sppb-col-md-12 { position: static !important; }
}

/* Phone: allow slightly smaller squares so 3 fit per row cleanly */
@media (max-width: 400px) {
  .color-squares .b1, .color-squares .b2, .color-squares .b3,
  .color-squares .b1::before, .color-squares .b2::before, .color-squares .b3::before,
  .color-squares .b1::after, .color-squares .b2::after, .color-squares .b3::after {
    width: 96px !important;
    height: 96px !important;
  }
  .color-squares { gap: 18px; max-width: 340px; }
}