/*
Theme Name: Accupro
Theme URI: https://github.com/supportbyprakasa/accupro-website
Author: Prakasa Group
Description: Tema Accupro International — tampilan lengkap untuk layanan, alat hitung pajak, dan halaman perusahaan. Membutuhkan plugin Accupro Core sebagai sumber kontennya. Bahasa Inggris dan Mandarin ditangani TranslatePress.
Version: 1.6.6
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: accupro
Tags: business, custom-menu, translation-ready
*/

/* Gaya utama ada di assets/css/style.css — file itu salinan persis dari
   versi statis yang sudah disetujui, jadi jangan diedit lewat file ini kalau
   perubahannya juga harus ikut ke sana. File ini hanya untuk penyesuaian yang
   khas WordPress: kelas yang dikeluarkan editor blok, widget, dan komentar. */

/* ---- keluaran editor blok ------------------------------------------------ */
.prose .alignleft { float: left; margin: 0 20px 16px 0; }
.prose .alignright { float: right; margin: 0 0 16px 20px; }
.prose .aligncenter { display: block; margin-inline: auto; }
.prose .wp-caption { max-width: 100%; }
.prose .wp-caption-text,
.prose figcaption { font-size: .8125rem; color: var(--muted); margin-top: 8px; }
.prose img { height: auto; border-radius: var(--r); }
.prose .wp-block-quote { border-left: 3px solid var(--gold); padding-left: 16px; }
.prose .wp-block-table table { width: 100%; border-collapse: collapse; }
.prose .wp-block-table td,
.prose .wp-block-table th { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }

/* ---- aksesibilitas bawaan WordPress ------------------------------------- */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- navigasi halaman --------------------------------------------------- */
.pagination { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(28px, 3vw, 40px); }
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  font-size: .875rem;
  color: var(--ink);
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover { border-color: var(--navy); background: var(--navy-050); color: var(--navy); }

/* Logo gambar dari Media Library. Versi statis memakai tanda SVG berukuran
   tetap, jadi ukuran untuk <img> ini memang hanya ada di sisi WordPress. */
/* Logo situs. Aturan ini sengaja di sini, bukan di assets/css/style.css:
   berkas itu dipakai bersama versi statis di dist/ dan diperiksa uji asap agar
   tetap identik, sedangkan .brand__logo hanya ada di WordPress. Stylesheet ini
   dimuat setelah assets/css/style.css, jadi nilainya yang berlaku — pastikan
   mengubah ukuran logo DI SINI, bukan di sana. */
:root { --header-h: 88px; }
.brand__logo { height: 64px; width: auto; max-width: 260px; object-fit: contain; display: block; }
.footer .brand__logo { height: 72px; max-width: 280px; filter: brightness(0) invert(1); }

@media (max-width: 640px) {
  :root { --header-h: 72px; }
  .brand__logo { height: 50px; }
  .footer .brand__logo { height: 58px; }
}

/* ---- Section 1: gambar arsitektur sebagai latar -------------------------
   Ciri visual Accupro adalah garis gedung dan kaca kantor. Foto tetap berupa
   <img> agar srcset WordPress bekerja, lalu overlay navy memberi bidang baca
   yang konsisten untuk judul pada foto terang maupun gelap. */
.secbg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.secbg__img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

/* Banner seluruh halaman selain homepage: mendekati 400px pada tablet dan
   desktop, tetap cukup ringkas pada telepon. */
.pagehero--bg {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(320px, 56vw, 400px);
  padding-block: clamp(32px, 5vw, 56px);
  overflow: hidden;
  background: var(--navy, #2A3490);
  color: #fff;
}
.pagehero--bg .secbg { z-index: -2; }
.pagehero--bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(18,23,66,.95) 0%, rgba(18,23,66,.82) 46%, rgba(18,23,66,.48) 100%),
    linear-gradient(0deg, rgba(18,23,66,.42) 0%, rgba(18,23,66,0) 62%);
}
.pagehero__inner { position: relative; width: 100%; }
.pagehero__inner > h1 { max-width: 20ch; margin-top: 10px; color: #fff; }
.pagehero__inner > .lede { max-width: 62ch; margin-top: 14px; color: #D6D9F0; }
.pagehero__inner .eyebrow { color: var(--gold, #C09725); }
.pagehero__inner .icon-lead { color: #fff; }
.pagehero__inner .crumbs { padding-block: 0 16px; }
.pagehero__inner .crumbs ol { color: #A8AEDB; }
.pagehero__inner .crumbs a { color: #D6D9F0; }
.pagehero__inner .crumbs a:hover,
.pagehero__inner .crumbs span[aria-current] { color: #fff; }
.pagehero--bg .btn--primary { color: var(--navy); background: #fff; border-color: #fff; }
.pagehero--bg .btn--primary:hover { color: var(--navy-900); background: var(--gold-050); border-color: var(--gold-050); }

/* Homepage: tiap gambar berada pada lapisan penuh dan berganti serempak
   dengan headline melalui main.js. Konten tetap satu kolom agar foto benar-
   benar menjadi konteks, bukan panel dekoratif di sampingnya. */
.hero--bg {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(560px, 65vh, 720px);
  padding-block: clamp(42px, 6vw, 72px);
  overflow: hidden;
  background: var(--navy, #2A3490);
  color: #fff;
}
.hero__bgs { position: absolute; inset: 0; z-index: -2; }
.hero__bgs .hero__frame-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .7s ease;
}
.hero__bgs .hero__frame-slide.is-active { opacity: 1; }
.hero--bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(18,23,66,.95) 0%, rgba(18,23,66,.84) 48%, rgba(18,23,66,.50) 100%),
    linear-gradient(0deg, rgba(18,23,66,.46) 0%, rgba(18,23,66,0) 58%);
}
.hero--bg .hero__grid { position: relative; grid-template-columns: 1fr; }
.hero--bg .hero__content { max-width: 68ch; }
.hero--bg .hero__slide h1 { color: #fff; }
.hero--bg .hero__slide .lede { color: #D6D9F0; }
.hero--bg .hero__stats { border-top-color: rgba(255,255,255,.24); }
.hero--bg .hero__stats .stat__v { color: #fff; }
.hero--bg .hero__stats .tiny { color: #C3C7E6; }
.hero--bg .pill { color: #F0E2B4; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); }
.hero--bg .btn--primary { color: var(--navy); background: #fff; border-color: #fff; }
.hero--bg .btn--primary:hover { color: var(--navy-900); background: var(--gold-050); border-color: var(--gold-050); }
.hero--bg .hero__dot { background: rgba(255,255,255,.38); border-color: rgba(255,255,255,.38); }
.hero--bg .hero__dot.is-active { background: #fff; border-color: #fff; }
.hero--bg .hero__arrow { color: #fff; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.32); }
.hero--bg .hero__arrow:hover { background: rgba(255,255,255,.22); border-color: #fff; }

@media (max-width: 700px) {
  .pagehero--bg::after,
  .hero--bg::after { background: rgba(18,23,66,.88); }
  .hero--bg { min-height: clamp(520px, 78vh, 660px); }
  .pagehero__inner > h1 { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__bgs .hero__frame-slide { transition: none; }
}