/*
 * public/css/style.css
 * Perubahan untuk memisahkan gaya latar belakang menu bar dari logo
 */

/* 1. Atur gaya untuk container navbar keseluruhan */
.navbar-custom {
    /* Atur background-color menjadi transparan atau warna yang diinginkan untuk keseluruhan navbar,
       termasuk area logo. */
    background-color: #ffffff; /* Contoh: Latar belakang putih untuk area logo */
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1030;
    padding-bottom: 0;
    display: block;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 2. Gaya untuk Wrapper Logo */
.navbar-brand-wrapper {
    background-color: transparent; /* Pastikan area logo tidak memiliki warna latar belakang */
    width: 100%;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 5px;
}

/* 3. Gaya untuk Menu Bar (Bagian yang berisi link navigasi) */
.navbar-nav-bottom {
    /* Ini adalah elemen yang membungkus menu bar (Beranda, Tentang Kami, dll.) */
    width: 100%;
    display: flex;
    justify-content: center;
    padding-bottom: 30px;
    background-color: #ffffff; /* WARNA LATAR BELAKANG MENU BAR */
    /* Anda dapat mengganti nilai hex #212529 dengan warna lain,
       misalnya biru (`#007bff`), merah, atau warna apa pun yang Anda inginkan. */
}

/* 4. Gaya untuk Teks di dalam Menu Bar */
.navbar-nav .nav-link {
    color: #ffffff; /* Warna teks link navigasi, diatur putih agar kontras dengan latar belakang gelap */
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* 5. Gaya untuk Hover dan Active pada Menu Bar */
.navbar-nav .nav-link:hover {
    background-color: #0968b8; /* Latar belakang biru saat hover */
    color: #ffffff;
}

.navbar-nav .nav-link.active {
    background-color: #0968b8; /* Latar belakang biru yang sedikit lebih gelap saat aktif */
    color: #ffffff;
}

/* Media Query untuk Mobile */
@media (max-width: 991.98px) {
    /* Pastikan latar belakang navbar keseluruhan tetap transparan/putih di mobile */
    .navbar-custom {
        background-color: #ffffff;
    }

    /* Terapkan warna latar belakang menu bar saat menu dibuka di mobile */
    .navbar-collapse {
        background-color: #212529; /* WARNA LATAR BELAKANG MENU BAR DI MOBILE */
    }

    .navbar-nav-bottom {
        background-color: transparent; /* Hapus latar belakang dari .navbar-nav-bottom di mobile */
        padding-top: 10px;
    }
}


/* ==================================== */
/* 4. Gaya Footer */
/* ==================================== */
footer {
    background-color: #0968b8; /* Latar belakang footer, berbeda dari header */
    color: #f8f9fa; /* Warna teks footer terang */
    padding: 20px 0; /* Padding atas dan bawah */
    text-align: center; /* Pusatkan teks */
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1); /* Bayangan di atas footer */
}

footer p {
    margin-bottom: 0; /* Hapus margin bawah default untuk paragraf terakhir */
}

/* Gaya untuk link di footer jika ada */
footer a {
    color: #007bff; /* Contoh warna link di footer (biru Bootstrap) */
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}