/* Global Styles */
body {
  margin: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

  /* --- Tiling and Transparency Background Logo--- */
  background-color: #FAF0E6;
  /*background-image: url("");*/
  background-repeat: repeat; /* This enables tiling */
  background-size: auto;    /* This prevents stretching and allows tiling */
  background-opacity: 1.0;             /* transparent background */
  /* ------------------------------------------- */

  color: #222;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Header and Navigation */
header {
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(6px);
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 1000;
}

nav {
  display: flex;                  /* logo + menu on same line */
  align-items: center;            /* vertical alignment */
  justify-content: space-between; /* logo left, menu right */
  padding: 0.5rem 2rem;
  flex-wrap: wrap;                /* allows wrapping on small screens */
}

nav .logo img {
  height: 50px;                   /* adjust as needed */
}

nav ul {
  display: flex;                   /* horizontal menu items */
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 2rem;
}

nav a {
  text-decoration: none;
  color: #333;                     /* default color for all links */
  font-weight: bold;
  transition: color 0.3s;
}

nav a:hover {
  color: #b22222;                  /* red on hover */
}

/* Main Content */
main {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  padding: 4rem 1rem;
  flex-direction: column;
}

.content {
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 12px;
  padding: 2rem;
  max-width: 1000px;
  width: 100%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin: 0 auto
}

.content h1 {
  text-align: center;
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 0;
}

.content h3 {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 300;
  margin-top: 0;
}

.content ul li {
  margin-bottom: 0.75rem; /* Adjust spacing under each list item*/
}

.content ul li:last-child {
  margin-bottom: 0; /* Remove the space under the last item*/
}


/* --- Video Thumbnail Styles --- */

.gallery-video-thumb {
  /* Match dimensions of image thumbnail */
  width: 225px;
  height: 175px;
  /* Key properties for the thumbnail image */
  background-size: cover; /* Ensures the poster image covers the element */
  background-position: center;
  background-repeat: no-repeat;
  
  border-radius: 6px;
  cursor: pointer;
  
  /* CRITICAL: Allows the play button to be positioned relative to the thumbnail */
  position: relative; 
  
  background-color: #333; 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Style for the Play Button Overlay (created using a pseudo-element) */
.gallery-video-thumb::after {
  content: '▶'; /* Unicode play button */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* CRITICAL: Centers the play button */
  color: white;
  font-size: 30px;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
  background-color: rgba(0, 0, 0, 0.4); 
  border-radius: 50%;
  padding: 5px 10px 5px 13px; 
  line-height: 1;
  transition: opacity 0.3s;
}

/* Hover effect */
.gallery-video-thumb:hover::after {
    opacity: 0.8;
}

/* --- Gallery Table Styles --- */
.gallery-table {
  width: 100%;
  border-collapse: collapse;
}
.gallery-table td {
  width: 25%;
  padding: 10px;
  text-align: center;
}
.gallery-thumb {
  width: 225px;
  height: 175px;
  object-fit: cover;
  cursor: pointer;
  border-radius: 6px;
}

/* --- Dropdown Styling --- */

/* 1. Set the container (Gallery link) to allow relative positioning */
.dropdown {
  position: relative; /* Position the drop-down content relative to this LI */
  display: inline-block;
}

/* 2. Style and hide the actual drop-down menu */
.dropdown-content {
  display: none; /* CRITICAL: Hides the menu by default */
  position: absolute;
  min-width: 160px;
  /* Position it slightly below the main nav bar */
  top: 100%; 
  right: 0;    /* Aligns the right edge of the dropdown with the parent */
  left: auto;  /* Explicitly remove the left alignment */
  
  /* Styling to make it look like a menu */
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 16px 0px rgba(0,0,0,0.2);
  padding: 0;
  margin: 0;
  border-radius: 0 0 5px 5px;
}

/* 3. Style the links inside the drop-down */
.dropdown-content li {
  /* This overrides the flex display from the main UL */
  display: block; 
  padding: 0;
  margin: 0;
}

.dropdown-content a {
  padding: 12px 16px;
  display: block; /* Makes the entire area clickable */
  text-align: left;
  white-space: nowrap; /* Prevents long links from wrapping */
}

/* 4. Show the drop-down on hover */
.dropdown:hover .dropdown-content {
  display: block; /* Shows the menu when hovering over the parent LI */
}

/* Optional: Remove the gap between the main nav links for the sub-menu */
.dropdown-content li:not(:last-child) {
    border-bottom: 1px solid #eee;
}

/* --- Image Between Main and Footer --- */
.main-image-container {
  /* Aligns the image container itself to the center of the viewport */
  display: flex;
  justify-content: center;
  /* Adds some vertical padding */
  padding: 2rem 1rem; 
}

.mid-section-image {
  /* Set the fixed width for the image */
  width: 900px;
  /* Ensures the image will scale down on smaller screens */
  max-width: 100%; 
  /* Maintains aspect ratio while filling the container (if the container was fixed) */
  height: auto; 
  /* Make the corners slightly rounded */
  border-radius: 8px;
  /* Add a shadow for depth */
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
  /* Ensures the image itself is centered within the flex container */
  display: block;
  background-color: white; 
}