/* MDIX audit fixes — MDIX Otomotif Utama */

/* The vehicle-services slider shows its neighbour slides on purpose (overflow: visible),
   which made the page ~6000px wide. Clip it at the section edge. */
.flat-vehicle-services {
  overflow: hidden;
}

/* Footer logo text is navy on the dark footer; show it in white. */
#footer #logo-ft img {
  filter: brightness(0) invert(1);
}

/* Partner-logo strip only holds blank grey placeholder images — hide it. */
.flat-client {
  display: none;
}

/* ============================================================
   Design-QA round (2026-10-12) — mdix-otomotif-utama
   ============================================================ */

/* C — Mobile header: the contact/social strip pushed the logo and the menu
   button ~290px down the page, so the hamburger was unreachable/undetected and
   the header was very tall. Hide that strip on phones/tablets (the same info is
   in the footer) and give the menu button a 44px tap target. */
@media only screen and (max-width: 991px) {
  .header-top .top { display: none !important; }
  #header .mobile-button {
    width: 44px;
    height: 44px;
    left: 8px;
  }
}

/* E — Active/hover main-menu item is white text on gold (#e8b006 ≈ 1.9:1).
   Use near-black text for AA. */
#header #mainnav > ul > li.active > a,
#header #mainnav > ul > li:hover > a {
  color: #1a1a1a !important;
}

/* E — Portfolio filter links and the gold "Lihat Semua" button fail AA on white;
   darken them. */
.flat-filter li a { color: #333333 !important; }
.flat-filter li.active > a,
.flat-filter li a:hover { color: #9a6a00 !important; }
/* Blog/news card meta links (category + date) were a light tone on white (2.24:1). */
.flat-blog .meta a,
.post-content .meta a,
.meta ul li a.hover-text { color: #5a5a5a !important; }
.flat-button.btn-defect,
.flat-button.bg-views-all,
.btn-view-project { color: #1f2d3d !important; }

/* E — Hero slider captions sit over a photo; keep a shadow so they stay legible. */
.rev_slider .tp-caption,
.rev_slider a.text-white { text-shadow: 0 2px 10px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.75); }

/* E — Service-card heading is white text on a solid gold bar (#e8b006 ≈ 1.97:1);
   use near-black text for AA (dark on gold ≈ 8:1). */
.flat-our-services .imgbox-content .heading a,
.flat-our-services .imgbox-content .hover-text,
.flat-our-services .imgbox-content .hover-text:hover { color: #1a1a1a !important; text-shadow: none; }

/* E — Footer "Info Kontak" muted text was #6a6a6a on the dark footer (2.87:1);
   lighten it for AA. */
#footer .widget-info,
#footer .widget-info p,
#footer .widget-info a,
#footer .flat-copy-right,
#footer .flat-copy-right p,
#footer .flat-copy-right a { color: #c2c2c2 !important; }

/* B — Tap targets: lift text links in the footer, the service/highlight cards,
   blog meta and carousel dots to a >=24px hit area (WCAG 2.5.8). */
#footer .widget-info a { display: inline-block; padding: 4px 6px; }
#footer .flat-socails li a,
.flat-our-services .imgbox-content .hover-text,
.flat-overviews-slider h5 a,
.post-content .meta a,
.meta ul li a { display: inline-block; padding-top: 3px; padding-bottom: 3px; min-height: 24px; }
/* Social icons need a wider hit area too. */
#footer .flat-socails li a { min-width: 28px; text-align: center; }
/* Carousel dots: keep the visual dot but give the button a 24px hit target
   (theme uses .owl-theme .owl-dots .owl-dot, so match that specificity). */
.owl-theme .owl-dots .owl-dot {
  width: 24px !important;
  height: 24px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: transparent !important;
}
.owl-theme .owl-dots .owl-dot span { margin: 0 !important; }
/* Links that wrap an image collapse to the text line-height (~18px) so the image
   overflows a tiny box; make them wrap the image so the whole image is tappable. */
a:has(> img) { display: inline-block; }
/* Header search toggle is an 18px icon — give it a >=24px control hit area
   without pushing it past the right edge on phones. */
.show-search > a { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; }

/* D (CLS) — the services owl-carousel stacks all four slides full-height before
   it initialises, then collapses to one row (big layout shift). Reserve the row
   height and keep only the first slide visible until owl wraps items in a stage. */
.flat-our-services .carousel-service { min-height: 369px; }
.flat-our-services .carousel-service:not(:has(.owl-stage)) > .imgbox:not(:first-child) { display: none; }
@media only screen and (max-width: 1024px) { .flat-our-services .carousel-service { min-height: 295px; } }
@media only screen and (max-width: 767px)  { .flat-our-services .carousel-service { min-height: 250px; } }

/* D (CLS) — reserve the hero slider's final height per breakpoint so the content
   below it does not jump while Revolution Slider builds its slots. */
.rev_slider_wrapper, .tp-banner-container, .rev_slider { min-height: 722px; }
@media only screen and (max-width: 1024px) { .rev_slider_wrapper, .tp-banner-container, .rev_slider { min-height: 500px; } }
@media only screen and (max-width: 767px)  { .rev_slider_wrapper, .tp-banner-container, .rev_slider { min-height: 350px; } }
/* Paint the hero image immediately so the slider's first-frame build does not flash/shift. */
.rev_slider_wrapper { background: #1a1a1a url("images/slider.jpg") center center / cover no-repeat; }

/* A — "Vehicle Services" banner image is set to a shorter box than its source
   and renders squashed; cover-crop it. Keep the scroll-top icon's aspect ratio. */
.flat-vehicle-services .yys-slider img,
.flat-vehicle-services img { object-fit: cover; }
.gotop img { width: 60px !important; height: 50px !important; }

/* Verifikasi ulang akhir 2026-10-13: keterangan data contoh */
.mdix-sample-note { display: block; width: 100%; clear: both; margin: 16px 0 0; font-size: 13px; line-height: 1.4; font-style: italic; font-weight: 400; letter-spacing: 0; text-transform: none; text-align: center; color: #fff; position: relative; z-index: 2; }
.mdix-sample-note--dark { color: inherit; margin: 0 0 24px; }