/* * Faili: assets/css/style.css
 * Kazi: Mitindo maalum ya ziada na urembo wa nje (Luxury UI Accent & Custom Overrides).
 * Mfumo: Inafanya kazi bega kwa bega na Tailwind CSS v4.
 */

/* Usanidi Mkuu wa Ukurasa */
html {
    /* Kulinda smooth scroll isigonge navbar iliyo fixed juu (Navbar ina urefu wa h-20 = 5rem) */
    scroll-padding-top: 5rem;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #0B0F1A;
    color: #F1F5F9; /* slate-100 fallback ya kiwango cha chini */
}

/* ─── LUXURY ACCENTS (Urembo wa Kishua) ─── */

/* Mwanga wa nyuma wa duara (Ambient Radial Glow Overlay) */
.glow-radial {
    background: radial-gradient(
        circle at 50% -20%, 
        rgba(59, 130, 246, 0.12) 0%, 
        rgba(11, 15, 26, 0) 70%
    );
}

/* Muonekano maalum wa kutelezesha kurasa (Custom Sleek Scrollbar) */
::-webkit-scrollbar {
    width: 6px;
    height: 6px; /* Kwa ajili ya scrollbar za usawa (Horizontal) */
}

::-webkit-scrollbar-track {
    background: #0B0F1A;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(59, 130, 246, 0.3); /* Rangi ya bluu ya Tailwind ikiguswa */
}

/* ─── PREMIUM UTILITIES (Msaada wa Mifumo ya Ndani) ─── */

/* Kuzuia picha na video zisivuje nje ya mipaka ya kadi (Media Aspect Ratio Lock) */
.media-card-shadow {
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5);
}

/* Uhuishaji mdogo wa mianga (Subtle Selection Highlight) */
::selection {
    background-color: rgba(59, 130, 246, 0.25);
    color: #FFFFFF;
}