/**
 * layout.css — Al-Kifayah Theme
 * Struktur grid dan layout dasar halaman.
 */

/* Container standar — digunakan di semua section */
.ak-container {
    width: min(var(--ak-container), calc(100% - 3rem));
    margin-right: auto;
    margin-left: auto;
}

/* Alias yang digunakan di berbagai komponen */
.ak-topbar-inner,
.ak-header-inner,
.ak-navigation-inner,
.ak-footer-inner,
.ak-hero-inner,
.ak-content-shell {
    width: min(var(--ak-container), calc(100% - 3rem));
    margin-right: auto;
    margin-left: auto;
}

/* =====================================================================
   BAND KONTEN — body + sidebar
   Berlaku untuk SEMUA halaman frontend (static page, about, article,
   issue, search, login, dll.) karena memakai wrapper bawaan OJS.

   Default: satu kolom. Kolom kedua hanya muncul bila footer.tpl benar-
   benar merender <aside class="ak-sidebar">, sehingga halaman tanpa blok
   sidebar tidak menyisakan kolom kosong.
   ===================================================================== */
.pkp_structure_content {
    display: block;
    width: min(var(--ak-container), calc(100% - 3rem));
    margin-right: auto;
    margin-left: auto;
}

/* Jarak vertikal band konten — kecuali homepage (hero berada di dalam
   .pkp_structure_main sehingga tidak boleh ikut ter-padding). */
body:not(.pkp_page_index) .pkp_structure_content {
    padding: var(--ak-content-pad-y) 0 calc(var(--ak-content-pad-y) * 1.6);
}

/* Dua kolom hanya ketika sidebar benar-benar ada */
.pkp_structure_content:has(> .ak-sidebar) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--ak-sidebar-width);
    gap: var(--ak-content-gap);
    align-items: start;
}

body.pkp_page_index .pkp_structure_content {
    display: block;
    width: 100%;
    max-width: none;
}

body.pkp_page_index .pkp_structure_main {
    width: 100%;
}

.pkp_structure_main {
    min-width: 0;
    max-width: none;
}

/* Halaman yang secara eksplisit meminta lebar penuh */
.ak-full-width .pkp_structure_content,
.pkp_structure_content.ak-full-width {
    display: block;
}

/* =====================================================================
   BODY KONTEN — wrapper .page bawaan OJS dipakai oleh static page dan
   seluruh halaman frontend lain. Tampil sebagai kartu putih di atas
   band Surface, mengikuti prototype.
   ===================================================================== */
.page {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 1.75rem 2rem 2.25rem;
    border: 1px solid var(--ak-border);
    border-radius: var(--ak-radius-md);
    background-color: var(--ak-background);
    box-shadow: var(--ak-shadow-sm);
}

/* Homepage memakai shell sendiri, bukan kartu .page */
body.pkp_page_index .page {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.page > h1,
.page > h2,
.page .page_title {
    margin-top: 0;
    margin-bottom: 1.25rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid var(--ak-border);
    color: var(--ak-primary-dark);
    font-family: var(--ak-serif);
    font-size: 1.6rem;
    line-height: 1.3;
    position: relative;
}

/* Aksen pendek di bawah judul halaman (prototype: .ak-section-header::after) */
.page > h1::after,
.page > h2::after,
.page .page_title::after {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    border-bottom: 2px solid var(--ak-gold);
    content: '';
}

.page h3,
.page h4 {
    color: var(--ak-primary);
}

.page > *:last-child {
    margin-bottom: 0;
}

/* Media dan tabel di dalam body konten tidak boleh meluber */
.page img {
    max-width: 100%;
    height: auto;
}

.page table {
    width: 100%;
    border-collapse: collapse;
}

.page table th,
.page table td {
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--ak-border);
    text-align: left;
}

.page table th {
    background-color: var(--ak-surface);
    color: var(--ak-primary-dark);
}

/* =====================================================================
   BREADCRUMB — nav.cmp_breadcrumbs bawaan OJS
   ===================================================================== */
.cmp_breadcrumbs {
    margin-bottom: 1.25rem;
    color: var(--ak-muted);
    font-size: 0.825rem;
}

.cmp_breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cmp_breadcrumbs li {
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
}

.cmp_breadcrumbs a {
    color: var(--ak-primary);
    text-decoration: none;
}

.cmp_breadcrumbs a:hover,
.cmp_breadcrumbs a:focus {
    text-decoration: underline;
}

.cmp_breadcrumbs .separator {
    color: var(--ak-muted);
}

.cmp_breadcrumbs .current span {
    color: var(--ak-muted);
}

/* =====================================================================
   SECTION HEADER — prototype .ak-section-header
   Judul di kiri, aksi/badge di kanan, dengan garis bawah dan aksen emas.
   Dipakai bersama .ak-section-title; ketika judul berada DI DALAM header,
   garis bawah pindah ke header agar membentang selebar kolom.
   ===================================================================== */
.ak-section-header {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.55rem;
    border-bottom: 2px solid var(--ak-border);
}

.ak-section-header::after {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 58px;
    border-bottom: 2px solid var(--ak-gold);
    content: '';
}

/* Judul di dalam header tidak membawa garis/aksen sendiri lagi */
.ak-section-header .ak-section-title {
    margin: 0;
    padding: 0;
    border-bottom: 0;
}

.ak-section-header .ak-section-title::after {
    content: none;
}

/* Aksi di bawah daftar (mis. "Lihat Semua Terbitan") */
.ak-section-action {
    display: flex;
    justify-content: center;
    margin-top: 1.75rem;
}

/* Section headings standar */
.ak-section-title {
    margin: 0 0 1rem;
    padding-bottom: 0.55rem;
    border-bottom: 2px solid var(--ak-border);
    color: var(--ak-primary);
    font-size: 1.35rem;
    font-family: var(--ak-serif);
}

.ak-section-title::after {
    display: block;
    width: 58px;
    margin-top: 0.55rem;
    border-bottom: 2px solid var(--ak-gold);
    content: '';
}

/* Content shell (homepage content area) */
.ak-content-shell {
    padding: 2.6rem 0 4rem;
}

.ak-home-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    gap: 2rem;
    align-items: start;
}

.ak-home-main,
.ak-home-sidebar {
    min-width: 0;
}

/* Gaya .ak-home-sidebar dan widget-nya didefinisikan di sidebar.css */

@media (max-width: 900px) {
    .ak-home-grid {
        grid-template-columns: 1fr;
    }
}

/* Area utama minimal height */
.ak-main {
    min-height: 55vh;
}