/* ============================================
   WAPCOS Brand Logo System
   Based on WAPCOS MFA Design Guide
   ============================================ */

/* Brand Container */
.brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* Mobile: Compact Branding (Logo + Title, No Subtitle) */
@media (max-width: 575.98px) {
    .brand-sub {
        display: none !important;
    }

    .brand-title {
        font-size: 1rem !important;
        /* Proper visibility on mobile */
    }

    .brand-mark-img {
        max-height: 30px !important;
        /* Proper visibility on mobile */
        transform: translateY(0px) !important;
    }

    /* Reduce gap on mobile */
    .brand {
        gap: 0.5rem;
    }
}

/* Logo Mark */
.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.brand-mark.brand-image {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
}

.brand-mark-img {
    display: block;
    max-height: 45px;
    width: auto;
    height: auto;
    transform: translateY(-4px);
}

/* Embossed Vertical Separator */
.brand-sep {
    width: 1.5px !important;
    height: 45px !important;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3)) !important;
    margin: 0 !important;
    border-radius: 2px !important;
    opacity: 0.85 !important;
}

/* Dark mode enhancement for separator */
[data-bs-theme="dark"] .brand-sep {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1)) !important;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    opacity: 0.98 !important;
}

/* Brand Title - Embossed Effect */
.brand-title {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', 'Source Sans Pro', Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.15rem !important;
    color: var(--bs-gray-900, #212529) !important;
    margin: 0 !important;
    letter-spacing: 0.02em !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6), 0 -1px 0 rgba(0, 0, 0, 0.06) !important;
    line-height: 1.1 !important;
}

@media (min-width: 768px) {
    .brand-title {
        font-size: 1.2rem !important;
    }
}

/* Brand Subtitle - Embossed Effect (Visible on Desktop) */
.brand-sub {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important;
    font-weight: 500 !important;
    color: var(--bs-gray-600, #6c757d) !important;
    margin: 0 !important;
    letter-spacing: 0.02em !important;
    text-shadow: 0 0.5px 0 rgba(255, 255, 255, 0.5), 0 -0.5px 0 rgba(0, 0, 0, 0.03) !important;
    font-size: 0.75rem !important;
    display: block;
    /* Ensure visible */
}

/* Dark mode text colors */
[data-bs-theme="dark"] .brand-title {
    color: var(--bs-body-color, #f0f6fc) !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 -1px 0 rgba(255, 255, 255, 0.04) !important;
}

[data-bs-theme="dark"] .brand-sub {
    color: var(--bs-secondary-color, #9ba7b5) !important;
    text-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.3), 0 -0.5px 0 rgba(255, 255, 255, 0.02) !important;
}