/*
 * Override CSS khusus proyek STIKES Arjuna.
 * Ditumpuk SETELAH style.css (tema) supaya bisa mengalahkan aturan bawaan
 * tanpa mengubah file tema/vendor secara langsung.
 */

/* --------------------------------------------------------------------
 * Navbar utama — 7 item menu (Beranda, Profil, Program Studi, PMB,
 * Kampus, Akademik & Riset, Informasi) lebih banyak dari desain tema
 * aslinya, sehingga item terakhir ("Informasi") bisa turun ke baris
 * kedua di layar desktop yang lebih sempit. Kolom navbar sudah
 * dilebarkan lewat grid (lihat header.blade.php: 2/8/2), di sini kita
 * perkecil jarak & ukuran font sedikit sebagai jaring pengaman
 * tambahan, dan cegah item membungkus baris baru.
 *
 * PENTING: JANGAN pakai overflow-x/overflow-y pada nav#mobile-menu —
 * submenu dropdown adalah child berposisi absolute, dan overflow
 * hidden pada parent akan memotong/menyembunyikan dropdown-nya.
 *
 * PENTING JUGA: selector di bawah HARUS ">" langsung ke ul menu utama
 * (nav#mobile-menu > ul), BUKAN ".main-menu ul" biasa — submenu
 * dropdown juga berupa elemen <ul class="submenu"> yang bersarang di
 * dalam <li>. Selector tanpa ">" ikut mengubah <ul class="submenu">
 * jadi flex-row, sehingga item child dropdown tersusun ke samping
 * alih-alih ke bawah.
 * -------------------------------------------------------------------- */
@media (min-width: 992px) {
    .main-menu nav#mobile-menu > ul {
        display: inline-flex;
        flex-wrap: nowrap;
        white-space: nowrap;
    }
}

@media (min-width: 992px) and (max-width: 1799px) {
    .main-menu ul li {
        margin-right: 16px;
    }
    .main-menu ul li a {
        font-size: 14px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .main-menu ul li {
        margin-right: 10px;
    }
    .main-menu ul li a {
        font-size: 13px;
    }
}

/* --------------------------------------------------------------------
 * Teks child menu (dropdown) keluar dari kotak untuk label panjang
 * (mis. "LPPM (Penelitian & Pengabdian)", "Struktur Organisasi &
 * Yayasan"). Sebabnya: `white-space: nowrap` di atas dipasang pada ul
 * menu utama, tapi `white-space` adalah properti yang DIWARISI —
 * turun ke semua elemen anak termasuk teks di dalam dropdown, walau
 * selector flex-nya sudah dibatasi dengan ">" tadi. Reset di sini
 * supaya submenu boleh membungkus teks ke baris baru seperti biasa,
 * dan lebarkan sedikit kotaknya untuk label panjang.
 * -------------------------------------------------------------------- */
@media (min-width: 992px) {
    .main-menu ul li .submenu {
        width: 260px;
    }
    .main-menu ul li .submenu,
    .main-menu ul li .submenu li,
    .main-menu ul li .submenu li > a {
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    .main-menu ul li .submenu li > a {
        line-height: 1.4;
        padding-top: 6px;
        padding-bottom: 6px;
    }
}

/* --------------------------------------------------------------------
 * Badge "Prospek Karier" di halaman detail program studi
 * (resources/views/pages/study-programs/show.blade.php).
 * Tema mendefinisikan .badge-light dengan warna teks putih (dipakai
 * di atas background gelap di bagian lain tema), sehingga di atas
 * background putih kartu di sini teksnya jadi tidak terbaca (putih
 * di atas putih). Style khusus ini menimpanya dengan kontras yang
 * jelas tanpa mengubah file tema.
 * -------------------------------------------------------------------- */
.prospek-karier-badge {
    display: inline-block;
    color: #1F4FD8;
    background: rgba(63, 1, 128, 0.08);
    border: 1px solid rgba(63, 1, 128, 0.18);
}

/* --------------------------------------------------------------------
 * Footer — kolom "Jelajahi" berisi 10 tautan (lihat MenuSeeder::FOOTER_SLUG),
 * jauh lebih banyak dari kolom "Links" (3 tautan eksternal) di sebelahnya,
 * sehingga terasa timpang. Diberi ikon panah kecil + jarak antar-baris yang
 * lebih rapi, dan lebar kolom disesuaikan (lihat footer.blade.php: 5/4/3)
 * supaya label panjang seperti "Pengaduan & PPKPT" tidak gampang membungkus.
 * -------------------------------------------------------------------- */
.footer__widget--links .footer__widget-content ul li {
    margin-bottom: 10px;
}
.footer__widget--links .footer__widget-content ul li a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color .15s ease, gap .15s ease;
}
.footer__widget--links .footer__widget-content ul li a i {
    font-size: 11px;
    color: var(--tp-theme-1);
    flex-shrink: 0;
}
.footer__widget--links .footer__widget-content ul li a:hover {
    gap: 11px;
}

/* --------------------------------------------------------------------
 * Ikon pencarian di header — sebelumnya dibungkus class tema
 * ".header__search-btn", yang di tema aslinya didesain sebagai tombol
 * SUBMIT beroposisi absolute DI DALAM kotak input (butuh induk
 * ".header__search-input { position: relative }"). Markup kita cuma
 * ikon <a> polos tanpa kotak input itu, jadi "position:absolute;
 * top:46%; right:15px" dari tema tetap berlaku tapi mencari induk
 * berposisi (positioned) ke atas DOM:
 *   - Saat halaman belum di-scroll, header masih position:static →
 *     tidak ada induk berposisi sama sekali → browser memakai initial
 *     containing block (halaman penuh), sehingga "top:46%" menghitung
 *     dari TINGGI SELURUH HALAMAN — ikon melayang di tengah body.
 *   - Saat discroll, JS menambah kelas sticky yang membuat header
 *     position:fixed → header itu sendiri jadi induk berposisi →
 *     ikon "menempel" di header (tampak benar, tapi kebetulan saja).
 * Diganti class sendiri yang statis & sederhana — selalu di header,
 * sesuai posisi asli di DOM, tanpa position:absolute sama sekali.
 * -------------------------------------------------------------------- */
.header-search-link a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 17px;
    color: var(--tp-common-black-2, #031220);
    background: transparent;
    transition: background .15s ease, color .15s ease;
}
.header-search-link a:hover,
.header-search-link a:focus {
    background: rgba(63, 1, 128, .1);
    color: var(--tp-theme-1, #3f0180);
}

/* --------------------------------------------------------------------
 * Menu mobile (offcanvas) — lihat navbar.blade.php & catatan di main.js.
 * ".mobile-menu" (nama lama) sekaligus jadi target container meanmenu.js
 * DAN wadah nav hasil tulisan tangan Blade, sehingga di layar <991px
 * offcanvas menampilkan dua navigasi bertumpuk. Sekarang cuma satu
 * struktur (".mm-menu") dengan accordion sendiri — submenu disembunyikan
 * secara default & dibuka lewat tombol panah, supaya menu dengan banyak
 * anak (Profil, Program Studi, dst — 6 item masing-masing) tidak membuat
 * panel offcanvas jadi sangat panjang saat semua langsung terbuka.
 * -------------------------------------------------------------------- */
.mm-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mm-menu__item {
    border-bottom: 1px solid #EEF0F4;
}
.mm-menu__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.mm-menu__link {
    flex: 1 1 auto;
    display: block;
    padding: 13px 2px;
    font-size: 15px;
    font-weight: 500;
    color: var(--tp-common-black-2, #031220);
    text-decoration: none;
}
.mm-menu__link:hover {
    color: var(--tp-theme-1, #3f0180);
}
.mm-menu__toggle {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: var(--tp-text-5, #4A545C);
    font-size: 13px;
    cursor: pointer;
}
.mm-menu__toggle i {
    transition: transform .2s ease;
}
.mm-menu__item.is-open .mm-menu__toggle i {
    transform: rotate(180deg);
}
.mm-menu__item.is-open .mm-menu__toggle {
    color: var(--tp-theme-1, #3f0180);
}
.mm-menu__submenu {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0 0 10px 14px;
}
.mm-menu__item.is-open .mm-menu__submenu {
    display: block;
}
.mm-menu__submenu li a {
    display: block;
    padding: 9px 4px 9px 14px;
    font-size: 13.5px;
    color: var(--tp-text-5, #4A545C);
    text-decoration: none;
    border-left: 2px solid #EEF0F4;
}
.mm-menu__submenu li a:hover {
    color: var(--tp-theme-1, #3f0180);
    border-left-color: var(--tp-theme-1, #3f0180);
}

/* --------------------------------------------------------------------
 * Footer — background gradasi ungu terang (atas ke bawah), menyatu satu
 * brand dengan warna tombol/link. .footer__top dan .footer__bottom
 * masing-masing pakai .grey-bg-4 (abu-abu flat) sebagai section terpisah
 * — supaya gradasinya menyambung tanpa sambungan/patahan warna di antara
 * keduanya, gradient dipasang pada pembungkus ".footer__area" dan kedua
 * section di dalamnya dibuat transparan.
 * -------------------------------------------------------------------- */
.footer__area {
    background: linear-gradient(180deg, #FBFAFD 0%, #F1EAFB 100%);
}
.footer__top.grey-bg-4,
.footer__bottom.grey-bg-4 {
    background: transparent;
}

/* --------------------------------------------------------------------
 * Header — sama seperti footer, background ungu brand di posisi ATAS
 * halaman (belum discroll). main.js menghapus/menambah class
 * "header__sticky" pada #header-sticky lewat scroll listener: BELUM ada
 * class itu = di atas (background ungu di sini), SUDAH ada class itu =
 * sticky/discroll (tema sudah kasih background putih sendiri, jangan
 * disentuh supaya kontras solid saat menimpa konten halaman).
 *
 * Konten header (logo, menu, tombol, ikon) aslinya didesain gelap-di-atas-
 * putih — di atas ungu semua itu disamakan jadi terang/putih di sini
 * supaya tetap terbaca, lalu otomatis balik gelap begitu class
 * "header__sticky" muncul (karena override di bawah discope ke
 * ":not(.header__sticky)" saja, bukan permanen).
 *
 * -------------------------------------------------------------------- */
#header-sticky:not(.header__sticky) {
    background: linear-gradient(180deg, #3f0180 0%, #2c015c 100%);
}
/* Logo tetap warna aslinya — dikasih kartu putih di belakangnya (bukan
   di-invert jadi putih polos) supaya lambang & tulisannya tetap terbaca
   persis seperti versi normal, hanya beda latar. */
#header-sticky:not(.header__sticky) .logo {
    display: inline-block;
    background: #fff;
    border-radius: 10px;
    padding: 6px 12px;
}
#header-sticky:not(.header__sticky) .main-menu ul li a {
    color: #fff;
}
/* Selector di atas ("ul li a") ikut kena ke link DI DALAM dropdown
   submenu juga — karena kombinator turunan tidak peduli kedalaman, dan
   selector ini menang lewat ID (#header-sticky) melawan aturan asli
   tema (.main-menu ul li .submenu li > a, tanpa ID). Submenu sendiri
   selalu berlatar putih (background:var(--tp-common-white), tidak
   berubah oleh scroll) dan tulisannya memang sudah ungu dari sono
   (--tp-text-0: #3f0180) — jadi paksa balik ke situ, jangan ikut putih. */
#header-sticky:not(.header__sticky) .main-menu ul li .submenu a {
    color: var(--tp-text-0, #3f0180);
}
#header-sticky:not(.header__sticky) .main-menu ul li.has-dropdown > a::after {
    color: #fff;
}
#header-sticky:not(.header__sticky) .header-search-link a {
    color: #fff;
}
#header-sticky:not(.header__sticky) .header-search-link a:hover,
#header-sticky:not(.header__sticky) .header-search-link a:focus {
    background: rgba(255, 255, 255, .15);
    color: #fff;
}
#header-sticky:not(.header__sticky) .hamurger-btn span {
    background-color: #fff;
}
/* Tombol "Daftar" (solid) & WhatsApp (outline) di header dasarnya
   sama-sama ungu — kalau dibiarkan, keduanya "menghilang" di atas
   header yang juga ungu. Jadi ghost/putih dulu selagi di atas,
   baru solid ungu lagi begitu header sticky (putih). */
#header-sticky:not(.header__sticky) .header__btn .tp-btn {
    background-color: transparent;
    background-image: none;
    border: 2px solid #fff;
    color: #fff;
}
#header-sticky:not(.header__sticky) .header__btn .tp-btn:hover,
#header-sticky:not(.header__sticky) .header__btn .tp-btn:focus {
    background-color: #fff;
    background-image: none;
    color: #3f0180;
}
#header-sticky:not(.header__sticky) .header__btn .tp-btn-border {
    border-color: #fff;
    color: #fff;
}
#header-sticky:not(.header__sticky) .header__btn .tp-btn-border:hover,
#header-sticky:not(.header__sticky) .header__btn .tp-btn-border:focus {
    background-image: none;
    background-color: #fff;
    color: #3f0180;
    border-color: #fff;
}