/* =========================
   Base / Page Layout
   ========================= */
html, body {
  margin: 0;
  padding: 0;
}

body {
  background-color: #f7f4ed;      /* cream page background */
  color: #333;
  font-family: 'Cardo', serif;
  line-height: 1.8;
}

/* Centered white content card */
.container {
  max-width: 900px;
  margin: 40px auto;
  padding: 40px;
  background: #fff;
  box-shadow: 0 0 15px rgba(0,0,0,0.1);
  border-radius: 8px;
}

/* Accessible focus style for all interactive elements */
a:focus-visible, button:focus-visible {
  outline: 2px solid #b33a3a;
  outline-offset: 2px;
}

/* =========================
   Header / Masthead
   ========================= */
.header,
.index {
  text-align: center;
  margin-bottom: 40px;
}

.header h1 {
  margin: 0;
  font-size: 2.5em;
  font-weight: 700;
  color: #4a4a4a;
  font-family: 'Cardo', serif;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.header p {
  margin: 5px 0 0;
  font-size: 1.1em;
  color: #666;
  font-family: 'Open Sans', sans-serif;
}

.header .underline {
  width: 50px;
  height: 4px;
  background-color: #b33a3a;
  margin: 10px auto 0;
  border-radius: 2px;
}

/* =========================
   A–Z Index (button-style)
   ========================= */
    }

    /* A–Z index buttons (unchanged) */
    .index { text-align: center; }
    .index nav {
      display: flex; justify-content: center; flex-wrap: wrap;
      gap: 15px; margin-top: 20px;
    }
    .index nav a {
      color: #4a4a4a; text-decoration: none;
      padding: 10px 15px; border-radius: 5px; border: 1px solid #ddd;
      background-color: #fdfdfd;
      transition: background 0.3s, color 0.3s, border 0.3s;
      font-size: 1.1em; font-family: 'Cardo', serif;
    }
    .index nav a:hover, .index nav a.active {
      background: #eaeaea; color: #000; border-color: #ccc;
    }

/* =========================
   "Latest Update" as plain text link with hover color
   ========================= */
.update-link,
.update-link:visited {
  color: #333;           /* normal text color */
  text-decoration: none; /* no underline */
  font-family: inherit;
}

.update-link:hover,
.update-link:focus-visible,
.update-link:visited:hover {
  color: #ff0000;        /* red on hover */
}

/* =========================
   Reusable Button Class
   ========================= */
.btn,
.btn:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5ch;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid #ddd;
  background-color: #fdfdfd;
  color: #000;
  font-family: 'Cardo', serif;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s, color .2s, border-color .2s, transform .06s;
}

.btn:hover,
.btn:focus-visible,
.btn:visited:hover {
  background-color: #eaeaea;
  color: #ff0000;
  border-color: #ccc;
}

.btn:active {
  transform: translateY(1px);
}

/* =========================
   Main Content
   ========================= */
.movie-list {
  position: relative;
  z-index: 2;
  padding: 20px 0;
}

/* Jump links (mini buttons) */
.jump-links {
  text-align: left;
  margin-bottom: 20px;
  color: #000;
}

.jump-links a,
.jump-links a:visited {
  display: inline-block;
  margin-right: 6px;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid #ddd;
  background-color: #fdfdfd;
  font-size: 1rem;
  color: #000;
  text-decoration: none;
  transition: background-color .2s, color .2s, border-color .2s;
}

.jump-links a:hover,
.jump-links a:focus-visible,
.jump-links a:visited:hover {
  background-color: #eaeaea;
  color: #ff0000;
  border-color: #ccc;
}

/* Load Next Page area */
.load-next {
  text-align: center;
  margin: 40px 0;
}
.load-next a,
.load-next a:visited {
  display: inline-block;
  margin-right: 6px;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid #ddd;
  background-color: #fdfdfd;
  font-size: 1rem;
  color: #000;
  text-decoration: none;
  transition: background-color .2s, color .2s, border-color .2s;
}

.load-next a:hover,
.load-next a:focus-visible,
.load-next a:visited:hover {
  background-color: #eaeaea;
  color: #ff0000;
  border-color: #ccc;
}

/* =========================
   Review Card
   ========================= */
.review {
  margin-bottom: 40px;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 20px;
  display: flex;
  align-items: flex-start;
  flex-direction: row-reverse; /* poster on the right */
}

.poster {
  flex-shrink: 0;
  margin-left: 20px;
  width: 180px;
  height: auto;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.content {
  flex: 1;
}

.title-year-rating {
  font-size: 1.5em;
  font-weight: bold;
  color: #333;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.title {
  font-family: 'Cardo', serif;
  font-weight: 700;
}

.year,
.rating {
  font-style: italic;
  font-size: 0.9em;
  color: #777;
}

.rating {
  color: #b33a3a;
}

.director {
  font-style: italic;
  font-size: 1em;
  color: #555;
  margin-top: 5px;
}

.description {
  margin-top: 15px;
  font-size: 1.1em;
  line-height: 1.8;
  color: #444;
  text-align: justify;
}

.cast,
.specs {
  color: #555;
  font-size: 0.95em;
  margin-top: 10px;
}

.cast {
  font-style: italic;
}

.specs {
  text-align: right;
  font-size: 0.85em;
  font-family: 'Open Sans', sans-serif;
}

/* =========================
   Footer
   ========================= */
.footer {
  text-align: center;
  font-size: 0.85em;
  color: #777;
  margin-top: 40px;
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 600px) {
  .container {
    padding: 20px;
    margin: 20px auto;
  }

  .header h1 { font-size: 1.8em; }
  .header p  { font-size: 1em; }

  .index nav {
    flex-wrap: wrap;
    gap: 10px;
  }

  .index nav a,
  .index nav a:visited {
    padding: 8px 12px;
    font-size: 0.95em;
    border-radius: 7px;
  }

  .movie-list h2 {
    font-size: 1.5em;
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 1px solid #ddd;
  }

  .review {
    flex-direction: column;    /* stack poster & content */
    align-items: center;
    text-align: center;
    padding-bottom: 15px;
    margin-bottom: 20px;
  }

  .poster {
    width: 100%;
    max-width: 150px;
    margin: 0 0 15px 0;
  }

  .content {
    text-align: left;
    width: 100%;
  }

  .title-year-rating {
    font-size: 1.2em;
    text-align: center;
    display: block;
  }

  .director { text-align: center; }
  .description { font-size: 0.9em; text-align: left; }
  .specs { text-align: left; }
}