/* Header Styles */
.site-header {
    background-color: #f0f0f0; /* Simple background for header */
    padding: 0.5rem 0; /* Top/bottom padding */
    border-bottom: 1px solid #ddd;
  }
  
  /* Use the same container logic as main maybe? Or define separately */
  .header-container {
    max-width: 1600px; /* Match max-width used in main */
    margin: 0 auto; /* Center container */
    padding: 0 1rem; /* Padding inside container */
  
    display: flex; /* Arrange title and search side-by-side */
    justify-content: space-between; /* Push title left, search right */
    align-items: center; /* Vertically align items */
    flex-wrap: wrap; /* Allow search to wrap below title on small screens */
    gap: 1rem; /* Add gap if they wrap */
  }

.site-title {
    /* Increase font size significantly to act as logo */
    font-size: 2.2em; /* <--- ADJUSTED (was 1.5em) */
    font-weight: bold;
    text-decoration: none;
    color: #333; 
    margin: 0; 
    white-space: nowrap;
    line-height: 1; /* Adjust line height for larger font */
  }
  
/* Add or modify CSS for the new container */
.search-container {
  /* Maybe set a min-width or let Pagefind UI handle size */
  min-width: 250px; 
  /* Add other flex properties if needed */
}

/* Ensure Pagefind's own styles load */
/* Remove old .search-form related styles */
/* .search-form { ... }
.search-form input[type="search"] { ... }
.search-form button[type="submit"] { ... } 
*/
  
  /* Adjust dark theme for header */
  @media (prefers-color-scheme: dark) {
    .site-header {
      background-color: #1f1f1f; 
      border-bottom-color: #444;
    }
    .site-title {
      /* Ensure dark mode title color overrides default */
      color: #eee; 
    }
    .search-form input[type="search"] {
      background-color: #333;
      border-color: #555;
      color: #eee;
    }
     .search-form button[type="submit"] {
      background-color: #444;
      border-color: #555;
      color: #eee;
    }
    .search-form button[type="submit"]:hover {
      background-color: #555;
    }
  }

/* Tags Section Styles */
.tags-section {
    margin-top: 1.5rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #ddd; 
  }
  
  .tags-section h2 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.2em;
  }
  
  .tag-list {
    display: flex;
    flex-wrap: wrap; /* Allow tags to wrap to next line */
    gap: 0.5rem; /* Spacing between tags */
  }
  
  .tag-box {
    display: inline-block;
    background-color: #e0e0e0; /* Light grey background */
    color: #333;
    padding: 0.4em 0.8em;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.9em;
    transition: background-color 0.2s ease;
  }
  
  .tag-box:hover {
    background-color: #ccc;
  }
  
  .tag-box--more {
    background-color: transparent;
    color: #007bff; /* Or your link color */
    font-weight: bold;
  }
  .tag-box--more:hover {
     background-color: transparent;
     text-decoration: underline;
  }
  
  /* Adjust dark theme for tags */
  @media (prefers-color-scheme: dark) {
    .tags-section {
      border-bottom-color: #444;
    }
    .tag-box {
      background-color: #444;
      color: #eee;
    }
     .tag-box:hover {
      background-color: #555;
    }
    .tag-box--more {
      color: #6bbdff; /* Lighter blue for dark mode */
       background-color: transparent;
    }
     .tag-box--more:hover {
      background-color: transparent;
    }
  }
  
/* Body Styles */ 
body {
    font-family: sans-serif;
    margin: 0; /* Remove default body margin */
    background-color: #fff; /* Start basic theme - light for now */
    color: #111;
  }
  
  /* Add a main container for width control */
  main {
    max-width: 1600px; /* Limit max width of content area */
    margin: 2em auto; /* Center container with top/bottom margin */
    padding: 0 1rem; /* Padding inside container */
  }
  
  .video-grid {
    display: grid;
    gap: 1.5rem; /* Slightly increase gap */
    
    /* Default: 1 column mobile */
    /* Use auto-fit and a larger minmax for better responsiveness */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
  
    /* Remove fixed column counts via media query for now, let auto-fit handle it */
    /* @media (min-width: 600px) { ... } */
    /* @media (min-width: 1024px) { ... } */
  
    /* Remove justify-content unless needed for specific alignment later */
  }
  
  .video-item {
    border: 1px solid #ddd; /* Lighter border */
    /* Remove padding, let content define it */
    /* padding: 0.5rem; */ 
    background-color: #f9f9f9; /* Light card background */
    border-radius: 4px; /* Slightly rounded corners */
    overflow: hidden; /* Ensure image corners are clipped */
  }
  
  .video-item a {
    text-decoration: none;
    color: inherit;
    display: block; 
  }
  
  .thumbnail-container {
    position: relative; 
    aspect-ratio: 16 / 9; 
    background-color: #eee; 
    /* Remove margin-bottom, handle spacing with padding/gap */
    /* margin-bottom: 0.5rem; */ 
    display: block; /* Ensure it takes space */
  }
  
  .thumbnail-container img,
  .thumbnail-container img.img-preview {
    /* Styles mostly okay, ensure display block and absolute */
    display: block;
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    transition: opacity 0.3s ease-in-out;
    opacity: 0; 
    z-index: 5; 
  }

  /* Ensure static thumb is initially visible and below */
.thumbnail-container img.static-thumb {
    /* Base styles likely already cover display, position, size, object-fit */
    opacity: 1; 
    z-index: 1; 
 }
  
  .video-id-title {
    font-weight: bold;
    text-align: left; /* Align left for better readability below thumb */
    margin: 0;
    font-size: 0.9em;
    padding: 0.5rem 0.75rem; /* Add padding around the title */
    white-space: nowrap; /* Prevent wrapping for short IDs */
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .video-player-container {
    position: relative; /* Needed for absolute positioned iframe */
    padding-top: 56.25%; /* 16:9 Aspect Ratio (9 / 16 = 0.5625) */
    height: 0; /* Collapse the div height */
    overflow: hidden; /* Hide anything outside */
    background-color: #000; /* Black background while loading/if error */
    margin-bottom: 1.5em; /* Space below player */
  }

/* Pagination Styles */
.pagination-nav {
  margin-top: 2rem;  /* Add space above pagination */
  margin-bottom: 2rem; /* Add space below pagination */
  text-align: center; /* Center the list */
}
.pagination-list {
  list-style: none; /* Remove default list bullets */
  padding: 0;
  margin: 0;
  display: inline-flex; /* Align items horizontally */
  gap: 0.5rem; /* Space between links */
}
.pagination-list li span, 
.pagination-list li a {
  display: block;
  padding: 0.5em 1em; /* Padding inside links */
  border: 1px solid #ccc;
  text-decoration: none;
  border-radius: 4px;
  background-color: #f0f0f0; /* Light background */
  color: #333;
}
/* Hover effect for clickable links */
.pagination-list li a:hover {
  background-color: #e0e0e0;
}
/* Style for the current page link */
.pagination-list li a[aria-current="page"] {
  background-color: #333;
  color: #fff;
  border-color: #333;
  font-weight: bold;
  cursor: default; /* Indicate it's not clickable */
}
/* Style for disabled Previous/Next links */
.pagination-list li.disabled span {
  color: #aaa;
  border-color: #eee;
  background-color: #f9f9f9;
  cursor: default;
}

/* Dark theme adjustments for pagination */
 @media (prefers-color-scheme: dark) {
  .pagination-list li span, 
  .pagination-list li a {
    border-color: #555;
    background-color: #333;
    color: #eee;
  }
   .pagination-list li a:hover {
    background-color: #444;
  }
   .pagination-list li a[aria-current="page"] {
    background-color: #eee;
    color: #111;
    border-color: #eee;
  }
   .pagination-list li.disabled span {
    color: #777;
    border-color: #333;
    background-color: #222;
  }
 }

  /* Basic dark theme variables (can refine later) */
  @media (prefers-color-scheme: dark) {
    body {
      background-color: #121212;
      color: #eee;
    }
    .video-item {
      background-color: #222;
      border-color: #444;
    }
    .thumbnail-container {
      background-color: #333;
    }
  }

/* Action Buttons Styles */
.video-actions {
  /* Remove top border/padding as it's no longer at bottom */
  /* border-top: 1px solid #ddd; */ 
  /* padding-top: 1rem; */ 

  margin-top: 0.5rem; /* Adjust spacing AFTER player */
  margin-bottom: 1.5rem; /* Adjust spacing BEFORE metadata */
  display: flex; 
  align-items: center;
  justify-content: flex-end; /* <<< Align button(s) to the right */
  gap: 1rem; 
}

.action-button {
  padding: 0.6em 1.2em;
  font-size: 0.9em;
  cursor: pointer;
  border-radius: 4px;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  color: #333;
}
.action-button:hover {
  background-color: #e0e0e0;
}
.action-button:disabled {
  cursor: default;
  opacity: 0.7;
}

.feedback-message {
  font-size: 0.9em;
  color: #555;
}

/* Metadata Section Styles */
.video-metadata {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #ddd;
  font-size: 0.9em;
  line-height: 1.6;
}

.video-metadata dl {
  margin: 0;
}

.video-metadata dt {
  font-weight: bold;
  color: #555;
  float: left; /* Float labels left */
  width: 120px; /* Fixed width for labels */
  clear: left; /* Ensure each dt starts on new line */
  margin-right: 1em; /* Space between label and data */
  margin-bottom: 0.6em; /* Space between rows */
  text-align: right; /* Align label text right */
}

.video-metadata dd {
  margin-left: 130px; /* Start data after label width + margin-right */
  margin-bottom: 0.6em; /* Space between rows */
  word-wrap: break-word; /* Wrap long URLs/data */
}

/* Ensure long links break nicely */
.video-metadata dd a {
   word-break: break-all; 
   color: #007bff; /* Example link color */
}
 .video-metadata dd a:hover {
   text-decoration: underline;
 }

/* Style the container for tags */
.tag-list-inline {
  /* Allow tag boxes to sit inline and wrap */
}
.tag-list-inline .tag-box {
  /* Reuse existing tag-box style */
  margin-right: 0.4em; /* Adjust spacing */
  margin-bottom: 0.4em; /* Add bottom margin for wrapping */
  display: inline-block; /* Make sure they are inline */
}


/* Dark theme adjustments */
@media (prefers-color-scheme: dark) {
  .video-metadata {
    border-top-color: #444;
  }
  .video-metadata dt {
    color: #aaa;
  }
   .video-metadata dd a {
     color: #6bbdff; 
   }
  /* tag-box dark theme already defined elsewhere */
}

/* Video Page Title */
.video-main-title {
  font-size: 2em; /* Adjust size as needed */
  margin-top: 0;
  margin-bottom: 0.75em;
  line-height: 1.2;
  word-break: break-all; /* Break long IDs if needed */
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
  .video-actions {
    border-top-color: #444;
  }
  .action-button {
     border-color: #555;
     background-color: #444;
     color: #eee;
  }
  .action-button:hover {
    background-color: #555;
  }
  .feedback-message {
     color: #aaa;
  }
}