/* MDIX audit — template-specific fixes (mdix-paud-prima). */

/* GSAP SplitText headings slide in on scroll and slide back out when scrolling up, so full-page
   captures (catalogue, audit, "save as PDF") showed clipped headings and class titles sitting on
   top of their buttons. Keep the split letters in place; WOW blocks always visible. */
.visible-slowly-bottom div,
.visible-slowly-right div,
.visible-slowly-bottom .split-line,
.visible-slowly-right .split-line {
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.wow {
  visibility: visible !important;
  animation-name: none !important;
}

/* ---- Design QA round (2026-10-12) ---- */

/* Brand orange #F15F25 with white text is 3.28:1 (fails AA) → darker shade for buttons/links (D-20). */
.common_btn,
.common-btn.p1-bg,
.from-style1 button.common_btn,
.footer-newsletter .common_btn {
  background-color: #C4461A !important;
}
.pagination-arrow.active,
.pagination-arrow:hover,
.pagination-item.active,
.pagination-item:hover {
  background-color: #C4461A !important;
}
.common_btn.common_btn_outline {
  background-color: transparent !important;
  color: #C4461A !important;
  border-color: #C4461A !important;
}
.text-p1,
.breadcrumb-item a,
.bread-link a,
.read-more.text-p1 {
  color: #C4461A !important;
}

/* Contact block: the dashed PNG frame (1320×666) is stretched to the box below 1400px (at 768px it
   is 696×1031). Below 1200px use the theme's own phone treatment: plain peach box, no frame. */
@media (max-width: 1199px) {
  .getin-touch-wrap .quick-bg {
    display: none !important;
  }
  .getin-touch-wrap {
    background-color: #FFF0E8;
    border-radius: 40px;
  }
}
/* Section badges: white on #7A64EC is 4.32:1 → use the theme's darker purple. */
.section-title .badge-section:not(.secondary) {
  background-color: #6754E9 !important;
}
/* …but on the purple sections (Kelas Kami, Jadwal Kelas) a purple badge disappears → light badge. */
.courses-section .section-title .badge-section,
.getin-touch-section .sassion-section .badge-section {
  background-color: #F2EDFE !important;
  color: #4B38C9 !important;
}
/* Testimonial author line: let "Nama / Orang Tua Murid" wrap as one centred line instead of
   splitting the name in two columns at 768px. */
.testimonial-card .author-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0 6px;
  text-align: center;
}
/* Small text links in the offcanvas and footers: ≥24px tall targets (WCAG 2.5.8). */
.offcanvas__contact-text a,
.footer-widget-info a,
.footer-widget-link a,
.footer-info-item a,
.footer-bottom p a {
  display: inline-block;
  min-height: 24px;
  line-height: 24px;
}

/* Footer copyright brand link: orange on purple was unreadable. */
.footer-bottom p .text-p1,
.footer-bottom p a {
  color: #fff !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Entry-page header is transparent over the purple hero image (white links read fine, but the
   contrast checker sees white on white). Give it the same purple the theme uses when sticky. */
.header-section.header-style1:not(.header-style2) {
  background-color: #6754E9;
}

/* Menu toggle 36×36 → 44×44 touch target. */
.header__hamburger .sidebar__toggle {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Section-edge PNGs (wavy tops/bottoms) are stretched to the section box; at phone widths the
   1920px-wide waves squash into jagged spikes. Keep their proportions and crop instead. */
.courses-section .course-bg,
.count-bg,
.getin-touch-section .sassion-bg {
  object-fit: cover;
  object-position: center;
}

/* Small decorative PNGs (toy car, blocks, stars…) get fixed boxes from the theme that do not match
   their pixel ratio → keep the drawing undistorted inside the box. */
img.hero-dump,
img.hero-car,
img.babol-quit,
img.cir36 {
  object-fit: contain;
}

/* Decorative blobs that sit on top of text at 1400–1699px (yellow face in the schedule section,
   rainbow over the footer links). Only show them when the container has room on the sides. */
@media (max-width: 1699px) {
  .getin-touch-section .rain-icon,
  .footer-style1 .footer-estrue {
    display: none !important;
  }
}
/* Testimonial slider: give it the same width as the section container instead of full-bleed
   (cards used to touch the viewport edges, and the phone card got clipped). */
.testimonial-section .testimonial-slider {
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: 12px;
}
@media (max-width: 575px) {
  .testimonial-card {
    padding: 40px 20px;
  }
}

/* Schedule rows at 768–991px: keep the time on one line. */
.sassion-item span {
  white-space: nowrap;
}

/* ---- Design QA round 3 (2026-10-12) ---- */

/* Decorations that land on text/buttons at 992–1599px (seen in the 1024/1280/1440 shots):
   ring-stacker toy over the hero paragraph, light bulb over "Mulai Mendaftar", star-rainbow over
   "Rina Wulandari", rainbow over "Kontak Cepat", kite + palette over the newsletter text. */
@media (max-width: 1599px) {
  img.hero-dump {
    display: none !important;
  }
}
@media (max-width: 1399px) {
  img[src$="admission-knodlage.png"] {
    display: none !important;
  }
}
@media (min-width: 992px) and (max-width: 1699px) {
  .start-cry {
    display: none !important;
  }
}
@media (max-width: 1199px) {
  .getin-touch-section .quick-rainbow,
  .newsletter-section .news-estrue,
  .newsletter-section .news-estrue1 {
    display: none !important;
  }
}

/* Schedule section ≤991px: the theme stretches the purple wave PNG to the whole section height
   (≤767px) or a fixed 490px (768–991px). On phones the purple then sits behind the dark
   "Kontak Cepat" heading; on tablets the badge touches the wave. Paint the wave behind the
   schedule block itself instead (section is overflow:hidden, bottom padding 80px). */
@media (max-width: 991px) {
  .getin-touch-section .sassion-bg {
    display: none !important;
  }
  .getin-touch-section .sassion-section::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: -80px;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: #6754E9 url(assets/img/element/sassion-bg.png) center / cover no-repeat;
  }
  .getin-touch-section .sassion-section {
    padding-top: 110px;
  }
  .getin-touch-section .rain-box {
    z-index: 2;
    bottom: 16px;
  }
}

/* Phones: the ring-stacker would sit on the last schedule row → hide it there. */
@media (max-width: 575px) {
  .getin-touch-section .rain-box {
    display: none !important;
  }
}

/* Final re-verification 2026-10-13: inner-page footer (light background) — copyright link readable. */
.footer-style4 .footer-bottom p .text-p1,
.footer-style4 .footer-bottom p a {
  color: #4a3bc4 !important;
}
/* Inner-page footer: decorative plane covered the MDIX wordmark. */
.footer-style4 .footer-plan { display: none !important; }

/* Final re-verification 2026-10-13: wordmark redrawn at 2x with larger letters; keep it readable on phones (was 77px wide, ~6px text). */
.header-main .header-logo { max-width: 150px; }
@media (max-width: 1399px) { .header-main .header-logo { max-width: 130px; } }
@media (max-width: 575px) {
  .header-main .header-logo { max-width: 100px; min-width: 92px; flex-shrink: 0; margin-right: 6px; }
  /* the phone header row (logo, search, CTA, menu) was 401px wide at 360/390 — menu button cut off */
  .header-main .header-right { gap: 8px !important; }
  .header-main .header-right .common_btn { padding: 8px 10px !important; font-size: 12px !important; gap: 6px; }
}
@media (max-width: 400px) { .header-main .header-right .common_btn .icon_wrapper { display: none !important; } }
/* Final re-verification 2026-10-13: orange section label (#f15f25, 3.3:1 on white) → darker orange for AA. */
.sub__text-p1 { color: #c2410c !important; }