/* =============================================================================
   📄 C:\VinDXit\frontend\styles\header-lock.css
   Purpose: Force a 1:1 copy of the index.html header style on all pages.
   Load: After base-logo-motion.css, compare.css, etc. (last in cascade).
   Standards:
   - Tabs for indentation ✅
   - Detailed annotations for clarity ✅
   - Surgical overrides (scoped to header, .logo-link, .logo-img) ✅
   ============================================================================= */

/* -------------------------------------------------------------------------
   💖 TASK: Lock header to match index.html style
   - Sticky header with XP glass-blue gradient, shadow, and centered logo
   - Heights: Desktop (150px), Mobile (80px), Tiny devices (scaled logo)
   - Overflow visible to prevent logo clipping
   - Consistent animations and hover effects
   ------------------------------------------------------------------------- */

/* === Header container (matches index.html) ================================ */
header:not(.trust-head) {
    /* Layout */
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 14px !important;
    z-index: 10 !important;

    /* Height (mobile default) */
    height: 80px !important;
    min-height: 80px !important;

    /* XP glass-blue gradient */
    background:
        linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 18%),
        linear-gradient(180deg, 
            var(--xp-blue-800, #1a4ac7), 
            var(--xp-blue-700, #245edb), 
            var(--xp-blue-600, #2d6ae3), 
            var(--xp-blue-500, #3a7bf5), 
            var(--xp-blue-400, #4d8cff), 
            var(--xp-blue-300, #80aaff), 
            var(--xp-blue-200, #b3d4ff), 
            var(--xp-blue-100, #e6f0ff)) !important;

    /* Edge styling */
    border-bottom: 1px solid rgba(0,0,0,.35) !important;
    box-shadow: 0 6px 22px rgba(12,19,36,.35) !important;

    /* Prevent logo clipping */
    overflow: visible !important;
}

/* === Centered logo link (absolute positioning) ============================ */
.logo-link {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    pointer-events: auto !important;
    z-index: 10 !important;
    margin: 0 !important;
}

/* === Logo image (visuals and animations) ================================== */
.logo-img {
    display: block !important;
    width: auto !important;
    height: 200px !important; /* Mobile default */
    object-fit: contain !important;

    /* Animation and rendering */
    animation: 
        vxRunAcrossNoBlur 2.2s cubic-bezier(.2,1.1,.2,1) .2s both,
        vxBreath 6s ease-in-out 3s infinite !important;
    transform-origin: center !important;
    image-rendering: -webkit-optimize-contrast !important;
    filter: drop-shadow(0 2px 0 rgba(0,0,0,.35)) !important;
}

/* === Hover animation (consistent breathing effect) ======================== */
.logo-img:hover {
    animation: vxBreath 6s ease-in-out 0s infinite !important;
}

/* === Desktop (min-width: 901px) ========================================== */
@media (min-width: 901px) {
    header:not(.trust-head) {
        height: 150px !important;
        min-height: 150px !important;
    }
    .logo-img {
        height: 400px !important; /* Reduced from 250px for balance */
    }
}

/* === Tiny devices (max-width: 360px) ===================================== */
@media (max-width: 360px) {
    .logo-img {
        height: 100px !important; /* Scaled for readability */
    }
}