/*
 * MINIMAL HERO VISIBILITY FIX - CLEAN VERSION
 * Fixes hero text hidden under fixed header issue
 * Replaces all previous conflicting CSS files
 */

:root {
  --header-height-desktop: 88px;
  --header-height-mobile: 72px; /* Reduced for mobile */
}

/* Fix 1: Ensure NAVIGATION header stays on top (not article headers) */
header.fixed.w-full.z-50,
div > header.fixed.w-full.z-50 {
  position: fixed !important;
  z-index: 50 !important;
  width: 100% !important;
}

/* CRITICAL FIX: Ensure article headers use normal document flow */
article header,
header.mb-12,
.max-w-4xl header {
  position: relative !important;
  display: block !important;
  z-index: auto !important;
  margin-bottom: 3rem !important;
}

/* Fix 2: Add top spacing to hero section to account for fixed header */
.hero-section.relative.min-h-screen {
  padding-top: calc(var(--header-height-desktop) + 2rem) !important;
  /* Keep full screen height */
  min-height: 100vh !important;
}

/* Fix 3: Ensure hero content container is properly positioned */
.hero-section .container-custom {
  position: relative !important;
  z-index: 1 !important;
  /* Remove extra padding - already handled by hero-section */
  padding-top: 0 !important;
}

/* Fix 4: Ensure hero text is visible */
.hero-text,
h1.hero-text {
  position: relative !important;
  z-index: auto !important; /* Changed from 2 to auto */
  /* Remove any negative margins */
  margin-top: 0 !important;
  margin-bottom: 1.5rem !important;
  display: block !important;
}

/* Fix 5: Mobile specific adjustments */
@media only screen and (max-width: 767px) {
  .hero-section.relative.min-h-screen {
    padding-top: calc(var(--header-height-mobile) + 1rem) !important;
    min-height: 100vh !important;
  }

  /* Keep container padding at 0 on mobile too */
  .hero-section .container-custom {
    padding-top: 0 !important;
  }

  /* Mobile logo grid fixes */
  .client-logos-grid,
  .grid.grid-cols-2.sm\:grid-cols-3.md\:flex {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1rem !important;
    justify-items: center !important;
    align-items: center !important;
    padding: 1rem !important;
  }

  .logo-container {
    width: 85px !important;
    height: 50px !important;
    padding: 0.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .client-logo {
    max-width: 75px !important;
    max-height: 45px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Very small screens: 2 column grid */
  @media only screen and (max-width: 379px) {
    .client-logos-grid,
    .grid.grid-cols-2.sm\:grid-cols-3.md\:flex {
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 0.75rem !important;
    }

    .logo-container {
      width: 70px !important;
      height: 40px !important;
    }

    .client-logo {
      max-width: 65px !important;
      max-height: 35px !important;
    }
  }
}

/* Fix 6: Desktop logo preservation */
@media only screen and (min-width: 768px) {
  .client-logos-grid,
  .grid.grid-cols-2.sm\:grid-cols-3.md\:flex {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 2rem !important;
    /* Remove grid properties */
    grid-template-columns: none !important;
  }

  .logo-container {
    width: 140px !important;
    height: 80px !important;
    padding: 1.5rem !important;
    flex: none !important; /* Prevent flex shrinking */
  }

  .client-logo {
    max-width: 120px !important;
    max-height: 60px !important;
  }
}

/* Fix 7: Blog Post Layout - Specific fixes for individual resource pages */
main.flex-grow.pt-24 {
  /* Replace insufficient pt-24 (96px) with proper header clearance */
  padding-top: calc(var(--header-height-desktop) + 2rem) !important;
}

/* Blog post title spacing */
article .max-w-4xl header h1.hero-text {
  margin-top: 0 !important;
  margin-bottom: 1.5rem !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Article header spacing */
article .max-w-4xl header {
  margin-bottom: 3rem !important;
  padding-top: 1rem !important;
}

/* Mobile adjustments for blog posts */
@media only screen and (max-width: 767px) {
  main.flex-grow.pt-24 {
    padding-top: calc(var(--header-height-mobile) + 1.5rem) !important;
  }

  article .max-w-4xl header {
    margin-bottom: 2rem !important;
    padding-top: 0.5rem !important;
  }
}

/* Fix 8: Blog Post Body Content - Ensure proper spacing below article header */
.prose.prose-lg .whitespace-pre-wrap,
.whitespace-pre-wrap,
div.whitespace-pre-wrap {
  position: relative !important;
  display: block !important;
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
  top: 0 !important;
  transform: none !important;
  clear: both !important;
  z-index: auto !important;
}

/* Fix 9: Ensure proper document flow for article container */
article.section-padding,
.max-w-4xl.mx-auto {
  display: flex !important;
  flex-direction: column !important;
  gap: 2rem !important;
}

/* Fix 10: Emergency fallback - if other methods fail */
@media screen {
  /* Ensure no hero element is ever above z-index 49 */
  .hero-section *:not(header) {
    z-index: auto !important;
  }

  /* Prevent horizontal scroll */
  .hero-section {
    overflow-x: hidden !important;
  }

  /* Ensure text is readable */
  .hero-text .hero-line-1,
  .hero-text .hero-line-2 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}