/* ============================================
   SAGACAN VISUAL LAYOUT FIX - COMPREHENSIVE
   Fixes: Z-index conflicts, container boundaries, 
   image containment, overlapping elements
   ============================================ */

/* ========== Z-INDEX HIERARCHY (GLOBAL) ========== */
/* Establish clear stacking order across entire site */

:root {
    --z-background: 0;
    --z-content: 1;
    --z-sticky-elements: 5;
    --z-reading-progress: 10;
    --z-floating-elements: 50;
    --z-nav-sticky-header: 100;
    --z-navigation: 1000;
    --z-modal-overlay: 5000;
    --z-modal-content: 5001;
    --z-notification: 9000;
    --z-reading-bar: 9999;
}

/* ========== MATRIX BACKGROUND - ALWAYS BOTTOM ========== */
#matrix-bg,
.matrix-rain,
.matrix-bg-overlay {
    position: fixed !important;
    z-index: var(--z-background) !important;
    pointer-events: none !important;
}

/* Ensure all content is ABOVE matrix */
body > *:not(#matrix-bg):not(.matrix-rain) {
    position: relative;
    z-index: var(--z-content);
}

/* ========== NAVIGATION - ALWAYS ON TOP ========== */
nav,
.navbar,
#mainNav,
.nav-ign {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: var(--z-navigation) !important;
    width: 100% !important;
}

/* ========== CONTAINER BOUNDARIES ========== */
/* Prevent content from bleeding out */

.container,
.nav-container,
.hero-container,
.portfolio-grid,
.blog-grid,
.posts-grid {
    position: relative;
    overflow: visible; /* Allow shadows/glows */
    contain: layout style; /* CSS containment */
}

/* Strict containment for card elements */
.post-card,
.blog-card,
.portfolio-item,
.research-card,
.skill-card,
.service-card,
.card {
    position: relative;
    overflow: hidden !important; /* Prevent content escape */
    isolation: isolate; /* Create stacking context */
}

/* ========== IMAGE CONTAINMENT ========== */
/* Fix images bleeding/not showing */

img {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: cover;
    position: relative;
    z-index: 1;
}

/* Blog post images - CRITICAL FIX */
.post-image,
.post-image-container,
.post-featured-image {
    position: relative !important;
    overflow: hidden !important;
    background: #000 !important;
    /* Remove any backdrop filters that hide images */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.post-image img,
.post-featured-image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 10 !important;
}

/* Card images */
.blog-card img,
.post-card img,
.portfolio-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

/* ========== STICKY ELEMENTS ========== */
/* Fix table headers, navigation, etc. */

.ai-comparison-table thead th {
    position: sticky !important;
    top: 76px !important; /* Below main nav */
    z-index: var(--z-nav-sticky-header) !important;
    background: rgba(0, 0, 0, 0.95) !important;
}

.blog-controls,
.sticky-header {
    position: sticky !important;
    top: 76px !important;
    z-index: var(--z-sticky-elements) !important;
}

/* ========== READING PROGRESS BAR ========== */
#reading-progress {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 3px !important;
    z-index: var(--z-reading-bar) !important;
    pointer-events: none !important;
}

/* ========== GLASS EFFECT CONTAINMENT ========== */
/* Prevent glass effects from hiding content */

.glass-effect {
    background: rgba(0, 0, 0, 0.2) !important;
    backdrop-filter: blur(15px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(15px) saturate(180%) !important;
    border: 1px solid rgba(0, 255, 255, 0.4) !important;
    position: relative;
    isolation: isolate; /* Create stacking context */
}

/* NEVER apply glass effect to these */
.post-image-container.glass-effect,
.post-featured-image.glass-effect,
img.glass-effect {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
}

/* ========== SECTION SPACING ========== */
/* Ensure proper spacing below fixed nav */

main,
.main-content,
section:first-of-type {
    padding-top: 80px !important; /* Nav height + buffer */
}

.hero {
    padding-top: 120px !important;
    min-height: 100vh;
}

/* ========== MODAL/OVERLAY FIX ========== */
.modal-overlay,
.consent-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: var(--z-modal-overlay) !important;
    background: rgba(0, 0, 0, 0.8) !important;
}

.modal-content,
.consent-banner {
    position: fixed !important;
    z-index: var(--z-modal-content) !important;
}

/* ========== FOOTER - ALWAYS BOTTOM ========== */
footer,
.footer {
    position: relative !important;
    z-index: var(--z-content) !important;
    margin-top: auto; /* Push to bottom */
}

/* ========== TABLE FIX ========== */
/* Ensure tables don't overflow containers */

.comparison-table-container,
.table-responsive {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Ensure proper containment */
    contain: layout style paint;
}

table {
    width: 100%;
    border-collapse: collapse;
    position: relative;
}

/* ========== HOVER STATES ========== */
/* Prevent hover transforms from breaking layout */

.post-card:hover,
.blog-card:hover,
.portfolio-item:hover {
    transform: translateY(-10px);
    /* Ensure hover doesn't create new stacking context issues */
    isolation: isolate;
}

/* ========== RESPONSIVE FIXES ========== */
@media (max-width: 768px) {
    .ai-comparison-table thead th {
        top: 64px !important;
    }
    
    main,
    .main-content,
    section:first-of-type {
        padding-top: 70px !important;
    }
}

/* ========== CRITICAL LAYOUT RESETS ========== */
/* Prevent inherited issues */

* {
    /* Ensure box-sizing is consistent */
    box-sizing: border-box;
}

/* Remove negative margins that break layouts */
.container > *:first-child,
.section > *:first-child {
    margin-top: 0 !important;
}

/* ========== SCROLLING FIX ========== */
/* Smooth scroll with proper offsets */

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px; /* Account for fixed nav */
}

/* ========== ACCESSIBILITY & BOUNDARIES ========== */
/* Ensure interactive elements have proper boundaries */

button,
a,
.btn,
.nav-link {
    position: relative;
    /* Ensure click targets don't overlap */
    isolation: isolate;
}

/* ========== FORCE VISIBILITY ========== */
/* Critical elements that MUST be visible */

.post-featured-image,
.blog-card img,
.portfolio-item img,
.hero-image img {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}