/* Styles for light and dark themes */
  body {
    transition: background-color 0.3s, color 0.3s;

  }

/* Navbar Styles */
nav {
    background: var(--card-background-color);
    color: var(--primary-inverse);
    padding: 0.5rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

nav .logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary);
}

nav ul {
    list-style: none;
    display: flex;
    gap: 1rem;
    margin-left: auto;
}

nav ul li a {
    text-decoration: none;
    color: var(--primary-inverse);
    font-weight: bold;
    transition: color 0.3s ease, transform 0.3s ease;
}

nav ul li a:hover {
    color: var(--primary);
    transform: scale(1.1);
}

/* Responsive Navigation */
.menu-toggle {
    display: none;
    cursor: pointer;
    background: white !important;
    padding: 0.5rem;
    border-radius: 4px;
}

.menu-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px;
    background: black;
}

/* Mobile Navigation */
@media (max-width: 768px) {
    nav ul {
        flex-direction: column;
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        background: white !important;
        display: none;
        padding: 1rem 0;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    nav ul.active {
        display: flex;
    }

    .menu-toggle {
        display: block;
    }
}

  #fusionOutput {
    margin-top: 2rem;
    padding: 1rem;
    border: 1px solid var(--gray-4);
    border-radius: 10px;
    text-align: center;
    background-color: var(--gray-1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  #fusionOutput #fusionImage {
    min-width: 288px;
    height: 288px;
    /* margin-bottom: 1rem; */
    border-radius: 8px;
    border: 2px solid var(--primary);
  }

  .fusion-details {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .fusion-details div {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--gray-3);
    padding: 0.5rem 0;
  }

  .fusion-details div:last-child {
    border-bottom: none;
  }

  .fusion-details div span {
    font-weight: bold;
  }


  .fusion-card {
    background: var(--card-background-color);
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin: 2rem auto;
    max-width: 1000px;
  }
  
  .fusion-title {
    text-align: center;
    font-size: 1.5rem;
    margin-top: auto;
    margin-bottom: auto;
    color: var(--primary);
  }
  
  .fusion-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  
  .fusion-image {
    width: 288px;
    height: 288px;
    object-fit: contain;
    background-color: var(--pico-card-sectioning-background-color);
  }
  
  .fusion-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
  }
  
  .fusion-table th,
  .fusion-table td {
    padding: 0.75rem;
    text-align: center;
    border: 1px solid var(--card-border-color);
  }
  
  .fusion-table th {
    background: #398712 !important; 
    color: white !important; 
    font-weight: bold;
 }

  
  .fusion-table tbody tr:hover {
    background: var(--card-sectionning-background-color);
  }
  
  .sprite-info {
    background: var(--card-sectionning-background-color);
    padding: 1rem;
    border-radius: 0.5rem;
  }
  
  .sprite-info h3 {
    margin: 0 0 1rem 0;
    color: var(--primary);
  }
  
  .fusion-ids {
    font-size: 1rem;
    color: var(--muted-color);
    display: block;
    margin-top: 0.5rem;
  }
  
  @media (min-width: 768px) {
    .fusion-content {
      flex-direction: row;
      align-items: flex-start;
    }
    
    .fusion-image-container {
      flex: 0 0 288px;
      /* border: 1px solid gray; */
      border-radius: .5rem;
      /* padding: 1rem; */
    }
    
    .fusion-info {
      flex: 1;
      padding-left: 2rem;
    }
  }


  #typesElm {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
  }
  .typeImage {
    width: 96px;
    height: 32px;
    border-radius: 0.5rem;
  }

  /* Custom Styles for Pokemon Fusion Generator using Pico CSS */

/* Variables (Optional: Match Pico's or define your own) */
:root {
  --spacing-small: 0.5rem;
  --spacing-medium: 1rem;
  --spacing-large: 1.5rem;
}

/* Page Header */
.page-header {
  text-align: center;
  margin-bottom: var(--spacing-large);
}

/* Generator Form */
#generator h3 {
  margin-bottom: var(--spacing-medium);
  text-align: center;
}

/* Input fields styling (Pico handles most) */
#fusionForm input[list] {
  margin-bottom: var(--spacing-medium); /* Ensure spacing below inputs */
}

/* Button Grid */
.button-grid {
  margin-top: var(--spacing-medium);
  gap: var(--spacing-small); /* Add small gap between buttons */
}

/* Make buttons take equal width in the grid */
.button-grid button {
  width: 100%;
}

#resetButton {
    background-color: #C52F21 !important; 
    color: white !important;
}

#randomButton {
    background-color: #802E90 !important; /* Yellow */
    color: white !important;
}

#generateButton {
    background: #398712 !important; /* Green Gradient */
    color: white !important;
}


/* Fusion Output Card */
.fusion-card {
  margin-top: var(--spacing-large);
  padding: var(--spacing-medium);
  border: 1px solid var(--pico-card-border-color); /* Use Pico variable */
  border-radius: var(--pico-card-border-radius); /* Use Pico variable */
  background-color: var(--pico-card-background-color); /* Use Pico variable */
}

/* ========== Fusion Card Header ========== */
.fusion-card header hgroup {
  margin-bottom: var(--spacing-medium);
  text-align: center;
}

/* ========== Page Header h1 (Optimized for LCP) ========== */
.container.page-header h1 {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 auto;
  text-align: center;
  color: #222;
  display: block;
  visibility: visible;
  padding: 10px 0;
}

/* Mobile-specific adjustments to reduce layout shift */
@media (max-width: 768px) {
  .container.page-header h1 {
    font-size: 1.8rem; /* Slightly smaller for mobile to reduce LCP impact */
    line-height: 1.3;
    padding: 8px 0;
  }
}

/* ========== Page Header Paragraph ========== */
.container.page-header p {
  font-size: 1rem;
  margin-top: 5px;
  text-align: center;
  color: #666;
}

/* ========== Header Group Container ========== */
.container.page-header hgroup {
  margin-bottom: 10px;
  padding: 0;
  text-align: center;
  display: block;
}

/* ========== Fusion Title ========== */
.fusion-title {
  margin-bottom: var(--spacing-small);
}

/* Style for the Pokemon IDs */
.fusion-ids {
  font-size: 0.9em;
  color: var(--pico-muted-color);
  margin-left: var(--spacing-small);
  font-weight: normal;
}

/* Types container */
.fusion-types {
  margin-top: var(--spacing-small);
  /* Add styles for individual type badges here or via JS */
  /* Example: .type-fire { background-color: #F08030; color: white; padding: 2px 8px; border-radius: 4px; margin: 0 2px; } */
  min-height: 2em; /* Ensure space even if types aren't loaded yet */
}


/* Layout grid for image and details */
.fusion-content-grid {
  display: grid;
  grid-template-columns: 1fr; /* Stack by default */
  gap: var(--spacing-medium);
  align-items: center;
}

/* Image Container */
.fusion-image-container {
  text-align: center; /* Center image within its container */
}

/* Fusion Image Styling */
.fusion-image {
  display: inline-block; /* Allows text-align center to work */
  max-width: 150px;      /* Adjust size as needed */
  height: auto;          /* Maintain aspect ratio */
  margin-bottom: var(--spacing-medium);
  background-color: var(--pico-form-element-background-color); /* Slight background */
  border: 1px solid var(--pico-form-element-border-color); /* Subtle border */
  padding: var(--spacing-small);
  border-radius: var(--pico-border-radius);

  /* For sharp pixel art sprites */
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges; /* Firefox */
  image-rendering: crisp-edges;    /* Chrome, Edge, Opera */
}

/* Fusion Info section */
.fusion-info h4 {
  margin-bottom: var(--spacing-small);
  text-align: center;
}

/* Table styling (Pico handles most) */
.fusion-info table {
  margin-top: var(--spacing-small);
  width: 100%; /* Ensure table takes full width of its container */
}
.fusion-info th[scope="row"] {
  width: 30%; /* Give row headers a bit more fixed width */
}

/* Mobile-First Article Optimization */
#article {
  border: 1px solid var(--gray-3);
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: var(--pico-card-background-color);
  margin: 1rem 0;
  content-visibility: auto;
  contain-intrinsic-size: 1000px;
}

/* LCP Image Optimization */
#article img {
  width: 100%;
  height: auto;
  max-height: 50vh;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  border-radius: 0;
  border: none;
}

/* Text Content Styling */
#article h1,
#article h2,
#article h3 {
  font-size: clamp(1.25rem, 5vw, 1.5rem);
  line-height: 1.3;
  margin: 1rem 0;
  font-weight: 700;
  color: var(--primary);
}

#article p {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 1.25rem 0;
  color: var(--muted-color);
}

/* Font Loading Optimization */
@font-face {
  font-family: 'ArticleFont';
  src: local('system-ui'), 
       local('-apple-system'),
       local('Segoe UI');
  font-display: swap;
}

/* Layout Stability */
.article-container {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
}

/* Performance Optimizations */
@media (max-width: 768px) {
  /* Simplify mobile navigation to reduce render blocking */
  nav ul {
    contain: strict;
    will-change: transform;
  }
  
  /* Defer non-critical animations */
  .blog-post {
    transition: none;
  }
  
  /* Reduce paint complexity */
  .blog-posts-section, .card {
    box-shadow: none;
    border: 1px solid var(--gray-3);
  }
  
  /* Optimize fusion output for mobile */
  #fusionOutput {
    padding: 0.5rem;
    margin-top: 1rem;
  }
  
  #fusionImage {
    width: 100%;
    height: auto;
    max-height: 40vh;
  }
}

/* Footer */
footer {
  margin-top: var(--spacing-large);
  padding-bottom: var(--spacing-medium);
  text-align: center;
}

/* Responsive Adjustments */
@media (min-width: 768px) { /* Pico's default medium breakpoint */
  .fusion-content-grid {
      grid-template-columns: 1fr 1fr; /* Side-by-side on larger screens */
      align-items: start; /* Align items to the top */
  }

  .fusion-image-container {
     text-align: right; /* Align image towards the center split */
     padding-right: var(--spacing-medium);
  }

  .fusion-info {
      text-align: left; /* Align info text left */
      padding-left: var(--spacing-medium);
  }

   .fusion-info h4 {
      text-align: left;
  }

  .fusion-image {
    margin-bottom: 0; /* Remove bottom margin when side-by-side */
    width: 300px; /* Slightly larger image on desktop */
  }

   /* Adjust button grid for wider screens if desired */
  /* .button-grid { grid-template-columns: repeat(3, 1fr); } */
}