/* MDIX Kafe Utama — audit fixes */

/* Scroll-reveal blocks (WOW.js) stayed hidden when the page is scrolled quickly or captured,
   leaving whole sections empty; show them at once. */
.wow {
  visibility: visible !important;
  animation-name: none !important;
}

/* GSAP letter-by-letter headings and the pinned "why us" cards start invisible and only appear
   after slow scrolling; keep them readable from the start (motion stays on the transform only). */
.hero-title .hero-char,
#cafe-cards .cafe-card {
  opacity: 1 !important;
}

.hero-title .hero-char {
  transform: none !important;
}

/* The "why us" section was pinned for ~2000px of scrolling while the cards faded in one by one,
   which reads as a long empty gap. With the cards always visible the pin is not needed. */
.pin-spacer:has(#cafe-cards) {
  padding: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}
.pin-spacer:has(#cafe-cards) > section {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

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

/* Hamburger: theme span was 32x32; make it a 44px touch target (display stays theme-controlled). */
#menu-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  line-height: 44px;
  margin-right: -6px;
}

/* Tablets/small laptops: theme container hugged the edge (12px). */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .container {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* Floating "Kembali ke atas" + scroll line sat on top of content at 768-1199px. */
@media (max-width: 1199.98px) {
  .float-text,
  .scrollbar-v {
    display: none !important;
  }
}
.float-text a {
  display: inline-block;
  padding: 0 4px;
}

/* Hero (index): caption sat on the hours/address strip at 992-1199 / short laptop screens. */
@media (min-width: 992px) {
  #section-hero .sw-caption {
    top: calc(50% - 56px);
  }
}
/* Phone landscape: 100vh hero (390px) hid the title under the header and cut the CTA. */
@media (orientation: landscape) and (max-height: 500px) {
  #section-hero .v-center {
    min-height: 600px;
  }
  #section-hero h1 {
    font-size: 40px;
  }
}

/* Decorative falling beans covered the paragraph text ("Rasa Baru"). */
img.abs[src$="misc/d1.webp"] {
  z-index: 0;
  pointer-events: none;
  width: 12%;
  max-width: 230px;
}
@media (max-width: 1199.98px) {
  img.abs[src$="misc/d1.webp"] {
    display: none;
  }
}

/* Promo cards: text was absolutely centered over a square photo and was cut off at 768-1199px.
   Photo becomes a cover background; the card grows with its text. */
[class*="col-"]:has(> .mdix-offer) {
  display: flex;
}
.mdix-offer {
  flex: 1 1 auto;
  display: grid;
  align-items: center;
  justify-items: center;
}
.mdix-offer::before {
  content: "";
  grid-area: 1 / 1;
  padding-bottom: 100%;
}
.mdix-offer > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mdix-offer > .abs-centered {
  grid-area: 1 / 1;
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  padding: 32px 0;
}

/* Hours / address / phone: 2+1 orphan at 768-991 -> three columns. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .row:has(> .col-lg-4.col-md-6:nth-child(3):last-child) > .col-lg-4.col-md-6 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
}

/* Small text / touch targets */
.atr .badge {
  font-size: 12px;
}
#logo a {
  display: inline-block;
  padding: 4px 0;
}
footer .list-inline-item a {
  display: inline-block;
  padding: 10px 4px;
}
footer .social-icons a {
  display: inline-block;
  padding: 4px;
}
main a[href^="mailto:"],
main a[href^="tel:"] {
  display: inline-block;
  padding: 4px 0;
  margin: -4px 0;
}
a.btn-arrow {
  display: inline-block;
  padding: 6px 0;
  margin: -6px 0;
}

/* Phone menu: the closed menu was only clipped by the header's height, so its links stayed
   focusable (keyboard focus went to invisible links). Hide it properly while closed. */
header.header-mobile:not(.menu-open) #mainmenu {
  display: none !important;
}

/* Inner pages: small targets (breadcrumb, testimonial dots, comment "Balas", contact links). */
.crumb a {
  display: inline-block;
  padding: 4px 0;
  margin: -4px 0;
}
.owl-dots .owl-dot {
  box-sizing: content-box;
  padding: 8px !important;
  margin: 0 1px;
  background-clip: content-box;
}
.c_reply a,
.ms-80px > a {
  display: inline-block;
  padding: 4px 0;
  margin: -4px 0;
}

/* Hero caption ran under the slider arrows at 576-1199px (tablet / phone landscape). */
@media (min-width: 576px) and (max-width: 1199.98px) {
  #section-hero .sw-caption .container {
    padding-left: 56px;
    padding-right: 56px;
  }
}

/* Rows with a 48px gutter (g-5/gx-5) stuck out 4px past the 20px phone container. */
@media (max-width: 767.98px) {
  .row.g-5,
  .row.gx-5 {
    --bs-gutter-x: 40px;
  }
}

/* Verifikasi ulang akhir 2026-10-13 (D-20): warna utama koral #FC7753 gagal AA — teks putih di tombol
   2,66:1, subjudul koral di latar krem 2,32:1; teks isi #777 di latar #F2EFEA 3,9:1.
   Warna utama dipergelap ke #C2410C (tombol 5,2:1) dan teks isi ke #5F5F5F. */
:root {
  --primary-color: #C2410C;
  --primary-color-rgb: 194, 65, 12;
}
/* Variabel teks tema dideklarasikan pada * (bukan :root), jadi ditimpa dengan selektor *. */
* { --body-font-color: #5f5f5f; }
/* Teks hero di atas foto gelap: subjudul oranye muda dan paragraf putih (bukan warna teks isi). */
.sw-caption .subtitle { color: #ffb38f !important; text-shadow: 0 1px 8px rgba(0, 0, 0, .55); }
.sw-caption p { color: rgba(255, 255, 255, .92) !important; text-shadow: 0 1px 8px rgba(0, 0, 0, .55); }
/* Subjudul: koral asli di seksi gelap (≥5:1), koral tua di seksi krem bg-light (≥5:1). */
.section-dark .subtitle, .text-light .subtitle { color: #fc7753 !important; }
.bg-light .subtitle { color: #9a3412 !important; }