/* ==========================================
   GLOBAL STYLES APLIKASI CLIMBOARD
   ========================================== */

/* --- 1. BASE & LAYOUT --- */
body { 
    font-family: 'Roboto', sans-serif; 
    background-color: #f8f9fa; 
}

main { 
    padding-top: 80px; 
}

html {
    scroll-behavior: smooth;
}

section {
    scroll-margin-top: 20px; 
}

/* --- 2. NAVBAR UTAMA --- */
.navbar-brand img { 
    height: 50px; 
    width: auto; 
}

.navbar-brand-text { 
    line-height: 1.2; 
    font-size: 0.9rem; 
    font-weight: 700; 
    color: #333; 
}

/* Ditambahkan awalan .navbar agar tidak merusak tab menu di bawahnya */
.navbar .nav-link { 
    font-size: 0.9rem; 
    font-weight: 500; 
    text-transform: uppercase; 
    color: #555 !important; 
}

.navbar .nav-link:hover { 
    color: #059669 !important; /* Diubah dari biru (#0d6efd) menjadi Hijau Emerald */
}

.dropdown-item { 
    font-size: 0.9rem; 
}

/* --- 3. TAB MENU (TEMA HIJAU EMERALD UNTUK HERO & ANDAS) --- */
.nav-pills .nav-link,
.left-tab-menu .nav-link {
    color: #64748b !important;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    text-transform: none; 
}

.left-tab-menu .nav-link {
    padding: 10px 15px; 
    border-radius: 8px; 
    margin-bottom: 5px; 
    text-align: left; 
}

.nav-pills .nav-link:hover,
.left-tab-menu .nav-link:hover {
    background-color: #ecfdf5 !important; 
    color: #059669 !important; 
    border-color: #d1fae5;
}

.nav-pills .nav-link.active,
.left-tab-menu .nav-link.active {
    background-color: #059669 !important; 
    color: #ffffff !important; 
    font-weight: bold;
    box-shadow: 0 4px 6px -1px rgba(5, 150, 105, 0.2);
}

.nav-pills .nav-link:hover i,
.left-tab-menu .nav-link:hover i {
    color: #059669 !important;
}

.nav-pills .nav-link.active i,
.left-tab-menu .nav-link.active i {
    color: #ffffff !important;
}

/* --- 4. LEAFLET MAP FIXES --- */
/* Digabungkan menjadi 1 block agar tidak berulang */
.leaflet-container img.leaflet-image-layer,
.leaflet-container img.leaflet-tile {
    max-width: none !important; /* Mencegah Bootstrap merusak tiles peta */
}

#hero-map {
    width: 100%;
    height: 100%;       /* Pastikan mewarisi tinggi parent */
    min-height: 550px;  /* Paksa tinggi minimal */
    z-index: 1;
}

/* --- 5. ANIMASI HOVER --- */
.hover-animate {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.hover-animate:hover {
    transform: translateY(-8px); 
    box-shadow: 0 1rem 3rem rgba(0,0,0,0.15) !important; 
}


/* --- 6. MENCEGAH LAYAR MELOMPAT SAAT TAB DIKLIK --- */
.row, .tab-content, #view-tabs {
    overflow-anchor: none;
}


/* --- 7. TYPOGRAPHY: JUDUL & NARASI GLOBAL --- */

/* Judul (Title) - Tegas, Modern, dan Elegan */
.text-dark,
.title-global {
    color: #1e293b !important; /* Slate 800: Abu-abu sangat pekat (lebih premium dari hitam pekat) */
    letter-spacing: -0.02em !important; /* Sedikit dirapatkan agar gaya tipografinya terlihat modern */
}

/* Narasi (Paragraf) - Lembut, Clean, dan Nyaman Dibaca */
.text-secondary,
.narasi-global {
    color: #475569 !important; /* Slate 600: Abu-abu kalem untuk mengurangi kelelahan mata pembaca */
    line-height: 1.75 !important; /* Jarak antar baris diperlebar agar teks panjang terlihat rapi/clean */
    font-size: 0.95rem; /* Ukuran teks standar yang nyaman di HP maupun Laptop */
}

/* Khusus untuk teks narasi yang berada di dalam Card agar spasi paragrafnya rapi */
.card-body .text-secondary {
    margin-bottom: 0.5rem;
}