/*
|-----------------------------------------------------------------------------
| Penyesuaian Tema Medical Heed untuk RSU Aulia Blitar
|-----------------------------------------------------------------------------
| Berkas ini menimpa gaya bawaan tema. Isinya dua bagian:
|
|  1. WARNA MEREK — tema aslinya berwarna biru (#226ea2). Pada WordPress,
|     warna diganti lewat Customizer yang menghasilkan CSS secara dinamis di
|     setiap permintaan (lihat inc/dynamic-color.php). Di sini hasil akhirnya
|     ditulis langsung sebagai berkas statis: hasilnya sama persis, tetapi
|     tanpa satu pun proses tambahan saat halaman dibuka.
|
|     Warna diambil dari logo resmi: hijau #00904a dan oranye-merah #ec3c01.
|
|  2. KOMPONEN KHUSUS RUMAH SAKIT — bagian yang tidak ada di tema asli:
|     tabel jadwal praktek, kartu dokter, pita pengumuman, penanda konten
|     kosong, tombol WhatsApp mengambang, dan formulir pendaftaran.
|
| Ditulis sebagai CSS biasa — tanpa Sass, tanpa Tailwind, tanpa proses build.
| Konsekuensinya: berkas ini bisa langsung disunting di server hosting
| termurah sekalipun tanpa perlu Node.js.
*/

:root {
    --aulia-primary: #00904a;
    --aulia-primary-dark: #00713a;
    --aulia-primary-light: #e8f5ee;
    --aulia-accent: #ec3c01;
    --aulia-accent-dark: #c53100;
    --aulia-ink: #1f2d2a;
    --aulia-muted: #5f6f6a;
    --aulia-line: #e2e9e5;
    --aulia-radius: 10px;
}

/* ==========================================================================
   1. Pewarnaan ulang tema
   ========================================================================== */

.breadcrumb,
.btn-wrapper .btn:hover,
.widget_search .search-submit,
.services-wrap .read-more-icon,
.facilities .box .service-icon,
.feature-box-inner,
.btn.btn-primary,
.main-nav-search i,
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    background-color: var(--aulia-primary);
}

.about-us h2:after,
.btn.btn-primary:hover,
.site-footer .widget h2.widget-title:before,
.btn.btn-primary,
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    border-color: var(--aulia-primary);
}

a,
.read-more-icon a,
.btn.btn-primary:hover,
.main-navigation .current-menu-item > a,
.main-navigation a:hover,
.widget a:hover,
.site-footer a:hover,
button:hover,
input[type="submit"]:hover {
    color: var(--aulia-primary);
}

.nav__top {
    background-image: linear-gradient(to right, var(--aulia-primary-dark), var(--aulia-primary));
}

a:hover,
a:focus {
    color: var(--aulia-primary-dark);
}

/* Tombol ajakan bertindak memakai warna aksen agar menonjol di antara
   elemen hijau — kontrasnya juga lolos ambang WCAG AA. */
.btn.btn-accent,
.menu-item-cta > a {
    background-color: var(--aulia-accent);
    border-color: var(--aulia-accent);
    color: #fff;
}

.btn.btn-accent:hover,
.menu-item-cta > a:hover {
    background-color: var(--aulia-accent-dark);
    border-color: var(--aulia-accent-dark);
    color: #fff;
}

/* Butir menu "Daftar Online" ditampilkan sebagai tombol. */
.main-navigation .menu-item-cta > a {
    border-radius: 40px;
    padding: 10px 20px;
    margin-left: 10px;
}

/*
 * Saat halaman pendaftaran sedang dibuka, butir ini menjadi "current" — dan
 * aturan warna butir aktif (hijau) tadinya menang atas warna putih tombol,
 * sehingga teksnya berubah hijau di atas latar oranye dan nyaris hilang.
 * Kekhususan dinaikkan dengan menggabungkan kedua kelas pada satu selektor.
 */
.main-navigation .menu-item-cta.current-menu-item > a,
.main-navigation .menu-item-cta.current-menu-item > a:hover {
    color: #fff;
}

.main-navigation .menu-item-cta > a i {
    margin-right: 6px;
}

/* ==========================================================================
   2. Pita pengumuman
   ========================================================================== */

.announcement-bar {
    background: var(--aulia-primary-light);
    border-bottom: 1px solid var(--aulia-line);
    padding: 10px 0;
}

.announcement {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: var(--aulia-ink);
    padding: 4px 0;
}

.announcement + .announcement {
    border-top: 1px dashed var(--aulia-line);
}

.announcement i {
    color: var(--aulia-primary);
}

.announcement--warning {
    color: #8a5300;
}

.announcement--danger {
    color: #a11500;
    font-weight: 600;
}

.announcement-link {
    font-weight: 600;
    white-space: nowrap;
}

/* ==========================================================================
   3. Penanda konten yang belum diisi
   ========================================================================== */

/* Ditampilkan mencolok dengan sengaja: redaktur harus langsung melihat
   bagian mana yang bahannya belum diserahkan. Konten seperti ini juga
   dikecualikan dari sitemap dan structured data oleh is_placeholder(). */
.content-placeholder {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 4px 0;
}

.placeholder-badge {
    background: #fff3cd;
    border: 1px dashed #d9a300;
    color: #7a5b00;
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .2px;
}

.placeholder-note {
    color: var(--aulia-muted);
    font-size: 13px;
    font-style: italic;
}

/* ==========================================================================
   4. Kartu dokter & jadwal praktek
   ========================================================================== */

/* height: auto — lihat penjelasan pada .info-card soal grid float Bootstrap 3. */
.doctor-card {
    background: #fff;
    border: 1px solid var(--aulia-line);
    border-radius: var(--aulia-radius);
    overflow: hidden;
    height: auto;
    display: flex;
    flex-direction: column;
    transition: box-shadow .25s ease, transform .25s ease;
}

.doctor-card:hover {
    box-shadow: 0 12px 28px rgba(0, 144, 74, .14);
    transform: translateY(-3px);
}

.doctor-card__media {
    background: var(--aulia-primary-light);
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.doctor-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.doctor-card__body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.doctor-card__name {
    font-size: 18px;
    margin: 0;
    line-height: 1.35;
}

.doctor-card__specialty {
    display: inline-block;
    background: var(--aulia-primary-light);
    color: var(--aulia-primary-dark);
    border-radius: 40px;
    padding: 3px 12px;
    font-size: 13px;
    font-weight: 600;
    align-self: flex-start;
}

.doctor-card__actions {
    margin-top: auto;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Jadwal ditulis sebagai daftar teks — bukan gambar seperti pada poster
   cetak — supaya isinya terbaca mesin pencari dan pembaca layar. */
.schedule-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.schedule-list li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 14px;
    color: var(--aulia-muted);
    padding: 0;
}

.schedule-list li::before {
    content: none;
}

.schedule-day {
    min-width: 62px;
    font-weight: 600;
    color: var(--aulia-ink);
}

.schedule-note {
    font-style: italic;
    font-size: 13px;
}

.schedule-empty {
    font-size: 14px;
    color: var(--aulia-muted);
    font-style: italic;
}

/* Tabel jadwal lengkap pada halaman poli. */
.schedule-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.schedule-table th,
.schedule-table td {
    border: 1px solid var(--aulia-line);
    padding: 12px 14px;
    text-align: left;
    vertical-align: top;
    font-size: 15px;
}

.schedule-table thead th {
    background: var(--aulia-primary);
    color: #fff;
    font-weight: 600;
}

.schedule-table tbody tr:nth-child(even) {
    background: #fafcfb;
}

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   5. Penyaring, kartu umum, dan status kosong
   ========================================================================== */

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    background: #fff;
    border: 1px solid var(--aulia-line);
    border-radius: var(--aulia-radius);
    padding: 16px;
    margin-bottom: 30px;
}

.filter-bar label {
    font-weight: 600;
    margin: 0 4px 0 0;
    font-size: 14px;
}

.filter-bar select {
    min-width: 190px;
    padding: 8px 12px;
    border: 1px solid var(--aulia-line);
    border-radius: 6px;
    background: #fff;
}

.chip-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 24px;
    padding: 0;
}

.chip-list li::before {
    content: none;
}

.chip {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 40px;
    border: 1px solid var(--aulia-line);
    background: #fff;
    font-size: 14px;
    color: var(--aulia-ink);
}

.chip:hover,
.chip.is-active {
    background: var(--aulia-primary);
    border-color: var(--aulia-primary);
    color: #fff;
}

/*
 * PENTING: JANGAN memberi height: 100% di sini.
 *
 * Tema memakai grid float Bootstrap 3. Di dalamnya tinggi kolom bisa
 * ter-resolve menjadi nilai pasti (setinggi kolom terpanjang dalam satu baris),
 * sehingga height: 100% membuat kartu PERTAMA memanjang sampai setinggi seluruh
 * kolom. Kartu-kartu berikutnya lalu terdorong keluar batas kolom dan menimpa
 * bagian di bawahnya — inilah penyebab isi halaman Kontak saling tumpang
 * tindih. Tinggi dibiarkan mengikuti isinya.
 */
.info-card {
    background: #fff;
    border: 1px solid var(--aulia-line);
    border-radius: var(--aulia-radius);
    padding: 22px;
    height: auto;
}

.info-card h3 {
    font-size: 19px;
    margin-top: 0;
}

/*
 * Ikon poli pada kartu daftar poliklinik.
 *
 * Ikonnya dipilih pengelola lewat panel — bisa berupa ikon pustaka, bisa
 * berupa gambar yang diunggah untuk poli yang tidak punya padanan. Keduanya
 * dibungkus lingkaran berukuran sama supaya barisan kartu tetap rata meski
 * sumber gambarnya berbeda-beda.
 *
 * Selektor turunan dipakai untuk <img> di dalamnya agar aturan
 * `.info-card > img` di atas — yang mengatur logo lembaga setinggi 60px —
 * tidak ikut mengenainya.
 */
.info-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: rgba(0, 144, 74, .08);
    color: var(--aulia-primary, #00904a);
    font-size: 20px;
}

.info-card-icon img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

/*
 * Logo lembaga penerbit di kepala kartu.
 *
 * Markup-nya sudah memasang `height="60"`, tetapi atribut HTML semacam itu
 * berkedudukan paling lemah dalam kaskade — ia kalah oleh aturan CSS apa pun,
 * termasuk `img { height: auto }` bawaan tema. Akibatnya logo KARS tampil
 * setinggi 254px dan mendominasi kartunya.
 *
 * Selektor anak langsung (`>`) disengaja: ia hanya mengenai logo, bukan
 * pindaian sertifikat yang bersarang di dalam <p class="accreditation-scan">.
 */
.info-card > img {
    height: 60px;
    width: auto;
    margin-bottom: 12px;
}

/*
 * Pindaian sertifikat pada kartu akreditasi.
 *
 * Sertifikat dipindai dalam ukuran dan rasio yang tidak seragam — ada yang
 * potret, ada yang lanskap. `max-width: 100%` menjaganya tidak pernah melebar
 * melewati kartu, dan `height: auto` mempertahankan rasio aslinya sehingga
 * tulisan pada sertifikat tidak menjadi gepeng.
 */
.accreditation-scan {
    margin: 16px 0 0;
}

.accreditation-scan img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--aulia-line);
    border-radius: 4px;
    display: block;
}

/* Isyarat bahwa gambarnya bisa dibuka lebih besar. */
.accreditation-scan a:hover img,
.accreditation-scan a:focus-visible img {
    border-color: var(--aulia-primary);
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin: 30px 0;
}

.stat-box {
    background: var(--aulia-primary-light);
    border-radius: var(--aulia-radius);
    padding: 22px 18px;
    text-align: center;
}

.stat-box strong {
    display: block;
    font-size: 32px;
    line-height: 1.1;
    color: var(--aulia-primary-dark);
}

.stat-box span {
    font-size: 14px;
    color: var(--aulia-muted);
}

.empty-state {
    background: #fff;
    border: 1px dashed var(--aulia-line);
    border-radius: var(--aulia-radius);
    padding: 40px 24px;
    text-align: center;
    color: var(--aulia-muted);
}

.empty-state i {
    font-size: 34px;
    color: var(--aulia-line);
    display: block;
    margin-bottom: 12px;
}

/* ==========================================================================
   6. Formulir
   ========================================================================== */

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-field--full {
    grid-column: 1 / -1;
}

.form-field label {
    font-weight: 600;
    font-size: 14px;
}

.form-field .required {
    color: var(--aulia-accent);
}

/*
 * Keterangan kecil di bawah isian.
 *
 * Dipakai untuk hal yang perlu diketahui SEBELUM mengisi — bahwa jam yang
 * dipilih hanyalah perkiraan, atau bahwa poli tertentu tidak punya dokter yang
 * bisa dipilih. Keterangan semacam itu mencegah pertanyaan, sedangkan pesan
 * galat hanya menjelaskan sesudah terlanjur salah.
 *
 * `margin: 0` disengaja: .form-field sudah memberi jarak lewat `gap`, dan
 * margin bawaan <p> akan menggandakannya.
 */
.form-hint {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #6b7a76;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--aulia-line);
    border-radius: 6px;
    font-size: 15px;
    background: #fff;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: 2px solid var(--aulia-primary);
    outline-offset: 1px;
    border-color: var(--aulia-primary);
}

.form-field .hint {
    font-size: 13px;
    color: var(--aulia-muted);
}

.form-error {
    color: #b3261e;
    font-size: 13px;
    font-weight: 500;
}

/* Umpan madu anti-robot: harus tersembunyi dari mata DAN dari pembaca layar,
   tetapi tetap terisi oleh robot pengisi formulir otomatis. */
.honeypot {
    position: absolute !important;
    left: -9999px !important;
    opacity: 0;
    height: 0;
    width: 0;
    overflow: hidden;
}

.alert {
    border-radius: var(--aulia-radius);
    padding: 16px 20px;
    margin-bottom: 24px;
    border: 1px solid transparent;
}

.alert-success {
    background: var(--aulia-primary-light);
    border-color: var(--aulia-primary);
    color: var(--aulia-primary-dark);
}

.alert-danger {
    background: #fdecea;
    border-color: #f5c2bc;
    color: #a11500;
}

.alert h3 {
    margin-top: 0;
}

/* ==========================================================================
   7. Tombol WhatsApp mengambang
   ========================================================================== */

.floating-whatsapp {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 999;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #25d366;
    color: #fff !important;
    border-radius: 40px;
    padding: 12px 20px;
    font-weight: 600;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
    text-decoration: none;
}

.floating-whatsapp:hover {
    background: #1da851;
    color: #fff;
}

.floating-whatsapp i {
    font-size: 22px;
}

@media (max-width: 575px) {
    /* Di layar sempit hanya ikonnya yang ditampilkan agar tidak menutupi isi. */
    .floating-whatsapp__label {
        display: none;
    }

    .floating-whatsapp {
        padding: 14px;
        border-radius: 50%;
    }
}

/* ==========================================================================
   8. Isi artikel & halaman statis
   ========================================================================== */

.entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--aulia-radius);
}

/*
 * Galeri foto di dalam artikel.
 *
 * `auto-fit` + `minmax` dipilih supaya tata letaknya ditentukan RUANG YANG
 * TERSEDIA, bukan jumlah fotonya. Dua foto potret berdampingan di layar lebar,
 * menumpuk sendiri di ponsel — tanpa media query, dan tetap benar bila suatu
 * saat galerinya berisi tiga atau empat foto.
 */
.post-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin: 28px 0;
}

/* Keterangan membentang penuh di bawah seluruh foto, bukan ikut satu kolom. */
.post-gallery figcaption {
    grid-column: 1 / -1;
    font-size: 14px;
    color: var(--aulia-muted, #6b7280);
    font-style: italic;
    text-align: center;
}

.entry-content h2 {
    margin-top: 34px;
}

.entry-content h3 {
    margin-top: 26px;
}

.entry-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    color: var(--aulia-muted);
    font-size: 14px;
    margin-bottom: 22px;
}

.entry-meta i {
    color: var(--aulia-primary);
    margin-right: 5px;
}

/* Bagan struktur organisasi — rekursif, tanpa lebar tetap sehingga tetap
   terbaca di layar ponsel. */
.org-tree,
.org-tree ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.org-tree ul {
    margin-left: 22px;
    padding-left: 18px;
    border-left: 2px solid var(--aulia-line);
}

.org-tree li {
    padding: 6px 0;
}

.org-tree li::before {
    content: none;
}

.org-node {
    background: #fff;
    border: 1px solid var(--aulia-line);
    border-left: 4px solid var(--aulia-primary);
    border-radius: 8px;
    padding: 12px 16px;
    display: inline-block;
    min-width: 240px;
}

.org-node__position {
    font-weight: 600;
    color: var(--aulia-ink);
    display: block;
}

.org-node__name {
    color: var(--aulia-muted);
    font-size: 14px;
}

/* Pita logo mitra: skala abu-abu agar tidak mengalahkan isi halaman,
   berwarna penuh saat disorot. */
.partner-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 18px;
    align-items: center;
}

.partner-logo {
    background: #fff;
    border: 1px solid var(--aulia-line);
    border-radius: var(--aulia-radius);
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
}

.partner-logo img {
    max-width: 100%;
    max-height: 62px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: .8;
    transition: filter .25s ease, opacity .25s ease;
}

.partner-logo:hover img {
    filter: none;
    opacity: 1;
}

/* ==========================================================================
   9. Aksesibilitas & cetak
   ========================================================================== */

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

.skip-link:focus {
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 1000;
    width: auto;
    height: auto;
    clip: auto;
    background: #fff;
    padding: 12px 18px;
    border-radius: 6px;
}

:focus-visible {
    outline: 2px solid var(--aulia-primary);
    outline-offset: 2px;
}

@media print {
    /* Halaman jadwal dokter sering dicetak dan ditempel di ruang tunggu. */
    .site-header,
    .site-footer,
    .floating-whatsapp,
    .announcement-bar,
    .breadcrumb nav,
    .filter-bar {
        display: none !important;
    }
}

/* ==========================================================================
   10. Perbaikan tata letak bawaan tema
   ========================================================================== */

/*
 * SUMBER TUMPANG TINDIH DI HALAMAN KONTAK & PENDAFTARAN.
 *
 * Tema memberi .booking_form batas min-height DAN max-height 740px, karena di
 * demo aslinya kolom itu hanya memuat formulir Contact Form 7 yang pendek.
 * Formulir kami jauh lebih tinggi — halaman Kontak bahkan menambahkan sematan
 * peta — sehingga isinya MELUAP keluar kotak dan menimpa bagian di bawahnya
 * (Tanya Jawab).
 *
 * Catatan: tanda kurung kurawal sengaja tidak ditulis di dalam komentar ini,
 * karena sebagian alat pemroses CSS sederhana salah menafsirkannya sebagai
 * akhir aturan.
 *
 * Batas tinggi dihapus dan diganti tinggi minimum yang wajar.
 */
.booking_form {
    min-height: 0;
    max-height: none;
    padding: 0 15px;
}

/*
 * Kolom akordeon tema juga memakai padding 30px dan float. Padding besar itu
 * membuat kolom melebihi lebar grid pada layar sedang lalu ikut bergeser.
 */
.faq_accordance {
    padding: 0 15px;
    float: none;
}

/*
 * Jaring pengaman: setiap .row menutup float anak-anaknya. Bootstrap 3 sudah
 * melakukannya, tetapi beberapa elemen tema (.booking_form, .faq_accordance)
 * ikut menambah float sendiri di luar sistem grid.
 */
.content-area .row::after,
.content-area section::after {
    content: "";
    display: table;
    clear: both;
}

/* Jarak antar bagian di dalam area konten agar tidak saling menempel. */
.content-area {
    padding-bottom: 40px;
}

/*
 * Jarak antar bagian dibuat seragam di satu tempat. Nilainya sengaja tidak
 * besar: tiap bagian sudah memiliki judul ber-margin sendiri, dan kartu di
 * dalamnya sudah punya jarak bawah — menumpuk ketiganya membuat halaman
 * terasa berlubang.
 */
.content-area > .row + section,
.content-area > section + section {
    margin-top: 18px;
}

/* Judul bagian: jarak atas-bawah yang terkendali. */
.content-area .sectiontitle {
    width: 100%;
    margin-bottom: 6px;
}

.content-area .sectiontitle h2,
.content-area .sectiontitle h1 {
    margin-top: 0;
    margin-bottom: 10px;
}

.content-area .sectiontitle p {
    margin-bottom: 0;
}

/* Sematan peta: batasi lebar dan beri sudut membulat seperti kartu lain. */
.map-embed iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    border: 0;
    border-radius: var(--aulia-radius);
}

/* Kolom informasi kontak: jarak antar kartu konsisten. */
.info-card + .info-card,
.info-card + .alert,
.alert + .info-card {
    margin-top: 20px;
}

/* Daftar meta layanan/kontak: rapi tanpa bulatan bawaan tema. */
.service-meta {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
}

.service-meta li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px dotted var(--aulia-line);
}

.service-meta li::before {
    content: none;
}

.service-meta li:last-child {
    border-bottom: 0;
}

.service-meta i {
    color: var(--aulia-primary);
    min-width: 18px;
}

/* Alamat di halaman kontak: jangan dimiringkan seperti <address> bawaan. */
.content-area address {
    font-style: normal;
    margin: 0;
}

.content-area address p {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
}

.content-area address i {
    color: var(--aulia-primary);
    min-width: 18px;
}

.result-count {
    color: var(--aulia-muted);
    margin-bottom: 22px;
}

/* ==========================================================================
   11. Pewarnaan ulang menyeluruh — sisa warna bawaan tema
   ==========================================================================
   Bagian 1 di atas hanya menangani selektor utama. Penelusuran ulang atas
   style.css menemukan 86 aturan lain yang masih memakai palet biru/oranye
   bawaan tema. Yang disesuaikan di bawah adalah selektor yang BENAR-BENAR
   dipakai markup situs ini.

   Pembagian perannya dibuat konsisten:
     HIJAU  #00904a -> elemen struktural: kepala, navigasi, judul, ikon
     AKSEN  #ec3c01 -> elemen tindakan & penekanan: tombol ajakan, keadaan
                       aktif, sorotan, dan transisi
   ========================================================================== */

/* --- Kepala & navigasi --------------------------------------------------- */

/* Batang dekoratif di sudut kanan kepala situs. */
.header-all-wrapper:after {
    background-color: var(--aulia-primary-dark);
}

/*
 * Sub-menu bertingkat.
 *
 * SEBELUMNYA: latarnya diberi hijau tua, tetapi warna TEKS-nya tidak ikut
 * diatur — jadi ia tetap memakai warna tautan bawaan tema yang hampir hitam.
 * Hasilnya teks gelap di atas latar gelap: rasio kontrasnya sekitar 2:1, jauh
 * di bawah ambang WCAG AA (4.5:1) dan memang sulit dibaca.
 *
 * SEKARANG: panel dibuat PUTIH dengan teks pekat. Rasionya menjadi ~12:1.
 * Panel terang juga lebih tepat secara fungsi — ia melayang di atas isi
 * halaman, sehingga tepinya perlu terbaca sebagai lapisan tersendiri, bukan
 * melebur dengan bilah hijau di atasnya.
 */
.main-navigation ul ul {
    background-color: #fff;
    border-top: 3px solid var(--aulia-primary);
    border-radius: 0 0 6px 6px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .14);
    padding: 4px 0;
    overflow: hidden;
}

/*
 * Butir sub-menu ditumpuk VERTIKAL dan selebar panel.
 *
 * Tema memasang `display: inline-block` pada seluruh <li> navigasi. Itu tepat
 * untuk bilah mendatar di atas, tetapi ikut terbawa ke dalam panel dropdown —
 * akibatnya butir yang pendek ("Anak", "Mata", "Saraf") mengalir menyamping
 * dan berbagi baris, bukan bertumpuk rapi ke bawah.
 *
 * Perbaikan yang sama sekaligus menuntaskan soal kedua: karena <li> kini
 * selebar panel dan <a> di dalamnya block selebar induknya, sorotan saat
 * ditunjuk membentang SATU BARIS PENUH, bukan hanya sepanjang tulisannya.
 * Bidang klik pun ikut melebar — lebih mudah dituju, terutama di layar sentuh.
 */
.main-navigation ul ul li {
    display: block;
    width: 100%;
}

/*
 * Warna teks butir sub-menu.
 *
 * Selektornya memakai kelas `.sub-menu`, BUKAN `ul ul` seperti aturan di
 * atas, dan itu disengaja. Tema memasang:
 *
 *     .main-navigation .current-menu-item a { color: #226ea2; }  (0,2,1)
 *
 * Selektor keturunan tanpa `>` itu tidak hanya mengenai tautan butir yang
 * sedang aktif, tetapi SELURUH tautan di dalamnya — termasuk isi panel
 * dropdown-nya. Akibatnya, begitu pengunjung membuka salah satu halaman
 * Profil, seisi daftar dropdown Profil ikut berubah biru.
 *
 * `.main-navigation ul ul a` berbobot (0,1,3): jumlah KELASnya kalah dari
 * aturan tema, sehingga biru itu menang berapa pun urutan berkasnya.
 * `.main-navigation .sub-menu a` berbobot (0,2,1) — seimbang dengan tema,
 * dan karena app.css dimuat setelah style.css, aturan inilah yang dipakai.
 */
.main-navigation ul ul a {
    display: block;
    width: auto;
    border-color: var(--aulia-line);
}

.main-navigation .sub-menu a {
    color: var(--aulia-ink);
}

/* Keadaan tunjuk & fokus: latar hijau muda, teks hijau tua (rasio ~7:1). */
.main-navigation .sub-menu a:hover,
.main-navigation .sub-menu a:focus-visible,
.main-navigation .sub-menu .current-menu-item > a {
    background-color: var(--aulia-primary-light);
    color: var(--aulia-primary-dark);
}

/* Butir terakhir tidak perlu garis pemisah. */
.main-navigation ul ul li:last-child > a {
    border-bottom: 0;
}

/* Tombol buka-tutup sub-menu di layar ponsel. */
.sub-toggle,
.sub-toggle-children {
    background-color: var(--aulia-primary-dark);
}

.main-navigation .current-menu-item > a,
.menu-item-has-children:hover:after {
    color: var(--aulia-primary);
}

.nav-menu > li.current-menu-item:after {
    background: var(--aulia-accent);
}

/* --- Judul bagian ------------------------------------------------------- */

.about-us h2,
.about-us h3,
.services .description h4,
.sectiontitle h1,
.sectiontitle h2 {
    color: var(--aulia-primary-dark);
}

/* Garis bawah judul bagian memakai warna aksen sebagai penekanan. */
.about-us h2:after,
.sectiontitle h2:after,
.faq h2:after {
    background-color: var(--aulia-accent);
}

/* Butir daftar bercentang di dalam konten. */
.about-us ul li:before,
.about-us ol li:before,
.entry-content ul li:before {
    color: var(--aulia-primary);
}

/* --- Tombol & tautan ---------------------------------------------------- */

/*
 * Tombol ajakan bertindak pada pita CTA memakai warna AKSEN, bukan hijau.
 * Inilah tombol paling menentukan di situs ini (mendaftar & menghubungi IGD),
 * jadi ia harus paling menonjol.
 */
.call_to_action a,
.call_to_action .btn {
    background: var(--aulia-accent);
    border: 1px solid var(--aulia-accent);
    color: #fff;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.call_to_action a:hover,
.call_to_action .btn:hover {
    background: #fff;
    color: var(--aulia-accent-dark);
    border-color: var(--aulia-accent-dark);
}

/* Panah "baca selengkapnya" berubah ke aksen saat disorot. */
.read-more-icon a svg path {
    stroke: #fff;
}

.services-wrap:hover .read-more-icon,
.read-more-icon:hover {
    background-color: var(--aulia-accent);
}

.read-more,
.prevNextArticle a:hover {
    color: var(--aulia-primary-dark);
    font-weight: 600;
}

.read-more:hover {
    color: var(--aulia-accent-dark);
}

/* Tombol formulir bawaan tema. */
.wpcf7 input[type="submit"],
.wpcf7 input[type="button"],
input[type="button"],
input[type="reset"],
input[type="submit"],
button[type="submit"] {
    background-color: var(--aulia-accent);
    border: 1px solid var(--aulia-accent);
    color: #fff;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

.wpcf7 input[type="submit"]:hover,
.wpcf7 input[type="button"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
    background: transparent;
    border-color: var(--aulia-accent-dark);
    color: var(--aulia-accent-dark);
}

/* Tombol pencarian di kepala & kolom samping tetap hijau (bukan aksi utama). */
.widget_search .search-submit,
.main-nav-search i {
    background-color: var(--aulia-primary);
    border-color: var(--aulia-primary);
    color: #fff;
}

/* --- Ikon layanan & fasilitas ------------------------------------------- */

.facilities .facility-box .service-icon {
    border-color: var(--aulia-primary);
}

.facilities .facility-box .service-icon i {
    color: var(--aulia-primary);
}

/* --- Kolom samping (widget) -------------------------------------------- */

.widget a:hover::before,
.widget li:hover::before {
    color: var(--aulia-accent);
}

.widget-area .widget .widget-title {
    background-color: var(--aulia-primary-light);
    color: var(--aulia-primary-dark);
    border-left: 4px solid var(--aulia-primary);
}

.widget_categories li.current-cat > a,
.widget_nav_menu li.current-menu-item > a {
    color: var(--aulia-accent-dark);
    font-weight: 600;
}

/* --- Paginasi ---------------------------------------------------------- */

.page-numbers {
    background: var(--aulia-primary);
    border: 1px solid var(--aulia-primary);
    color: #fff;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* Halaman yang sedang dibuka ditandai warna aksen. */
.page-numbers.current {
    background: var(--aulia-accent);
    border-color: var(--aulia-accent);
    color: #fff;
}

.page-numbers:hover {
    background: transparent;
    border-color: var(--aulia-accent);
    color: var(--aulia-accent-dark);
}

.page-numbers.disabled {
    background: #f2f4f3;
    border-color: var(--aulia-line);
    color: #b4bfba;
    cursor: not-allowed;
}

.page-numbers.dots {
    background: transparent;
    border-color: transparent;
    color: var(--aulia-muted);
}

/* --- Titik navigasi slider --------------------------------------------- */

.flex-control-nav > li > a:hover,
.flex-control-nav > li > a.flex-active {
    background: var(--aulia-accent);
    border-color: var(--aulia-accent);
}

/* --- Kaki situs -------------------------------------------------------- */

.copyright ul li a:hover,
.site-footer .widget a:hover {
    color: var(--aulia-accent);
}

.site-footer .widget h2.widget-title:before {
    background-color: var(--aulia-accent);
}

.emergency-number {
    display: inline-block;
    background: var(--aulia-accent);
    color: #fff !important;
    border-radius: 40px;
    padding: 9px 18px;
    font-weight: 700;
    margin: 6px 0 10px;
}

.emergency-number:hover {
    background: var(--aulia-accent-dark);
}

/* ==========================================================================
   12. Akordeon Tanya Jawab — transisi warna aksen
   ==========================================================================
   Tema aslinya memakai LATAR GRADIEN saat disorot. Masalahnya, CSS tidak dapat
   menganimasikan background-image, sehingga perpindahan warnanya terasa
   mengejut — bukan transisi.

   Di sini latarnya dibuat warna PADAT sehingga background-color benar-benar
   bisa dianimasikan: hijau (tenang) -> #ec3c01 (aktif). Hasilnya transisi
   yang mulus sekaligus penanda keadaan aktif yang jelas.
   ========================================================================== */

.accordion__item {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

.accordion-header {
    background: var(--aulia-primary);
    background-image: none;
    /* Bukan huruf kapital semua: pertanyaan panjang jauh lebih mudah dibaca. */
    text-transform: none;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.5;
    padding-right: 54px;
    position: relative;
    transition: background-color .28s ease, padding-left .28s ease;
}

.accordion-header:hover,
.accordion-header:focus-visible {
    background: var(--aulia-accent);
    background-image: none;
    padding-left: 30px;
}

.accordion__item.active .accordion-header {
    background: var(--aulia-accent);
    background-image: none;
}

/* Tanda panah: diberi ruang tetap agar tidak menabrak teks pertanyaan. */
.accordion__item > .accordion-header:after {
    position: absolute;
    right: 22px;
    top: 50%;
    float: none;
    transform: translateY(-50%) rotate(0deg);
    transition: transform .28s ease;
}

.accordion__item.active > .accordion-header:after {
    transform: translateY(-50%) rotate(-180deg);
}

.accordion-body {
    background: #fff;
    border: 1px solid var(--aulia-line);
    border-top: 0;
}

.accordion-body__contents {
    padding: 16px 20px;
    color: var(--aulia-ink);
    line-height: 1.7;
}

.accordion-body__contents p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   13. Tautan media sosial
   ==========================================================================
   Tema hanya menata .social-link ketika berada di bilah atas. Di kaki situs,
   aturan .widget-area ul li ikut berlaku sehingga tiap ikon memperoleh butir
   daftar dan garis pemisah — tampil bertumpuk ke bawah alih-alih sebaris.
   ========================================================================== */

.social-link {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 14px 0 0;
    padding: 0;
}

.social-link li {
    /* Menimpa .widget-area ul li milik tema (butir + garis bawah). */
    border-bottom: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    list-style: none;
}

.social-link li::before,
.social-link li::marker {
    content: none;
}

.social-link li a {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    transition: background-color .25s ease, color .25s ease, transform .25s ease;
}

.social-link li a:hover {
    background: var(--aulia-accent);
    color: #fff;
    transform: translateY(-2px);
}

/* Lambang TikTok berupa SVG sebaris — Font Awesome 5.5 belum memuatnya. */
.social-svg {
    display: block;
    width: 14px;
    height: 14px;
}

/* Di bilah atas kepala situs latarnya sudah hijau, jadi bulatannya
   dibuat transparan agar tidak bertumpuk warna. */
.nav__top .social-link {
    margin: 0;
}

.nav__top .social-link li a {
    width: 26px;
    height: 26px;
    background: transparent;
}

.nav__top .social-link li a:hover {
    background: rgba(255, 255, 255, .18);
    transform: none;
}

/* ==========================================================================
   14. Kartu sama tinggi dalam satu baris
   ==========================================================================
   Grid Bootstrap 3 memakai float, sehingga kartu dalam satu baris tingginya
   mengikuti isi masing-masing dan terlihat bergerigi.

   Barisnya diubah menjadi flex HANYA bila memang memuat kartu — dideteksi
   dengan :has(). Baris lain tetap memakai float bawaan tema, jadi tidak ada
   tata letak yang berubah di luar yang dimaksud.

   Peramban lama yang belum mendukung :has() cukup mengabaikan aturan ini:
   tampilannya kembali seperti semula (tinggi bergerigi) tanpa rusak.
   ========================================================================== */

.row:has(> [class*="col-"] > .doctor-card),
.row:has(> [class*="col-"] > .info-card),
.row:has(> [class*="col-"] > .post-card),
.row:has(> [class*="col-"] > .services-wrap) {
    display: flex;
    flex-wrap: wrap;
}

.row:has(> [class*="col-"] > .doctor-card) > [class*="col-"],
.row:has(> [class*="col-"] > .info-card) > [class*="col-"],
.row:has(> [class*="col-"] > .post-card) > [class*="col-"],
.row:has(> [class*="col-"] > .services-wrap) > [class*="col-"] {
    display: flex;
    flex-direction: column;
    margin-bottom: 26px;
}

/*
 * flex: 1 membuat kartu mengisi seluruh tinggi kolom. Aman dilakukan di sini —
 * berbeda dengan height: 100% — karena induknya kini benar-benar flex
 * container, bukan kotak float bertinggi tak tentu.
 */
.row:has(> [class*="col-"] > .doctor-card) > [class*="col-"] > .doctor-card,
.row:has(> [class*="col-"] > .info-card) > [class*="col-"] > .info-card,
.row:has(> [class*="col-"] > .post-card) > [class*="col-"] > .post-card,
.row:has(> [class*="col-"] > .services-wrap) > [class*="col-"] > .services-wrap {
    flex: 1 1 auto;
}

/* Tombol aksi kartu artikel tetap menempel di dasar kartu. */
.post-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--aulia-line);
    border-radius: var(--aulia-radius);
    overflow: hidden;
}

.post-card figure {
    margin: 0;
}

.post-card figure img {
    width: 100%;
    height: auto;
    display: block;
}

.post-card .description {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.post-card .description h3 {
    font-size: 18px;
    line-height: 1.4;
    margin: 0;
}

.post-card .read-more {
    margin-top: auto;
    align-self: flex-start;
}

/* ==========================================================================
   16. Kepala situs: identitas ringkas + menu satu baris
   ==========================================================================
   Dua hal yang saling berkaitan dan karena itu ditangani bersama.

   Sebelumnya blok identitas menumpuk tiga baris (logo, nama, moto) dan
   menempati seperempat lebar kepala situs. Sisa ruangnya tidak cukup untuk
   kedelapan butir menu, sehingga menu pecah menjadi dua baris — bentuk yang
   membuat kepala situs terasa berat dan sulit dipindai sekilas.

   Perbaikannya: moto dilepas (lihat branding.blade.php), logo dan nama
   disandingkan mendatar, lalu lebar yang terbebaskan diberikan ke navigasi.
   ========================================================================== */

/*
 * Selektornya sengaja ditulis .header-logo.site-branding — bukan .site-branding
 * saja — karena tema memasang `display: table-cell` dengan dua kelas sekaligus.
 * Menandingi kekhususan itu jauh lebih baik daripada memakai !important, yang
 * akan menyulitkan penyesuaian berikutnya.
 */
.header-logo.site-branding {
    display: flex;
    align-items: center;
    gap: 12px;
    height: auto;
    padding: 10px 0;
}

.site-branding .custom-logo-link {
    flex: 0 0 auto;
    line-height: 0;
}

.site-branding .custom-logo {
    width: 58px;
    height: auto;
}

/* Tema memusatkan seluruh teks identitas; di susunan mendatar ia harus kiri. */
.site-branding h1,
.site-branding p {
    text-align: left;
}

/*
 * Nama situs. Ukurannya memakai clamp() supaya ikut mengecil pada layar
 * sempit tanpa perlu media query tersendiri — nilai tengahnya relatif
 * terhadap lebar viewport, dengan batas bawah dan atas yang tegas.
 */
.site-branding .site-title {
    margin: 0;
    font-size: clamp(18px, 1.45vw, 24px);
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
}

.site-branding .site-title a {
    color: var(--aulia-primary-dark);
}

.site-branding .site-title a:hover {
    color: var(--aulia-accent);
}

/* --- Menu utama dalam satu baris ---------------------------------------- */

/*
 * Berlaku mulai 992px. Di bawah itu ruangnya memang tidak cukup untuk delapan
 * butir, jadi menu dibiarkan membungkus seperti semula — dipaksakan pun
 * hasilnya hanya teks yang terlalu kecil untuk dibaca.
 *
 * Tiga hal yang membuatnya muat, berurutan dari yang paling banyak
 * menghemat ruang:
 *   1. letter-spacing 1px bawaan tema dinolkan  (~70px pada 73 huruf)
 *   2. padding kiri-kanan tiap butir dipersempit (~130px pada 8 butir)
 *   3. ukuran huruf menyusut mengikuti lebar layar
 */
@media (min-width: 992px) {
    .main-navigation .nav__wrapper {
        align-items: center;
        gap: 8px;
    }

    .main-navigation #primary-menu {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-end;
        width: 100%;
    }

    .main-navigation #primary-menu > li {
        flex: 0 0 auto;
    }

    .main-navigation #primary-menu > li > a {
        font-size: clamp(12px, 0.95vw, 14px);
        letter-spacing: 0;
        padding: 0 clamp(7px, 0.85vw, 15px);
        white-space: nowrap;
    }

    /* Tombol "Daftar Online" tetap lebih lapang — ia butuh menonjol. */
    .main-navigation #primary-menu > li.menu-item-cta > a {
        padding: 9px clamp(12px, 1.1vw, 20px);
        margin-left: clamp(4px, 0.5vw, 10px);
    }

    /*
     * Sub-menu tidak ikut mengecil: di dalam panel ruangnya tidak terbatas.
     * Panelnya dilebarkan dari 210px bawaan tema ke 250px supaya label
     * panjang seperti "Sertifikasi & Akreditasi" muat dalam satu baris.
     */
    .main-navigation #primary-menu ul {
        width: 250px;
    }

    /* Lebar butir sudah ditangani aturan dasar .main-navigation ul ul li. */
    .main-navigation #primary-menu ul a {
        font-size: 13.5px;
        letter-spacing: 0;
        padding: 0 18px;
        white-space: normal;
    }
}

/* --- Sub-menu di layar ponsel ------------------------------------------- */

/*
 * Di bawah 768px menu tampil sebagai panel bertumpuk, bukan panel melayang.
 * Tema mewarnainya biru bawaan; di sini dijadikan hijau tua DENGAN TEKS PUTIH
 * — sekali lagi yang penting adalah pasangan latar-teksnya ditetapkan
 * bersamaan, bukan salah satunya saja (rasio ~5,6:1).
 */
@media (max-width: 768px) {
    .main-navigation ul ul {
        background-color: var(--aulia-primary-dark);
        border-top: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
    }

    /* Sama seperti di layar lebar: pakai `.sub-menu` agar bobot kelasnya
       mengungguli aturan biru bawaan tema. */
    .main-navigation .sub-menu a,
    .main-navigation .sub-menu .current-menu-item > a {
        color: #fff;
        border-color: rgba(255, 255, 255, .18);
    }

    .main-navigation .sub-menu a:hover,
    .main-navigation .sub-menu a:focus-visible,
    .main-navigation .sub-menu .current-menu-item > a {
        background-color: rgba(255, 255, 255, .12);
        color: #fff;
    }

    .site-branding .custom-logo {
        width: 46px;
    }
}

/* ==========================================================================
   17. Sorotan beranda tanpa slider
   ==========================================================================
   .banner-static memakai markup yang sama persis dengan .banner-slider, tetapi
   tanpa flexslider yang mengambil alih tata letaknya. Karena itu aturan tata
   letak yang biasanya dipasang flexslider harus ditulis di sini.
   ========================================================================== */

.banner-static {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.banner-static .slides {
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.banner-static .slides > li {
    position: relative;
    display: block;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/*
 * Lebar teks sorotan.
 *
 * Tema membatasi .banner-caption pada max-width 50%. Dengan judul 60px, kalimat
 * sepanjang "Pelayanan Kesehatan Profesional Untuk Keluarga Anda" pecah menjadi
 * tiga baris dan mendorong tombolnya keluar dari panji setinggi 600px — tombol
 * ajakan bertindak yang paling penting justru terpotong.
 *
 * Lebarnya dilonggarkan dan ukuran judul dibuat mengikuti lebar layar.
 */
.banner-static .banner-caption,
.banner-slider .banner-caption {
    max-width: min(760px, 88%);
}

.banner-static .banner-title,
.banner-slider .banner-title {
    font-size: clamp(30px, 4vw, 54px);
    line-height: 1.15;
    font-weight: 600;
    margin: 0 0 20px;
    text-transform: capitalize;
}

.banner-static .banner-desc,
.banner-slider .banner-desc {
    font-size: clamp(15px, 1.25vw, 18px);
    line-height: 1.6;
    margin: 0 0 28px;
}

/* Tombol sorotan: biarkan melebar sesuai isinya, jangan dipatok 44%. */
.banner-static .btn-wrapper,
.banner-slider .btn-wrapper {
    width: auto;
    flex-wrap: wrap;
    gap: 12px;
}

/* ==========================================================================
   18. Judul bagian yang seragam di seluruh halaman
   ==========================================================================
   INI SUMBER KETIDAKSERAGAMAN YANG PALING TERLIHAT antara beranda dan halaman
   dalam. Tema hanya menata .sectiontitle bila ia kebetulan berada di dalam
   .facilities, .services, atau .testimonial — masing-masing dengan warna dan
   perataan sendiri. Di luar ketiganya, dan itulah kebanyakan halaman dalam,
   judulnya jatuh ke gaya <h2> biasa: abu-abu, tanpa garis, tanpa penekanan.

   Di bawah ini gayanya ditetapkan SATU KALI untuk seluruh situs. Selektor
   tema yang lebih spesifik ikut disebutkan supaya aturan ini benar-benar
   menang tanpa perlu !important.

   Perataan tidak lagi ditentukan kelas induk, melainkan prop $align pada
   komponennya — lihat section-title.blade.php.
   ========================================================================== */

.sectiontitle h1,
.sectiontitle h2,
.about-us .sectiontitle h2,
.facilities .sectiontitle h2,
.services .sectiontitle h2,
.testimonial .sectiontitle h2,
.promotion .sectiontitle h1 {
    position: relative;
    font-family: unset;
    font-size: clamp(21px, 2vw, 28px);
    font-weight: 700;
    line-height: 1.25;
    color: var(--aulia-primary-dark);
    text-align: center;
    text-transform: none;
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: 14px;
}

/* Garis aksen pendek di bawah judul — penanda awal bagian yang konsisten. */
.sectiontitle h1::after,
.sectiontitle h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 52px;
    height: 3px;
    border-radius: 2px;
    background-color: var(--aulia-accent);
}

.sectiontitle p,
.about-us .sectiontitle p,
.facilities .sectiontitle p,
.services .sectiontitle p,
.testimonial .sectiontitle p {
    color: var(--aulia-muted);
    font-size: 15.5px;
    line-height: 1.6;
    text-align: center;
    margin: 12px 0 0;
}

/* --- Varian rata kiri, untuk judul di dalam satu kolom ------------------- */

.sectiontitle--left h1,
.sectiontitle--left h2,
.sectiontitle--left p {
    text-align: left;
}

.sectiontitle--left h1::after,
.sectiontitle--left h2::after {
    left: 0;
    transform: none;
}

/* --- Jarak --------------------------------------------------------------- */

.content-area .sectiontitle {
    margin-top: 34px;
    margin-bottom: 18px;
}

/* Judul pertama pada satu halaman tidak perlu jarak atas. */
.content-area > .row:first-child .sectiontitle,
.content-area > .sectiontitle:first-child,
.content-area > section:first-child .sectiontitle {
    margin-top: 0;
}

/*
 * Judul di dalam kartu informasi. Sebelumnya diatur satu per satu lewat
 * atribut style pada masing-masing halaman, sehingga nilainya gampang
 * berbeda-beda. Sekarang ditetapkan di sini saja.
 */
.info-card > h2,
.info-card > h3 {
    margin-top: 0;
    margin-bottom: 14px;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--aulia-primary-dark);
}

/*
 * Sub-judul biasa di tengah artikel (misalnya "Yang Kami Layani" pada halaman
 * layanan). Bukan judul bagian, jadi tanpa garis aksen — tetapi warnanya
 * disamakan agar tidak ada satu pun heading yang tertinggal abu-abu polos.
 *
 * Pengecualiannya ditulis pada INDUK, bukan pada headingnya, memakai
 * kombinator anak langsung. Cara ini penting: bila pengecualian ditulis di
 * heading saja, selektornya menjadi lebih khusus daripada `.sectiontitle h2`
 * dan justru menimpa judul bagian yang baru saja diseragamkan di atas.
 */
.content-area :not(.sectiontitle):not(.info-card) > h2:not(.widget-title):not(.entry-title) {
    color: var(--aulia-primary-dark);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.3;
    margin-top: 28px;
    margin-bottom: 12px;
}

.content-area :not(.sectiontitle):not(.info-card) > h3:not(.widget-title) {
    color: var(--aulia-primary-dark);
    font-weight: 700;
    line-height: 1.3;
}

/* ==========================================================================
   19. Keterbacaan jawaban FAQ
   ==========================================================================
   Jawaban sebelumnya mewarisi ukuran teks bawaan tema sehingga tampak lebih
   kecil daripada pertanyaannya — padahal justru jawabannya yang dibaca
   panjang-panjang.

   Ukurannya dinaikkan ke 16,5px: sedikit di atas pertanyaan (15,5px) agar
   nyaman dibaca, tetapi masih di bawah teks isi halaman biasa sehingga
   akordeon tidak berebut perhatian dengan konten utama.
   ========================================================================== */

.accordion-body__contents {
    font-size: 16.5px;
    line-height: 1.75;
    padding: 18px 22px;
}

.accordion-body__contents p {
    font-size: inherit;
    line-height: inherit;
    margin-bottom: 12px;
}