/* MDIX Otomotif Harmoni — audit fixes */

/* Brand logos and car-type icons were grey size placeholders ("80X28", "141X54");
   keep the labelled cards, hide the placeholder graphics. */
.brand-section .brand-image,
.car-type-section .car-image {
  display: none !important;
}

/* Featured/testimonial carousels use overflow:visible on purpose; clip at the section so the
   off-screen slides do not widen the scrollable page (it measured 3630px). */
body section {
  overflow-x: clip;
}

/* Hero photo is now a dark car shot; the theme's black headline/paragraph became unreadable.
   Darken the left side and switch the hero copy to white. */
.slider.style_one .image-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 55%, rgba(0, 0, 0, 0.1) 100%);
  pointer-events: none;
}
.slider.style_one .slide-item h1,
.slider.style_one .slide-item .description {
  color: #fff !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

/* ===== Audit round 2026-10-12 ===== */

/* Brand red #FF2C3B gave only 3.70:1 on white (fails WCAG AA). Darken to
   #DB1A28 (5.01:1) for text and solid buttons. Most of the theme reads the
   --theme-color token; a few rules hardcode the red and are overridden below. */
:root {
  --theme-color: #DB1A28;
}
.blog-post-content .post-info .post-tag a,
.order-summary .bill-history li.deu-amount span {
  color: #DB1A28;
}
.subscribe-inner {
  background: #DB1A28;
}

/* Hero slider had 3 identical owl slides that stacked full-height before init,
   shifting the whole page (CLS up to 0.87 on desktop). Now a single slide, but
   keep the guard + reserved height so nothing jumps before owl-loaded. */
.slider.style_one .owl-carousel:not(.owl-loaded) > .slide-item-content:not(:first-child) {
  display: none;
}
.slider.style_one {
  min-height: 0;
}
@media (min-width: 992px) {
  .slider.style_one {
    min-height: 877px;
  }
}
@media (min-width: 1200px) {
  .slider.style_one {
    min-height: 757px;
  }
}

/* Touch targets < 24px (WCAG 2.2 AA 2.5.8). Enlarge the small header/menu
   controls and brand quick-links; footer social icons are already large. */
.header-top-social-icon ul li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
}
.header .search-toggler,
.sticky_header .search-toggler {
  min-width: 44px;
  min-height: 44px;
}
.brand-section .brand-title h6 a {
  display: inline-block;
  padding: 6px 4px;
}
.mobile-nav-toggler {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

/* Closed mobile menu kept its links laid out during the theme's 900ms hide
   transition, so they stayed focusable / counted as visible. Hide quickly. */
.mobile-menu,
.mobile-menu .menu-box,
.mobile-menu .menu-backdrop {
  transition-duration: 300ms !important;
}

/* English-only flag language switcher is a dead control on an Indonesian site. */
.language-switcher {
  display: none !important;
}

/* Footer copyright brand link was 20px tall (< 24px). Give it a taller tap area.
   It sits on the near-black footer, where #DB1A28 is only ~4:1 — brighten it. */
.footer-bottom-outer .copyright a {
  display: inline-block;
  padding: 3px 0;
  color: #FF4D4D;
}

/* Inner pages use a dark header (.home-three, bar #141414). The light-surface
   red (#DB1A28) is only 3.7:1 on it, so the active nav link and the outline CTA
   fail AA. Use the brighter brand red there (5.7:1). Submenus/hover are untouched
   (they keep white-on-#DB1A28, which passes). */
.header.home-three .main-menu .navigation > li.active > a,
.header.home-three .main-menu .navigation > li.current > a,
.header.home-three .btn-style-one {
  color: #FF4D4D;
  border-color: #FF4D4D;
}
.header.home-three .btn-style-one:hover {
  color: #fff;
}

/* Section sub-titles (red pill) also appear inside dark sections (.dark-bg),
   where #DB1A28 is too dark. Brighten them there. */
.dark-bg .section-title .sub-title,
.dark-bg .sub-title {
  color: #FF4D4D;
}

/* Hero H1 uses overflow:hidden for the split-text reveal, which trimmed the
   descenders of the last line ("Terjangkau"). Give them room. */
.slider.style_one .slider_content h1 {
  padding-bottom: 10px;
}

/* Hero content image: keep its 796x454 ratio so it reserves space and does not
   shift as it loads (helps desktop CLS). */
.slider.style_one .slider-image img {
  aspect-ratio: 796 / 454;
  height: auto;
}

/* Verifikasi ulang akhir 2026-10-13: strip logo mitra di Tentang Kami hanya berisi kotak abu "147X31" → disembunyikan */
.brand-section-2 { display: none !important; }
/* Lencana putar berteks Inggris "THE BEST AGENCY" (klaim) di FAQ/Harga → disembunyikan */
img[src$="shape/shape-8.png"] { display: none !important; }
/* Verifikasi ulang akhir 2026-10-13: label "Sewa Mobil" merah di atas foto hero gelap sulit dibaca → teks putih di atas pita merah */
.slider.style_one .slide-item-content .slider_content h6 { color: #fff !important; background: #c8102e !important; }
/* Verifikasi ulang akhir 2026-10-13: label nilai "Kenyamanan" di Detail Mobil terpotong di kolom 22% (1440) → kolom label lebih lebar */
@media (min-width: 551px) {
  .rating-progress-box .progress-box .title { width: auto; flex: 0 0 120px; white-space: nowrap; }
  .rating-progress-box .progress-box .bar { flex: 1 1 auto; flex-shrink: 1; min-width: 0; margin: 0 12px; }
  .rating-progress-box .progress-box .progress-bar-text { width: auto; flex: 0 0 64px; justify-content: flex-end; }
}