/* General reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
}

body {
  color: #222;
  line-height: 1.6;
  background-color: #f4efe8;
  background-image: url('../img/french-stucco.png');
  background-repeat: repeat;
  background-size: auto;
}

/* Navbar */
/* Navbar container */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #f4efe8 !important;
  background-image: url('../img/french-stucco.png');
  background-repeat: repeat;
  background-size: auto;
  padding: 1rem 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* subtle shadow */
}

/* Navbar brand (mobile only) */
.nav-brand {
  display: none;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #222 !important;
  text-decoration: none;
}

/* Hamburger toggle button (mobile only) */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1001;
}

.nav-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background-color: #222;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Navbar links */
.nav-links {
  list-style: none;
  display: flex;
  gap: 2.2rem;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.nav-links li a {
  text-decoration: none;
  color: #222 !important; /* black letters */
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
  transition: border-bottom 0.25s ease;
}

/* Hover effect: underline only */
.nav-links li a:hover,
.nav-links li a.active {
  border-bottom: 2px solid #222; /* black underline */
  color: #222 !important;
}


/* Banner */
.banner {
  position: relative;
  width: 100%;
  margin-top: 60px; /* navbar offset */
  background-color: #eeeeec;
  background-image: url('../img/french-stucco.png');
  background-repeat: repeat;
  overflow: hidden;
}

/* On screens wider than the capped 1200px photo, extend the dark-wood floor on both sides using
   crops that contain no part of the dancer, so the floor appears to continue but she is never
   duplicated. The crops are heavily darkened and blurred so the extension reads as ambient floor
   receding into shadow, hiding both the mirror seam and the transition into the sharper photo. */
.banner::before,
.banner::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background-repeat: repeat-x;
  background-size: auto 100%;
  z-index: 0;
}

.banner::before {
  left: 0;
  background-image: url('../img/banner/banner-floor-edge-mirrored.jpg');
  background-position: right center;
}

.banner::after {
  right: 0;
  background-image: url('../img/banner/banner-floor-edge.jpg');
  background-position: left center;
}

.banner picture,
.banner img {
  position: relative;
  z-index: 1;
}

.banner img {
  width: 100%;
  max-width: 1200px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Below 1200px the photo already fills the full banner width, so the floor extension is never
   visible; skip loading those extra images. */
@media (max-width: 1200px) {
  .banner::before,
  .banner::after {
    background-image: none;
  }
}

/* Content section */

.content h1 {
  font-size: 2.5rem;
  font-weight: 400;
  margin-bottom: 1rem;
  color: #222;
}

.content p {
  margin-bottom: 1rem;
  font-size: 1.1rem;
  color: #333;
}

.content {
  max-width: 800px;
  margin: 2rem auto;
  padding: 2rem 1rem;
  background-color: transparent;
  box-shadow: inset 0 0 15px rgba(0,0,0,0.03); /* subtle shading */
  border-radius: 8px; /* slightly rounded corners */
}

/* Schedule page */
.schedule-intro {
  margin-bottom: 0.75rem;
  font-size: 1.1rem;
}

.schedule-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.schedule-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 0.75rem;
  color: #333;
  font-size: 1.05rem;
  text-align: left;
}

.schedule-table th {
  padding: 0 1.1rem 0.35rem;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.schedule-table td {
  padding: 1rem 1.1rem;
  border-top: 1px solid rgba(34, 34, 34, 0.15);
  border-bottom: 1px solid rgba(34, 34, 34, 0.15);
}

.schedule-table td:first-child {
  border-left: 1px solid rgba(34, 34, 34, 0.15);
  border-radius: 8px 0 0 8px;
}

.schedule-table td:last-child {
  border-right: 1px solid rgba(34, 34, 34, 0.15);
  border-radius: 0 8px 8px 0;
}

/* About page */
.about-content {
  max-width: 700px;
  margin: 1.5rem auto 3rem;
  padding: 2rem 1rem;
}

.about-content h1 {
  font-size: 2.5rem;
  font-weight: 400;
  margin-bottom: 1.5rem;
  color: #222;
}

.about-section {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-bottom: 2.25rem;
}

.about-photo {
  border-radius: 36px;
  overflow: hidden;
}

.about-section .about-photo {
  width: 100%;
}

.about-section .about-photo img {
  width: 100%;
  height: auto;
  display: block;
}

.about-section-reversed {
  grid-template-columns: minmax(0, 1fr) 210px;
}

.about-section-reversed .about-photo {
  order: 2;
}

.about-section-reversed .about-photo img {
  border-radius: 36px;
}

.about-section p,
.about-feature p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #333;
}

.about-feature {
  text-align: center;
}

.about-feature .about-photo {
  width: min(100%, 460px);
  margin: 0 auto 1.5rem;
  border-radius: 0;
  overflow: visible;
}

.about-feature .about-photo img {
  width: 100%;
  height: auto;
  display: block;
}

.about-feature p {
  max-width: 620px;
  margin: 0 auto;
}

/* Contact page */
.contact-content {
  width: min(100% - 2rem, 900px);
  margin: 0 auto;
  padding: 1.25rem 0 2rem;
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) minmax(320px, 1.1fr);
  align-content: center;
  column-gap: clamp(2rem, 8vw, 6rem);
  text-align: left;
}

.contact-logo {
  grid-column: 1;
  grid-row: 1 / span 3;
  width: min(100%, 280px);
  aspect-ratio: 1;
  height: auto;
  display: block;
  margin: 0 auto;
  padding: 0.75rem;
  object-fit: contain;
  border-radius: 50%;
}

.contact-content h1 {
  grid-column: 2;
  font-size: 2.1rem;
  font-weight: 400;
  margin-bottom: 0.9rem;
}

.contact-details {
  grid-column: 2;
  display: grid;
  gap: 1rem;
}

.contact-detail {
  padding: 0.85rem 1.1rem;
  border: 1px solid rgba(34, 34, 34, 0.15);
  border-radius: 8px;
}

.contact-detail h2 {
  font-size: 1.35rem;
  font-weight: 400;
  margin-bottom: 0.4rem;
}

.contact-detail p,
.contact-detail a {
  color: #333;
  font-size: 1.05rem;
}

.contact-detail a {
  text-underline-offset: 3px;
}

.social-links {
  grid-column: 2;
  display: flex;
  justify-content: flex-start;
  gap: 1.5rem;
  margin-top: 1rem;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #222;
  text-decoration: none;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}

.social-links a:hover span {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.social-links svg {
  width: 1.7rem;
  height: 1.7rem;
  fill: #222;
}

.social-links svg rect,
.social-links svg circle {
  fill: none;
  stroke: #222;
  stroke-width: 2;
}

.social-links svg .social-dot {
  fill: #222;
  stroke: none;
}

.video-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
}

.video-item {
    width: 100%;
    max-width: 900px;
    aspect-ratio: 16 / 9;
}

.video-item iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.schedule-notes p::before {
    content: "✦";
    margin-right: 12px;
}

.schedule-notes {
    width: fit-content;
    margin: 40px auto 0;
}

.schedule-notes p {
    margin: 0 0 15px;
    text-align: left;
}

.index-notes {
    width: fit-content;
    margin: 2rem auto 0;
    display: flex;
    gap: 2rem;
    justify-content: center;
}

.index-notes p {
    margin: 0;
    font-size: 1rem;
}

.index-notes p::before {
    content: "✦";
    margin-right: 12px;
}

.contact-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  vertical-align: middle;
  margin-right: 8px;
  fill: #222;
  flex-shrink: 0;
}

/* Button styles */
.btn {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.3s ease;
  border: 2px solid #222;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.btn-primary {
  background-color: #f4efe8;
  color: #222;
  border-color: #222;
}

.btn-primary:hover {
  background-color: #222;
  color: #f4efe8;
  border-color: #222;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  /* Navbar adjustments for tablet */
  .navbar {
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.25rem;
  }

  .nav-brand {
    display: block;
  }

  .nav-toggle {
    display: flex;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 0;
    background-color: #f4efe8;
    background-image: url('../img/french-stucco.png');
    background-repeat: repeat;
    background-size: auto;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links li {
    width: 100%;
    text-align: center;
  }

  .nav-links li a {
    display: block;
    padding: 0.9rem 1rem;
  }

  body.nav-open {
    overflow: hidden;
  }

  .nav-links li a {
    font-size: 0.75rem;
    letter-spacing: 0.5px;
  }

  .banner {
    margin-top: 80px;
  }

  .content h1 {
    font-size: 2rem;
  }

  .about-content h1 {
    font-size: 2rem;
  }

  .contact-content h1 {
    font-size: 2rem;
  }

  .contact-content {
    margin-top: 0;
    grid-template-columns: 1fr;
    padding: 2rem 0 3rem;
    text-align: center;
  }

  .contact-logo,
  .contact-content h1,
  .contact-details,
  .social-links {
    grid-column: 1;
    grid-row: auto;
  }

  .contact-logo {
    width: min(100%, 220px);
    margin-bottom: 1.5rem;
  }

  .social-links {
    justify-content: center;
  }

  .content p {
    font-size: 1rem;
  }

  .schedule-table {
    font-size: 1rem;
  }

  .about-section p,
  .about-feature p {
    font-size: 1rem;
  }

  .about-content {
    margin-top: 1rem;
  }

  .about-section {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 3rem;
  }

  .about-section-reversed .about-photo {
    order: initial;
    transform: none;
  }

  .about-section .about-photo {
    width: min(100%, 210px);
    margin: 0 auto;
  }

  .about-feature .about-photo {
    width: min(100%, 460px);
  }

  .video-list {
    gap: 30px;
  }

  .index-notes {
    gap: 1rem;
    flex-wrap: wrap;
  }

  .index-notes p {
    font-size: 0.95rem;
  }
}

@media (max-width: 480px) {
  /* Navbar adjustments for mobile phones */
  .navbar {
    padding: 0.5rem 1rem;
  }

  .nav-brand {
    font-size: 0.8rem;
  }

  .nav-links li a {
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    padding: 0.8rem 1rem;
  }

  .banner {
    margin-top: 65px;
  }

  .content {
    padding: 1.5rem 0.5rem;
    margin: 1rem auto;
  }

  .content h1 {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
  }

  .about-content h1 {
    font-size: 1.5rem;
  }

  .contact-content h1 {
    font-size: 1.5rem;
  }

  .content p {
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
  }

  .schedule-table th,
  .schedule-table td {
    padding-left: 0.7rem;
    padding-right: 0.7rem;
  }

  .about-section p,
  .about-feature p {
    font-size: 0.9rem;
  }

  .index-notes {
    gap: 0.75rem;
    margin: 1.5rem auto 0;
    flex-direction: column;
    align-items: center;
  }

  .index-notes p {
    font-size: 0.85rem;
  }
}


/* Footer */
.site-footer {
  background-color: #000;
  color: #fff;
  text-align: center;
  padding: 1rem;
  font-size: 0.85rem;
}