/*
 * bima.css — override brand untuk web publik SIMKATMAWA (Crafto theme).
 *
 * Aturan (docs/design/PUBLIC_WEB_WAGTAIL_DESIGN.md §4.3, keputusan E):
 *   - File core Crafto (vendors.min.css, icon.min.css, style.css,
 *     responsive.css, main.js) TIDAK diedit — semua override brand ada di sini.
 *   - Warna & tipografi lewat CSS variable, supaya rebrand cukup ubah :root.
 *   - Dimuat paling akhir: vendors.min.css -> icon.min.css -> style.css ->
 *     responsive.css -> elearning.css -> bima.css.
 */

/* ===================================
    01. Brand tokens BIMA
====================================== */
:root {
    /* Identitas institusi — satu-satunya tempat mengubah warna brand.
       Palet dinus.ac.id (keputusan user 2026-08-29,
       docs/design/CRAFTO_ELEARNING_ANALYSIS.md §6). */
    --bima-primary: #114D91;        /* biru institusi dinus */
    --bima-primary-dark: #003366;   /* biru tua pendukung */
    --bima-accent: #F3BC45;         /* kuning aksen dinus */
    --bima-ink: #23262d;            /* teks gelap */

    /* Override variable Crafto (lihat style.css §02). */
    --base-color: var(--bima-primary);
    --alt-font: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    --primary-font: "Inter", sans-serif;
}

/* Kontras WCAG: teks di atas aksen kuning wajib ink gelap, bukan putih. */
.bg-bima-accent {
    background-color: var(--bima-accent);
    color: var(--bima-ink);
}

/* Tombol biru institusi (--base-color) memakai teks putih — mengembalikan
   perilaku style.css dasar yang sempat ditimpa demo elearning (teks gelap
   saat base-color demo masih kuning). */
.btn.btn-base-color {
    color: #ffffff;
}

/* Ikon dalam lingkaran biru institusi (feature-box-icon-rounded
   bg-base-color) wajib putih — tanpa ini ikon mewarisi warna teks konteks
   yang gelap, tak terbaca di atas #114D91. */
.feature-box-icon-rounded.bg-base-color i {
    color: #ffffff;
}

/* ===================================
    02. Aksesibilitas
====================================== */
.bima-skip-link {
    position: absolute;
    inset-inline-start: 8px;
    top: 8px;
    z-index: 2000;
    padding: 10px 18px;
    border-radius: 4px;
    background: var(--bima-primary);
    color: #ffffff;
    font-size: 14px;
    text-decoration: none;
}

a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--bima-accent);
    outline-offset: 2px;
}

/* ===================================
    03. Navbar BIMA (varian elearning, task-315)
====================================== */
.bima-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.bima-brand img {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.bima-brand-text {
    /* Sejajar logo, satu baris (task-317) — sebelumnya kolom dua baris
       dengan <small> "Universitas Dian Nusantara" yang kini dihapus. */
    display: inline-block;
    line-height: 1.15;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.2px;
    /* Varian transparan (default Crafto: nav-link putih) — teks brand
       putih di atas hero gelap; state solid menimpa di bawah. */
    color: #ffffff;
}



/* Header solid (halaman dalam) & transparan saat scroll
   (header.sticky.sticky-active via main.js Crafto): teks gelap. */
header .header-light .bima-brand-text,
header.sticky.sticky-active .bima-brand-text {
    color: var(--bima-ink);
}


/* Mobile (<lg): responsive.css memaksa nav transparan jadi bg putih,
   jadi teks brand kembali gelap mengikuti nav-link. */
@media (max-width: 991.98px) {
    header nav .bima-brand-text {
        color: var(--bima-ink);
    }

}

/* Tombol aksi kanan navbar: login (outline adaptif) + CTA kuning
   (kontras teks ink di atas #F3BC45, aturan WCAG §a11y). */
.bima-nav-login {
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
    text-decoration: none;
}

header .header-light .bima-nav-login,
header.sticky.sticky-active .bima-nav-login {
    border-color: rgba(35, 38, 45, 0.25);
    color: var(--bima-ink);
}

.bima-nav-cta {
    background-color: var(--bima-accent);
    color: var(--bima-ink);
    text-decoration: none;
}

.bima-nav-cta:hover,
.bima-nav-cta:focus-visible {
    color: var(--bima-ink);
    opacity: 0.85;
}

/* ===================================
    04. Footer BIMA (varian elearning, task-315)
====================================== */
/* Gradient footer dinus: #114D91 -> #003366 (palet §6 analisis) —
   pengganti bg-gradient-aztec-green demo elearning. */
.bg-gradient-bima {
    background-color: var(--bima-primary);
    background-image: linear-gradient(to right bottom, var(--bima-primary), var(--bima-primary-dark));
}

/* Legacy task-296/314: footer lama tanpa class gradient tetap dinus. */
footer.footer-dark:not(.bg-gradient-bima),
footer.bg-extra-dark-slate-blue {
    background-color: var(--bima-primary-dark);
    background-image: linear-gradient(to right bottom, var(--bima-primary), var(--bima-primary-dark));
}

.bima-footer-logo img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    display: block;
}

/* Tombol submit newsletter-style-02 footer: ikon/teks putih tetap kontras
   di atas chip gelap (bg-dark-gray). */
footer .newsletter-style-02 .btn {
    color: #ffffff;
}

/* ===================================
    05. Konten utama
====================================== */
.bima-main-content {
    min-height: 55vh;
}

/* ===================================
    06. Token warna kategori (task-298)
====================================== */
/* Dipakai fallback kartu tanpa gambar + badge kategori. Nama token
   TERTUTUP (choices snippet ArticleCategory) — bukan warna mentah. */
.bima-cat-primary {
    --bima-cat-bg: var(--bima-primary);
    --bima-cat-bg-2: var(--bima-primary-dark);
}

.bima-cat-teal {
    --bima-cat-bg: #0f766e;
    --bima-cat-bg-2: #115e59;
}

.bima-cat-maroon {
    --bima-cat-bg: #7f1d1d;
    --bima-cat-bg-2: #641414;
}

.bima-cat-accent {
    --bima-cat-bg: #a16207;
    --bima-cat-bg-2: #854d0e;
}

.bima-cat-slate {
    --bima-cat-bg: #334155;
    --bima-cat-bg-2: #1e293b;
}

/* ===================================
    07. Kartu artikel (task-298)
====================================== */
.bima-article-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.bima-article-card:hover,
.bima-article-card:focus-within {
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
    transform: translateY(-3px);
}

.bima-card-media {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.bima-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Fallback blok warna per kategori — metadata cukup walau tanpa gambar. */
.bima-card-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: linear-gradient(135deg, var(--bima-cat-bg), var(--bima-cat-bg-2));
    padding: 18px;
}

.bima-card-fallback-cat {
    color: #ffffff;
    font-family: var(--alt-font);
    font-weight: 600;
    font-size: 22px;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 6px;
    padding: 8px 18px;
}

.bima-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    flex: 1;
}

.bima-card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 13px;
    color: var(--medium-gray, #717580);
}

.bima-card-badge {
    display: inline-block;
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--bima-cat-bg), var(--bima-cat-bg-2));
    border-radius: 4px;
    padding: 3px 10px;
}

.bima-card-title {
    font-size: 19px;
    line-height: 1.35;
    margin: 0;
}

.bima-card-title a {
    color: var(--bima-ink);
    text-decoration: none;
}

.bima-card-title a:hover,
.bima-card-title a:focus-visible {
    color: var(--bima-primary);
}

.bima-card-excerpt {
    margin: 0;
    font-size: 14.5px;
    color: var(--medium-gray, #717580);
}

/* ===================================
    08. Hero beranda (task-298)
====================================== */
.bima-hero {
    padding: 90px 0;
}

.bima-hero-eyebrow {
    color: var(--bima-primary);
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 13px;
    margin-bottom: 12px;
}

.bima-hero-title {
    font-weight: 700;
    font-size: 44px;
    line-height: 1.15;
    color: var(--bima-ink);
    margin-bottom: 18px;
}

.bima-hero-lead {
    font-size: 17px;
    max-width: 34rem;
    color: var(--medium-gray, #717580);
}

.bima-hero-panel {
    background: linear-gradient(135deg, var(--bima-primary), var(--bima-primary-dark));
    border-radius: 12px;
    color: #ffffff;
    text-align: center;
    padding: 44px 30px;
}

.bima-hero-stat-n {
    display: block;
    font-size: 64px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 12px;
}

.bima-hero-stat-label {
    margin: 0;
    opacity: 0.9;
}

/* Hero dua kolom (task-347): gambar referensi demo-elearning dibatasi
   tingginya supaya tidak menggeser kolom teks di layar pendek. */
.bima-hero-visual img {
    max-height: 560px;
    object-fit: contain;
}

/* Counter hero (task-357): angka counter sebelumnya <h5> — bukan heading
   semantik dan melompatkan outline h1 -> h5. Dijadikan <span> dengan
   tipografi persis aturan <h5> Crafto (2rem / 2.2rem / -0.5px) supaya
   visual dan animasi vertical-counter tidak berubah. */
.bima-hero-counter {
    font-size: 2rem;
    line-height: 2.2rem;
    letter-spacing: -0.5px;
}

@media (max-width: 767px) {
    .bima-hero {
        padding: 50px 0;
    }

    .bima-hero-title {
        font-size: 30px;
    }
}

/* ===================================
    09. Section, header halaman, artikel
====================================== */
.bima-section {
    padding: 70px 0;
}

.bima-section-muted {
    background: #f6f7f9;
}

.bima-section-title {
    font-size: 30px;
    font-weight: 700;
    color: var(--bima-ink);
    margin: 0;
}

.bima-section-link {
    color: var(--bima-primary);
    font-weight: 600;
    text-decoration: none;
}

.bima-page-title {
    font-size: 34px;
    font-weight: 700;
    margin: 8px 0 0;
}

.bima-breadcrumb {
    font-size: 13.5px;
    opacity: 0.85;
}

.bima-breadcrumb a {
    color: #ffffff;
    text-decoration: none;
}

.bima-breadcrumb a:hover,
.bima-breadcrumb a:focus-visible {
    text-decoration: underline;
}

.bima-breadcrumb span[aria-hidden="true"] {
    margin: 0 8px;
}

.bima-article {
    padding-bottom: 70px;
}

.bima-article-excerpt {
    margin: 14px 0 0;
    max-width: 40rem;
    font-size: 17px;
    opacity: 0.92;
}

.bima-article-hero {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin-top: -34px;
    margin-bottom: 30px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}

.bima-article-body {
    font-size: 16.5px;
    line-height: 1.8;
    color: var(--bima-ink);
}

.bima-article-body img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 767px) {
    .bima-article-hero {
        margin-top: -20px;
    }

    .bima-page-title {
        font-size: 26px;
    }

    .bima-section {
        padding: 44px 0;
    }
}

/* ===================================
    10. Kartu jelajah, chip filter, empty state
====================================== */
.bima-quick-card {
    color: #ffffff;
    border-radius: 10px;
    padding: 28px;
    height: 100%;
    background: linear-gradient(135deg, var(--bima-cat-bg), var(--bima-cat-bg-2));
}

.bima-quick-card h3 {
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 10px;
}

.bima-quick-card p {
    opacity: 0.92;
    margin-bottom: 16px;
}

.bima-quick-link {
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid rgba(255, 255, 255, 0.6);
}

.bima-empty-state {
    border: 1px dashed rgba(0, 0, 0, 0.18);
    border-radius: 10px;
    padding: 44px 24px;
    text-align: center;
    color: var(--medium-gray, #717580);
}

/* Pagination publik: samakan radius bootstrap dengan tema. */
.bima-pagination .page-link {
    border-radius: 6px;
    margin: 0 3px;
    color: var(--bima-primary);
}

.bima-pagination .page-item.active .page-link {
    background: var(--bima-primary);
    border-color: var(--bima-primary);
    color: #ffffff;
}

/* ===================================
    11. Direktori + one-page fact Ormawa (task-300)
====================================== */
.bima-ormawa-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.bima-ormawa-card:hover,
.bima-ormawa-card:focus-within {
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
    transform: translateY(-3px);
}

/* Media kartu: logo di tengah (bukan crop cover seperti foto artikel). */
.bima-ormawa-media {
    aspect-ratio: 16 / 9;
    background: #f6f7f9;
}

.bima-ormawa-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 18px;
    display: block;
}

.bima-ormawa-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: linear-gradient(135deg, var(--bima-cat-bg), var(--bima-cat-bg-2));
    padding: 18px;
}

.bima-ormawa-fallback-singkatan {
    color: #ffffff;
    font-family: var(--alt-font);
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 6px;
    padding: 8px 18px;
    overflow-wrap: anywhere;
}

/* Header detail: logo bulat di atas blok biru. */
.bima-ormawa-header {
    padding-bottom: 76px;
}

.bima-ormawa-logo {
    width: 88px;
    height: 88px;
    border-radius: 14px;
    background: #ffffff;
    object-fit: contain;
    padding: 8px;
    flex-shrink: 0;
}

.bima-ormawa-subtitle {
    color: #ffffff;
    opacity: 0.9;
    font-size: 15px;
}

.bima-ormawa-detail {
    padding-top: 0;
}

.bima-ormawa-panel {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 30px;
    margin-top: -46px;
}

.bima-ormawa-side {
    background: #f6f7f9;
    border-radius: 12px;
    padding: 26px 30px;
    margin-top: 30px;
}

.bima-ormawa-side-title {
    font-size: 20px;
    margin-bottom: 14px;
}

.bima-ormawa-deflist {
    margin: 0;
}

.bima-ormawa-defrow {
    display: flex;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.bima-ormawa-defrow:last-child {
    border-bottom: 0;
}

.bima-ormawa-defrow dt {
    flex: 0 0 110px;
    font-weight: 600;
    color: var(--bima-ink);
    font-size: 14px;
}

.bima-ormawa-defrow dd {
    margin: 0;
    font-size: 14.5px;
    color: var(--medium-gray, #717580);
    overflow-wrap: anywhere;
}

.bima-ormawa-defrow dd a {
    color: var(--bima-primary);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.bima-ormawa-defrow dd a:hover,
.bima-ormawa-defrow dd a:focus-visible {
    text-decoration: underline;
}

.bima-ormawa-plaintext {
    color: var(--bima-ink);
}

.bima-ormawa-muted {
    color: var(--medium-gray, #717580);
    font-style: italic;
}

.bima-ormawa-fact {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-left: 4px solid var(--bima-primary);
    border-radius: 8px;
    padding: 32px 36px;
    height: 100%;
    background: #ffffff;
}

.bima-ormawa-fact-visi {
    border-left-color: var(--bima-primary);
}

.bima-ormawa-fact-misi {
    border-left-color: #0f766e;
}

/* Judul visi/misi: beranda memakai h2, detail Ormawa h3 (task-351
   menyeragamkan keduanya — dulu rule hanya menyasar h3). */
.bima-ormawa-fact h2,
.bima-ormawa-fact h3 {
    font-size: 18px;
    color: var(--bima-primary);
    margin-bottom: 8px;
}

.bima-ormawa-fact .bima-article-body {
    line-height: 1.7;
}

/* Daftar misi: indent standar supaya penanda bernomor tidak menempel
   (apalagi terpotong) border kiri kartu. */
.bima-ormawa-fact-misi ol,
.bima-ormawa-fact-misi ul {
    padding-left: 1.25rem;
    margin-bottom: 0;
}

/* Kartu kontak resmi (task-351) — dipakai kolom kanan FAQ beranda,
   reusable oleh halaman lain (task-352 /tentang/). */
.bima-kontak-card {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-left: 4px solid var(--bima-primary);
    border-radius: 8px;
    background: #ffffff;
    padding: 32px 36px;
    text-align: start;
}

.bima-kontak-card-title {
    font-size: 18px;
    color: var(--bima-primary);
    margin-bottom: 18px;
}

.bima-kontak-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--bima-ink);
    margin-bottom: 14px;
}

.bima-kontak-item:last-child {
    margin-bottom: 0;
}

a.bima-kontak-item {
    text-decoration: none;
}

a.bima-kontak-item:hover,
a.bima-kontak-item:focus-visible {
    color: var(--bima-primary);
    text-decoration: underline;
}

.bima-kontak-item > i {
    color: var(--bima-primary);
    flex-shrink: 0;
    margin-top: 5px;
}

@media (max-width: 767px) {
    .bima-ormawa-panel {
        padding: 22px 18px;
        margin-top: -36px;
    }

    .bima-ormawa-side {
        padding: 22px 18px;
    }

    .bima-ormawa-fact,
    .bima-kontak-card {
        padding: 24px 22px;
    }

    .bima-ormawa-header {
        padding-bottom: 64px;
    }

    .bima-ormawa-logo {
        width: 64px;
        height: 64px;
    }

    .bima-ormawa-defrow dt {
        flex-basis: 96px;
    }
}

/* ===================================
    12. Page title halaman dalam (task-317)
====================================== */
/* Pola "page title" demo-elearning menggantikan .bima-page-header lama.
   `page-title-big-typography` dipakai markup demo tapi TIDAK ada di
   stylesheet Crafto yang ter-ship (diverifikasi: 0 hit di style.css,
   responsive.css, elearning.css) — jadi didefinisikan di sini.
   Offset terhadap navbar `position: fixed` datang dari class Crafto
   `ipad-top-space-margin` pada section-nya, bukan dari padding di sini. */
.page-title-big-typography {
    padding-top: 160px;
    padding-bottom: 90px;
}

.page-title-big-typography h1 {
    font-size: 44px;
    line-height: 1.15;
    font-weight: 600;
    margin-bottom: 15px;
}

.page-title-big-typography h2 {
    font-size: 26px;
    line-height: 1.3;
}

.page-title-big-typography .bima-breadcrumb {
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 12px;
}

.page-title-big-typography .bima-breadcrumb a {
    color: rgba(255, 255, 255, 0.85);
}

.page-title-big-typography .bima-breadcrumb a:hover {
    color: #ffffff;
}

.page-title-big-typography .bima-breadcrumb span[aria-hidden="true"] {
    margin: 0 6px;
}

@media (max-width: 991.98px) {
    .page-title-big-typography {
        padding-top: 130px;
        padding-bottom: 60px;
    }

    .page-title-big-typography h1 {
        font-size: 32px;
    }

    .page-title-big-typography h2 {
        font-size: 20px;
    }
}

/* ===================================
    13. Foto orang: sambutan + koordinator (task-317)
====================================== */
.bima-person-photo {
    width: 160px;
    height: 160px;
    object-fit: cover;
    display: inline-block;
}

/* Placeholder sambutan tanpa foto — biru institusi, sejalan dengan
   placeholder koordinator (images/koordinator-placeholder.svg). */
.bima-person-placeholder {
    background: linear-gradient(135deg, var(--bima-primary), var(--bima-primary-dark));
}

/* Kartu kegiatan: pas foto Simpeg rasio potret, dipangkas seragam
   supaya grid tetap rata walau sumber ukurannya bervariasi. Selector
   generik `.bima-section .blog-image img` sengaja TIDAK dipakai lagi
   (task-347) supaya kartu kegiatan/artikel (16:9) tidak ikut persegi;
   kartu tersebut kini memakai `.bima-card-cover` di bawah. */
.bima-koordinator-photo {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* Cover kartu kegiatan/artikel (16:9) — pengganti selector generik
   `.bima-section .blog-image img` yang dihapus di task-347. Rasio
   mengikuti atribut width/height markup (800x450), bukan dipaksa. */
.bima-card-cover {
    width: 100%;
    height: auto;
    display: block;
}

/* `overlap-gap-section` dipakai markup demo-elearning tapi TIDAK ada di
   stylesheet Crafto yang ter-ship (0 hit di style.css/responsive.css/
   elearning.css) — Crafto menghitung overlap-nya lewat main.js. Beri
   jarak bawah eksplisit supaya band CTA pre-footer (includes/footer.html,
   .overlap-section) tidak menempel ke konten section terakhir. */
.overlap-gap-section {
    padding-bottom: 100px;
}

/* (task-347) Band CTA .overlap-section menimpa konten terakhir di SEMUA
   halaman publik, bukan hanya section yang memakai .overlap-gap-section.
   Jarak bawah dipasang global di <main class="bima-main">. */
.bima-main {
    padding-bottom: 100px;
}

@media (max-width: 991.98px) {
    .overlap-gap-section {
        padding-bottom: 60px;
    }

    .bima-main {
        padding-bottom: 60px;
    }
}

/* ===================================
    14. Kartu kegiatan beranda (Fase C4, task-326)
====================================== */
/* Fallback cover kartu kegiatan tanpa gambar — gradien institusi.
   Beda dengan .bima-card-fallback (kartu artikel): ini dipakai di luar
   grid .blog-masonry sehingga perlu aspect-ratio eksplisit, sama seperti
   .bima-card-media (16/9). */
.bima-kegiatan-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, var(--bima-cat-bg), var(--bima-cat-bg-2));
    color: #ffffff;
}

.bima-kegiatan-fallback .bi {
    font-size: 42px;
    opacity: 0.9;
}