/*
Theme Name: Helen
Theme URI: https://scriptmedia.net/
Author: Scriptmedia
Author URI: https://scriptmedia.net/
Description: Theme WordPress satu-halaman untuk Mooie Cijfers — Administratie, Begeleiding en Advies, dibangun dari desain HTML asli tanpa mengubah CSS/JS yang sudah ada. Konten (teks, foto, kontak, kebijakan privasi) dapat disunting lewat CPT + ACF.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: helen
*/

:root{
  --black:#0a0a0a;
  --white:#ffffff;
  --off-white:#f4f4f2;
  --gray-text:#c9c9c9;
  --olive:#8f8a4b;
  --olive-light:#c9c08a;
  --nav-height:68px;
  --nav-gap:20px;
  --nav-radius:28px;
  --content-gap:28px;
  --nav-offset:calc(var(--nav-height) + var(--nav-gap) + var(--content-gap));
  /* REVISI — LOGO SIZING FIX: nilai bawaan, ditimpa inline lewat
     wp_add_inline_style() di inc/setup.php sesuai Customizer →
     Pengaturan Tema Helen → Ukuran Logo (helen_logo_height). */
  --logo-height:48px;
}

*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  font-family:'Candara','Carlito',sans-serif;
  font-size:16px;
  background:var(--black);
  color:var(--white);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:'Bebas Neue',sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:0.5px;
  line-height:1.05;
}

a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}

/* ============ NAVBAR ============ */
.navbar{
  position:fixed;
  bottom:var(--nav-gap);
  left:0;
  right:0;
  z-index:1000;
  height:var(--nav-height);
  background:var(--white);
  color:var(--black);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 28px;
  border-radius:var(--nav-radius);
  box-shadow:0 -10px 40px rgba(0,0,0,0.18);
}

.nav-logo{display:flex; align-items:center;}
/* REVISI — LOGO SIZING FIX: max-width/max-height restriktif yang lama
   (height:32px tetap, tidak bisa diperbesar) dilepas. Tinggi logo kini
   presisi lewat var(--logo-height) yang diatur klien di Customizer;
   lebar menyesuaikan otomatis supaya rasio logo tidak gepeng/melar. */
.logo-img{
  height:var(--logo-height, 48px);
  width:auto;
  max-width:220px;
  display:block;
}

.nav-menu{
  display:flex;
  gap:28px;
  list-style:none;
  font-size:16px;
  font-weight:500;
}
.nav-menu a{
  position:relative;
  padding:4px 0;
  transition:opacity .2s ease;
}
.nav-menu a:hover{opacity:0.55;}
.nav-menu a.active{opacity:1;}
.nav-menu a.active::after{
  content:"";
  position:absolute;
  left:0;bottom:-2px;
  width:100%;height:2px;
  background:var(--black);
}

.nav-right{display:flex; align-items:center; gap:20px;}
.nav-copyright{font-size:16px; color:#777; white-space:nowrap;}
.nav-socials{display:flex; gap:12px;}
.nav-socials a{
  width:28px;height:28px;
  border-radius:50%;
  background:var(--black);
  color:var(--white);
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s ease;
}
.nav-socials a:hover{transform:translateY(-2px);}
.nav-socials svg{width:14px;height:14px;}

main{ padding-bottom:var(--nav-offset); }

/* ============ SCROLLYTELLING WRAPPER ============ */
.scrolly{
  display:grid;
  grid-template-columns:1fr 1fr;
  position:relative;
}

.photo-col{
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
  background:var(--black);
}

.photo-stack{position:relative;width:100%;height:100%;}

.photo-item{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .7s ease;
}
.photo-item.active{opacity:1;}
.photo-item img{
  width:100%;height:100%;
  object-fit:cover;
  filter:grayscale(1) contrast(1.05);
  display:block;
}

.text-col{display:flex;flex-direction:column;}

.content-section{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:64px 72px;
  scroll-margin-top:0;
}

.content-section .eyebrow{
  font-size:12px;
  letter-spacing:2px;
  color:var(--olive-light);
  font-weight:600;
  text-transform:uppercase;
  margin-bottom:18px;
  display:block;
}

.content-section h2{
  font-size:60px;
  margin-bottom:28px;
}

.content-section p{
  font-size:16px;
  line-height:1.75;
  color:var(--gray-text);
  max-width:520px;
  margin-bottom:20px;
}

.content-section p:last-of-type{margin-bottom:0;}

/* ============ CONTACT SECTION ============ */
.contact-section{
  position:relative;
  min-height:100vh;
  overflow:hidden;
}

/* REVISI — RESPONSIVE MOBILE/TABLET: background foto section Contact
   sengaja TIDAK memakai background-attachment:fixed / transform
   parallax (yang sering patah/nge-lag pada Touch API di iOS & Android).
   position:absolute di dalam .contact-section yang overflow:hidden
   sudah cukup untuk efek "menempel penuh" tanpa masalah scroll di
   layar sentuh. */
.contact-bg{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  filter:grayscale(1) contrast(1.05);
}

.contact-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.75);
}

.contact-content{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:100vh;
}

.contact-info{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:40px 40px 48px;
}
.contact-info p{
  font-size:14px;
  line-height:1.6;
  color:var(--off-white);
  margin-bottom:16px;
}
.contact-info p a{font-weight:600;}

.legal-links{display:flex;gap:10px;flex-wrap:wrap;}
.legal-links span,
.legal-links button,
.legal-links .download-link{
  display:inline-block;
  background:var(--olive);
  color:var(--white);
  font-size:12px;
  font-weight:600;
  padding:6px 12px;
  border-radius:4px;
  border:none;
}
.legal-links button,
.legal-links .download-link{
  transition:opacity .2s ease;
}
.legal-links button:hover,
.legal-links .download-link:hover{opacity:0.8;}

/* REVISI — DYNAMIC FILE ATTACHMENTS: tombol unduhan opsional (brosur/CV),
   hanya tampil bila field "File Unduhan" di Pengaturan Situs terisi. */
.download-link{cursor:pointer;}

/* REVISI: honeypot anti-spam pada form kontak — disembunyikan dari
   pengguna & pembaca layar, tapi tetap ada di DOM supaya bot pengisi
   form otomatis kemungkinan besar tetap mengisinya. */
.hp-field{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.form-note.is-error{color:#e08585;}

.contact-form-wrap{
  display:flex;
  align-items:center;
  padding:64px 72px;
}

.contact-form{width:100%;max-width:420px;}

.contact-form label{
  display:block;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.3px;
  color:var(--off-white);
  margin-bottom:8px;
  margin-top:20px;
}
.contact-form label:first-of-type{margin-top:0;}

.contact-form input,
.contact-form textarea{
  width:100%;
  border:none;
  background:var(--white);
  border-radius:10px;
  padding:14px 18px;
  font-family:inherit;
  font-size:14px;
  color:var(--black);
  outline:none;
  transition:box-shadow .2s ease;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder{color:#9a9a9a;}
.contact-form textarea{
  border-radius:10px;
  min-height:110px;
  resize:vertical;
}
.contact-form input:focus,
.contact-form textarea:focus{
  box-shadow:0 0 0 2px var(--olive-light);
}

.submit-btn{
  margin-top:28px;
  width:100%;
  background:var(--black);
  color:var(--white);
  border:1.5px solid var(--white);
  border-radius:10px;
  padding:15px 0;
  font-size:13px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  transition:opacity .2s ease;
}
.submit-btn:hover{opacity:0.85;}
.form-note{ margin-top:14px; font-size:13px; color:var(--olive-light); min-height:1.2em; }

/* ============ FOOTER (mobile fallback for copyright) ============ */
.footer-mobile{
  display:none;
  text-align:center;
  padding:24px;
  font-size:12px;
  color:#777;
  background:var(--off-white);
}

/* ============ LEGAL / POLICY MODAL ============ */
.helen-modal{
  position:fixed;
  inset:0;
  z-index:2000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.helen-modal.is-open{display:flex;}
.helen-modal-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.75);
}
.helen-modal-panel{
  position:relative;
  z-index:1;
  width:100%;
  max-width:640px;
  max-height:80vh;
  overflow-y:auto;
  background:var(--off-white);
  color:var(--black);
  border-radius:16px;
  padding:40px 40px 32px;
}
.helen-modal-close{
  position:absolute;
  top:16px;right:16px;
  width:32px;height:32px;
  border-radius:50%;
  background:var(--black);
  color:var(--white);
  border:none;
  font-size:18px;
  line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.helen-modal-panel h2{
  font-size:32px;
  margin-bottom:20px;
  padding-right:32px;
}
.helen-modal-panel p{
  font-size:14px;
  line-height:1.7;
  color:#3a3a3a;
  margin-bottom:14px;
}
.helen-modal-panel p:last-child{margin-bottom:0;}
body.helen-modal-open{overflow:hidden;}

/* ============================================================
   RESPONSIVE — TABLET (<=1024px) & MOBILE (<=768px)
   ============================================================
   REVISI:
   - Breakpoint tablet (<=1024px) dan mobile (<=768px) dipisah jelas,
     sesuai spesifikasi, bukan satu breakpoint gabungan seperti versi
     sebelumnya (900px).
   - Panel foto sticky/parallax (.photo-col, yang di layar sentuh sering
     bermasalah — "lompat"/patah saat scroll karena position:sticky +
     overflow) DIMATIKAN sepenuhnya di bawah 1024px. Sebagai gantinya,
     tiap section (About / Over Helen / Service) menampilkan fotonya
     SENDIRI langsung di atas teksnya lewat --section-photo (inline var
     yang sudah dipasang di setiap <section>, lihat content-onepage.php)
     — urutan gambar → judul → teks jadi rapi dan bergantian per section,
     tanpa efek fixed/parallax yang rawan bermasalah pada Touch API.
   - Section Contact & About/Service dirapikan pakai Flexbox (sudah
     memakai display:flex/grid di baseline; di breakpoint ini kolomnya
     ditumpuk 1 kolom penuh agar tetap enak dibaca di layar sempit). */

@media (max-width:1024px){
  :root{
    --nav-gap:12px;
    --nav-height:56px;
    --nav-radius:20px;
    --content-gap:16px;
  }
  .nav-menu{display:none;}
  .nav-copyright{display:none;}
  .navbar{padding:0 18px;}

  /* Matikan sticky photo panel — ini sumber masalah "background/foto
     ikut fixed lalu patah" saat scroll di mobile/tablet. */
  .scrolly{
    display:flex;
    flex-direction:column;
  }
  .photo-col{display:none;}
  .text-col{display:flex; flex-direction:column;}

  .content-section{
    display:flex;
    flex-direction:column;
    min-height:auto;
    padding:40px 28px;
  }
  .content-section h2{font-size:40px;}
  .content-section p{max-width:100%;}

  /* Foto per-section (menggantikan .photo-col), diambil dari
     --section-photo inline di masing-masing <section>. */
  .content-section::before{
    content:"";
    order:-1;
    display:block;
    width:100%;
    aspect-ratio:4/3;
    margin-bottom:24px;
    border-radius:14px;
    background-image:var(--section-photo);
    background-size:cover;
    background-position:center;
    filter:grayscale(1) contrast(1.05);
  }

  .contact-content{
    display:flex;
    flex-direction:column;
  }
  .contact-info{padding:36px 28px;}
  .contact-form-wrap{padding:8px 28px 48px;}

  .footer-mobile{display:block;}

  .helen-modal-panel{padding:32px 24px 24px;}
  .helen-modal-panel h2{font-size:26px;}
}

@media (max-width:768px){
  .content-section{padding:32px 20px;}
  .content-section h2{font-size:32px;}
  .content-section::before{aspect-ratio:16/11; margin-bottom:20px;}

  .contact-info{padding:28px 20px;}
  .contact-form-wrap{padding:4px 20px 40px;}
  .contact-form{max-width:100%;}

  .helen-modal-panel{padding:28px 18px 20px;}
  .helen-modal-panel h2{font-size:22px;}
}