/* Base variables (override once old CSS arrives) */
:root {
  --bg: #ffffff;
  --text: #111111;
  --muted: #6b7280;
  --accent: #0b5fff;
  --brand-primary: #ff6a13;
  --brand-secondary: #333333;
  /* Layout scales */
  --container: 1140px;
  --gutter: 20px; /* Base padding for mobile and small screens */

  /* Header sizing */
  --header-h: clamp(56px, 8vh, 84px); /* stable sticky header height */

  /* Typography */
  --font-body:
    "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
    sans-serif;
  --font-heading:
    "Mukta", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
    sans-serif;
}

/* ---------------------------
   Reset & primitives
---------------------------- */
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  font-weight: 300;
}
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.skip-link {
  position: absolute;
  left: -9999px;
}
.sr-only {
  position: absolute !important;
  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 {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------
   Header & navigation
---------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  border-bottom: 1px solid #eee;
  height: var(--header-h);
  box-sizing: border-box;
  --header-pad: 10px;
  padding: var(--header-pad);
  overflow: visible;
}
.site-header .container {
  max-width: var(--container);
  padding: 0 var(--gutter);
}
.site-header .header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  height: 100%;
}
.site-header .logo img {
  display: block;
  max-height: calc(var(--header-h) - (var(--header-pad) * 4));
  width: auto;
}

.main-nav {
  position: relative;
  justify-self: end;
  z-index: 1001;
}

.menu-toggle {
  background: none;
  border: 0;
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  cursor: pointer;
}
.menu-toggle .bar {
  width: 24px;
  height: 2px;
  background: #000;
  display: block;
}

.nav-list {
  list-style: none;
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
  justify-content: flex-end;
  align-items: center;
}
.nav-list a,
.nav-list .menu-label {
  text-decoration: none;
  color: #000;
  text-transform: lowercase;
  padding: 10px 2px;
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 400;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* Unified underline swipe (nav + link-styled buttons) */
.nav-list a::after,
.nav-list .menu-label::after,
.btn-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 2px;
  background: var(--brand-primary);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.2s ease;
}
.nav-list a:hover::after,
.nav-list a:focus::after,
.nav-list .menu-label:hover::after,
.nav-list .menu-label:focus::after,
.btn-link:hover::after,
.btn-link:focus::after {
  transform: scaleX(1);
}
.nav-list > li > a.active,
.nav-list > li > .menu-label.active,
.nav-list .sub-menu > li > a.active {
  font-weight: 600;
}
.nav-list > li > a.active::after,
.nav-list > li > .menu-label.active::after {
  transform: scaleX(1);
}

.nav-list .has-children {
  position: relative;
}
.nav-list .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  padding: 8px 0;
  margin: 0;
  list-style: none;
  min-width: 160px;
  border: 1px solid #eee;
  z-index: 1010;
  --submenu-icon-size: 26px;
  --submenu-icon-gap: 8px;
  --submenu-icon-count: 1;
}
.nav-list .has-children:hover > .sub-menu {
  display: block;
}
.nav-list .sub-menu a {
  display: block;
  padding: 10px 14px;
}
.nav-list .sub-menu a.has-icons {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.nav-list .sub-menu a.has-icons > span:first-child {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.2;
}
.nav-list .sub-menu .menu-icons {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--submenu-icon-gap);
  margin-left: auto;
  width: calc(
    (var(--submenu-icon-size) * var(--submenu-icon-count)) +
      (var(--submenu-icon-gap) * (var(--submenu-icon-count) - 1))
  );
  flex: 0 0 auto;
}
.nav-list .sub-menu .menu-icon {
  display: block;
  width: var(--submenu-icon-size);
  height: var(--submenu-icon-size);
  flex: 0 0 var(--submenu-icon-size);
  object-fit: contain;
  filter: invert(1);
}
.nav-list .sub-menu a::after {
  display: none;
}
.nav-list .sub-menu a:hover {
  background: var(--brand-primary);
  color: #fff;
}

/* Submenu chevron (hidden by default; shown on mobile) */
.submenu-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
  color: var(--brand-secondary);
}
.has-children {
  position: relative;
}
/* On desktop, keep hover logic, but mobile will override */

/* Mobile drill-down elements hidden on desktop */
.submenu-header-mobile {
  display: none;
}
body.menu-open {
  overflow: hidden;
}

/* Language switcher */
.lang-switcher-wrap {
  margin-left: 12px;
}
.langswitcher {
  list-style: none;
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 0;
}
.langswitcher a {
  text-decoration: none;
  color: var(--brand-primary);
  text-transform: lowercase;
  padding: 8px 10px;
  display: inline-block;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid var(--brand-primary);
  background: transparent;
  font-family: var(--font-body);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
.langswitcher a.active {
  color: #fff;
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}

/* Hide mobile-in-menu language on larger screens */
.nav-list .lang-mobile {
  display: none;
}

/* ---------------------------
   Sections & typography blocks
---------------------------- */
.section {
  padding: 64px 0;
  border-bottom: 1px solid #f1f1f1;
}
.section .title,
.section h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 32px;
  margin: 0 0 12px;
  text-transform: lowercase;
}
.section .tagline {
  color: var(--muted);
  max-width: 70ch;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1.125rem, 2.8vw, 1.5rem);
}
.section.story p,
.section.venues p,
.section.indepth p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1.125rem, 2.8vw, 1.375rem);
}

/* ---------------------------
   Home hero
---------------------------- */
.home-hero {
  height: 76vh;
  min-height: 420px;
  display: grid;
  place-items: center;
  background-color: #f2f4f7;
  border-bottom: 1px solid #f1f1f1;
}
.home-hero.has-image {
  overflow: hidden;
  color: #fff;
  position: relative;
  isolation: isolate;
}
.home-hero .hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.home-hero .hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.home-hero .hero-overlay {
  display: none;
}
.home-hero.has-image .hero-overlay {
  display: block;
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}
.home-hero .hero-container {
  width: 100%;
  max-width: var(--container);
  position: relative;
  z-index: 2;
}
.home-hero .hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
}
.home-hero .hero-content {
  text-align: left;
}
.home-hero .title {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--brand-primary);
  font-size: clamp(42px, 6vw, 72px);
  line-height: 1.05;
  margin: 0 0 10px;
  text-transform: lowercase;
}
.home-hero .tagline {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(18px, 2.5vw, 22px);
  margin: 0;
}
@media (max-width: 1024px) {
  :root {
    --gutter: 24px; /* Increased padding for tablets */
  }
  .home-hero .hero-grid {
    grid-template-columns: 1fr;
  }
  .home-hero .hero-content {
    text-align: left;
  }
}

/* ---------------------------
   Two-column utility & buttons
---------------------------- */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.two-col .col.image {
  background: #f8f9fb;
  min-height: 280px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
}

.btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.btn {
  background: none;
  border: 0;
  color: #111;
  padding: 8px 4px;
  text-decoration: none;
  text-transform: lowercase;
  display: inline-block;
  border-radius: 0;
  position: relative;
}
.btn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
  transition: opacity 0.2s ease;
}
.btn:hover::after {
  opacity: 1;
}
/* Menu-like link buttons: match nav underline behavior */
.btn-link {
  color: #000;
}

/* ---------------------------
   Quotes Rotator
---------------------------- */
.home-quotes {
  min-height: 16vh;
  display: grid;
  place-items: center;
  position: relative;
  background: var(--brand-primary);
  color: #fff;
}
.home-quotes .quotes-container {
  width: 100%;
  max-width: var(--container);
  position: relative;
  padding: 0 var(--gutter);
}
.home-quotes .quotes-stage {
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 16vh;
  width: 100%;
}
.home-quotes .quote {
  position: absolute;
  inset: 0;
  display: none;
  align-content: center;
  justify-items: center;
  padding: 0 clamp(20px, 4vw, 40px);
  width: 100%;
  box-sizing: border-box;
  max-width: 800px;
  margin: 0 auto;
}
.home-quotes .quote.active {
  display: grid;
}
.home-quotes .q {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(14px, 2vw, 20px);
  margin: 0 0 8px;
  color: #fff;
}
.home-quotes .author {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(13px, 1.6vw, 18px);
  margin: 0;
  color: #fff;
}
.home-quotes .quotes-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 36px;
  line-height: 1;
  z-index: 10;
}
.home-quotes .quotes-nav.prev {
  left: var(--gutter);
}
.home-quotes .quotes-nav.next {
  right: var(--gutter);
}
@media (max-width: 768px) {
  :root {
    --gutter: 16px; /* Smaller but sufficient padding for mobile phones */
  }
  .home-quotes {
    height: auto;
    padding: 28px 0;
  }
  .home-quotes .quotes-container {
    max-width: 100%;
  }
  .home-quotes .quotes-nav {
    display: none;
  } /* Hide nav buttons on mobile for cleaner look */
}

/* ---------------------------
   Forms
---------------------------- */
.form {
  display: flex;
  gap: 8px;
}
.form input[type="email"] {
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #ddd;
  flex: 1;
}

/* ---------------------------
   Content pages (full-bleed bars)
---------------------------- */
.content {
  background: #fff;
}

/* Optional page header wrapper align */
.content .page-header {
  padding: 0;
  background: transparent;
  color: inherit;
}
.content .page-header > .container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 0; /* Remove double padding - container already has gutter */
}

/* Shared heading base (keeps text confined to reading width) */
.content .page-title,
.content h1,
.content h2 {
  position: relative;
  isolation: isolate; /* keep ::before behind just this element */
  padding: 20px var(--gutter); /* vertical and horizontal padding in one declaration */
  color: white;
  margin: 0;
  line-height: 1.2;
  font-family: var(--font-heading);
  font-weight: 700;
  max-width: none; /* Remove width constraint since we're handling padding here */
  margin-inline: 0; /* Remove auto margins */
  text-transform: lowercase;
  scroll-margin-top: calc(var(--header-h) + 8px);
}

/* Full-bleed bar pseudo-element */
.content .page-title::before,
.content h1::before,
.content h2::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--bar-bg, transparent);
  border-radius: 0;
}

/* Per-level colors & sizes */
.content .page-title {
  --bar-bg: var(--brand-primary);
  color: white;
  font-size: clamp(2rem, 3.5vw, 3rem);
}
.content h1 {
  --bar-bg: var(--brand-primary);
  color: white;
  font-size: clamp(1.875rem, 3vw, 2.5rem);
}
.content h2 {
  --bar-bg: var(--brand-secondary);
  color: white;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
}

/* Body block */
.content .page-body {
  padding: 0 0 80px;
  background: #fff;
}
.content .page-body > .container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0;
}

/* Remaining headings & prose */
.content h3 {
  font-size: 1.5rem;
  color: var(--brand-secondary);
  margin: 1.75rem var(--gutter) 0.75rem;
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  text-transform: lowercase;
}
.content h4 {
  font-size: 22px;
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  margin: 1.5rem var(--gutter) 0.5rem;
  color: var(--brand-secondary);
  text-transform: lowercase;
}
.content h5 {
  font-size: 18px;
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  margin: 1.25rem var(--gutter) 0.5rem;
  color: var(--brand-secondary);
  text-transform: lowercase;
}
.content h6 {
  font-size: 16px;
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  margin: 1rem var(--gutter) 0.5rem;
  color: var(--brand-secondary);
  text-transform: lowercase;
}

.content p {
  font-family: var(--font-body);
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  line-height: 1.7;
  margin: 1.1rem var(--gutter);
  color: #000;
  font-weight: 300;
}
.content p + p {
  margin-top: 1rem;
}

.content a {
  color: var(--brand-primary);
  text-underline-offset: 2px;
}
.content a:hover {
  text-decoration: none;
}

.content strong,
.content b {
  font-weight: 700;
  color: #000;
}
.content ul,
.content ol {
  padding-left: calc(1.4rem + var(--gutter));
  margin: 1.1rem var(--gutter);
}
.content li {
  margin: 0.4rem 0;
}
.content blockquote {
  margin: 1.6rem var(--gutter);
  padding: 0.8rem 1.2rem;
  border-left: 4px solid #e5e7eb;
  color: #374151;
  background: #fafafa;
}
.content code {
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  font-size: 0.95em;
  background: #f5f5f7;
  padding: 0.1em 0.35em;
  border-radius: 4px;
}
.content pre code {
  display: block;
  padding: 1rem;
  overflow: auto;
}

/* ---------------------------
   Lightbox gallery thumbnails
---------------------------- */
.content .my-gallery,
.content .lightbox-gallery,
.content .lightbox-gallery-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 1.2rem var(--gutter) 1.6rem;
}

.content .my-gallery > a.glightbox,
.content .lightbox-gallery > a.glightbox,
.content .lightbox-gallery-auto > a.glightbox {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid #e6e8eb;
  background: #f2f4f7;
}

.content .my-gallery > a.glightbox img,
.content .lightbox-gallery > a.glightbox img,
.content .lightbox-gallery-auto > a.glightbox img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.18s ease, filter 0.18s ease;
}

.content .my-gallery > a.glightbox:hover img,
.content .my-gallery > a.glightbox:focus-visible img,
.content .lightbox-gallery > a.glightbox:hover img,
.content .lightbox-gallery > a.glightbox:focus-visible img,
.content .lightbox-gallery-auto > a.glightbox:hover img,
.content .lightbox-gallery-auto > a.glightbox:focus-visible img {
  transform: scale(1.03);
  filter: brightness(0.95);
}

.content .my-gallery > .glightbox-desc,
.content .lightbox-gallery > .glightbox-desc,
.content .lightbox-gallery-auto > .glightbox-desc {
  display: none;
}

/* ---------------------------
   Tables
---------------------------- */
.content table {
  width: calc(100% - 2 * var(--gutter));
  margin: 1.5rem var(--gutter);
  border-collapse: collapse;
  font-family: var(--font-body);
  font-weight: 300;
}

.content th {
  background-color: var(--brand-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: lowercase;
  padding: 12px 16px;
  text-align: left;
}

.content td {
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
  color: var(--text);
  vertical-align: top;
}

.content tr:nth-child(even) {
  background-color: #f8f9fb;
}

/* Toggle to respect casing when needed */
.content.no-lowercase .page-title,
.content.no-lowercase h1,
.content.no-lowercase h2,
.content.no-lowercase h3,
.content.no-lowercase h4,
.content.no-lowercase h5,
.content.no-lowercase h6 {
  text-transform: none;
}

/* ---------------------------
   Responsive
---------------------------- */
@media (max-width: 1024px) {
  .two-col {
    grid-template-columns: 1fr;
  }

  .content .my-gallery,
  .content .lightbox-gallery,
  .content .lightbox-gallery-auto {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

@media (max-width: 768px) {
  .content .my-gallery,
  .content .lightbox-gallery,
  .content .lightbox-gallery-auto {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .site-header {
    --header-pad: 5px;
  }
  .site-header .logo img {
    max-height: calc(var(--header-h) * 0.75);
  }

  .menu-toggle {
    display: inline-flex;
    margin-left: auto;
  }
  .nav-list {
    position: fixed;
    inset: 0;
    top: var(--header-h);
    background: #fff;
    border-top: 1px solid #eee;
    flex-direction: column;
    gap: 0;
    width: 100vw;
    display: none;
    text-align: left;
    overflow-y: auto;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    padding-bottom: 0;
    overscroll-behavior: contain;
    z-index: 1005;
  }

  .nav-list.show {
    display: flex;
  }

  .nav-list > li,
  .nav-list > li > a,
  .nav-list > li > .menu-label,
  .nav-list .sub-menu a {
    display: block;
  }

  .nav-list > li > a,
  .nav-list > li > .menu-label,
  .nav-list .sub-menu a {
    padding: 16px 20px;
    text-align: left;
    border-bottom: 1px solid #f9f9f9;
  }
  .nav-list a::after,
  .nav-list .menu-label::after {
    display: none;
  }
  .nav-list > li > a,
  .nav-list > li > .menu-label {
    font-size: 1.1rem;
    font-weight: 500;
  }

  /* Make the entire row clickable visually */
  .nav-list > li {
    width: 100%;
    position: relative;
    cursor: pointer;
  }
  .nav-list > li:hover,
  .nav-list > li:active {
    background-color: #f8f8f8;
  }
  .nav-list > li.lang-mobile {
    cursor: default;
  }
  .nav-list > li.lang-mobile:hover,
  .nav-list > li.lang-mobile:active {
    background: transparent;
  }

  /* Submenu Drill Down Panel */
  .nav-list .sub-menu {
    display: block;
    position: fixed;
    top: var(--header-h);
    bottom: 0;
    left: 100%; /* Off-screen right */
    width: 100%;
    background: #fff;
    z-index: 1010;
    transition: transform 0.3s ease-in-out;
    overflow-y: auto;
    border-top: 1px solid #eee;
    padding: 0;
    margin: 0;
    visibility: hidden;
    --submenu-icon-size: 28px;
  }

  .nav-list .sub-menu.is-active {
    transform: translateX(-100%);
    visibility: visible;
  }

  .nav-list .sub-menu a {
    padding: 14px 24px;
    font-size: 1rem;
    border-bottom: 1px solid #f9f9f9;
    text-align: left;
  }
  .nav-list .sub-menu a.has-icons {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
  }
  .nav-list .sub-menu a.has-icons > span:first-child {
    flex: 1 1 auto;
    min-width: 0;
  }
  .nav-list .sub-menu .menu-icons {
    margin-left: auto;
    justify-content: flex-end;
  }
  .nav-list > li > a.active,
  .nav-list > li > .menu-label.active,
  .nav-list .sub-menu a.active {
    color: var(--brand-primary);
    font-weight: 700;
    background: #fff5ef;
  }
  /* Standardise hover effect for submenu items */
  .nav-list .sub-menu a:hover,
  .nav-list .sub-menu a:active {
    background-color: #f8f8f8;
    color: #111; /* Ensure text doesn't turn white if it was doing that elsewhere */
  }

  /* Chevron - indicates drill down */
  .submenu-toggle {
    display: inline-flex;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0; /* Full height click target */
    width: 60px;
    align-items: center;
    justify-content: center;
    padding: 0;
    transform: rotate(-90deg); /* Point right */
    border-left: 0; /* Removed border as requested */
    /* Ensure pointer events pass through to the LI listener if needed,
       but delegation handles it anyway. */
    pointer-events: none;
  }
  .submenu-toggle svg {
    width: 20px;
    height: 20px;
  }
  /* Remove rotation on active since we drill down, not expand */
  .has-children.open > .submenu-toggle svg {
    transform: rotate(-90deg);
  }

  /* Back Header */
  .submenu-header-mobile {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    align-items: center;
    cursor: pointer;
    background: var(--brand-primary);
    color: #fff;
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 0;
    height: 56px; /* Ensure sufficient height */
  }

  .submenu-back {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center; /* Center the chevron if text is hidden */
    gap: 0;
    font-family: var(--font-body);
    font-weight: 600;
    cursor: pointer;
    color: #fff;
    font-size: 1rem;
    flex-shrink: 0;
    width: 60px; /* Give it a comfortable touch target width */
    height: 56px;
  }

  /* Hide the "back" text */
  .submenu-back span {
    display: none;
  }

  .submenu-title-mobile {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-weight: 700;
    color: #fff;
    padding: 0 20px 0 0;
    text-align: right;
    pointer-events: none;
    white-space: nowrap; /* Prevent title from breaking */
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 56px;
    line-height: 1.2;
  }

  /* Lang switcher mobile */
  .lang-switcher-wrap {
    display: none;
  }
  .nav-list .lang-mobile {
    display: block;
    margin-top: auto;
    padding: 20px;
    background: transparent;
  }
  .nav-list .lang-mobile .langswitcher {
    justify-content: center;
    width: 100%;
  }
  .nav-list .lang-mobile .langswitcher a {
    display: inline-block;
    padding: 8px 10px;
    border: 1px solid var(--brand-primary);
  }
}

@media (min-width: 768px) {
  .site-header {
    --header-pad: 10px;
  }
}

/* Desktop gutter - larger padding for wide screens */
@media (min-width: 1025px) {
  :root {
    --gutter: 32px; /* Larger padding for desktop */
  }
}

/* ---------------------------
   Self-hosted fonts
---------------------------- */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat/Montserrat-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+0000-00FF,
    U+0107,
    U+010C-010D,
    U+0110-0111,
    U+0142,
    U+0160-0161,
    U+017D-017E,
    U+030C,
    U+2010-201F,
    U+2039-203A,
    U+20AC;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat/Montserrat-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+0000-00FF,
    U+0107,
    U+010C-010D,
    U+0110-0111,
    U+0142,
    U+0160-0161,
    U+017D-017E,
    U+030C,
    U+2010-201F,
    U+2039-203A,
    U+20AC;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat/Montserrat-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+0000-00FF,
    U+0107,
    U+010C-010D,
    U+0110-0111,
    U+0142,
    U+0160-0161,
    U+017D-017E,
    U+030C,
    U+2010-201F,
    U+2039-203A,
    U+20AC;
}
@font-face {
  font-family: "Mukta";
  src: url("../fonts/mukta/Mukta-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+0000-00FF,
    U+0107,
    U+010C-010D,
    U+0110-0111,
    U+0142,
    U+0160-0161,
    U+017D-017E,
    U+030C,
    U+2010-201F,
    U+2039-203A,
    U+20AC;
}

/* ---------------------------
   Cinema section
---------------------------- */
.cinema-event-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.content .cinema-event-list {
  margin: 0 var(--gutter);
  padding: 0;
  padding-left: 0;
}

.cinema-event-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #efefef;
}

.cinema-event-list a {
  color: var(--text);
  text-decoration: none;
  font-weight: 400;
  flex: 1 1 auto;
  min-width: 0;
}

.cinema-event-list a:hover,
.cinema-event-list a:focus {
  color: var(--brand-primary);
}

.cinema-stat {
  display: inline-block;
  min-width: 56px;
  text-align: center;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  font-size: 0.82rem;
  font-weight: 700;
  flex: 0 0 auto;
  white-space: nowrap;
}

.cinema-stat.is-complete {
  color: #166534;
  border-color: #86efac;
  background: #f0fdf4;
}

.cinema-stat.is-partial {
  color: #9a3412;
  border-color: #fdba74;
  background: #fff7ed;
}

.cinema-missing {
  margin: 0;
  color: #b42318;
  font-weight: 700;
}

.cinema-watch-list {
  margin-top: 16px;
}

.cinema-part-title {
  margin-top: 1.5rem;
}

.youtube-embed {
  position: relative;
  width: calc(100% - (2 * var(--gutter)));
  margin: 0 var(--gutter) 1.25rem;
  aspect-ratio: 4 / 3;
  background: #000;
}

.youtube-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}