/* style.css */

/* Apply to the whole page */
body {
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: 'Quattrocento Sans', sans-serif; /* Change font here */
  background-color: #fef8f9; /* Background color */
  color: #0012ff; /* Text color */
  text-align: center;
}

/* Default: top-aligned for non-home pages */
body.top-page {
  display: block;      /* normal flow ß*/
  height: auto;        /* do not stretch to viewport */
  margin: 0;
  padding: 0;
}

/* Home page: centered vertically */
body.home-page {
  display: flex;
  flex-direction: column;
  justify-content: center;  /* vertical center */
  align-items: center;      /* horizontal center */
  height: 100vh;            /* fill viewport height */
  margin: 0;
}

/* Title */
h1 {
  font-size: 3rem;
  margin: 0;
}

/* Subtitle (emoji or tagline) */
.subtitle {
  margin: 0.5rem 0;
  font-size: 2rem;
}

/* Highlighted text */
.highlight {
  margin: 1.5rem 0;
  font-size: 4rem;
}

/* Default horizontal layout */
nav {
  display: flex;
  justify-content: center; /* center links */
  align-items: center;
}

nav a {
  margin: 0 1rem;
  font-size: 1.2rem;
  text-decoration: none;
  color: inherit; /* Matches text color */
}

nav a:hover {
  text-decoration: underline;
}

/* Small screens: stack vertically */
@media (max-width: 768px) {
  nav {
    flex-direction: column; /* stack links */
    gap: 10px;              /* spacing between links */
  }

  nav a {
    margin: 0;              /* remove horizontal margin */
  }
}

img {
  max-width: 50%;   /* image won’t be wider than 80% of the page */
  height: auto;     /* keeps the correct proportions */
  border-radius: 10px; /* optional, makes corners rounded */
  display: block;   /* ensures spacing works nicely */
  margin: 20px auto; /* centers image and adds top/bottom space */
}

section#about {
  text-align: left;  /* aligns all text in the section to the left */
  max-width: 900px;  /* optional: keeps text from stretching too wide */
  margin: 0 auto;    /* centers the section on the page */
  padding: 20px;     /* adds space around the section */
}

section#about p {
  margin-bottom: 20px; /* space between paragraphs */
  line-height: 1.6;    /* makes lines within a paragraph easier to read */
  font-size: 18px;      /* optional: larger, more readable text */
}

.about-text {
  color: #000000;  /* black */
  text-align: left;
  line-height: 1.6; /* readability */
}


.top-nav {
  display: flex;
  justify-content: space-between; /* pushes links to far left and right */
  padding: 20px;
}

.top-nav a {
  text-decoration: none;  /* removes underline */
  color: #2c2c2c;         /* simple text color */
  font-weight: bold;
  font-size: 18px;
  padding: 8px 16px;      /* optional: adds some clickable space */
}

.top-nav a:hover {
  text-decoration: underline; /* subtle hover effect */
}


.reel-link {
  color: red;             /* changes text color */
  /* text-decoration: none;  removes underline */
  font-weight: bold;      /* optional: makes it stand out */
  font-size: 20px;        /* optional: slightly larger text */
}

.reel-link:hover {
  opacity: 0.8;         /* subtle hover effect (optional) */
}

/* --- Film Projects Container --- */
.projects-container {
  display: flex;
  gap: 40px;            /* space between projects */
  justify-content: center;
  flex-wrap: wrap;       /* stack on smaller screens */
  margin-top: 20px;
}

/* --- Individual Project --- */
.project {
  text-align: center;
  max-width: 45%;      /* slightly wider project container */
  flex: 1 1 300px;            /* allows resizing nicely */

}

/* --- Project Image --- */
.project-image {
  width: 100%;                /* responsive: take available space */
  max-width: 500px;           /* don’t grow beyond this on desktop */
  aspect-ratio: 5 / 4;        /* keeps proportion (instead of fixed height) */
  overflow: hidden;
  border-radius: 8px;
  margin: 0 auto 10px auto;
}

.project-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* keeps entire image visible */
  display: block;
  background-color: #f0f0f0; /* optional: adds subtle background if aspect ratio leaves empty space */
}

/* --- Responsive Tweaks --- */
@media (max-width: 768px) {
  .project {
    max-width: 100%;          /* full width on tablets/phones */
  }

  .project-image {
    max-width: 100%;          /* image scales to screen width */
    aspect-ratio: auto;       /* let image dictate height */
  }
}

.projects-page {
  display: flex;
  flex-direction: row;
  gap: 20px;
  padding: 20px;
  align-items: flex-start; /* ensures sidebar stays at top */
}

/* --- Albums Project page ----- */

.sidebar {
  flex: 0 0 200px;   /* or whatever width you want */
  display: flex;
  flex-direction: column;
  text-align: left;
}

.sidebar h2 {
  font-size: 1.5rem;
  margin-bottom: 15px;
  font-weight: normal;   /* Remove bold */
  color: #1818e8;        /* Black title */
  align-self: flex-start;
}

.sidebar ul {
  list-style-type: none;
  padding: 0;
}

.sidebar li {
  margin: 10px 0; 
  color: #343434;
}

.sidebar a {
  text-decoration: none;
  color: #343434;        /* Blue project names */
  font-weight: normal;    /* Remove bold */
  display: block;
  padding: 8px;
  border-radius: 4px;
  transition: none;
}

.sidebar a.active,
.sidebar a:hover {
  background-color: transparent; /* Optional hover effect */
}

.project-detail {
  width: 75%;
  text-align: left;
  display: none; 
  color: #000000;
}

.project-detail.active {
  display: block;
}

.cover-image {
  display: block;
  width: 400px;       /* fixed width */
  max-width: 100%;    /* scales down on small screens */
  height: auto;
  margin: 0 0 15px 0;
}

.project-description {
  text-align: left;     /* align text left */
  margin-bottom: 20px;  /* space below description */
}

.project-description p {
  margin-bottom: 15px;  /* space between paragraphs */
  line-height: 1.5;     /* readability */
}

.track-listing {
  margin-top: 20px;
  text-align: left;
}

.track-listing h2 {
  font-style: italic;     /* Italic */
  font-weight: normal;    /* Not bold */
  color: #000000;         /* Black */
  margin-bottom: 10px;    /* Optional spacing below the title */
}

.track-listing ol {
  padding-left: 20px;
}

.track-listing ol li {
  margin-bottom: 10px; /* Adjust spacing as needed */
}

.additional-images {
  display: flex;       /* put images side by side */
  gap: 10px;           /* space between images */
  justify-content: center; /* center images horizontally */
  margin-top: 20px;
}

.additional-images img {
  width: 48%;          /* adjust so both fit on one line */
  height: auto;        /* keep aspect ratio */
  display: block;
}

@media (max-width: 768px) {
  .project-description {
    padding: 0 15px;
    font-size: 0.95rem;
  }

  .additional-images {
    align-items: center;
    gap: 20px;
  }

  .additional-images img {
    width: 100%;    /* increase size to nearly full width on small screens */
    height: auto;
  }
}


a[href^="mailto"] {
  color: #0012ff;           /* make the email link blue */
  text-decoration: none; /* remove underline by default */
  font-weight: bold;     /* keep it bold */
}

a[href^="mailto"]:hover {
  text-decoration: underline; /* underline only on hover */
}

* {
  font-family: 'Quattrocento Sans', sans-serif !important;
}

.bandcamp-link a {
  color: red;             /* changes text color */
  text-decoration: underline;
  font-weight: bold;      /* optional: makes it stand out */
}

.bandcamp-link a:hover {
  opacity: 0.8;         /* subtle hover effect (optional) */
}


/* --- Sidebar (desktop) --- */
.sidebar {
  width: 220px;
  background: none;   /* removed background shading */
  padding: 20px;
}

/* --- Toggle button (hidden on desktop) --- */
.menu-toggle {
  display: none;
  font-size: 28px;
  cursor: pointer;
  background: none;
  border: none;
  color: #000;   /* black icon */
  margin: 10px;
  z-index: 1001; /* stays above content */
}

/* Content area */
.main-content {
  flex: 1;
  padding: 20px;
}

/* --- Responsive for small screens --- */
@media (max-width: 768px) {
  /* Hide sidebar by default */
  .sidebar {
    display: none;
    position: absolute;
    top: 50px;   /* below the toggle button */
    left: 0;
    width: 100%;
    background: white;   /* clean background so text is visible */
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    z-index: 1000;
  }

  /* Sidebar when active */
  .sidebar.active {
    display: block;
    animation: slideDown 0.3s ease;
  }

  /* Show hamburger toggle */
  .menu-toggle {
    display: block;
    position: absolute;
    top: 10px;
    left: 10px;
  }
}

/* --- Slide down animation --- */
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Masonry photo gallery */
/* Default: text spans full width */
.photo-intro {
  margin: 0 0 20px 0;  /* centers content */
}

/* Small screens */
@media (max-width: 768px) {
  .photo-intro {
    max-width: 70%;    
    text-align: center;   /* center text */
    margin: 0 auto 15px; /* slightly smaller spacing on mobile */
  }
}

.masonry {
  column-count: 3;        /* Number of columns on large screens */
  column-gap: 4px;        /* Gap between columns */
  width: 95%;
  margin: 0 auto;
}

.masonry img {
  width: 100%;            /* Fill the column width */
  margin-bottom: 4px;     /* Space between images vertically */
  display: block;
  border-radius: 5px;
  object-fit: cover;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  .masonry {
    column-count: 3;
  }
}

@media (max-width: 800px) {
  .masonry {
    column-count: 2;
  }
}

@media (max-width: 500px) {
  .masonry {
    column-count: 1;
  }
}

.masonry img:hover {
  transform: scale(1.15); /* subtle zoom on hover */
}

a {
  color: inherit;          /* makes link use the page’s text color */
}