/* MDIX audit fixes — MDIX Restoran Adaptif */

/* The dark-text logo sat unreadable on the dark/transparent header: give it a light plate. */
.header_s1 .navbar-brand img {
  background: rgba(255, 255, 255, 0.92);
  padding: 6px 10px;
  border-radius: 4px;
  box-sizing: content-box;
}

/* Rupiah prices are longer than the original "$55": keep the dotted leader and price on one line. */
@media (min-width: 768px) {
  .menu-section .menu-item > span {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    white-space: nowrap;
    font-size: 20px;
    letter-spacing: 0;
  }
  .menu-section .menu-item > span::before {
    flex: 1 1 auto;
    width: auto;
    min-width: 12px;
    margin-right: 10px;
  }
  .menu-section .menu-item > span sup {
    font-size: 14px;
    top: 0;
    margin-right: 3px;
  }
}

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

/* Hero: reserve the Revolution Slider height until it initialises (was CLS ~0.4).
   Heights follow functions.js: gridwidth [1920,1025,768,480] / gridheight [921,700,600,400].
   Only before init (.revslider-initialised), so the slider's own sizing is untouched afterwards. */
#home-slider1:not(.revslider-initialised) { height: calc(100vw * 921 / 1920); max-height: 921px; overflow: hidden; }
@media (max-width: 1025px) { #home-slider1:not(.revslider-initialised) { height: calc(100vw * 700 / 1025); } }
@media (max-width: 768px)  { #home-slider1:not(.revslider-initialised) { height: calc(100vw * 600 / 768); } }
@media (max-width: 480px)  { #home-slider1:not(.revslider-initialised) { height: calc(100vw * 400 / 480); } }

/* Hero captions (layers added in index.html). */
.mdix-hero-title { text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45); }
.mdix-hero-script { text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); }
.mdix-hero-btn {
  display: inline-block;
  min-height: 46px;
  padding: 14px 30px;
  background: #c59d5f;
  color: #fff !important;
  font: 700 14px/18px 'Raleway', sans-serif;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border: 1px solid #c59d5f;
  transition: background-color .2s ease, color .2s ease;
}
.mdix-hero-btn:hover,
.mdix-hero-btn:focus-visible { background: transparent; color: #fff !important; border-color: #fff; text-decoration: none; }
@media (max-width: 480px) {
  .mdix-hero-btn { padding: 13px 22px; font-size: 13px; }
}

/* Mobile header: menu toggle and top-bar toggle were 34x28 / 21x36 px; make them 44x44. */
@media (max-width: 991px) {
  .ownavigation .navbar-toggle {
    min-width: 44px;
    min-height: 44px;
    padding: 14px 11px;
    margin: 26px 0;
  }
  #slideit,
  #closeit {
    min-width: 44px;
    min-height: 44px;
    line-height: 44px;
    text-align: center;
    top: 9px;
  }
}

/* Small links that were < 24px tall: enlarge the hit area without moving the layout. */
.about-detail .chef-detail .cnt ul li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
  margin: -5px -6px;
}
.surprise-content > a { display: inline-block; }
.widget_links ul li a,
.widget_category ul li a,
.type-post .entry-content .entry-meta span a,
.type-post .entry-content > a {
  display: inline-block;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-top: -5px;
  margin-bottom: -5px;
}

/* Tablet (768–991): 4 dishes sat 3+1 and 3 events 2+1; re-stack them evenly. */
@media (min-width: 768px) and (max-width: 991px) {
  .services-section .row > .col-sm-4 { width: 50%; }
  /* theme clears every 3rd column (3n+1) at this width; clear every 2nd instead */
  .services-section .row > [class*="col-sm-"].col-sm-4:nth-child(n) { clear: none; }
  .services-section .row > [class*="col-sm-"].col-sm-4:nth-child(2n+1) { clear: left; }
  .services-section .srv-box .img-box { width: auto; max-width: 100%; }
  .latest-events-section .row > div:nth-child(3) { margin-left: 25%; }
}

/* Phones: price sat off-centre behind a half-width dotted leader. Centre it, Rp tight to the amount. */
@media (max-width: 767px) {
  .menu-section .menu-item > span { float: none; display: block; text-align: center; margin-top: 6px; }
  .menu-section .menu-item > span::before { display: none; }
  .menu-section .menu-item > span sup { font-size: 0.6em; top: -0.35em; margin-right: 3px; }
}

/* Phones: the vertical slide bullets touched the hero headline; slides still auto-rotate and swipe. */
@media (max-width: 480px) {
  #home-slider1 .tp-bullets { display: none; }
}

/* ===== Verifikasi ulang akhir 2026-10-13: kontras AA (D-20) & target sentuh ===== */
/* Emas tema #c59d5f hanya 2,5:1 di atas putih → #86672f (5,3:1) untuk teks dan tombol di area terang. */
.menu-item h3, .menu-item > span, .entry-title a, .comment-metadata a { color: #86672f !important; }
.mdix-hero-btn, .btn.btn-default, .offer-box .ofr-cnt a, .tagcloud a, #btn_submit, .send-btn input[type=submit] { background-color: #86672f !important; border-color: #86672f !important; color: #fff !important; }
/* Abu #777 = 4,48:1 → #666 (5,7:1); meta #c0c0c0 = 1,8:1 → #707070. */
.about-detail p, .menu-item h3 span, .entry-content p, .widget_categories a, .recent-content span a, .team-content h6,
.tags-links a, .author-details p, .comment-content p, .cnt-detail-box p, .cnt-detail-box p a { color: #666 !important; }
.entry-meta, .entry-meta a, .entry-meta span { color: #707070 !important; }
/* Bilah atas gelap (#0c0c0c) dan footer (#222): abu terlalu gelap → lebih terang. */
.top-header1 span, .top-header1 span a { color: #a3a3a3 !important; }
.footer-main-2 td, .footer-main-2 .widget_about p { color: #a6a6a6 !important; }
/* Target sentuh ≥24px di HP/tablet (breadcrumb, filter galeri, widget blog, kontak). */
@media (max-width: 1199px) {
  .breadcrumb > li > a, .gallery-category #filters li a, .widget_categories li a, .recent-content span a,
  .recent-content h5 a, .comment-metadata a, .reply a, .share-this a, .cnt-detail-box p a {
    display: inline-block; min-height: 24px; line-height: 24px;
  }
  #wp-calendar caption a { display: inline-block; min-width: 24px; min-height: 24px; line-height: 24px; text-align: center; }
}
/* Menu aktif/hover di bilah putih halaman dalam: emas #93723e = 4,45:1 → #86672f. */
.header_s2 .navbar-nav > li.active > a, .header_s2 .navbar-nav > li > a:hover, .header_s2 .navbar-nav > li > a:focus { color: #86672f !important; }

/* Verifikasi ulang akhir 2026-10-13: bilah lengket (navbar-fixed-top) dan header HP memakai
   rgba(0,0,0,.6) di atas halaman putih = abu-abu #666, menu aktif emas #93723e terbaca ±1,6:1.
   Latar dibuat hampir hitam supaya menu putih/emas terbaca (≥4,5:1). */
.header_s1 .ownavigation.navbar-fixed-top { background-color: rgba(17, 17, 17, 0.96) !important; }
.header_s2 .ownavigation.navbar-fixed-top { background-color: rgba(255, 255, 255, 0.98) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
@media (max-width: 991px) {
  .header_s1 .ownavigation { background-color: rgba(17, 17, 17, 0.96) !important; }
}
.header_s1 .ownavigation .navbar-nav > li.active > a,
.header_s1 .ownavigation .navbar-nav > li > a:hover { color: #d4b077 !important; }
/* Halaman dalam (header_s2, logo & menu teks gelap): bilah lengket putih. */
