/* =============================================================
   custom.css — Global Styles untuk SEMUA halaman Panggonan
   
   Style yang khusus per-halaman ada di file terpisah:
     home.css     → Beranda (index.html)
     about.css    → Tentang Kami (about-us/index.html)
     projects.css → Galeri (projects/index.html)
     contact.css  → Kontak (contact-us/index.html) [inline di HTML]
   ============================================================= */

/* ---- Brand Variables (Palet Warna Panggonan) ---- */
:root {
  --primary-gold: #c5a880;
  --bg-cream: #f9f6f0;
  --text-dark: #2c2c2c;
  --accent-gold: #e2cba6;
}

/* ---- Body Global ---- */
body {
  background-color: var(--bg-cream);
  color: var(--text-dark);
}

/* ---- Override background hero (ganti gambar konstruksi template) ---- */
.hero {
  background-image: none !important;
  background-color: var(--bg-cream) !important;
}

/* ---- Sembunyikan badge "Made in Panggonan" ---- */
.w-panggonan-badge {
  display: none !important;
}

/* ---- Fix lebar dropdown nav agar teks "Tanya Jawab" tidak terpotong ---- */
.nav-menu .dropdown-list.w--open,
.nav-menu .w-dropdown-list.w--open {
  width: 170px !important;
  min-width: 170px !important;
  max-width: none !important;
  overflow: visible !important;
}

.dropdown-wraper {
  width: 100% !important;
  overflow: visible !important;
}

.dropdown-link {
  white-space: nowrap !important;
  display: block !important;
}

/* ============================================================
   Hero Assets — Background & Rasio Gambar
   (Dipakai di semua halaman yang ada hero section)
   ============================================================ */
.hero-wrap {
  background-image:
    linear-gradient(#002d13b3, #3a22004d),
    url("../images/panggonan_aset_ke_2/hero.webp") !important;
}

.hero-top {
  aspect-ratio: 4 / 3 !important;
}

.hero-top .cover-image {
  object-position: top center !important;
}

/* ============================================================
   Section Padding — Override Default
   Hanya CTA section (dark/bg-black) yang tidak punya padding atas
   agar menyatu dengan section di atasnya.
   ============================================================ */
.section.to-top.bg-black {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
}

/* ============================================================
   CTA Section — Dipakai di semua halaman
   (Beranda, Tentang, Galeri, Layanan, Kontak)
   ============================================================ */

/* Gambar CTA mengisi container */
.cta-image img.cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Stat cards: padding vertikal + garis pembatas atas */
.cta-card {
  padding: 20px 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
  margin-top: 8px !important;
}

.cta-bottom {
  margin-top: 12px !important;
  row-gap: 8px !important;
}

/* ============================================================
   FAQ Layout Fixes
   (Dipakai di halaman faq/index.html)
   ============================================================ */

/* Pastikan label pertanyaan dan ikon plus sejajar horizontal */
.question-block {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 24px 10px 24px 0px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Hapus pseudo-element yang bisa merusak layout flex */
.question-block::before,
.question-block::after {
  display: none !important;
  content: none !important;
}

.faq-question {
  max-width: 90% !important;
  line-height: 1.5 !important;
  margin-bottom: 0 !important;
  text-align: left !important;
  white-space: normal !important;
}

.plus-icon {
  flex-shrink: 0 !important;
  margin-left: 15px !important;
}

/* ---- Navbar Primary Button — Hubungi Kami tidak boleh wrap ---- */
.desktop-button .primary-button,
.tablet-button .primary-button,
.nav-wrapper .primary-button {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.desktop-button .primary-button div,
.tablet-button .primary-button div {
  white-space: nowrap !important;
}

/* Pastikan nav-wrapper tidak compress elemen-elemennya */
.nav-wrapper {
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 20px;
}

/* Kurangi gap antar item menu jika layar terlalu sempit */
.nav-menu,
.menu-wraper {
  align-items: center !important;
  flex-wrap: nowrap !important;
}

/* Fix layout gap below footer */
html,
body {
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
}
.page-wrap {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  min-height: 100vh;
}
.footer {
  margin-bottom: 0 !important;
}

/* Hide builder badge that might cause invisible gap */
.w-panggonan-badge {
  display: none !important;
}

/* ============================================================
   GLOBAL FOOTER IMAGE AESTHETICS
   ============================================================ */
.footer-image-wrapper {
  grid-column: span 2;
  width: 100%;
  height: 220px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  display: flex;
}

.footer-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.75;
  transition:
    opacity 0.4s ease,
    transform 0.8s ease;
}

.footer-image-wrapper:hover img {
  opacity: 1;
  transform: scale(1.05);
}

@media screen and (max-width: 991px) {
  .footer-image-wrapper {
    grid-column: span 1;
    min-height: 140px;
  }
}