/**
 * Copyright (C) 2025 Alexandr Savca <alexandr.savca89@gmail.com>
 *
 * This is free and unencumbered software released into the public domain.
 *
 * Anyone is free to copy, modify, publish, use, compile, sell, or distribute
 * this software, either in source code form or as a compiled binary, for any
 * purpose, commercial or non-commercial, and by any means.
 *
 * The software is provided "as is", without warranty of any kind, express or
 * implied, including but not limited to the warranties of merchantability,
 * fitness for a particular purpose and noninfringement.  In no event shall the
 * authors be liable for any claim, damages or other liability, whether in an
 * action of contract, tort or otherwise, arising from, out of or in connection
 * with the software or the use or other dealings in the software.
 *
 * For more information, please refer to <http://unlicense.org/>
 */

/* --- Base Styles (Light Mode) --- */

/* Body styles: main text settings and layout for desktops */
body {
  /* Reserve space on the left for the index tree on desktops */
  margin-left: 250px;
  padding: 1.5em;
  /* Use a serif font for improved readability in long text */
  font-family: Georgia, "Times New Roman", serif;
  background: #fff;  /* Light background */
  color: #333;  /* Dark text for readability */
  line-height: 1.7;  /* Increased line height for comfortable text flow */
}

/* Fixed left-side index (desktop navigation) */
#index {
  position: fixed;  /* Fixed position on the viewport */
  top: 0;
  left: 0;
  width: 240px;
  height: 100%;  /* Occupies full viewport height */
  margin-top: 0;
  margin-left: 0;
  overflow-y: auto;  /* Scroll if index content exceeds viewport height */
  background: #f5f5f5;  /* Light grey background */
  border-right: 1px solid #ccc;  /* Subtle right border for separation */
  padding: 1em;
  box-sizing: border-box; /* Ensure padding is included in width/height */
}

/* Styling for the unordered list within the index */
#index ul {
  list-style: none;  /* Remove default bullet points */
  padding-left: 2em;  /* Indent for nested tree levels */
  margin: 0;
}
#index li::marker {
  content: "";  /* i said, really remove default bullet points */
}

/* List item spacing within the index */
#index li {
  margin: 0.5em 0;
}

/* Link styles within the index */
#index a {
  color: #268bd2;  /* A consistent blue color */
  text-decoration: none;
  font-weight: bold;
}

/* Hover state for links in the index */
#index a:hover {
  text-decoration: underline;
}

#index a.active {
  background-color: #333;  /* A slightly darker background */
  color: #eee;  /* Light text color */
  padding: 0.2em 0.5em;  /* Add some padding for better visual separation */
  border-radius: 5px;  /* Optional: add rounded corners */
}

/* Main content area */
main {
  /* Limit line length using the 'ch' unit for optimal readability */
  max-width: 60ch;
  margin: 0 auto;  /* Center content horizontally */
  padding: 3em 2em;  /* Horizontal padding to avoid flush edges */
  margin-right: 1em;  /* Ensure consistent spacing on the right */
  margin-left: 1em;  /* Ensure consistent spacing on the left */
}

/* Paragraph styling: extra spacing for better text separation */
p {
  margin-bottom: 1.5em;  /* Add extra space between paragraphs */
}

/* Horizontal rule styling for visual break between sections */
hr {
  border: 0;
  height: 1px;
  background: #ccc;
  margin: 2em 0;  /* Vertical spacing around the hr */
}

/* --- Heading Hierarchy --- */
/* Clear differentiation for h1-h4 using size, weight, and borders */

/* h1: Main title */
h1 {
  font-size: 2.5em;
  font-weight: bold;
  letter-spacing: 0.05em;
  color: #2a2a2a;  /* Darker color than body text */
  border-bottom: 2px solid #ccc;  /* Underline for emphasis */
  padding-bottom: 0.3em;  /* Space between text and border */
  margin: 0.75em 0 0.75em;
  line-height: 1.2;
}

/* h2: Secondary heading */
h2 {
  font-size: 2em;
  font-weight: bold;
  letter-spacing: 0.04em;
  color: #333;
  border-bottom: 1px solid #ddd;  /* Subtle underline */
  padding-bottom: 0.3em;
  margin: 0.75em 0 0.6em;
  line-height: 1.2;
}

/* h3: Tertiary heading */
h3 {
  font-size: 1.75em;
  font-weight: bold;
  letter-spacing: 0.03em;
  color: #444;
  margin: 0.75em 0 0.6em;
  line-height: 1.3;
}

/* h4: Quaternary heading */
h4 {
  font-size: 1.5em;
  font-weight: normal;  /* Less emphasis */
  letter-spacing: 0.02em;
  color: #555;
  margin: 0.75em 0 0.6em;
  line-height: 1.3;
}

/* h5: Quaternary heading */
h5 {
  font-size: 1.2em;
  font-weight: normal;  /* Less emphasis */
  letter-spacing: 0.02em;
  color: #555;
  margin: 0.75em 0 0.6em;
  line-height: 1.3;
}

/*
 * The following block (commented out) was an alternative for equal
 * top margins and inheriting color, but is not used here:
 *
 * h1, h2, h3, h4, h5 {
 *   margin-top: 1em;
 *   color: inherit;
 * }
 */

/* --- Code & Preformatted Text --- */
/* Styling for inline code and block code elements */
pre, code {
  font-family: "Courier New", monospace;  /* Monospace font for code clarity */
  background: #eee;  /* Light grey background for code blocks */
  border-radius: 4px;  /* Subtle rounded corners */
  padding: 0.3em;
}

/* Override padding for <code> nested inside <pre> to prevent double padding */
pre code {
  display: block;  /* Makes nested code fill entire block */
  padding: 0;  /* Remove additional padding for consistency */
}

/* --- Link Styling --- */
a {
  color: #268bd2;
  text-decoration: underline;
}

/* --- Table Styling --- */
table {
    width: 100%;  /* Make the table take up the full width of its container */
    border-collapse: collapse;  /* Collapse borders to avoid double lines */
    margin-bottom: 1.5em;  /* Add some space below the table */
}

th, td {
    border: 1px solid #ccc;  /* Add a light grey border to cells */
    padding: 0.6em;  /* Add some padding inside cells for better spacing */
    text-align: left;  /* Align text to the left for readability */
}

th {
    background-color: #f0f0f0;  /* Light grey background for header row */
    font-weight: bold;  /* Make header text bold */
}

/* Optional: Add alternating row colors for better readability of long tables */
/*
tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}
*/

/* --- Dark Mode Overrides --- */
/* Adjust colors for when the user prefers a dark color scheme */
@media (prefers-color-scheme: dark) {
  body {
    background: #1a1a1a;  /* Dark background */
    color: #ccc;  /* Light text color */
    margin-left: 250px;  /* Maintain layout offset for index */
  }

  /* Update index navigation for dark mode */
  #index {
    background: #222;
    border-right: 1px solid #444;
  }

  /* Links adopt a light blue tone in dark mode */
  #index a,
  a {
    color: #4cbaff;
  }

  /* Update code block colors for dark mode */
  pre,
  code {
    background: #333;
    color: #ddd;
  }

  /* Dark mode headings: use uniform color and adjusted border colors
   * for subtle separation */
  h1 {
    font-size: 2.5em;
    font-weight: bold;
    letter-spacing: 0.05em;
    color: #ccc;  /* Use same as body text for consistency */
    border-bottom: 2px solid #444;
    padding-bottom: 0.3em;
    margin: 0.75em 0;
    line-height: 1.2;
  }

  h2 {
    font-size: 2em;
    font-weight: bold;
    letter-spacing: 0.04em;
    color: #ccc;
    border-bottom: 1px solid #444;
    padding-bottom: 0.3em;
    margin: 0.75em 0;
    line-height: 1.2;
  }

  h3 {
    font-size: 1.75em;
    font-weight: bold;
    letter-spacing: 0.03em;
    color: #ccc;
    margin: 0.75em 0;
    line-height: 1.3;
  }

  h4 {
    font-size: 1.5em;
    font-weight: normal;
    letter-spacing: 0.02em;
    color: #ccc;
    margin: 0.75em 0;
    line-height: 1.3;
  }

  h5 {
    font-size: 1.3em;
    font-weight: normal;
    letter-spacing: 0.02em;
    color: #ccc;
    margin: 0.75em 0;
    line-height: 1.3;
  }

  table {
      border-color: #555;
  }
  th, td {
      border-color: #555;
      color: #ccc;
  }
  th {
      background-color: #333;
      color: #eee;
  }
  /* Optional: Dark mode alternating row colors */
  /*
  tbody tr:nth-child(even) {
      background-color: #444;
  }
  */
}

/* --- Mobile Adaptation --- */
/* Adjust layout for screens 768px or narrower */
@media screen and (max-width: 768px) {
  /* Reset body margins to use full screen width */
  body {
    margin: 0;
    padding: 1.5em;  /* Slightly increase padding on mobile */
    font-size: 1.1em;  /* Slightly larger font for improved mobile readability */
  }

  /* Reposition the index navigation: full-width block above the main content */
  #index {
    position: relative;
    width: 100%;  /* Full width of mobile screen */
    height: auto;
    margin: 0 0 1em 0;  /* Space below the index block */
    padding: 0.75em;
    border-right: none;
    border-bottom: 1px solid #ccc;  /* Underline to separate from main content */
    box-sizing: border-box;
  }

 /* Increase the font size for block-level code (multiline code),
     while leaving inline code unaffected */
  pre,
  code {
    font-size: 1.2em;  /* Increase by 20% for better readability */
    line-height: 1.4;  /* Slightly increased line height for clarity */
  }
  main pre code {
    font-size: 1.2em !important;
    line-height: 1.4 !important;
  }
  main code {
    font-size: 1.2em !important;
  }

  /* (Optional) Uncomment the following block if you want a horizontal
   * list layout for navigation */
  /*
  #index ul {
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  */

  #index li {
    margin: 1em 0;
  }

  /* Allow the main content to fill available screen width */
  main {
    max-width: 100%;
    margin: 0;
    padding: 0 1em;
  }
}

/* Zeppe-Lin Specific Styles */

  /* Hero banner container styling */
  .hero-index {
    text-align: center;
    margin: 1em 0;
    padding: 3em 2em;
    background: #f0f0f0;  /* Light-mode background */
    border-radius: 10px;
  }
  .hero-index img {
    width: 280px;
    height: auto;
    border-radius: 10px;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
    max-width: 100%;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);  /* Adjust values as needed */
    transition: transform 0.2s ease-in-out;  /* Example: smooth scale on hover */
    filter: sepia(10%);  /* Add a slight sepia effect */
  }
  .hero-index img:hover {
    opacity: 0.8;  /* Reduce opacity slightly on hover */
    /*border: 1px solid #268bd2;*/
  }
  .hero-index .separator,
  .footer-separator {
    height: 1px;
    background-color: #ccc;
    margin: 0.5em auto;
    width: 50%;
  }

  /* Footer container styling */
  .footer {
    text-align: center;
    padding: 1em;
    background-color: #f0f0f0;  /* Light background for the footer */
    color: #333; /* Dark text color */
    font-size: 0.8em;
    border-top: 0px solid #ccc;  /* Optional: Add a top border for separation */
    border-radius: 10px;
  }

.release-collage {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;  /* Slightly increased gap for better separation */
  justify-content: center;
  padding: 20px;  /* Add some padding around the entire collage */
}

.release-item {
  text-align: center;
  background-color: #f9f9f9;  /* Light background for the items, similar to hero */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.08);  /* Softer shadow, adjust alpha as needed */
  padding: 15px;  /* Increased padding for more visual space */
  border-radius: 10px;  /* Consistent rounded corners with hero */
  transition: transform 0.2s ease-in-out;  /* Add transition for hover effect on the item */
}

.release-item:hover {
  transform: translateY(-5px);  /* Slight vertical lift on hover */
  box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.1);  /* Slightly stronger shadow on hover */
}

.release-item img {
  border: 1px solid #ddd;
  margin-bottom: 8px;
  border-radius: 8px;
  width: 150px;  /* Set a fixed width */
  height: 150px;  /* Set a fixed height */
  display: block;
  object-fit: cover;  /* Scale the image to fill the container, potentially cropping */
}

.release-item p {
  font-size: 0.95em;  /* Slightly larger font size */
  color: #444;  /* Darker text color */
  margin-top: 5px;
  margin-bottom: 0;
}

@media (prefers-color-scheme: dark) {
  .hero-index {
    background: #2a2a2a;  /* Dark-mode background */
    color: #cccccc;
  }
  .hero-index img {
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);  /* Slightly different shadow for dark background */
  }
  .hero-index h1 {
    color: #cccccc;
  }
  .hero-index p {
    color: #cccccc;  /* Or #333 in light mode */
    font-size: 1.0em;  /* Reduce the font size slightly */
    font-weight: normal;  /* or lighter? */
  }
  .hero-index hr {
    background-color: #555;  /* Adjust color for dark mode */
  }
  .hero-index .separator,
  .footer-separator {
    background-color: #555;
  }
  .footer {
    background-color: #2a2a2a;  /* Dark background for the footer */
    color: #cccccc;  /* Light text color */
    border-top: 0px solid #555;  /* Optional: Dark top border */
  }
  .release-item {
    background-color: #333;  /* Dark background for items in dark mode */
    box-shadow: 2px 2px 5px rgba(255, 255, 255, 0.05);  /* Adjust shadow for dark mode */
  }
  .release-item img {
    border: 1px solid #555;  /* Darker border for images in dark mode */
  }
  .release-item p {
    color: #ccc;  /* Light text color in dark mode */
  }
}

/* End of file. */