/*
 * Global stylesheet for the updated Movie Review Cavalcade website.
 *
 * The design uses a dark theme with purple and orange accents to
 * reflect the cinematic hero image. Typography is kept simple and
 * modern using system fonts. Styles aim to be responsive and
 * accessible, following best‑practice guidance from UX experts and
 * accessibility guidelines. For example, contrast ratios are kept
 * above 4.5:1 for regular text per WCAG recommendations【882910912377359†L39-L118】.
 */

/* Reset some default margins and paddings */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Set a consistent base font size and adjust scroll padding so that
 * anchor navigation does not hide content behind the sticky navbar.
 * A smaller base font size reduces the perceived zoom.
 */
html {
  /* Slightly smaller base font size to reduce perceived zoom. Using clamp
     ensures the size remains legible on very large and small screens. */
  font-size: 14px;
  /* Provide additional scroll padding so anchor links don't hide content
     beneath the sticky navigation bar. */
  scroll-padding-top: 5rem;
}

body {
  /* Use a slightly quirky sans serif stack for a unique feel while
     remaining readable and professional. */
  font-family: 'Trebuchet MS', 'Gill Sans MT', Calibri, 'DejaVu Sans', sans-serif;
  line-height: 1.6;
  /* Dark backdrop with a hint of deep blue for sophistication and a quirky twist */
  background-color: #0f1323;
  color: #F5F5F5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Navigation bar */
nav {
  /* Apply a subtle gradient across the nav bar for a distinctive look */
  background: linear-gradient(90deg, #1d203a 0%, #2a2f4f 100%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Reduce horizontal padding further so the logo sits even closer to
     the left edge without being completely flush; the first value is
     vertical padding and the second is horizontal padding. */
  /* Increase horizontal padding so there is more space between the left
     edge of the nav bar and its contents. This helps move the logo
     further into the frame rather than close to the edge. */
  /* Provide minimal horizontal padding so the logo sits closer to the left
     edge of the navigation bar without being completely flush. The first
     value sets vertical padding and the second sets horizontal padding. */
  padding: 1rem 1rem;
  position: sticky;
  top: 0;
  z-index: 100;
  /* No border radius on nav bar for crisp edges */
}

nav .logo {
  /* Display flex so that the logo image can be vertically centered */
  display: flex;
  align-items: center;
  /* Remove text styling since we'll use an image instead */
  font-size: 0;
  font-weight: normal;
  color: inherit;
  text-decoration: none;
  /* Keep the logo aligned toward the left. A small margin prevents it
     from being flush against the very edge of the nav bar, but avoids
     pushing it toward the center. */
  margin-left: 0;
}

/* Constrain the logo image height so it fits nicely in the navbar */
nav .logo img {
  /* Increase the displayed height of the logo for better visibility */
  height: 55px;
  width: auto;
  /* Ensure the image doesn't shrink below its intrinsic height */
  display: block;
}

nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

nav ul li a {
  /* Muted lavender for nav links with a touch more brightness */
  color: #cfc4ff;
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  transition: background-color 0.3s ease;
  font-size: 0.95rem;
}

/* Active navigation link */
nav ul li a.active {
  background-color: #5a32b5;
  color: #ffffff;
}

nav ul li a:hover,
nav ul li a:focus {
  background-color: #5a32b5;
  color: #ffffff;
}

/* Hero section */
.hero {
  position: relative;
  background-image: url('hero.png');
  background-size: cover;
  background-position: center;
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #FFFFFF;
}

.hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Dark overlay for readability on top of the hero image. The opacity
   * is reduced slightly to allow subtle purple and black tones to show
   * through without overwhelming the text. */
  /* Darker overlay to restore contrast on the hero image */
  background-color: rgba(0, 0, 0, 0.55);
  /* Allow pointer events to pass through the overlay so links and buttons
     remain clickable. */
  pointer-events: none;
}

.hero h1 {
  /* Reduce the main hero heading slightly to prevent it from spilling
     outside of its container on narrower screens. */
  font-size: 2rem;
  z-index: 1;
  margin-bottom: 0.5rem;
}

.hero p {
  font-size: 1rem;
  z-index: 1;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.4;
}

/* Sections */
section {
  padding: 2rem;
  /* Center content and restrict maximum width for better readability */
  width: 85%;
  max-width: 1100px;
  margin: 0 auto;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

/* Category navigation at the top of categories page */
.category-nav {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  padding: 0;
}

.category-nav li a {
  display: block;
  padding: 0.4rem 0.7rem;
  background-color: #2c2956;
  color: #d5c9ff;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.3s ease;
  font-size: 0.9rem;
}

.category-nav li a:hover,
.category-nav li a:focus {
  background-color: #4a2d91;
  color: #ffffff;
}

/* Category section headings and lists */
.category-section {
  margin-top: 2rem;
}

.category-section h3 {
  /* Provide a link back to top via anchor inside the heading style. */
  margin-bottom: 0.5rem;
  font-size: 1.3rem;
  color: #d1c4e9;
}

/* Lists of links within each category are arranged horizontally */
.category-section ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-left: 0;
}

.category-section ul li a {
  display: inline-block;
  padding: 0.35rem 0.6rem;
  background-color: #2c2956;
  color: #e0d7ff;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.3s ease;
  font-size: 0.85rem;
}

.category-section ul li a:hover,
.category-section ul li a:focus {
  background-color: #4a2d91;
  color: #ffffff;
}

/* Welcome page specific styles */
.welcome-hero {
  /* Make the hero fill the viewport for the welcome page */
  height: 100vh;

  /* Stack children vertically on the welcome page so the title, tagline,
     video and buttons appear one below the other rather than side by side. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.opening-title {
  /* Reduce the welcome title size to avoid overflow */
  font-size: 2.5rem;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
  color: #F5F5F5;
}

.opening-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

.cta-button {
  padding: 0.6rem 1.2rem;
  background-color: #6b2fa4;
  color: #FFFFFF;
  border-radius: 4px;
  text-decoration: none;
  font-size: 1rem;
  transition: background-color 0.3s ease;
  cursor: pointer;
}

.cta-button:hover,
.cta-button:focus {
  background-color: #7e39c0;
  color: #ffffff;
}

/* Video container for responsive embeds on the welcome page */
.video-container {
  position: relative;
  width: 80%;
  max-width: 560px;
  margin: 1rem auto 0;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Offset scroll positioning for each category section and the top anchor to account for sticky navigation. */
/* Adjust scroll margin so that clicking category anchors positions
   headings fully below the sticky navigation bar. This value matches
   the html scroll-padding-top defined above. */
#category-top,
.category-section {
  /* Provide extra margin above anchors so the heading isn't hidden
     under the sticky navigation when navigated to via the jump list. */
  scroll-margin-top: 6rem;
}

.card {
  /* Cards use a slightly brighter shade with a violet tint for a quirky vibe */
  background-color: #1c1c32;
  border-radius: 6px;
  padding: 1.5rem;
  text-align: center;
  transition: transform 0.3s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  /* Use flexbox on cards so that the call‑to‑action button can be pushed
     to the bottom. This ensures all buttons align along a common baseline
     regardless of how much text appears in each card. */
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card:hover {
  transform: translateY(-5px);
}

.card h3 {
  margin-bottom: 0.75rem;
  color: #d7c8f2;
  font-size: 1.3rem;
}

.card p {
  font-size: 0.85rem;
  color: #B0BEC5;
  margin-bottom: 1rem;
}

.card a {
  display: inline-block;
  padding: 0.5rem 1rem;
  background-color: #6b2fa4;
  color: #FFFFFF;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.3s ease;
  /* Push the button to the bottom of the card; this relies on the card
     being a flex container. */
  margin-top: auto;
  font-size: 0.9rem;
}

.card a:hover,
.card a:focus {
  background-color: #7e39c0;
}

/* Footer */
footer {
  background-color: #1E1E2E;
  color: #9fa8da;
  text-align: center;
  padding: 1rem;
  margin-top: auto;
}

/* Ensure all iframes fill their container and remove default borders */
iframe {
  width: 100%;
  border: none;
}

/* Responsive typography */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 1.8rem;
  }
  .hero p {
    font-size: 0.9rem;
  }
  nav ul {
    flex-direction: column;
    gap: 0.5rem;
  }
}