/*
 Theme Name:   Astra Child
 Theme URI:    https://satudental.com/
 Description:  Child theme SATU Dental. Lapisan kode untuk technical SEO, schema markup, dan CWV. Aman dari update Astra. Riwayat perubahan: Appearance > Changelog Theme.
 Author:       SATU Dental
 Template:     astra
 Version:      2.11.1
 Text Domain:  astra-child
*/

/* ==========================================================================
   CWV — cadangan ruang hero homepage (cegah CLS)
   Hero header-dokter.png (1440x650) dimuat tanpa width/height di dalam
   swiper, sehingga saat gambar datang terlambat layout bergeser ~578px.
   aspect-ratio memesan ruangnya sejak render pertama. Scoped ke element
   id widget hero homepage saja supaya tidak menyentuh carousel lain.
   ========================================================================== */
.elementor-element-b3e65dd .swiper-slide-image {
	width: 100%;
	height: auto;
	aspect-ratio: 1440 / 650;
	object-fit: cover;
}

/* ==========================================================================
   Aksesibilitas — kontras teks menu
   Audit axe 28 Jul 2026: teks menu #7a7a7a di atas putih = rasio 4.0:1,
   gagal ambang WCAG AA 4.5:1 (61 elemen kena, mayoritas menu). #666666
   memberi 5.7:1 dengan perubahan visual nyaris tak terlihat.
   Sisanya (teks body #7a7a7a di widget Elementor) diperbaiki lewat
   Elementor > Site Settings > Global Colors (langkah manual, satu setting
   menyebar ke semua).
   ========================================================================== */
/* Menu header = widget Elementor Pro nav-menu (a.elementor-item), warnanya
   diset per-widget dengan specificity tinggi, jadi perlu !important.
   :not(:hover) dst. menjaga warna hover/active bawaan tetap menang. */
.elementor-nav-menu--main .elementor-item:not(:hover):not(:focus):not(.elementor-item-active),
.elementor-nav-menu--dropdown .elementor-item:not(:hover):not(:focus):not(.elementor-item-active) {
	color: #666666 !important;
}

/* ==========================================================================
   Custom CSS SATU Dental
   Tulis override CSS lain di bawah sini.
   ========================================================================== */

/* ==========================================================================
   Fix regresi ElementsKit — grid card artikel homepage
   ElementsKit Lite 3.10.02 me-render kolom post grid dengan class
   .ekit-lg-3 / .ekit-md-6, sementara widget-styles.css bawaan plugin hanya
   mendefinisikan .ekit-col-* / .ekit-col-tablet-* / .ekit-col-mobile-*.
   Tidak ada rule yang match, kolom kehilangan width, jadi jatuh full-width
   dan card menumpuk vertikal. Belum ada patch upstream.

   URUTAN PENTING: rule .ekit-lg-3 wajib SETELAH .ekit-md-6. Elemen yang
   sama memakai kedua class dan specificity-nya identik, jadi yang menang
   adalah yang dideklarasikan belakangan.

   Breakpoint yang dipulihkan: di bawah 768px 1 kolom, 768 sampai 991px
   2 kolom, 992px ke atas 4 kolom.

   Hanya .ekit-lg-3 dan .ekit-md-6 yang dipakai di situs ini. Kalau setting
   jumlah kolom widget diubah, angka baru harus ditambahkan di sini.

   Jarak antar kolom memakai gap, BUKAN pola gutter Bootstrap (margin
   negatif di row + padding di kolom). Pola gutter mengasumsikan parent
   punya padding untuk menyerap margin negatifnya; di sini parent-nya
   padding 0, sehingga row meluber 15px ke kiri dan kanan dan memicu
   overflow horizontal 5px di mobile (terukur: scrollWidth 380 vs viewport
   375, terpotong body overflow-x hidden jadi tidak terlihat, tapi tetap
   salah). Dengan gap, hasil visualnya identik karena elemen kolomnya
   transparan dan kartu aslinya (.elementskit-post-image-card) mengisi
   penuh lebar kolom.

   margin-left/right WAJIB dinolkan secara eksplisit DAN selector-nya wajib
   memakai .ekit-row.ekit-row (class diulang). Alasannya: widget-styles.css
   plugin mendeklarasikan .ekit-wid-con .ekit-row dengan margin -15px pada
   specificity yang PERSIS SAMA (0,2,0), dan stylesheet plugin dimuat
   SETELAH style.css child theme (terukur di staging: sheet 59 vs 51).
   Pada specificity seri, yang dimuat belakangan menang, jadi rule kita
   kalah. Mengulang class menaikkan specificity ke (0,3,0) sehingga menang
   tanpa perlu !important dan tanpa bergantung urutan muat.

   Deklarasi lain (gap, flex-wrap) tidak perlu perlakuan ini karena plugin
   tidak menyetel gap, dan display:flex nilainya sama.

   Rumus lebar kolom: (100% - (jumlah kolom - 1) * gap) / jumlah kolom.
   Untuk gap 30px: 2 kolom = 50% - 15px, 4 kolom = 25% - 22.5px.

   Blok ini boleh DIHAPUS begitu ElementsKit membetulkan nama class-nya.
   Rule-nya akan otomatis tidak match dan mati dengan sendirinya.
   ========================================================================== */
.ekit-wid-con .ekit-row.ekit-row {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-left: 0;
	margin-right: 0;
}

.ekit-wid-con .ekit-row > .ekit-lg-3,
.ekit-wid-con .ekit-row > .ekit-md-6 {
	position: relative;
	flex: 0 0 100%;
	max-width: 100%;
}

@media (min-width: 768px) {
	.ekit-wid-con .ekit-row > .ekit-md-6 {
		flex: 0 0 calc(50% - 15px);
		max-width: calc(50% - 15px);
	}
}

@media (min-width: 992px) {
	.ekit-wid-con .ekit-row > .ekit-lg-3 {
		flex: 0 0 calc(25% - 22.5px);
		max-width: calc(25% - 22.5px);
	}
}


/* ==========================================================================
   SEO — daftar profil dokter di /dokter-gigi/ (v2.10.0)

   Galeri dokter menaruh seluruh kartunya sebagai base64 di satu atribut
   HTML, dan hanya 6 dari 37 profil yang punya link biasa. Daftar ini
   memberi tautan yang bisa dirayapi ke semua profil.

   Ditata supaya terlihat seperti bagian halaman yang memang disengaja,
   BUKAN disembunyikan. Daftar link tersembunyi yang hanya untuk mesin
   pencari adalah cloaking, dan lagi pula daftar ini berguna untuk
   pengunjung: galeri aslinya menuntut klik "Dokter Lainnya" berkali-kali
   sebelum semua nama muncul.
   ========================================================================== */

.satu-dokter-index {
	margin: 3rem auto 2rem;
	max-width: 1140px;
	padding: 0 20px;
}

.satu-dokter-index__title {
	font-size: 1.25rem;
	margin-bottom: 1rem;
}

.satu-dokter-index__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem 1.5rem;
	grid-template-columns: 1fr;
}

@media (min-width: 600px) {
	.satu-dokter-index__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 992px) {
	.satu-dokter-index__list {
		grid-template-columns: repeat(3, 1fr);
	}
}

.satu-dokter-index__item a {
	text-decoration: none;
}

.satu-dokter-index__item a:hover,
.satu-dokter-index__item a:focus {
	text-decoration: underline;
}

/* ==========================================================================
   Judul halaman promo (v2.11.0)

   Hub /promo/ dan empat halaman landing tidak punya heading sama sekali:
   yang ada cuma 12 sampai 21 h4 judul kartu, dan judul halaman sebenarnya
   hanya ada DI DALAM gambar banner. inc/promo.php menyisipkan satu H1 tepat
   di atas grid kartu, dan ini yang mengaturnya.

   Sengaja tidak mengunci font-family maupun warna: biarkan h1 mewarisi gaya
   Astra dan Elementor Global Fonts, supaya tetap ikut kalau brand berubah.
   Yang diatur hanya jarak dan perataan, karena grid promo rata tengah.
   ========================================================================== */
.satu-promo-title {
	margin: 1.5rem auto 1rem;
	text-align: center;
	max-width: 90%;
}

@media (max-width: 767px) {
	.satu-promo-title {
		margin-top: 1rem;
		font-size: 1.5rem;
	}
}