/**
 * custom.css
 * Small site-wide utilities not covered by theme.min.css.
 * Load AFTER theme.min.css, brand-overrides.css and accessibility-overrides.css.
 */

/* ---------- Shared card hover ---------- */
.hover-lift {
    transition: transform .3s ease, box-shadow .3s ease;
}
.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175) !important;
}

/* ---------- Soft background tints ---------- */
.bg-soft { background-color: rgba(var(--bs-primary-rgb), .1); }
.bg-primary.bg-soft   { background-color: rgba(var(--bs-primary-rgb), .1)   !important; }
.bg-success.bg-soft   { background-color: rgba(var(--bs-success-rgb), .1)   !important; }
.bg-info.bg-soft      { background-color: rgba(var(--bs-info-rgb), .1)      !important; }
.bg-warning.bg-soft   { background-color: rgba(var(--bs-warning-rgb), .1)   !important; }
.bg-danger.bg-soft    { background-color: rgba(var(--bs-danger-rgb), .1)    !important; }
.bg-secondary.bg-soft { background-color: rgba(var(--bs-secondary-rgb), .1) !important; }

.icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ---------- KBLI detail hero ---------- */
.kbli-detail-page {
    background-size: cover;
    background-position: center;
    min-height: 72vh;
}
.kbli-hero-overlay {
    background: linear-gradient(115deg, rgba(15, 23, 42, .93) 0%, rgba(15, 23, 42, .75) 48%, rgba(30, 58, 95, .55) 100%);
}
.kbli-detail-page .breadcrumb {
    background-color: rgba(255, 255, 255, .12);
}
.kbli-detail-page .breadcrumb-item a {
    color: rgba(255, 255, 255, .9);
    text-decoration: none;
}
.kbli-detail-page .breadcrumb-item a:hover {
    color: #fff;
    text-decoration: underline;
}
.kbli-detail-page .breadcrumb-item.active,
.kbli-detail-page .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, .75);
}

/* Legibility for hero copy set over a photo. */
.kbli-detail-page .text-white,
section.bg-primary .text-white {
    text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

/* ---------- Entrance animation ---------- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate__animated  { animation-duration: 1s; animation-fill-mode: both; }
.animate__fadeInUp  { animation-name: fadeInUp; }
.animate__delay-1s  { animation-delay: .3s; }
.animate__delay-2s  { animation-delay: .6s; }

@media (max-width: 768px) {
    .kbli-detail-page { min-height: auto; }
    .kbli-detail-page .display-5 { font-size: 1.9rem; }
}