/*
Theme Name: Qxygen Child
Theme URI: https://arthamegah.com
Description: Child theme untuk Qxygen 1.0.7. Tempat semua fix dan kustomisasi arthamegah.com agar aman dari update theme parent.
Author: Artha Megah
Template: qxygen
Version: 1.0.2
Text Domain: qxygen-child
*/

/* Fix: header "menimpa" konten saat scroll (header sticky tampak transparan).
   Header dirender sebagai <div id="apus-header" class="apus-header no_keep_header">
   berisi section Elementor (e1d1c62) dengan fitur Sticky Elementor Pro. Background
   asli section di post-341.css adalah #F9F7F8.

   Penyebab: body punya class .header_transparent dan parent theme (template.css:5931)
   memaksa background section jadi transparan:
     .header_transparent:not(.fix-header) .no_keep_header section.elementor-element
       :not(.no-transparent):not(.elementor-section-height-full)
       { background-color: transparent !important; }
   Rule ini dimaksudkan untuk kondisi header mengambang di atas hero, tapi tidak
   punya pengecualian untuk kondisi sticky Elementor -- theme hanya mengecualikan
   via body.fix-header yang tidak pernah di-set di site ini. Akibatnya saat scroll,
   section jadi position:fixed (elementor-sticky--active) tapi background-nya tetap
   transparan, sehingga menu tampak menimpa konten di bawahnya.

   Fix: saat sticky aktif, kembalikan background asli section. Selector di bawah
   sengaja panjang agar specificity-nya (0,6,2) mengalahkan rule parent (0,6,1),
   karena keduanya sama-sama !important. */
body.header_transparent .apus-header.no_keep_header section.elementor-element.elementor-sticky--active:not(.no-transparent) {
  background-color: #F9F7F8 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* Keep the complete sticky header opaque and leave room for it when an
   anchored section (for example, "Why Choose Us") is brought into view. */
body.header_transparent #apus-header.no_keep_header,
body.header_transparent #apus-header.no_keep_header .elementor-sticky--active,
body.header_transparent #apus-header.no_keep_header .elementor-sticky--active > .elementor-container {
  background-color: #F9F7F8 !important;
}

section[id], .elementor-element[id] {
  scroll-margin-top: 100px;
}

/* Fix: logo di footer terpotong permanen oleh header mobile.

   .header-mobile adalah position:fixed; top:0 (template.css:5852). Saat halaman
   di-scroll sampai mentok bawah, konten yang jatuh di ~91px teratas viewport
   tertutup header -- dan karena scroll sudah maksimum, user tidak bisa menggeser
   lagi untuk melihatnya. Berbeda dengan konten tengah halaman yang cuma "lewat"
   di bawah header, bagian ini permanen tidak terlihat.

   Fix: tambah ruang scroll di bawah footer setinggi header + jarak visual.

   Tinggi header 91px = padding 15px + logo 60px (Logo_Artha-Megah_Mobile.png,
   intrinsic 150x60, tidak ada CSS yang membatasi tingginya) + padding 15px
   + border-bottom 1px.

   Breakpoint max-width:1199px, bukan 767px: header mobile dirender dengan class
   .hidden-lg yang baru menyembunyikannya pada min-width:1200px (bootstrap.css:9646),
   jadi header fixed ini juga aktif di tablet dan laptop kecil. */
@media (max-width: 1199px) {
  #apus-footer {
    --am-mobile-header-h: 91px;
    padding-bottom: calc(var(--am-mobile-header-h) + 20px);
  }
}

/* Fix: arrow navigasi Slider Revolution (skin "uranus") di homepage sulit
   di-tap di mobile. Builder RevSlider sudah set wrapper 50x50px di semua
   breakpoint, tapi background transparan (rgba(255,255,255,0)) dan icon
   (:before) cuma font-size ~20px tanpa kontras, jadi area tap terlihat kecil
   dan tidak jelas batasnya bagi jari. Tambah background lingkaran + perbesar
   icon khusus mobile; desktop (di luar media query) tidak disentuh. */
@media (max-width: 767px) {
  [id^="rev_slider_"] .tparrows.uranus {
    width: 44px !important;
    height: 44px !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  [id^="rev_slider_"] .tparrows.uranus:before {
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    font-size: 24px !important;
    text-align: center !important;
  }

  .elementor-2033 .elementor-element.elementor-element-e8e8584:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap,
  .elementor-2033 .elementor-element.elementor-element-e8e8584 > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-position: top center !important;
  }
}