/* Direct route access fix for blog page */
body, html {
  background-color: #030712 !important;
  color: #f8fafc !important;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  width: 100%;
}

/* Force header visibility */
header {
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 50 !important;
  background-color: rgba(3, 7, 18, 0.8) !important;
  backdrop-filter: blur(8px) !important;
  border-bottom: 1px solid rgba(6, 182, 212, 0.2) !important;
  padding: 1rem 0 !important;
}

/* Force navigation menu visibility */
nav {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Force main content visibility */
main {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  padding-top: 4rem !important;
}

/* Force blog section visibility */
#blog {
  display: block !important;
  visibility: visible !important;
  padding-top: 5rem !important;
}

/* Make sure the Rahul Ohri title is visible */
header a {
  color: white !important;
}

header span.text-cyan-400 {
  color: #06b6d4 !important;
}

/* Force blog page specific styles */
.blog-page-loaded #blog h2,
.route-loaded #blog h2 {
  font-size: 2rem !important;
  font-weight: bold !important;
  margin-bottom: 1rem !important;
  color: white !important;
}

.blog-page-loaded #blog h2 span,
.route-loaded #blog h2 span {
  color: #06b6d4 !important;
}

/* Force blog cards to display correctly */
.blog-page-loaded #blog .grid,
.route-loaded #blog .grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1.5rem !important;
}

@media (max-width: 768px) {
  .blog-page-loaded #blog .grid,
  .route-loaded #blog .grid {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }
}

/* Force blog card styling */
.blog-page-loaded #blog .grid > a,
.route-loaded #blog .grid > a {
  display: block !important;
  text-decoration: none !important;
}

/* Force blog filter visibility */
.blog-page-loaded #blog .flex.flex-col.md\\:flex-row,
.route-loaded #blog .flex.flex-col.md\\:flex-row {
  display: flex !important;
  margin-bottom: 2.5rem !important;
}

/* Force blog search input visibility */
.blog-page-loaded #blog input,
.route-loaded #blog input {
  background-color: rgba(3, 7, 18, 0.8) !important;
  color: white !important;
  border: 1px solid rgba(6, 182, 212, 0.3) !important;
  padding: 0.5rem 0.75rem 0.5rem 2.5rem !important;
}

/* Force filter buttons visibility */
.blog-page-loaded #blog button,
.route-loaded #blog button {
  display: inline-block !important;
  padding: 0.25rem 0.75rem !important;
  border-radius: 9999px !important;
  transition: all 0.3s !important;
}

.blog-page-loaded #blog button.bg-cyan-500,
.route-loaded #blog button.bg-cyan-500 {
  background-color: #06b6d4 !important;
  color: black !important;
}