/*
|--------------------------------------------------------------------------
| Final Header & Logo Fix
|--------------------------------------------------------------------------
| Tujuan:
| 1. Header mengikuti warna dari Setting Website > Header Color.
| 2. Logo PNG transparan tidak punya background/kotak.
| 3. Tulisan header tetap kontras dan terbaca.
| 4. Logo footer juga bersih tanpa background.
*/

.site-header {
    background: var(--primary-dark) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .14) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08) !important;
}

.brand,
.brand strong,
.brand-text strong,
.nav-menu a {
    color: #ffffff !important;
}

.brand small,
.brand-text small {
    color: rgba(255, 255, 255, .78) !important;
}

/* Logo header PNG transparan: tanpa background, tanpa padding, tanpa radius */
.brand img,
.brand-logo {
    width: 56px !important;
    height: 56px !important;
    object-fit: contain !important;
    background: transparent !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Fallback kalau logo belum diupload */
.brand-mark {
    width: 50px !important;
    height: 50px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, .12) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
}

.nav-menu a:hover {
    background: rgba(255, 255, 255, .12) !important;
    color: #ffffff !important;
}

.nav-menu .nav-cta {
    background: var(--secondary) !important;
    color: #1b1b1b !important;
}

.nav-toggle {
    color: #ffffff !important;
}

/* Logo footer PNG transparan: tanpa background */
.footer-brand {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
}

.footer-brand img,
.footer-logo {
    width: 64px !important;
    height: 64px !important;
    object-fit: contain !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.footer-brand h3 {
    margin: 0 0 8px !important;
}

.footer-brand p {
    margin: 0 !important;
}

@media (max-width: 900px) {
    .nav-menu {
        background: var(--primary-dark) !important;
        border-color: rgba(255, 255, 255, .16) !important;
    }

    .nav-menu a {
        color: #ffffff !important;
    }

    .nav-menu a:hover {
        background: rgba(255, 255, 255, .12) !important;
    }

    .brand img,
    .brand-logo {
        width: 50px !important;
        height: 50px !important;
    }

    .footer-brand {
        align-items: center !important;
    }
}