/* MDIX PAUD Utama — per-template fixes from the audit. */

/* The info and facility icons shipped as flat grey placeholder boxes.
   Hide them and draw a matching Font Awesome icon instead. */
.info-section .info-block .icon-box img,
.facilities .facility-block .image-box img {
  display: none !important;
}
.info-section .info-block .icon-box::before,
.facilities .facility-block .image-box::before {
  font-family: "FontAwesome";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.info-section .info-block .icon-box::before {
  font-size: 64px;
  height: 110px;
}
.info-section .info-block:nth-child(1) .icon-box::before { content: "\f1b3"; color: #6f8a12; } /* cubes */
.info-section .info-block:nth-child(2) .icon-box::before { content: "\f19d"; color: #0f9e9c; } /* graduation cap */
.info-section .info-block:nth-child(3) .icon-box::before { content: "\f1fc"; color: #d96a00; } /* paint brush */

.facilities .facility-block .image-box::before {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  font-size: 36px;
  color: #ffffff;
}
.facilities .facility-block:nth-child(1) .image-box::before { content: "\f1bb"; background: #6f8a12; } /* tree */
.facilities .facility-block:nth-child(2) .image-box::before { content: "\f207"; background: #d96a00; } /* bus */
.facilities .facility-block:nth-child(3) .image-box::before { content: "\f0f5"; background: #d42a2a; } /* cutlery */
.facilities .facility-block:nth-child(4) .image-box::before { content: "\f1fc"; background: #0f9e9c; } /* paint brush */
.facilities .facility-block:nth-child(5) .image-box::before { content: "\f118"; background: #6f8a12; } /* smile */
.facilities .facility-block:nth-child(6) .image-box::before { content: "\f11b"; background: #d96a00; } /* gamepad */

/* course-detail.html "Fasilitas Kelas" reuses .facilities with 4 other labels */
.course-feature .facility-block:nth-child(1) .image-box::before { content: "\f1fc"; background: #0f9e9c; } /* paint brush */
.course-feature .facility-block:nth-child(2) .image-box::before { content: "\f046"; background: #6f8a12; } /* check */
.course-feature .facility-block:nth-child(3) .image-box::before { content: "\f11b"; background: #d96a00; } /* gamepad */
.course-feature .facility-block:nth-child(4) .image-box::before { content: "\f02d"; background: #d42a2a; } /* book */

/* about.html skill icons were grey 101x71 boxes */
.skill-block .inner img.icon { display: none !important; }
.skill-block .inner::before {
  font-family: "FontAwesome";
  position: absolute;
  right: 0;
  top: 0;
  width: 100px;
  height: 71px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  line-height: 1;
}
.learning-skills .right-column .skill-block .inner::before { right: auto; left: 0; }
.learning-skills .left-column .skill-block:nth-child(1) .inner::before  { content: "\f046"; color: #6f8a12; } /* check */
.learning-skills .left-column .skill-block:nth-child(2) .inner::before  { content: "\f0c0"; color: #0f9e9c; } /* users */
.learning-skills .left-column .skill-block:nth-child(3) .inner::before  { content: "\f086"; color: #d96a00; } /* comments */
.learning-skills .right-column .skill-block:nth-child(1) .inner::before { content: "\f1ae"; color: #d42a2a; } /* child */
.learning-skills .right-column .skill-block:nth-child(2) .inner::before { content: "\f091"; color: #6f8a12; } /* trophy */
.learning-skills .right-column .skill-block:nth-child(3) .inner::before { content: "\f0eb"; color: #0f9e9c; } /* lightbulb */

/* ---- AA contrast (DECISIONS D-20): theme red #f73f3f on white = 3.66:1,
   green #9bba1f = 2.2:1, and the accent heading colours are 2.0–2.8:1 for
   large text. Darker shades of the same hues. ---- */
.btn-style-one,
.main-header .nav-outer .btn-box .call-btn,
.main-menu .navbar-header .navbar-toggle {
  background: #d42a2a !important;
  border-color: #d42a2a !important;
  color: #ffffff !important;
}
.btn-style-one:hover,
.main-header .nav-outer .btn-box .call-btn:hover {
  background: #b51f1f !important;
  border-color: #b51f1f !important;
}
.btn-style-twp {
  background: #5f7d10 !important;
  border-color: #5f7d10 !important;
  color: #ffffff !important;
}
.btn-style-twp:hover { background: #4c6509 !important; border-color: #4c6509 !important; }

.text-parrot,
.info-section .info-block h3,
.info-section .info-block h3 a,
.staff-block:nth-child(3n + 2) .info-box h3 a,
.list-style-one li:before,
.list-style-two li:before,
.category-list li a:before { color: #6f8a12 !important; }
.text-sky,
.info-section .info-block:nth-child(2) h3,
.info-section .info-block:nth-child(2) h3 a,
.staff-block .info-box h3,
.staff-block .info-box h3 a,
.news-block .content-column .info-column .date { color: #0f9e9c !important; }
.text-orange,
.theme_color,
.info-section .info-block:nth-child(3) h3,
.info-section .info-block:nth-child(3) h3 a,
.staff-block:nth-child(3n + 3) .info-box h3 a,
.intro-text h4,
.facilites-section .info-column h3,
.video-feature-sec .content-column .inner-column h4,
.main-header .header-top .top-left ul li i { color: #d96a00 !important; }
.text-pink { color: #d42a2a !important; }
/* keep the slider title its bright colours: it sits on a photo with a dark stroke */
.main-slider h2 .text-parrot { color: #a4c122 !important; }
.main-slider h2 .text-orange { color: #ee7b00 !important; }

/* ---- Hero (Revolution Slider) ---- */
/* darken the photo a little so the white kicker/paragraph read on bright skies */
.main-slider .tp-bgimg { box-shadow: inset 0 0 0 200vmax rgba(0, 0, 0, 0.28); }
.main-slider p { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); }
/* the theme shrinks the title to 24px (<600) and 16px (<480): smaller than its kicker */
@media (max-width: 599px) {
  .main-slider h2 { font-size: 30px !important; line-height: 1.15em; }
}
@media (max-width: 479px) {
  .main-slider h2 { font-size: 27px !important; }
}
/* reserve the slider height before the script runs (CLS 0.37–0.39 on desktop) */
.main-slider .rev_slider_wrapper { min-height: 650px; overflow: hidden; }
@media (max-width: 1199px) { .main-slider .rev_slider_wrapper { min-height: 560px; } }
@media (max-width: 1039px) { .main-slider .rev_slider_wrapper { min-height: 520px; } }
@media (max-width: 777px)  { .main-slider .rev_slider_wrapper { min-height: 480px; } }
@media (max-width: 599px)  { .main-slider .rev_slider_wrapper { min-height: 0; } }
.main-slider .rev_slider:not(.revslider-initialised) > ul { visibility: hidden; }

/* ---- Header / footer ---- */
/* phone menu button was 44x34 */
.main-menu .navbar-header .navbar-toggle {
  min-width: 44px;
  min-height: 44px;
  padding: 10px 10px;
}
/* logo links were 17px tall (inline anchor around the image) */
.logo a,
.footer-logo a { display: inline-block; }

/* ---- Touch targets ≥ 24px for small text links in cards ---- */
.facilities .facility-block h4 a,
.news-section .post-info li a,
.news-section .info-column h4 a,
.main-footer .posts-widget .desc-text a,
.gallery-item .caption-box .title a,
.latest-news .post h3 a,
.popular-courses .caption-box h3 a {
  display: inline-block;
  padding: 3px 0;
  min-height: 24px;
}

/* ---- Gallery filter: the hidden 43px "circle" decoration (::before) is wider
   than short labels such as "Foto" (31px), so the label box overflowed ---- */
.mixitup-gallery .filters li { line-height: 1.6em; min-width: 46px; text-align: center; }

/* ---- Contact map: keyless embed replaces the theme's JS map ---- */
.map-canvas iframe { width: 100%; height: 100%; border: 0; display: block; }

/* blog sidebar: a landscape photo used in the 80x80 thumb slot */
.latest-news .post .thumb img { height: 80px; object-fit: cover; }

/* ---- Round 1 (re-audit 2026-10-12) ---- */

/* White text on the theme's flat colour bands failed AA (green 2.1:1, cyan 1.9:1,
   orange 2.6:1, red 3.5:1). A dark wash on each band = darker shade of the same hue,
   white text now >= 4.5:1. The wave edge (::after) stays on top. */
.call-to-action::before,
.testimonial-section::before,
.video-section::before,
.subscribe-section::before,
.fact-counter-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.call-to-action::before       { background: rgba(0, 0, 0, 0.38); }  /* lime  -> olive   (~5.0:1) */
.testimonial-section::before  { background: rgba(0, 0, 0, 0.22); }  /* red   -> deep red (~5.4:1) */
.video-section::before        { background: rgba(0, 0, 0, 0.30); }  /* orange-> amber   (~4.9:1) */
.subscribe-section::before    { background: rgba(0, 0, 0, 0.42); }  /* cyan  -> teal    (~5.4:1) */
/* counter band: white numbers sat on the beige pages of a book photo */
.fact-counter-section::before { background: rgba(20, 24, 48, 0.55); }
/* paint the wash between the band background and its content without re-positioning
   .auto-container (the floating doodles are placed relative to the section) */
.call-to-action,
.testimonial-section,
.video-section,
.subscribe-section,
.fact-counter-section,
.page-title { isolation: isolate; }
.call-to-action::before,
.testimonial-section::before,
.video-section::before,
.subscribe-section::before,
.fact-counter-section::before,
.page-title::before { z-index: -1; }

/* "Kenapa memilih kami" info cards: equal heights in a row */
@media (min-width: 768px) {
  .info-section .row { display: flex; flex-wrap: wrap; }
  .info-section .row::before, .info-section .row::after { display: none; }
  .info-section .info-block { display: flex; }
  .info-section .info-block .inner-box { flex: 1 1 auto; width: 100%; }
}

/* Facilities: six icons stacked one per row made a very long phone scroll -> 2 per row */
@media (max-width: 767px) {
  .facilities .facility-block { width: 50%; float: left; margin-bottom: 32px; }
  .facilities .facility-block:nth-child(odd) { clear: left; }
  .facilities .facility-block h4 { font-size: 16px; }
}

/* Phone touch targets: top-bar social icons and the hero CTA to 44px */
@media (max-width: 991px) {
  .main-header .social-icon-one li a { width: 44px; height: 44px; line-height: 44px; }
  .main-slider .theme-btn { min-height: 44px; line-height: 44px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
}

/* Inner-page banner: white breadcrumb and teal/orange title sat on a bright photo */
.page-title::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(15, 20, 40, 0.6);
  pointer-events: none;
}
.page-title h1,
.page-title h1.text-sky,
.page-title h1.text-orange,
.page-title h1.text-parrot,
.page-title h1.text-pink { color: #ffffff !important; }

/* course-detail info strip: white on #00cbc9 = 2.0:1 -> dark text (9:1), wave edge kept */
.course-slider .slide-item .course-info li,
.course-slider .slide-item .course-info li i { color: #0b2e33 !important; }

/* FAQ accordion open header: white on #9bba1f = 2.2:1 -> darker olive (4.7:1) */
.accordion-box .block .acc-btn.active { background-color: #5f7d10 !important; }

/* Pagination: only one page exists, prev/next are inert */
.styled-pagination li a[aria-disabled="true"] { opacity: 0.45; cursor: default; pointer-events: none; }

/* Inner pages, round 2 */
/* comment "Balas" button: white on #9bba1f = 2.2:1 */
.comments-area .comment-box .reply-btn { background-color: #5f7d10 !important; }
.comments-area .comment-box .reply-btn:hover { background-color: #4c6509 !important; }
/* 17px-tall text links in course cards and blog post meta -> 24px tap height */
.course-block .start,
.news-block-two .post-info li a,
.blog-single .post-info li a,
.post-info li a {
  display: inline-block;
  min-height: 24px;
  line-height: 24px;
}

/* Header 1024-1199: the menu wrapped under the logo with 52px item padding,
   leaving a ~260px header with a big empty band. Same tidy 2-row layout as 768. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .main-header .main-box .logo-box { width: 100%; text-align: center; padding: 22px 0 6px; }
  .main-header .nav-outer { width: 100%; }
  .main-menu .navigation > li { margin-left: 30px; padding: 22px 0; }
  .main-menu .navigation > li:first-child { margin-left: 0; }
  .main-header .nav-outer .btn-box { padding: 13px 0; }
}

/* Hero arrows covered the caption (caption starts 14px from the edge below 1200px).
   The slider still autoplays and swipes. */
@media (max-width: 1199px) {
  .main-slider .tparrows { display: none !important; }
}