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

/* Indonesian opening hours are longer than the original; keep the three header boxes on one row. */
@media (min-width: 992px) {
  .logo-area .header-info-box {
    margin-left: 48px;
  }
  .logo-area .header-info-box p {
    white-space: nowrap;
  }
  .mainmenu-area .navbar-nav .dropdown .nav-link {
    padding-right: 24px;
  }
}

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

/* CLS: Owl hides .owl-carousel until its script runs, so the 550px hero started at 0px and every
   section jumped down on load. Show the first slide at its final size before Owl initialises. */
.home-slides.owl-carousel {
  display: block;
  min-height: 550px;
}
.home-slides.owl-carousel:not(.owl-loaded) .home-single-slide:not(:first-child) {
  display: none;
}
@media only screen and (max-width: 767px) {
  .home-slides.owl-carousel {
    min-height: 0;
  }
}

/* Phone header: the stacked top bar + three info boxes pushed the hero 580px down and left the
   menu bar far below the fold. Address, phone and hours are repeated in the footer. */
@media only screen and (max-width: 767px) {
  .main-header .top-area,
  .logo-area .header-info-box {
    display: none;
  }
  .logo-area .col-lg-3 {
    margin-bottom: 0 !important;
  }
  .logo-area {
    padding: 10px 0;
  }
  .logo-area .logo {
    padding: 6px 0;
  }
  .logo-area .logo img {
    max-width: 230px;
  }
}

/* AA contrast: body grey #767676 was 4.3:1 on the light-grey sections. */
body {
  color: #646464;
}
.single-blog-post-Info small,
.single-blog-post-meta small {
  color: #8a8a8a;
}
.post-previous span,
.post-next span {
  color: #6b6b6b;
}

/* Touch targets (WCAG 2.5.8): slider dots, gallery icons, inline links in footer and blog meta. */
.owl-theme .owl-dots .owl-dot {
  min-width: 24px;
  min-height: 24px;
  padding: 4px 2px;
}
.portfolio-sin-item figcaption .port-icon a.icon-ho {
  display: inline-block;
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
}
.footer-widget-inner ul li a,
.recTitle a,
.copyright-text a,
.blog-home-meta span a,
.footer-menu ul li a,
.blog-single-tag a,
.single-blog-post-Info a,
.tzcategory a {
  display: inline-block;
  padding-top: 3px;
  padding-bottom: 3px;
}
.mean-container a.meanmenu-reveal {
  min-width: 44px;
  min-height: 44px;
}

/* Skewed CTA band ("Jadilah Bagian dari Keluarga Kami") overflowed the body by ~900px. */
.callto-action-padding {
  overflow: hidden;
}

/* Footer logo PNG has a white box; blend it into the light footer. */
#top-footer .logo img {
  mix-blend-mode: multiply;
}

/* Hover-only gallery captions/icons are unreachable on touch screens: show them at full size
   (the theme keeps them at scale(0.5) until hover, which made the icons 18px), tucked at the bottom
   of the photo so the picture stays visible. */
@media (hover: none) {
  .portfolio-sin-item figcaption {
    opacity: 1;
    visibility: visible;
    top: auto;
    bottom: 12px;
    -webkit-transform: translate(-50%, 0) scale(1);
    transform: translate(-50%, 0) scale(1);
  }
  .portfolio-sin-item figcaption .port-icon a.icon-ho {
    width: 44px;
    height: 44px;
    line-height: 44px;
  }
}

/* Touch targets: logo links wrap a block image but stayed 19px-tall inline boxes; blog card titles. */
.logo a {
  display: inline-block;
}
.blog-home-content h4 a,
.blog-home-des-right h4 a,
.blog-home-des-right h5 a,
.blog-home-des-right h6 a {
  display: inline-block;
  padding-top: 3px;
  padding-bottom: 3px;
}

/* AA contrast: "Artikel sebelumnya/berikutnya" labels were #b3b3b3 (2.1:1). */
.blog-single-prevnxt .blog-single-prevnxt-wrap .post-previous span,
.blog-single-prevnxt .blog-single-prevnxt-wrap .post-next span {
  color: #6b6b6b;
}

/* More touch targets (inner pages): slider arrows, sidebar gallery thumbs, prev/next post,
   comment authors, contact links. */
.service-slides-wrapper .owl-nav button.owl-prev,
.service-slides-wrapper .owl-nav button.owl-next,
.gallery-slides-wrapper .owl-nav button.owl-prev,
.gallery-slides-wrapper .owl-nav button.owl-next {
  min-width: 32px;
}
.single-gallery > a:first-child {
  display: block;
}
.post-previous h6 a,
.post-next h6 a,
.comment-text .author p a,
.comment-meta a,
.address-box-des p a {
  display: inline-block;
  padding-top: 3px;
  padding-bottom: 3px;
}

/* Testimonial cards (about + testimonial pages): the name column sized itself to the name, so longer
   Indonesian names ("Ibu Maya Anggraini") pushed the quote box below the photo. Fixed column widths. */
@media (min-width: 993px) {
  #aboutes .testimonial-style-2-left,
  #testimonial .testimonial-style-2-left {
    width: 160px;
    margin-right: 24px;
  }
  #aboutes .testimonial-style-2-right,
  #testimonial .testimonial-style-2-right {
    width: calc(100% - 184px);
  }
  #aboutes .testimonial-style-2-left h4,
  #testimonial .testimonial-style-2-left h4 {
    font-size: 20px;
  }
}

/* Blog timeline on phones: timeline indent + card padding + 65px avatar column left ~100px for the
   comment text (two words per line). Tighter indents and the avatar above the comment. */
@media only screen and (max-width: 575px) {
  .single-blog-post .single-blog-post-wrap,
  .blog-single .blog-single-tag .blog-single-tag-wrap,
  .blog-single .blog-single-author .blog-single-author-wrap,
  .blog-single .blog-single-prevnxt .blog-single-prevnxt-wrap,
  .blog-single .blog-single-comment .blog-single-comment-wrap,
  .blog-single .blog-single-comment-form .blog-single-comment-form-wrap {
    padding-left: 32px;
  }
  .single-blog-post .single-blog-post-wrap .single-blog-post-content,
  .blog-single .blog-single-tag .blog-single-tag-wrap .blog-single-tag-list,
  .blog-single .blog-single-prevnxt .blog-single-prevnxt-wrap .blog-single-related-post,
  .blog-single .blog-single-author .blog-single-author-wrap .blog-single-author-des,
  .blog-single .blog-single-comment .blog-single-comment-wrap .blog-single-comment-des,
  .blog-single .blog-single-comment-form .blog-single-comment-form-wrap .blog-single-comment-form-inner {
    padding-left: 16px;
    padding-right: 16px;
  }
  .blog-single-comment .blog-single-comment-wrap .comment .avatar {
    float: none;
    width: 48px;
    margin-bottom: 8px;
  }
  .blog-single-comment .blog-single-comment-wrap .comment .comment-text {
    margin: 0;
    padding: 12px;
  }
  .blog-single-comment .blog-single-comment-wrap .comment .comment-text:before {
    display: none;
  }
  .blog-single-comment .blog-single-comment-wrap .comment ul {
    padding-left: 16px;
  }
  /* share icons sit on the timeline line: re-centre them for the smaller indent */
  .blog-single .blog-single-share .blog-single-share-box {
    left: -63px;
  }
}

.single-blog-post-title a {
  display: inline-block;
  padding-top: 3px;
  padding-bottom: 3px;
}

/* Parallax section photos use background-attachment: fixed, which iOS Safari renders as a huge,
   blurry crop; scroll normally on touch screens. */
@media (hover: none) {
  .section-back-image {
    background-attachment: scroll;
  }
}

/* 992–1199px (e.g. 1024 tablets landscape): the three header info boxes wrapped to a second row and
   "Tentang Kami" broke onto two lines in the menu bar. */
@media (min-width: 992px) and (max-width: 1199px) {
  .logo-area .header-info-box {
    margin-left: 18px;
  }
  .mainmenu-area .navbar-nav .nav-link {
    padding-left: 14px;
    padding-right: 14px;
    white-space: nowrap;
  }
}

/* Verifikasi ulang akhir 2026-10-13: header sticky (setelah gulir) hanya berisi bilah menu tanpa logo.
   Logo MDIX ditampilkan di pelat putih di kiri bilah menu saat sticky (≥1200px; di bawahnya menu HP dengan logo). */
@media (min-width: 1200px) {
  .is-sticky .mainmenu-area .navbar { position: relative; padding-left: 186px; }
  .is-sticky .mainmenu-area .navbar::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 168px; height: 44px; border-radius: 6px;
    background: #fff url("assets/img/logo.png") no-repeat center / 148px auto;
  }
  .is-sticky .mainmenu-area .navbar-nav > li > a { white-space: nowrap; }
  .is-sticky .mainmenu-area .navbar-nav > li { padding-left: 0; padding-right: 0; }
  .is-sticky .mainmenu-area .col-lg-9 { flex: 0 0 88%; max-width: 88%; }
  .is-sticky .mainmenu-area .col-lg-3 { flex: 0 0 12%; max-width: 12%; }
}