/* ════════════════════════════════════════════════════════
   MOF Consulting — shared styles (logo, links, dark mode)
   Loaded by every page. Page-specific CSS stays inline.
════════════════════════════════════════════════════════ */

/* ── Logo ─────────────────────────────────────────────── */
.logo-mark {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #2563eb;
    flex-shrink: 0;
    transition: transform 0.4s cubic-bezier(.34,1.56,.64,1), background 0.3s;
}
a:hover .logo-mark {
    transform: scale(1.5);
    background: #3b82f6;
}
.logo-text {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1;
}
.logo-mof {
    background: linear-gradient(135deg, #0f172a 0%, #2563eb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: background 0.3s;
}
.logo-consulting {
    color: #94a3b8;
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    margin-left: 3px;
    vertical-align: middle;
    transition: color 0.3s;
}
a:hover .logo-consulting { color: #64748b; }

/* ── Animated underline links ─────────────────────────── */
.alink {
    background-image: linear-gradient(#2563eb, #2563eb);
    background-repeat: no-repeat;
    background-size: 0% 1.5px;
    background-position: 0 100%;
    transition: background-size 0.3s ease, color 0.2s;
}
.alink:hover { background-size: 100% 1.5px; color: #0f172a; }

/* ── Tag pills ────────────────────────────────────────── */
.tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ── Nav link underline ───────────────────────────────── */
.nav-link { position: relative; }
.nav-link::after {
    content: '';
    position: absolute; bottom: -4px; left: 0;
    width: 0; height: 1.5px;
    background: #0f172a;
    transition: width 0.25s ease;
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

/* ════════════════════════════════════════════════════════
   DARK MODE
════════════════════════════════════════════════════════ */
/* Smooth colour transitions across the whole page */
*, *::before, *::after {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.2s ease;
}
/* But don't slow down transforms/animations */
[data-reveal], [data-stagger] > *, .tilt-card, .magnetic, .hero-line span, .draw-rule, #scroll-progress {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.2s ease,
                opacity 0.7s cubic-bezier(.25,.46,.45,.94),
                transform 0.7s cubic-bezier(.25,.46,.45,.94),
                box-shadow 0.12s ease, width 1.1s cubic-bezier(.16,1,.3,1);
}

@media (prefers-color-scheme: dark) {

    /* ── Page base ───────────────────────────── */
    body { background-color: #0a0a0b !important; color: #e2e8f0 !important; }

    /* ── Nav ─────────────────────────────────── */
    nav, #main-nav {
        background-color: rgba(10, 10, 11, 0.94) !important;
        border-bottom-color: #27272a !important;
    }
    #mobile-menu {
        background-color: #131315 !important;
        border-top-color: #27272a !important;
    }
    .nav-link::after { background: #e2e8f0 !important; }

    /* ── Section backgrounds ─────────────────── */
    .bg-white    { background-color: #0a0a0b !important; }
    .bg-slate-50 { background-color: #131315 !important; }

    /* ── Grid ────────────────────────────────── */
    .bg-grid {
        background-image:
            linear-gradient(to right,  rgba(255,255,255,0.025) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px) !important;
    }

    /* ── Section number watermarks ───────────── */
    .section-num { color: rgba(255,255,255,0.04) !important; }

    /* ── Text colours ────────────────────────── */
    .text-slate-900,
    .text-slate-800           { color: #f1f5f9 !important; }
    .text-slate-700,
    .text-slate-600           { color: #cbd5e1 !important; }
    .text-slate-500,
    .text-slate-400           { color: #94a3b8 !important; }
    .text-brand-600           { color: #60a5fa !important; }
    .text-brand-700           { color: #93c5fd !important; }
    .text-brand-100,
    .text-brand-200           { color: #bfdbfe !important; }

    /* ── Borders ─────────────────────────────── */
    .border-slate-100,
    .border-slate-200,
    .border-slate-300         { border-color: #27272a !important; }
    .border-t                 { border-top-color:    #27272a !important; }
    .border-b                 { border-bottom-color: #27272a !important; }

    /* ── Cards / tilt-cards ──────────────────── */
    .tilt-card {
        background-color: #18181b !important;
        border-color: #27272a !important;
    }
    .tilt-card:hover { box-shadow: 0 16px 48px rgba(0,0,0,0.4) !important; }

    /* Keep blue highlighted cards as-is */
    .tilt-card.bg-brand-600 {
        background-color: #2563eb !important;
        border-color: #2563eb !important;
    }

    /* ── Blue-tinted icon backgrounds ────────── */
    .bg-brand-50  { background-color: #1e3a5f !important; }
    .bg-brand-100 { background-color: #1e3a5f !important; }

    /* ── Stat / info blocks ──────────────────── */
    .rounded-xl.bg-slate-50,
    .rounded-xl.border.border-slate-100,
    .rounded-xl.border.border-slate-200 {
        background-color: #18181b !important;
        border-color: #27272a !important;
    }

    /* ── Contact card ────────────────────────── */
    .shadow-xl.rounded-2xl {
        background-color: #18181b !important;
        border-color: #27272a !important;
        box-shadow: 0 20px 60px rgba(0,0,0,0.5) !important;
    }

    /* ── Form inputs ─────────────────────────── */
    input, textarea, select {
        background-color: #0a0a0b !important;
        border-color: #27272a !important;
        color: #f1f5f9 !important;
    }
    input:focus, textarea:focus, select:focus {
        border-color: #3b82f6 !important;
        box-shadow: 0 0 0 1px #3b82f6 !important;
    }
    input::placeholder, textarea::placeholder { color: #475569 !important; }

    /* ── Inline tag pills ────────────────────── */
    .tag.bg-brand-50  { background-color: #1e3a5f !important; color: #93c5fd !important; }
    .tag.bg-slate-100 { background-color: #27272a !important; color: #94a3b8 !important; }

    /* ── Animated underline links ────────────── */
    .alink:hover { color: #f1f5f9 !important; }

    /* ── Dividers ────────────────────────────── */
    .h-px.bg-slate-200,
    .h-px.bg-slate-100 { background-color: #27272a !important; }
    .flex-1.h-px       { background-color: #27272a !important; }

    /* ── Footer ──────────────────────────────── */
    footer {
        background-color: #050506 !important;
        border-top-color: #27272a !important;
    }

    /* ── Logo ────────────────────────────────── */
    .logo-mof {
        background: linear-gradient(135deg, #f1f5f9 0%, #60a5fa 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    .logo-consulting { color: #475569 !important; }
    a:hover .logo-consulting { color: #64748b !important; }

    /* ── Dark banner (bg-slate-900) stays dark ─ */
    .bg-slate-900 { background-color: #050507 !important; }

    /* ── Ambient glow ────────────────────────── */
    .bg-brand-100\/40 { background-color: rgba(37,99,235,0.08) !important; }

    /* ── Tooling marquee ─────────────────────── */
    .m-item { color: #64748b !important; }
    .m-item::before { background: #334155 !important; }
}

/* ════════════════════════════════════════════════════════
   REDUCED MOTION — respect user preference
════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal], [data-stagger] > *, .hero-line span, .draw-rule, .timeline-line {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}