/* MDIX audit fixes — MDIX Otomotif Prima */

/* .main_slider has 3 slides at min-height:850px each; slick (fade mode) only
   hides slides 2-3 (position:absolute) after it runs on document ready. Before
   that, all 3 stack in normal flow (~2500px tall), pushing everything below
   (on index_2.html: the search_section bar right under the hero) far out of
   the viewport — then the page suddenly collapses to one slide's height once
   slick inits, snapping search_section into view. That is a real, measured
   CLS (~0.13-0.24), not just a cosmetic flash. Give the slider its final
   (single-slide) layout before JS runs. */
.main_slider:not(.slick-initialized) .item:not(:first-child) {
  /* Bootstrap's d-flex utility class on .item sets display:flex !important;
     need equal weight to actually hide slides 2-3 before slick runs. */
  display: none !important;
}

/* Logo text is dark navy; on the dark header (before scrolling) and in the dark mobile
   sidebar it disappeared. Show the logo in white there. */
.header_section:not(.stuck) .brand_logo img:nth-child(1),
.mobile_sidebar_menu .brand_logo img {
  filter: brightness(0) invert(1);
}

/* Google Maps embed replacing the theme's API-key map (which showed an error box).
   Covers the location section (.world_location, car/contact_wordwide/index),
   and the full-width map on contact.html (.google_map_section). */
.mdix-map {
  display: block;
  width: 100%;
  height: 450px;
  margin-top: 30px;
  border: 0;
  border-radius: 4px;
}
.google_map_section .mdix-map {
  margin-top: 0;
  border-radius: 0;
}
@media (max-width: 767px) {
  .mdix-map {
    height: 400px;
  }
}

/* ---------------------------------------------------------------------------
   Touch targets & minimum tap area (WCAG 2.2 AA 2.5.8). Applied up to 1199px
   because full-page screenshots disable (hover: none); keeps evidence honest. */
@media (max-width: 1199px) {
  /* Header icon controls + hamburger: comfortable, consistent tap size */
  .header_section .search_btn,
  .header_section .cart_btn,
  .header_section .user_btn,
  .header_section .mobile_sidebar_btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Slider arrows */
  .slick-arrow {
    min-width: 44px;
    min-height: 44px;
  }
  /* Fleet filter pills (Semua / Harian / Sport / Mewah) */
  .button[data-filter] {
    padding-top: 9px;
    padding-bottom: 9px;
    min-height: 40px;
  }
  /* Hero car accordion headers */
  #banner_accordion .card-header button {
    padding-top: 14px;
    padding-bottom: 14px;
    min-height: 44px;
  }
  /* Primary text CTAs: add vertical tap padding (does not change look) */
  .text_btn {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  /* Social icons (header + footer) */
  .primary_social_links a {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Fleet card title links: give the tap area >= 24px height */
  .feature_vehicle_item .item_title a {
    display: inline-block;
    padding-top: 5px;
    padding-bottom: 5px;
  }
  /* "From the Blog" mini-cards on index_2.html: title link is 20px tall */
  .blog_wrap .blog_child .item_title a {
    display: inline-block;
    padding-top: 3px;
    padding-bottom: 3px;
  }
  /* Blog detail prev/next post link (e.g. "Mudah dan Cepat") */
  .prev_next_post .item_title a {
    display: inline-block;
    padding-top: 3px;
    padding-bottom: 3px;
  }
  /* Reservation sidebar "Bonus Program" link, 23px tall */
  a.bonus_program {
    display: inline-block;
    padding-top: 1px;
    padding-bottom: 1px;
  }
  /* Login/register page "Create an Account?" and "Reset Your Password" links, 18px tall */
  .new_account a,
  .reset_pass a {
    display: inline-block;
    padding-top: 4px;
    padding-bottom: 4px;
  }
  /* Hero slider dots shrink to a 30-40px x 5-8px bar below 1199px in the theme
     CSS — the visible bar stays thin, but the real tap box grows to >=24px
     (invisible padding above/below), so touch is comfortable without a bulkier
     look. */
  .main_slider .slick-dots a {
    height: 24px;
    display: flex;
    align-items: center;
    background: none;
  }
  .main_slider .slick-dots a::before {
    content: "";
    display: block;
    width: 100%;
    height: 5px;
    background-color: #EA001E;
  }
}

/* "BACA ARTIKEL" label dropped to 10px on phones; keep body text >= 12px. */
@media (max-width: 767px) {
  .blog_fullimage .text_btn span {
    font-size: 12px;
  }
}

/* Desktop nav wrapped "Hubungi Kami" to a 2nd line between 992-1440px
   (6 items + 35px gaps overflow the half-width menu column). Tighten spacing. */
@media (min-width: 992px) and (max-width: 1440px) {
  .main_menu > ul > li:not(:last-child) { margin-right: 18px; }
  .main_menu > ul > li > a,
  .main_menu a { font-size: 15px; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .main_menu > ul > li:not(:last-child) { margin-right: 12px; }
  .main_menu > ul > li > a,
  .main_menu a { font-size: 14px; }
}

/* Theme secondary grey #6E7684 fails WCAG AA (4.09:1 on white, 4.20:1 on
   #F2F2F2). Darken to #525a68 (>=5.4:1) on the places it is read as text. */
.sidebar_section .checkbox_input label,
.reservation_offer_checkbox .checkbox_input label,
.register_card .checkbox_input,
.register_card .checkbox_input label,
.post_meta li,
.post_meta a,
.pagination_wrap .page_number,
.account_info_list span,
.item_shorting .item_available,
.car_choose_content .info_list li strong,
.blog_small_grid .post_date {
  color: #525a68;
}

/* Carousel progress dots (.custom-dot, 30x5) get an invisible >=24px hit area. */
@media (max-width: 1199px) {
  a.custom-dot {
    position: relative;
  }
  a.custom-dot::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    bottom: -10px;
  }
}
/* Breadcrumb bar bg is set by JS (data-bg-color #F2F2F2); use dark navy so the
   links clear AA regardless of when the bar background paints. */
.breadcrumb_nav li,
.breadcrumb_nav a {
  color: #3c4350;
}

/* Active/hover nav item is brand red #EA001E; on the dark (#000C21) inner-page
   header that is only 4.2:1. Use a lighter coral-red there to clear AA (D-20). */
.secondary_header:not(.stuck) .main_menu > ul > li.active > a,
.secondary_header:not(.stuck) .main_menu > ul > li:hover > a {
  color: #ff5a68;
}

/* Top contact bar was rgba(...,0.6): too translucent to guarantee contrast for
   the white email/phone text over a light hero. Make it a solid dark strip. */
.header_top {
  background-color: rgba(22, 24, 41, 0.96);
}

/* Home header is transparent over the hero; add a soft top scrim so the white
   nav stays legible over any hero frame (inner pages use the solid dark header). */
.header_section:not(.secondary_header):not(.stuck) {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 72%);
}

/* Minor controls: give slider dots and breadcrumb links a >=24px tap area. */
@media (max-width: 1199px) {
  .slick-dots button,
  .slick-dots li button {
    min-width: 24px;
    min-height: 24px;
  }
  .breadcrumb_nav a {
    display: inline-block;
    padding: 5px 0;
  }
}

/* Verifikasi ulang akhir 2026-10-13: keterangan data contoh */
.mdix-sample-note { display: block; width: 100%; margin: 24px 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; }