/* --- Fandom-Style Kendo Verse Theme (2025 Refresh) --- */
/* Use the Theme Designer first for basic colors! */

/* Define CSS Variables for central color management */
:root {
  --kendo-deep-blue: #0f3460;
  --kendo-dark-bg: #1a1a2e;
  --kendo-accent-color: #e94560; /* Fandom Accent Color (Vibrant Red) */
  --kendo-text-light: #f4f4f4;
  --kendo-text-dark: #111111; /* Deeper black for better contrast */
  --fandom-link-color: var(--theme-link-color, #0056b3);
  --glass-bg-light: rgba(255, 255, 255, 0.1);
  --glass-bg-dark: rgba(26, 26, 46, 0.4);
  --blur-amount: 10px; /* Base blur for glass effect */
}

/* Base Body Styling and Background */
body {
  /* Replace 'URL_OF_YOUR_BACKGROUND_IMAGE' with your actual image path */
  background-image: url('Blue_Multiverse.png');
  background-size: cover;          /* Cover the entire viewport */
  background-attachment: fixed;    /* Background stays put during scroll */
  background-position: center;     /* Center the background image */
  background-color: var(--kendo-dark-bg); /* Fallback color (deep blue/purple) */
  color: var(--theme-body-text-color, var(--kendo-text-light));
  /* Modern system font stack */
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.6;
  scroll-behavior: smooth;
  /* Fluid typography for base font size (modern technique) */
  font-size: clamp(1rem, 0.9vw + 0.5rem, 1.125rem);
}

/* Glassmorphism Content Areas: Frosted Glass Effect */
main article,
main aside,
.content-module {
  background: var(--glass-bg-light); /* Semi-transparent background */
  backdrop-filter: blur(var(--blur-amount)); /* THE frosted glass effect */
  -webkit-backdrop-filter: blur(var(--blur-amount)); /* Safari compatibility */
  padding: clamp(1rem, 5vw, 2rem); /* Fluid padding */
  border-radius: 16px; /* Increased radius for modern soft edges */
  /* Stronger, more diffused shadow for depth */
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  border: 1px solid rgba(255, 255, 255, 0.18); /* Subtle border gives definition */
  margin-bottom: 2rem; /* Increased spacing */
  
  /* --- FIX 1: Change text to a dark color for contrast with the light glass background --- */
  color: var(--kendo-text-dark); /* Changed from --kendo-text-light to --kendo-text-dark */
}

/* Adjust transparency/color for dark theme users */
body[data-theme="dark"] main article,
body[data-theme="dark"] main aside,
body[data-theme="dark"] .content-module {
    background: var(--glass-bg-dark);
    color: var(--kendo-text-light); /* Text can remain light for a dark theme */
}


/* Header and Navigation (More minimalist) */
header {
  background-color: var(--theme-community-header-color, var(--kendo-deep-blue));
  color: white;
  padding: 1rem 0;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  /* Accent border moved to the top of the content below it for a cleaner look */
  position: sticky;
  top: 0;
  z-index: 1000; /* Ensured highest z-index */
}

nav a {
  color: inherit;
  text-decoration: none;
  /* Using gap property for navigation links is cleaner */
  /* margin: 0 15px; */
  font-weight: 600;
  transition: color 0.3s ease, transform 0.2s cubic-bezier(0.2, 0.8, 0.4, 1); /* Smoother animation curve */
  display: inline-block;
  /* Added subtle glowing text shadow for Kendo Verse feel */
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}

nav {
    display: flex;
    justify-content: center;
    gap: 1.5rem; /* Modern spacing for navigation items */
    padding-top: 0.5rem;
}

nav a:hover,
nav a:focus {
  color: var(--theme-accent-color, var(--kendo-accent-color));
  transform: translateY(-3px) scale(1.05); /* More pronounced hover effect */
  text-shadow: 0 0 10px var(--kendo-accent-color); /* Accent glow on hover */
}

/* Main Layout Structure (Flexbox/Grid potential) */
main {
  display: flex;
  justify-content: center; /* Center the entire layout container */
  max-width: 1400px; /* Wider screens supported */
  margin: 2rem auto;
  padding: 0 1rem;
  gap: 2rem;
}

article {
  flex: 3;
  min-width: 0;

  /* --- FIX 2: Ensure links within the main content are visible. --- */
  /* The default fandom link color might be too light/dark for the new background */
}

/* Specific link styling within the main content block */
main a:link, main a:visited {
    color: var(--fandom-link-color); /* Use a standard link blue/color defined earlier */
    text-decoration: underline; /* Add underline to ensure they look like links */
}

aside {
  flex: 1;
  min-width: 300px; /* Slightly wider sidebar minimum */
}

/* Typography Headings */
h1, h2, h3, h4 {
  color: var(--theme-accent-color, var(--kendo-accent-color)); /* Use accent color for headings for impact */
  border-bottom: none; /* Removed subtle divider for cleaner look */
  padding-bottom: 0;
  margin-top: clamp(1rem, 4vw, 2rem); /* Fluid vertical spacing */
  /* Added a subtle glow to headings */
  text-shadow: 0 0 3px rgba(233, 69, 96, 0.5);
}

h1 {
    font-size: 2.5rem;
    font-weight: 800;
}

/* Specific style for the "Not Found" error H1 */
h1.error-title {
    color: #ff4d4d; /* Bright error red */
    text-shadow: 0 0 5px #ff4d4d;
}

/* Footer Styling */
footer {
  text-align: center;
  padding: 2rem 0;
  background-color: var(--kendo-dark-bg); /* Solid dark background for footer */
  color: white;
  margin-top: 5rem;
  box-shadow: 0 -4px 10px rgba(0,0,0,0.3);
  border-top: 3px solid var(--theme-accent-color, var(--kendo-accent-color));
}

/* Basic Responsiveness for smaller screens */
@media (max-width: 992px) { /* Changed breakpoint slightly */
  main {
    flex-direction: column; /* Stack article and aside vertically */
    gap: 1.5rem;
  }

  article, aside {
    flex: auto;
    margin: 0;
    min-width: unset;
  }

  nav {
      flex-wrap: wrap; /* Allow nav links to wrap on small screens */
      gap: 1rem;
  }
}