/**
 * Cosmic Background Effects Styles
 * AGGRESSIVE overrides to ensure cosmic background is visible
 */

/* Remove all backgrounds that could cover cosmic effects */
html {
  background: transparent !important;
}

body {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

.viewport {
  background: transparent !important;
  position: relative;
  z-index: 1;
}

#cosmic-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: rgb(250, 252, 255);
}

#cosmic-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#aurora-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  mix-blend-mode: screen;
  animation: auroraFadeIn 3s ease forwards;
  animation-delay: 2s;
}

@keyframes auroraFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Page wrapper - semi-transparent glassmorphism */
.page-wrapper {
  position: relative;
  z-index: 1;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Nav header */
.nav-header {
  z-index: 400;
  background: rgba(9, 51, 91, 0.2) !important;
}

.nav-header.scrolled {
  background: rgba(9, 51, 91, 0.6) !important;
}

.nav-header,
.nav-header a,
.nav-header .nav-logo,
.nav-header .nav-menu-item,
.nav-header:not(.scrolled) a,
.nav-header:not(.scrolled) li a {
  color: #fff !important;
}

/* Blog header - glassmorphism card */
.blog-header {
  background: transparent !important;
}

.blog-header:not(.has-cover) {
  background: transparent !important;
}

.blog-header .blog-box {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 24px;
  padding: 3rem;
  margin: 0 2rem;
  box-shadow: 0 8px 32px rgba(10, 30, 60, 0.1);
  border: 1px solid rgba(10, 30, 60, 0.1);
}

/* Container for posts */
.container {
  background: transparent !important;
}

/* Post cards - glassmorphism */
.container .post .post-box {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 16px;
  margin: 0.5rem -1rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  border: 1px solid rgba(10, 30, 60, 0.08);
  box-shadow: 0 4px 24px rgba(10, 30, 60, 0.08);
}

/* Post content - glassmorphism (matches post-box) */
.post-content {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 1.5rem;
  border: 1px solid rgba(10, 30, 60, 0.08);
  box-shadow: 0 4px 24px rgba(10, 30, 60, 0.08);
}

/* Footer */
.nav-footer {
  position: relative;
  z-index: 20;
  background: transparent !important;
}

.nav-footer .nav-wrapper {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 24px;
  padding: 2rem 4rem;
  box-shadow: 0 8px 32px rgba(10, 30, 60, 0.08);
  border: 1px solid rgba(10, 30, 60, 0.08);
}

/* Text readability on light cosmic background */
.blog-name,
.blog-description,
.post-title,
.post-title a,
.post-excerpt,
.post-meta,
.nav-footer a,
.nav-footer .nav-copy,
.nav-footer .nav-publish {
  color: rgba(10, 30, 60, 0.9) !important;
  text-shadow: none;
}

.post-meta,
.nav-footer a,
.nav-footer .nav-copy,
.nav-footer .nav-publish {
  color: rgba(10, 30, 60, 0.65) !important;
}

/* Links */
.post-title a:hover {
  color: rgba(41, 121, 163, 1) !important;
}

/* Reduce motion - disable cosmic effects */
@media (prefers-reduced-motion: reduce) {
  #cosmic-bg {
    display: none !important;
  }

  html, body, .viewport, .page-wrapper, .blog-header, .container {
    background: var(--color-background-main) !important;
  }

  .blog-header .blog-box,
  .container .post .post-box,
  .nav-footer .nav-wrapper {
    background: var(--color-background-secondary) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid var(--color-background-contrast) !important;
    box-shadow: none !important;
  }

  .blog-name,
  .blog-description,
  .post-title,
  .post-title a,
  .post-excerpt,
  .post-meta,
  .nav-footer a,
  .nav-footer .nav-copy,
  .nav-footer .nav-publish {
    color: var(--color-content-main) !important;
    text-shadow: none !important;
  }
}

/* Mobile optimization */
@media (max-width: 768px) {
  .blog-header .blog-box {
    margin: 0 1rem;
    padding: 2rem;
    border-radius: 16px;
  }

  .nav-footer .nav-wrapper {
    padding: 1.5rem 2rem;
    border-radius: 16px;
  }
}