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

/* AOS hides every section until it scrolls into view and hides it again when scrolling back up,
   so full-page captures (catalogue, audit, "save as PDF") showed most of the homepage blank. */
[data-aos] {
  opacity: 1 !important;
  transform: none !important;
}

/* Team carousel mixes photo sizes; keep every card the same height. */
.our-team-carousel .member-image img {
  width: 100%;
  aspect-ratio: 9 / 10;
  object-fit: cover;
  object-position: center top;
}

/* Footer/mobile logo has dark "Sekolah Prima" text on a dark background; give it a light plate. */
.footer-logo img,
.mobile_site_logo img {
  background: #fff;
  padding: 6px 10px;
  border-radius: 4px;
}

/* Footer phone number wrapped onto two lines. */
.address-widget span {
  white-space: nowrap;
  font-size: 22px;
}

/* ---- Design QA 2026-10-12 ---- */

/* Brand orange #ff5202 is 3.25:1 on white (fails AA for text and white-on-orange buttons);
   light grey #a1a1a1/#a2a2a2 is 2.6:1. Darkened to #c64000 (5.1:1) / #6c6c6c (5.3:1) wherever
   style.css paints text or button/card backgrounds with them (DECISIONS D-20). */
.hover_bg { background-color: #c64000; }
.button_one { background-color: #c64000; }
.special-button { background-color: #c64000; }
.button_one_alt { color: #c64000; }
.button_four { color: #c64000; }
.button_four.active { background-color: #c64000; }
.button_four:hover { background-color: #c64000; }
.button_five { background-color: #c64000; }
.button_five.active { color: #c64000; }
.button_five:hover { color: #c64000; }
.theme-list ul li a:hover { color: #c64000; }
.theme-list ul li a:before { color: #c64000; }
.theme-list-4 ul li:hover a { color: #c64000; }
.theme-list-4 ul li:before { color: #c64000; }
.section-title h4 { color: #c64000; }
.section-heading:before { background-color: #c64000; }
.widget-title:before { background-color: #c64000; }
.pagination-wrapper ul li a:hover { background-color: #c64000; }
.link_btn { color: #c64000; }
.link_btn:hover { color: #c64000; }
.tags-list ul li a:hover { color: #c64000; }
.share-option ul li a { color: #c64000; }
.share-option ul li a:hover { background-color: #c64000; }
.main-menu ul li a:hover { background-color: #c64000; }
.main-menu .nav-item.dropdown.show { background-color: #c64000; }
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: #c64000; }
.single-service:hover { background-color: #c64000; }
.single-service-3.active { background-color: #c64000; }
.single-service-3.active:hover { background-color: #c64000; }
.single-service-3.active:hover .service-icon { background-color: #c64000; }
.single-service-3 a { color: #c64000; }
.single-service-3:hover { background-color: #c64000; }
.single-service-4.active { background-color: #c64000; }
.single-service-4 a { color: #c64000; }
.feature-status i { color: #c64000; }
.feature-content h3 a:hover { color: #c64000; }
.product-price { background-color: #c64000; }
.product-price-5 { color: #c64000; }
.single-countdown span { color: #c64000; }
.half_column_image .video-play-btn i { color: #c64000; }
.half_column_image:hover i { background-color: #c64000; }
.post-meta-info ul li { color: #c64000; }
.social-profile ul li a { color: #c64000; }
.social-profile ul li a:hover { background-color: #c64000; }
.social-profile-3 ul li a { color: #6c6c6c; }
.social-profile-3 ul li a:hover { background-color: #c64000; }
.social-profile-4 ul li a { color: #6c6c6c; }
.social-profile-5 ul li a { color: #6c6c6c; }
.social-profile-6 ul li a:hover { background-color: #c64000; }
.single-team:hover .member-info { background-color: #c64000; }
.single-team:hover .member-info-4 { background-color: #c64000; }
.show_navigation .owl-nav button.owl-prev { color: #6c6c6c; }
.show_navigation .owl-nav button.owl-prev:hover { background-color: #c64000; }
.show_navigation .owl-nav button.owl-next { color: #6c6c6c; }
.show_navigation .owl-nav button.owl-next:hover { background-color: #c64000; }
.show_navigation_2 .owl-nav button.owl-prev { color: #6c6c6c; }
.show_navigation_2 .owl-nav button.owl-next { color: #6c6c6c; }
.show_navigation_3 .owl-nav button.owl-prev { color: #6c6c6c; }
.show_navigation_3 .owl-nav button.owl-prev:hover { background-color: #c64000; }
.show_navigation_3 .owl-nav button.owl-next { color: #6c6c6c; }
.show_navigation_3 .owl-nav button.owl-next:hover { background-color: #c64000; }
.show_navigation_4 .owl-nav button.owl-prev { color: #6c6c6c; }
.show_navigation_4 .owl-nav button.owl-next { color: #6c6c6c; }
.single-event .event-date span { color: #c64000; }
.single-event h5 a:hover { color: #c64000; }
.single-event i { color: #c64000; }
.event-content h2 a:hover { color: #c64000; }
.event-content-one h2 a:hover { color: #c64000; }
.events-info i { color: #c64000; }
.events-info-2 i { color: #c64000; }
.events-info-2 .single-event-data a { color: #c64000; }
.events-info-2 .single-event-data span { color: #c64000; }
.single-blog .post-meta i { color: #c64000; }
.single-blog .post-meta .single-event-data a { color: #c64000; }
.single-testimonial:before { background-color: #c64000; }
.single-testimonial-3:before { background-color: #c64000; }
.testimonials-wrapper .owl-dots .owl-dot.active span { background-color: #c64000; }
.testimonials-wrapper-3 .owl-dots .owl-dot.active span { background-color: #c64000; }
.blog-lists-wrapper .blog-content-wrapper h4 a:hover { color: #c64000; }
.big-blog-area .blog-meta span { color: #c64000; }
.big-blog-area .blog-meta span a { color: #c64000; }
.big-blog-area .blog-text h3 a:hover { color: #c64000; }
.big-blog-area .blog-text a { color: #c64000; }
.widget-item .widget-content h5 a:hover { color: #c64000; }
.widget-list ul li a:hover { color: #c64000; }
.social-accounts ul li a:hover { background-color: #c64000; }
.subscribe-wrapper button[type=submit] { background-color: #c64000; }
.scroll-top:hover { background-color: #c64000; }
.image-gallery .owl-dots { background-color: #c64000; }
.featured-2-icon i { color: #c64000; }
.single-featured-3:hover .featured-2-icon i { background: #c64000; }
.contact-from-wrapper-2 input:focus { color: #c64000; }
.contact-from-wrapper-2 textarea:focus { color: #c64000; }
.contact-from-wrapper-2 button[type=submit] { background-color: #c64000; }
.single-timeline span { color: #c64000; }
.single-member:hover .member-intro h3 a { color: #c64000; }
.single-member:hover .member-intro p { color: #c64000; }
.single-member:hover .member-intro p strong { color: #c64000; }
.single-member:hover .member-status p strong { color: #c64000; }
.widget-video-img a { background-color: #c64000; }
.widget-video-img:hover a { color: #c64000; }
.highlights-section .social-links ul li a:hover { color: #c64000; }
.gallery-links ul li a:hover { color: #c64000; }
.post-text h2 a:hover { color: #c64000; }
.search-widget form button[type=submit] { background-color: #c64000; }
.latest-widget .single-latest .latest-content a:hover { color: #c64000; }
.category-list ul li a:hover { color: #c64000; }
.tag-clouds ul li a:hover { background-color: #c64000; }
.single-event-info:hover .single-event-date { background-color: #c64000; }
.single-event-content h3 a:hover { color: #c64000; }
.single-event-date p { color: #c64000; }
.single-event-date span { color: #c64000; }
.single-blog .blog-meta i { color: #c64000; }
.single-blog .blog-text h4 a:hover { color: #c64000; }
.single-item h4 a:hover { color: #c64000; }
.details-meta .single-meta i { color: #c64000; }
.single-comment .reply-btn { color: #c64000; }
.author-data a:hover { color: #c64000; }
.single-blog-item .single-blog-content h4 a:hover { color: #c64000; }
.latest-blogs-area .owl-nav button { color: #c64000; }
.latest-blogs-area .owl-nav button span { color: #c64000; }
.latest-blogs-area .owl-nav button:hover { background-color: #c64000; }
@media (min-width: 992px) {
  .main-menu .dropdown:hover { background-color: #c64000; }
  .timeline-wrapper:after { background-color: #c64000; }
  .timeline-wrapper .single-timeline:before { background-color: #c64000; }
}
.feature-status span { color: #6c6c6c; }
.special-button:hover, .button_one:hover { background-color: #a83600; }

/* Phone/tablet menu toggle was 44x30: make it a 44x44 target. */
.navbar-toggler { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* Hero pagination bullets were 20x20 (<24px). */
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { width: 24px; height: 24px; }
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet:before { left: -3px; top: -3px; }

/* Inline text links were 17–23px tall on touch widths: give them a 24px line box. */
.service-text a,
.link_btn,
.member-info a,
.blog-meta a,
.blog-text > a,
.blog-content-wrapper h4 a,
.widget-content h5 a,
.event-content h5 a,
.theme-list ul li a,
.widget-list ul li a { display: inline-block; min-height: 24px; line-height: 24px; }
.footer-logo a, .mobile_site_logo a, .video-play-link { display: inline-block; }
.blog-thumb a, .widget-image a { display: block; } /* inline-block shrank the thumbnails on phones */

/* courses.html: the 70px price circle cannot hold "Rp250.000/bln"; use a pill instead. */
.product-price-5 { width: auto; height: auto; border-radius: 30px; padding: 6px 14px; font-size: 16px; line-height: 1.5; white-space: nowrap; background: #fff; }
.product-price-5 p { margin: 0; line-height: 1.5; font-size: 16px; }

/* Inner pages (sweep, 390px): breadcrumb, tag, author and gallery-card links were 19–23px tall;
   carousel dots were 10x10 buttons. */
.page-breadcrumb a, .tags-list ul li a, .author-data a, .post-meta a { display: inline-block; min-height: 24px; line-height: 24px; }
.blog-image a { display: block; }
.owl-dots .owl-dot { min-width: 24px; min-height: 24px; padding: 0; vertical-align: middle; }

/* ---- Design QA 2026-10-12, round 2 (resumed audit) ---- */

/* Teacher cards (teachers.html, about.html) now reuse the homepage team photos, which come in
   different sizes; crop them to one portrait ratio so every card lines up. */
.our-teachers-wrapper .member-image-2 img,
.our-team-carousel-3 .member-image-2 img {
  width: 100%;
  aspect-ratio: 12 / 13;
  object-fit: cover;
  object-position: center top;
}
.our-teachers-wrapper .designation h5 a { color: inherit; }
.half_columnn_image img { width: 100%; height: auto; }

/* students.html: dark heading on the dark blackboard photo was unreadable; add a navy veil. */
.button-widget { position: relative; overflow: hidden; }
.button-widget::before { content: ""; position: absolute; inset: 0; background: rgba(13, 15, 40, 0.72); }
.button-widget > * { position: relative; }
.button-widget h3 { color: #fff; }

/* blog_details.html: comment author names are plain text now (no dead "#" links). */
.author-data strong { display: block; color: #002147; font-weight: 600; }

/* Homepage + departments: department cards in one row had different heights. */
.single-item { height: 100%; }

/* Homepage < 576px: the theme hid the event date boxes entirely, so the agenda list had no dates.
   Show a compact date box beside each item instead. */
@media (max-width: 575px) {
  .single-event { display: flex; gap: 14px; align-items: flex-start; }
  .single-event .event-date {
    display: block;
    flex: 0 0 72px;
    min-width: 72px;
    height: auto;
    margin-right: 0;
    padding: 6px 4px;
    border-width: 3px;
  }
  .single-event .event-date span { font-size: 30px; line-height: 1.1; }
  .single-event .event-date p { font-size: 15px; }
  /* Fixed back-to-top button covered the end of the © line. */
  .footer-bottom-wrapper { padding-bottom: 72px !important; }
}

/* Comment avatars lost their wrapping link (it pointed to "#"); keep them at the 89px design size. */
.author-thumb { width: auto; flex: 0 0 auto; }
.author-thumb img { width: 89px; height: 89px; object-fit: cover; }


/* events.html: the 24px link rule above also hit the outlined "Ikuti Acara" button (text sat at the top). */
.blog-text > a.button_one_alt { line-height: 46px; }
/* students.html: names are plain headings now (they linked to the About page). */
.single-member h3 { color: #002147; }

/* notice.html: date boxes shifted left/right with the title length; give the text a fixed share. */
@media (min-width: 769px) {
  .single-event-info .single-event-content { flex: 1 1 auto; padding: 0 24px; }
}

/* courses.html: card stats (students, comments, reviews) were #a2a2a2 = 2.55:1. */
.feature-status-3 .single-status span { color: #6c6c6c; }
/* blog_01.html 390px: "Oleh Admin" link was 17px tall. */
.events-info-2 .single-event-data a { display: inline-block; min-height: 24px; line-height: 24px; }

/* Final re-verification 2026-10-13 (D-20): cyan accent #14bdee is ~2.2:1 on white, so text and
   white-on-cyan buttons fail AA. Text, icons in text and button fills use #0877a0 (5.05:1 on white);
   the bright cyan stays for borders/lines and other decoration. Used by about/courses and the
   (unlinked) index-2/3/4 variants. */
.section-title-2 h4,
.rounded-btn,
.rounded-btn i,
.theme-list-2 ul a:hover,
.theme-list-2 ul a:before,
.single-service-2 a,
.feature-status-2 i,
.feature-content-2 h3 a:hover,
.product-price-3,
.main-menu-2 ul li a:hover { color: #0877a0; }
.hover_bg_2,
.button_two,
.button_two_plane,
.rounded-btn:hover,
.main-menu-3 .nav-item.dropdown.show,
.product-price-2 { background-color: #0877a0; }
.rounded-btn:hover,
.rounded-btn:hover i { color: #fff; }
.button_two:hover,
.button_two_plane:hover { background-color: #065f80; }