/* ─── Custom Font ─────────────────────────────────────────── */

@font-face {
  font-family: 'Buhega';
  src: url('./buhega.otf') format('opentype');
  font-display: swap;
}

/* ─── Custom Colours ──────────────────────────────────────── */

:root {
  --color-purple: #2A0326;
  --color-gold: #EBBC14;
  --color-black: #300b41;
}

/* ─── Reset ───────────────────────────────────────────────── */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ─── Base ────────────────────────────────────────────────── */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 122px;
}

body {
  background-color: var(--color-purple);
  overflow-x: hidden;
  color: var(--color-gold);
}

p,
h1,
h2,
h3,
a,
button {
  overflow-wrap: anywhere;
}

body.modal-open {
  overflow: hidden;
}

.skip-link {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 3000;
  transform: translateY(-140%);
  background: var(--color-gold);
  color: var(--color-purple);
  padding: 12px 18px;
  border-radius: 8px;
  font-family: 'Buhega', Cambria, serif;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid white;
  outline-offset: 4px;
}

/* ─── Shared Section Defaults ─────────────────────────────── */

/* Used on sections that should be exactly one screen tall */
.section {
  height: 100vh;
  position: relative;
}

#home,
#about,
#performances,
#workshop,
#contact {
  scroll-margin-top: 122px;
}

/* ─── Hero ────────────────────────────────────────────────── */

/* Stacks content vertically, grows if content overflows one screen */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  height: auto;
  position: relative;
  padding-bottom: 112px; /* Leaves room for the navbar at the bottom */
  overflow: hidden;
}

.hero-title {
  font-family: 'Buhega';
  text-align: center;
  font-size: clamp(70px, 14vw, 200px);
  color: var(--color-gold);
  margin-top: 40px;
  line-height: 0.95;
}

.hero-image {
  width: min(94%, 1400px);
  max-height: 58vh;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 40px auto;
}

.hero-text {
  font-family: 'Buhega', Cambria, serif;
  text-align: center;
  font-size: clamp(18px, 1.75vw, 34px);
  color: var(--color-gold);
  width: 100%;
  max-width: 1180px;
  padding: 0 40px 64px;
  line-height: 1.45;
}

/* ─── Navbar ──────────────────────────────────────────────── */

/*
  How the sticky navbar trick works:
  
  The navbar lives in the normal document flow, right after the hero section.
  The negative margin-top pulls it up so it visually sits at the bottom of
  the hero. As the user scrolls, the navbar travels up the screen with the
  page until it hits the top — at which point `position: sticky; top: 0`
  locks it in place. No JavaScript needed.
*/
.navbar {
  position: sticky;
  top: 0;
  margin-top: -112px; /* Pulls navbar up to overlap the bottom of the hero */
  height: 112px;
  width: 100%;
  background: #0c0111;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 40px;
  z-index: 1000;
}

.menu-toggle {
  display: none;
  width: 48px;
  height: 48px;
  border: 2px solid white;
  border-radius: 8px;
  background: transparent;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  position: absolute;
  right: 18px;
  top: 22px;
  z-index: 2;
}

.menu-toggle span {
  display: block;
  width: 24px;
  height: 3px;
  border-radius: 999px;
  background: white;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.navbar.open .menu-toggle span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.navbar.open .menu-toggle span:nth-child(2) {
  opacity: 0;
}

.navbar.open .menu-toggle span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

.nav-link {
  color: white;
  text-decoration: none;
  font-family: 'Buhega', Cambria, serif;
  font-size: clamp(18px, 2vw, 28px); /* slightly reduced for tighter spacing */
  transition: color 0.2s;
  white-space: nowrap;
}

.nav-link:hover {
  color: var(--color-gold);
}

.navbar-logo {
  height: 82px;
  width: auto;
}

/* Center group of nav links (keeps links evenly spaced) */
.nav-center {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  width: 100%;
}


.nav-left,
.nav-right {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.4vw, 18px);
  justify-content: space-evenly; /* evenly distribute items in each column */
  padding: 0 20px;
}

.nav-left {
  padding-left: 12px;
}

.nav-right {
  padding-right: 12px;
}

.nav-logo {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Right-aligned social links */
.nav-social {
  display: flex;
  gap: 16px;
  align-items: center;
}

.social-link {
  display: inline-flex;
  width: clamp(28px, 3vw, 40px);
  height: clamp(28px, 3vw, 40px);
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: filter 0.2s, transform 0.15s;
}

.social-link:hover {
  transform: translateY(-2px);
  filter: sepia(1) saturate(3) hue-rotate(350deg);
}

.social-link img {
  display: block;
  width: 100%;
  height: 100%;
  filter: invert(1);
}

/* ─── Video / About Sections ──────────────────────────────── */

/* These sections grow with their content rather than being fixed height */
.video-section {
  background-color: var(--color-purple);
  min-height: 100vh;
  height: auto;
}

.video-section video {
  width: 100%;
  height: auto;
  display: block;
}

.about-title {
  font-family: 'Buhega', Cambria, serif;
  color: var(--color-gold);
  text-align: center;
  font-size: clamp(40px, 6vw, 100px);
  padding-top: 40px;
  margin-bottom: 34px;
  width: 100%;
  line-height: 1;
}

.about-text {
  font-family: 'Buhega', Cambria, serif;
  text-align: center;
  font-size: clamp(18px, 1.55vw, 27px);
  color: var(--color-gold);
  padding: 0 40px 44px;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  line-height: 1.55;
}

/* ─── Gallery ─────────────────────────────────────────────── */

.section-gallery {
  padding: 100px 20px;
  background-color: var(--color-purple);
  min-height: 100vh;
}

.gallery-title {
  font-family: 'Buhega', Cambria, serif;
  color: var(--color-gold);
  text-align: center;
  font-size: clamp(40px, 6vw, 100px);
  margin-bottom: 60px;
  width: 100%;
}

/* 4-column masonry-style grid */
.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  width: 100%;
  aspect-ratio: 1 / 1;   /* Square crop — change to 16/9 for cinematic */
  object-fit: cover;
  vertical-align: middle;
  border-radius: 40px;
}

/* 2 columns on medium screens */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* 1 column on small screens */
@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}

/* ─── Enquiries (Placeholder) ─────────────────────────────── */

.placeholder {
  display: flex;
  flex-direction: column; /* stack heading above paragraph */
  gap: 26px;
  align-items: center;
  justify-content: flex-start;
  background-color: var(--color-purple);
  min-height: auto;
  height: auto;
  padding: clamp(58px, 6vw, 90px) 40px; /* keep text away from edges */
  text-align: center;
}

.placeholder h1,
.placeholder h2 {
  font-family: 'Buhega', Cambria, serif;
  color: var(--color-gold);
  font-size: clamp(40px, 8vw, 140px);
  line-height: 1;
}

.placeholder p {
  font-family: 'Buhega', Cambria, serif;
  color: var(--color-gold);
  font-size: clamp(18px, 1.55vw, 27px);
  max-width: 1120px;
  line-height: 1.55;
}

.copy-stack {
  display: grid;
  gap: 18px;
  width: min(100%, 1120px);
}

.copy-stack p {
  margin: 0 auto;
}

.copy-stack a,
.about-text a {
  color: var(--color-gold);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* ─── About: Jay (Override Section Height) ────────────────── */

#about-jay {
  height: auto !important;
  min-height: auto !important;
}

#about-jay .about-text {
  padding-bottom: 32px;
}

#contact {
  padding-top: clamp(42px, 4vw, 64px);
}

/* ─── Performances Section ─────────────────────────────────── */

.performances-section {
  background-color: var(--color-purple);
  min-height: auto;
  height: auto;
  padding: 32px 40px 44px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.performances-title {
  font-family: 'Buhega', Cambria, serif;
  color: var(--color-gold);
  text-align: center;
  font-size: clamp(40px, 8vw, 140px);
  margin-bottom: 32px;
  width: 100%;
  line-height: 1;
}

.performances-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 50px);
  width: 95%;
  max-width: 1700px;
  position: relative;
}

.perf-card {
  background-color: rgba(0, 0, 0, 0.3);
  border: 2px solid var(--color-gold);
  border-radius: 8px;
  padding: clamp(24px, 3vw, 42px);
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.perf-card:hover {
  background-color: rgba(235, 188, 20, 0.1);
  transform: translateY(-8px);
  box-shadow: 0 10px 30px rgba(235, 188, 20, 0.2);
}

.perf-title {
  font-family: 'Buhega', Cambria, serif;
  color: var(--color-gold);
  font-size: clamp(26px, 4vw, 44px);
  margin-bottom: 16px;
  line-height: 1;
}

.perf-tagline {
  font-family: 'Buhega', Cambria, serif;
  color: var(--color-gold);
  font-size: clamp(16px, 2vw, 24px);
  margin-bottom: 25px;
  opacity: 0.9;
  font-style: italic;
}

.perf-image {
  width: 100%;
  aspect-ratio: 4 / 5;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 30px;
}

.perf-readmore {
  font-family: 'Buhega', Cambria, serif;
  color: var(--color-gold);
  background: none;
  border: 0;
  text-decoration: none;
  font-size: clamp(22px, 2.5vw, 32px);
  display: inline-block;
  margin-top: 15px;
  transition: all 0.3s ease;
  cursor: pointer;
  align-self: center;
}

.perf-readmore:hover {
  opacity: 0.8;
  transform: translateX(4px);
}

/* ─── Modal Styles ─────────────────────────────────────────── */

.modal {
  display: none;
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal.active {
  display: flex;
}

.modal-content {
  background-color: var(--color-purple);
  border: 2px solid var(--color-gold);
  border-radius: 8px;
  padding: clamp(32px, 5vw, 80px);
  width: min(92vw, 980px);
  max-width: 1100px;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
  animation: slideIn 0.3s ease;
}

/* responsive fallback for small screens */
@media screen and (max-width: 900px) {
  .modal-content {
    width: 90%;
    padding: 40px;
    max-width: 900px;
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-content h3 {
  font-family: 'Buhega', Cambria, serif;
  color: var(--color-gold);
  font-size: clamp(36px, 7vw, 60px);
  margin-bottom: 30px;
  line-height: 1;
}

.modal-content p {
  font-family: 'Buhega', Cambria, serif;
  color: var(--color-gold);
  font-size: clamp(18px, 1.8vw, 28px);
  line-height: 1.6;
  margin-bottom: 24px;
}

.modal-content p a {
  color: var(--color-gold);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  font-size: 40px;
  color: var(--color-gold);
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  transform: scale(1.2);
  color: white;
}

/* ─── Contact Form ───────────────────────────────────────── */

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 720px;
  width: 100%;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  font-family: 'Buhega', Cambria, serif;
  background-color: rgba(0, 0, 0, 0.3);
  border: 2px solid var(--color-gold);
  border-radius: 8px;
  padding: 15px 20px;
  color: var(--color-gold);
  font-size: clamp(16px, 2vw, 20px);
  transition: all 0.3s ease;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(235, 188, 20, 0.6);
}

.contact-form select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-gold) 50%), linear-gradient(135deg, var(--color-gold) 50%, transparent 50%);
  background-position: calc(100% - 24px) 50%, calc(100% - 16px) 50%;
  background-size: 8px 8px, 8px 8px;
  background-repeat: no-repeat;
}

.contact-form select option {
  background: var(--color-purple);
  color: var(--color-gold);
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  background-color: rgba(235, 188, 20, 0.1);
  box-shadow: 0 0 15px rgba(235, 188, 20, 0.3);
}

.form-submit {
  font-family: 'Buhega', Cambria, serif;
  background-color: var(--color-gold);
  color: var(--color-purple);
  border: none;
  border-radius: 8px;
  padding: 18px 40px;
  font-size: clamp(18px, 2.5vw, 28px);
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 10px;
}

.form-submit:hover {
  background-color: white;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(235, 188, 20, 0.3);
}

.form-note,
.form-status {
  font-family: 'Buhega', Cambria, serif;
  color: var(--color-gold);
  font-size: clamp(14px, 1.5vw, 20px);
  line-height: 1.4;
  opacity: 0.8;
}

.form-status {
  min-height: 1.4em;
  opacity: 1;
}

.form-note a {
  color: var(--color-gold);
}

.site-footer {
  background: #0c0111;
  color: var(--color-gold);
  text-align: center;
  padding: 28px 20px;
}

.site-footer p {
  font-family: 'Buhega', Cambria, serif;
  font-size: clamp(16px, 1.6vw, 22px);
  margin: 0;
}

.return-link {
  font-family: 'Buhega', Cambria, serif;
  color: var(--color-purple);
  background: var(--color-gold);
  border-radius: 8px;
  padding: 16px 28px;
  text-decoration: none;
  font-size: clamp(18px, 2vw, 28px);
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.return-link:hover {
  background: white;
  transform: translateY(-3px);
}

@media screen and (max-width: 1100px) {
  .navbar {
    height: auto;
    min-height: 120px;
    padding: 28px 24px;
  }

  .nav-center {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .nav-logo {
    order: -1;
  }

  .navbar-logo {
    height: 76px;
  }

  .nav-left,
  .nav-right {
    justify-content: center;
    flex-wrap: wrap;
    padding: 0;
  }

  .performances-grid {
    grid-template-columns: 1fr;
    max-width: 780px;
  }

  .perf-image {
    aspect-ratio: 16 / 11;
  }
}

@media screen and (max-width: 700px) {
  html {
    scroll-padding-top: 96px;
  }

  #home,
  #about,
  #performances,
  #workshop,
  #contact {
    scroll-margin-top: 96px;
  }

  .hero {
    padding-bottom: 84px;
  }

  .hero-title {
    font-size: clamp(58px, 19vw, 92px);
    margin-top: 24px;
  }

  .hero-image {
    width: 94%;
    max-height: 45vh;
    margin: 28px auto;
  }

  .hero-text,
  .about-text {
    padding-left: 22px;
    padding-right: 22px;
  }

  .hero-text {
    padding-bottom: 48px;
  }

  .navbar {
    margin-top: -84px;
    min-height: 84px;
    padding: 10px 14px;
    align-items: flex-start;
  }

  .navbar.open {
    padding-bottom: 18px;
  }

  .menu-toggle {
    display: flex;
    width: 40px;
    height: 40px;
    right: 14px;
    top: 22px;
    gap: 5px;
  }

  .menu-toggle span {
    width: 20px;
    height: 2px;
  }

  .navbar.open .menu-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .navbar.open .menu-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .nav-center {
    gap: 10px;
    justify-items: center;
    padding-right: 50px;
  }

  .navbar-logo {
    height: 64px;
  }

  .nav-left,
  .nav-right {
    display: none;
    width: 100%;
  }

  .navbar.open .nav-left,
  .navbar.open .nav-right {
    display: flex;
  }

  .nav-left,
  .nav-right {
    gap: 10px 14px;
  }

  .nav-link {
    font-size: 20px;
  }

  .nav-social {
    gap: 12px;
  }

  .about-title {
    margin-bottom: 22px;
    padding: 34px 18px 0;
  }

  .about-text,
  .placeholder p,
  .modal-content p {
    line-height: 1.45;
  }

  .performances-section {
    padding: 34px 18px 34px;
  }

  .performances-grid {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 620px;
  }

  .perf-card {
    padding: 24px 18px;
  }

  .perf-image {
    aspect-ratio: 4 / 5;
  }

  .modal {
    padding: 14px;
  }

  .modal-content {
    width: 100%;
    max-height: 88vh;
  }

  .placeholder {
    gap: 18px;
    padding: 44px 22px;
  }

  #contact {
    padding-top: 34px;
  }
}

@media screen and (max-width: 420px) {
  .hero-title {
    font-size: clamp(48px, 18vw, 74px);
  }

  .hero-text,
  .about-text,
  .placeholder p {
    font-size: 17px;
  }

  .nav-link {
    font-size: 20px;
  }

  .perf-title {
    font-size: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}