/* MDIX Klinik Sehat — audit fixes */

/* WOW.js reveals only run on real scroll events; content stayed invisible in full-page views
   and when the page is opened mid-scroll. Keep every block visible. */
.wow {
  visibility: visible !important;
}

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

/* AA contrast: the theme's grey body text (#93a0af, 2.66:1) and blue (#4A7CD2, 4.11:1 under white
   button text) fail WCAG AA. The theme declares its variables on `*`, so they are overridden there. */
* {
  --primary-color: #3a68c0;
  --body-font-color: #5f6c7b;
}
/* Small blue text on the navy sections keeps a lighter blue (the darker one would drop below AA). */
.bg-dark .subtitle,
.bg-dark .id-color:not(i),
.section-dark .subtitle,
.text-light .subtitle,
.bg-dark-1 .subtitle {
  color: #8fb0ea;
}

/* Hero: navy fallback behind the slider so the white text stays readable before/without the photo. */
#section-intro {
  background-color: var(--bg-dark-1);
}

/* Transparent header over the hero photo: a soft navy scrim keeps the white menu readable
   over light parts of the photo (window, wall). Removed once the header turns solid on scroll. */
header.transparent.scroll-light:not(.smaller):not(.header-mobile) {
  background-image: linear-gradient(180deg, rgba(0, 10, 91, 0.55) 0%, rgba(0, 10, 91, 0) 100%);
}

/* Phone/tablet header (theme switches to .header-mobile below 993px) */
header.header-mobile:not(.menu-open) #mainmenu {
  display: none; /* closed menu was only clipped, its links stayed focusable */
}
header.header-mobile.menu-open {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#menu-btn {
  width: 44px;
  height: 44px;
  padding: 10px;
  line-height: 24px;
  margin-left: 12px;
}
/* 768–992px: the navy mobile header showed the dark logo ("Klinik Sehat" invisible). */
@media (min-width: 768px) {
  header.header-mobile:not(.header-light) .logo-2,
  header.header-mobile:not(.header-light) .logo-scroll {
    display: none !important;
  }
  header.header-mobile:not(.header-light) .logo-mobile {
    display: block !important;
  }
}

/* Gutters: theme containers sit 12px from the screen edge on tablet/laptop widths. */
@media (min-width: 768px) and (max-width: 1299px) {
  .container {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* Contact bar under the hero: 2 + 1 layout at tablet width left the e-mail item stranded. */
@media (min-width: 768px) and (max-width: 991px) {
  .grid-divider > .col-lg-4.col-md-6:nth-child(3) {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Rows that poke out of the viewport on phones (gx-5 gutter, full-bleed carousel row). */
@media (max-width: 575px) {
  .row.gx-5 {
    --bs-gutter-x: 1.5rem;
  }
}
.row:has(> .owl-carousel.four-cols-center-dots) {
  margin-left: 0;
  margin-right: 0;
}
.row > .owl-carousel.four-cols-center-dots {
  padding-left: 0;
  padding-right: 0;
}

/* Touch targets */
.owl-dots button.owl-dot {
  width: 24px;
  height: 24px;
  padding: 8px;
  margin: 0 1px;
  box-sizing: border-box;
  background-clip: content-box;
}
footer .social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}
footer .widget ul li a,
footer .widget > a,
.subfooter .menu-simple li a {
  display: inline-block;
  padding: 2px 0;
  min-height: 24px;
}
footer .widget > a {
  color: inherit;
}

/* Footer bottom bar on phones/tablets: legal links were indented 15px. */
@media (max-width: 991px) {
  .subfooter .de-flex {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .subfooter .menu-simple li {
    margin: 0 20px 0 0;
  }
}

/* More touch targets (inner pages): breadcrumb, dentist social icons, contact links, comment reply */
.crumb li a {
  display: inline-block;
  padding: 2px 0;
  min-height: 24px;
}
.sc-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}
#content a[href^="mailto:"],
#content a[href^="tel:"] {
  display: inline-block;
  padding: 2px 0;
  min-height: 24px;
}
.c_reply a {
  display: inline-block;
  padding: 4px 6px;
  min-height: 24px;
}

/* Footer on tablets: nested link columns used a smaller gutter and sat 12px left of "Hubungi Kami". */
@media (min-width: 576px) and (max-width: 991px) {
  footer .row.gx-5 .row {
    --bs-gutter-x: 3rem;
  }
}

/* Team cards at 992–1299px: long Indonesian titles (drg. …, Sp.Pros) wrapped to 2 lines and the
   name boxes ended up at different heights. */
@media (min-width: 992px) and (max-width: 1299px) {
  .col-lg-3 .abs.bottom-0 .bg-white h4 {
    font-size: 17px;
  }
  .col-lg-3 .abs.bottom-0 .bg-white {
    margin: 10px !important;
    min-height: 104px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .col-lg-3 .abs.bottom-0 .bg-white p {
    margin-bottom: 0 !important;
  }
}

/* FAQ tabs: the theme only shows the active panel on click, so on load all four panels were
   stacked (20 questions under the first tab). Show only the first panel until a tab is clicked. */
.de-tab .d-tab-content > li {
  display: none;
}
.de-tab .d-tab-content > li:first-child {
  display: list-item;
}

/* Blog sidebar tags were white text on a white sidebar (invisible). */
#content .widget_tags li a {
  display: inline-block;
  color: var(--heading-font-color) !important;
  border: solid 1px rgba(16, 36, 75, 0.2);
  min-height: 24px;
}
#content .widget_tags li a:hover {
  border-color: var(--primary-color);
  color: var(--primary-color) !important;
}

/* Desktop side-panel toggle is only 24x12px: enlarge its hit area to 44x44 without moving the icon. */
#btn-extra::before {
  content: "";
  position: absolute;
  inset: -16px -10px;
}

/* D-19b: latar hero bergumpal warna tema (background/3.webp) dipulihkan; teks dipergelap sedikit agar tetap AA di atas gumpalan. */
section[style*="background/3.webp"] .subtitle { color: #2f5aa8; }
section[style*="background/3.webp"] p { color: #4b5563; }

/* Verifikasi ulang akhir 2026-10-13: catatan "data contoh" di bawah baris angka statistik. */
.mdix-sample-note { margin: 24px 0 0; text-align: center; font-size: 14px; opacity: .9; }