/* ==========================================================================
   MCI – Shared Styles (Navbar, Mobile Menu, Scrollbar & Shared UI)
   Extracted from public HTML pages to eliminate duplication.
   
   Rules included here appear in 3+ of the 7 public pages.
   Each page still needs its own <style> block for page-specific rules.
   ========================================================================== */

/* ── Smooth Scroll ─────────────────────────────────────────────────────────── */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px; /* Account for fixed header */
}

/* ── iOS Safari & Android Chrome Fixes ─────────────────────────────────────── */
body {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    min-height: 100vh;
    min-height: -webkit-fill-available;
}

html {
    height: -webkit-fill-available;
}

/* Fix for Android Chrome address bar appearing/disappearing */
#mainNav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
}

/* ── Nav Link Hover Effects ────────────────────────────────────────────────── */
.nav-link {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.6s ease;
    z-index: 1;
}

.nav-link:hover::before {
    left: 100%;
}

/* ── Active Navigation Styles ──────────────────────────────────────────────── */
.nav-active {
    color: white !important;
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    box-shadow: 0 8px 25px rgba(239, 68, 68, 0.4) !important;
    transform: scale(1.05) !important;
}

.mobile-nav-link.nav-active {
    color: #0f172a !important;
    background: linear-gradient(135deg, #fee2e2, #fecaca) !important;
    border-left: 4px solid #dc2626 !important;
    box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.2), 0 4px 12px rgba(239, 68, 68, 0.15);
    transform: translateX(4px) !important;
}

/* ── Hamburger Animation ───────────────────────────────────────────────────── */
.hamburger-line {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}

/* ── Navbar Scroll Effects ─────────────────────────────────────────────────── */
.navbar-scrolled {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    border-bottom: 1px solid rgba(239, 68, 68, 0.1) !important;
}

.navbar-scrolled .nav-link {
    backdrop-filter: blur(10px);
}

/* ── Logo Glow Effect ──────────────────────────────────────────────────────── */
.logo-glow {
    filter: drop-shadow(0 0 20px rgba(239, 68, 68, 0.3));
    transition: filter 0.5s ease;
}

.logo-glow:hover {
    filter: drop-shadow(0 0 30px rgba(239, 68, 68, 0.6)) drop-shadow(0 0 60px rgba(239, 68, 68, 0.3));
}

/* ── CTA Gradient Button ───────────────────────────────────────────────────── */
.cta-gradient {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #b91c1c 100%);
    position: relative;
    overflow: hidden;
}

.cta-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transition: left 0.6s ease;
}

.cta-gradient:hover::before {
    left: 100%;
}

/* ── Mobile Menu ───────────────────────────────────────────────────────────── */
.mobile-menu-transition {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#mobile-menu {
    z-index: 9999 !important;
}

#mobile-menu-overlay {
    z-index: 9998 !important;
}

body.mobile-menu-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
}

/* Smooth menu transitions */
.transition-transform {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-opacity {
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Backdrop Blur Fallback ────────────────────────────────────────────────── */
@supports not (backdrop-filter: blur(20px)) {
    .backdrop-blur-2xl {
        background-color: rgba(255, 255, 255, 0.9) !important;
    }
}

/* ── Custom Scrollbar ──────────────────────────────────────────────────────── */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgba(239, 68, 68, 0.3) rgba(249, 250, 251, 0.5);
}

.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(249, 250, 251, 0.5);
    border-radius: 4px;
    backdrop-filter: blur(4px);
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.6), rgba(220, 38, 38, 0.4));
    border-radius: 4px;
    transition: all 0.3s ease;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.8), rgba(220, 38, 38, 0.6));
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

/* ── Scroll Margin for Fixed Navbar ────────────────────────────────────────── */
section[id], div[id] {
    scroll-margin-top: 96px; /* Height of navbar (h-24) */
}

@media (max-width: 639px) {
    section[id], div[id] {
        scroll-margin-top: 64px;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    section[id], div[id] {
        scroll-margin-top: 72px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    section[id], div[id] {
        scroll-margin-top: 80px;
    }
}

/* ── High DPI Android Devices Fix ──────────────────────────────────────────── */
@media only screen and (max-width: 639px) and (-webkit-min-device-pixel-ratio: 2.5),
       only screen and (max-width: 639px) and (min-resolution: 240dpi) {
    section[id], div[id] {
        scroll-margin-top: 65px !important;
    }

    #mainNav {
        transform: translate3d(0, 0, 0) !important;
        -webkit-transform: translate3d(0, 0, 0) !important;
    }

    body {
        padding-top: 0 !important;
    }

    section:first-of-type {
        margin-top: 0 !important;
    }
}

/* ── Image Layout Shift Prevention (Android) ───────────────────────────────── */
img {
    content-visibility: auto;
}

main img,
section img,
article img,
.content img {
    min-height: 100px;
}

#mainNav img,
nav img,
.navbar img,
header img {
    min-height: auto !important;
}

/* ── Modal Animations ──────────────────────────────────────────────────────── */
.modal-backdrop {
    backdrop-filter: blur(12px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-content {
    transform: scale(0.7) translateY(50px);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-content.show {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.modal-exit {
    transform: scale(0.8) translateY(-30px);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 1, 1);
}