@import url(
  "https://use.typekit.net/pzn8xqw.css"
);

/* === VARIABLES === */

:root {
  /* Spacing */
  --margin-x: 16px;
  --margin-y: 16px;
  --gutter: 20px;
  --space-xs: 10px;
  --space-sm: 25px;
  --space-md: 40px;
  --space-lg: 60px;

  /* === BRAND COLORS ===
     Source of truth: the original 1973 TSL sign Pantones.
     Red #FD4239 = Warm Red 032 C | Green #00C58E = 3395 C
     Deep Blue #002596 = Reflex Blue | Light Blue #59CBE8 = 305 C */
  --red: #FD4239;
  --red-hover: #FD4239;     /* hover/active = brand red, no darkened shade */
  --seafoam: #00C58E;       /* brand green (3395 C) — legacy var name */
  --deep-blue: #002596;     /* brand deep blue (Reflex Blue) */
  --blue: #59CBE8;          /* brand light blue (305 C) */
  --blue-hover: #82D8EF;    /* lighter brand light blue */
  --black: #000;
  --white: #fff;

  /* Non-brand colors — pending review (2026-05-22) */
  --lavender: #BFA8DB;      /* highlight-block tint */
  --cream: #FAF5ED;         /* off-white */

  /* Grays */
  --line: #000;             /* structural lines: header shelf + footer rule + card wrap. BLACK - settled 7/16 */
  --line-soft: #bbb;        /* interior content separators, one step lighter (2026-07-17) */
  --gray-900: #2C2824;
  --gray-700: #666;
  --gray-600: #999;
  --gray-400: #aaa;
  --gray-200: #CCCCCC;
  --gray-100: #ececec;

  /* Typography */
  --h1: 36px;
  --h2: 26px;
  --h3: 22px;
  --h4: 20px;
  --h5: 18px;
  --p: 17px;
  --small: 14px;

  /* Borders */
  --border:
    1px solid var(--line-soft);
}

/* === BREAKPOINTS === */

@media (max-width: 768px) {
  :root {
    --h1: 33px;
    --h2: 25px;
    --h3: 21px;
    --h4: 19px;
    --h5: 18px;
    --p: 17px;
    --small: 14px;
  }
}

@media (min-width: 768px) {
  :root {
    --margin-x: 45px;
    --margin-y: 25px;
    --space-sm: 25px;
  }
}

@media (min-width: 1680px) {
  :root {
    --margin-x: 12vw;
  }
}

/* === RESETS === */

.tsl-modal-content,
.tsl-modal-message,
.tsl-filter-button,
.tsl-dropdown-menu,
.tsl-dropdown-option {
  border-radius: 0 !important;
}

.showtime-time-button,
.tsl-showtime-time-button,
.showtime-times,
.showtime-time-filtered,
.showtime-date-button,
a.showtime-time-button,
.tsl-date-btn,
#tsl-modal-showtimes
  .tsl-ticket-btn,
#tsl-ticket-modal
  .tsl-ticket-btn,
.movie-showtimes-list,
.tsl-showtimes-list,
.showtime-row,
.tsl-showtime-row,
#tsl-modal-title,
#tsl-modal-showtimes
  .tsl-showtime-row,
.current-exhibitions-link,
.past-exhibitions-link {
  border-width: 1px !important;
  border-color:
    var(--line-soft) !important;
}

/* Dropdown is a control box, not a rule line - stays light */


/* Hello Elementor's parent theme reset.css paints button:hover and
   button:focus with #c36 (magenta). Cancel that here so plain <button>
   elements stop flashing magenta site-wide. Specific button classes
   keep their own :hover via higher specificity. */
[type=button]:focus,
[type=button]:hover,
[type=submit]:focus,
[type=submit]:hover,
button:focus,
button:hover {
  background-color: transparent;
  color: inherit;
}

/* === LAYOUT === */

html {
  overflow-y: scroll; /* Prevent layout shift from scrollbar appearing */
}

body {
  font-family:
    "neue-frutiger-world", "avenir-next-lt-pro",
    "Avenir Next",
    sans-serif;
}

.elementor-section
  > .elementor-container,
.e-con.e-parent {
  padding:
    var(--margin-y)
    var(--margin-x);
}

.e-con .e-con:not(.main-header-wrapper),
.e-con .e-con-inner {
  padding: 0;
}

/* Static page container margins - loaded early to prevent FOUC */
body:has(.tsl-page) .e-con.e-parent {
  padding-left: var(--margin-x);
  padding-right: var(--margin-x);
}

/* Top spacing between header and content */
.page-content > .elementor > .e-con.e-parent:first-child {
  padding-top: 20px !important;
}

.elementor-location-header
  > .e-con {
  padding: 6px var(--margin-x);
}

.elementor-location-footer
  > .e-con {
  padding: 0 var(--margin-x) !important;
}

.elementor-location-header {
  display: flex !important;
  align-items: center !important;
  z-index: 100;
  background: var(--white);
}

/* Ensure sticky header has solid background */
header.elementor-sticky {
  background: var(--white);
}

/* All containers in header need solid white - no transparency */
.elementor-location-header .e-con {
  background: var(--white);
}


.elementor-location-footer a {
  text-decoration: none;
  transition:
    text-decoration 0.2s ease;
}

.elementor-location-footer
  a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.page-wrapper {
  width: 100%;
  margin: 0 auto;
  padding: var(--space-md) 0;
}

/* Active section nav links (CSS-based, no flash) */
html.section-history .nav-link-history .elementor-button,
html.section-art .nav-link-art .elementor-button,
html.section-memberships .nav-link-memberships .elementor-button,
html.section-donate .nav-link-donate .elementor-button,
html.section-calendar .nav-link-calendar .elementor-button {
  opacity: 0.5;
}

/* Main header - DESKTOP ONLY: single row, items shrink to fit */
@media (min-width: 851px) {
  /* Make header sticky on desktop */
  .elementor-location-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background: white !important;
  }
  /* Header parent container — kill top/bottom padding but keep side padding */
  .elementor-element-14eb793d {
    --padding-top: 0px !important;
    --padding-bottom: 0px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .main-header-wrapper,
  .main-header-wrapper > .e-con-inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    position: relative !important;
    /* symmetric: title/logo/nav sit centered between top edge and shelf line */
    padding: 10px 0 !important;
  }

  /* Logo - scales with viewport */
  .main-header-wrapper .elementor-widget-image {
    margin-right: clamp(8px, 1.5vw, 24px) !important;
  }

  .main-header-wrapper .elementor-widget-image img {
    width: clamp(30px, 3vw, 55px) !important;
    height: auto !important;
  }

  /* Site title - scales with viewport, pushes nav right.
     flex-shrink 0: the masthead never gives way (links shrink instead) */
  .main-header-wrapper .elementor-widget-heading {
    margin-right: auto !important;
    flex-shrink: 0 !important;
  }

  .main-header-wrapper .elementor-heading-title {
    /* Masthead outranks page section labels (26-30px) at every width */
    font-size: clamp(27px, 2.2vw, 35px) !important;
    font-weight: 500 !important;
    white-space: nowrap;
  }

  /* Nav buttons - clustered right, scale with viewport */
  .main-header-wrapper .elementor-widget-button,
  .main-header-wrapper .elementor-element.elementor-widget-button,
  .elementor-location-header .main-header-wrapper .elementor-widget-button {
    flex-shrink: 1 !important;
    min-width: 0 !important;
    margin-left: clamp(8px, calc(8px + 1vw), 28px) !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Last nav button flush with right edge */
  .main-header-wrapper .elementor-widget-button:last-of-type {
    margin-right: 0 !important;
  }

  .main-header-wrapper .elementor-widget-button:last-of-type .elementor-button {
    padding-right: 0 !important;
  }

  .main-header-wrapper .elementor-button,
  .main-header-wrapper .elementor-button-text {
    font-size: clamp(13px, calc(15px + 0.4vw), 21px) !important;
    font-weight: 400 !important;
    white-space: nowrap;
    transition: opacity 0.2s ease;
  }

  .main-header-wrapper .elementor-button:hover {
    opacity: 0.5;
  }
}

/* Elementor divider widgets: interior ones are soft; only the header's
   divider is a structural line */
.elementor-divider-separator {
  border-top-color: var(--line-soft) !important;
}
.elementor-location-header .elementor-divider-separator {
  border-top-color: var(--line) !important;
}

/* Footer HOME/BACK TO TOP container draws its own Elementor border */
.elementor-element-d6cb509 {
  border-top-color: var(--line) !important;
}

/* Mobile: header + footer lines stay the pre-black #999 (to match; header's
   twin lives in head-critical 18138). Desktop structural lines are black. */
@media (max-width: 768px) {
  .elementor-element-d6cb509 {
    border-top-color: #999 !important;
  }
}

/* Narrow desktop - links give way so the bigger masthead fits.
   (Replaces the tablet block in head-critical, which loses this cascade.) */
@media (min-width: 851px) and (max-width: 1120px) {
  .main-header-wrapper .elementor-widget-button {
    margin-left: 10px !important;
  }
  .main-header-wrapper .elementor-button,
  .main-header-wrapper .elementor-button-text {
    font-size: 13px !important;
  }
}

/* Desktop: poster shares the title's top rail (was 5px lower on every
   movie/event page) */
@media (min-width: 769px) {
  .tsl-single-movie .trailer-section,
  .tsl-single-event .trailer-section {
    margin-top: -5px !important;
  }
}

/* Mobile header: ALL layout lives in tsl---head-critical.php (the one home).
   Compact single row - logo + title left, hamburger right; nav links live in
   the site menu overlay (tsl-site-menu.php). Only the shared side padding and
   title weight stay here. */
@media (max-width: 850px) {
  .main-header-wrapper .elementor-heading-title {
    font-weight: 500 !important;
  }

  .elementor-location-header > .e-con {
    padding: 2px var(--margin-x) 0 !important;
  }
}

/* === ICON FONTS === */

html body i.eicon-menu-bar:before,
html body [class*="eicon"]:before,
html body [class*="fa"]:before,
html body
  .elementor-icon i:before {
  font-family:
    'eicons',
    'Font Awesome 5 Free'
    !important;
}


#wpadminbar .ab-icon:before,
#wpadminbar .dashicons:before,
#wp-admin-bar-menu-toggle
  .ab-icon:before {
  font-family:
    'dashicons' !important;
}

#wpadminbar * {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif !important;
}

/* === CARDS GRID === */

.tsl-movies-grid
  .elementor-loop-container,
.tsl-events-grid
  .elementor-loop-container {
  display: grid;
  grid-template-columns:
    repeat(3, 1fr);
  gap: var(--gutter);
  justify-content: center;
  transition: opacity 0.3s ease;
}

.tsl-movies-grid .e-loop-item,
.tsl-events-grid .e-loop-item {
  cursor: pointer;
  overflow: hidden;
  background:
    var(--white) !important;
  animation: fadeIn 0.4s ease;
}

.tsl-movies-grid
  .e-loop-item .e-con,
.tsl-events-grid
  .e-loop-item .e-con {
  padding: 0 !important;
}

.tsl-movies-grid
  .e-loop-item
  .elementor-widget,
.tsl-events-grid
  .e-loop-item
  .elementor-widget {
  margin: 0 !important;
}

.tsl-movies-grid
  .e-loop-item
  .elementor-widget-container,
.tsl-events-grid
  .e-loop-item
  .elementor-widget-container {
  text-align: center;
}

.tsl-movies-grid
  .e-loop-item:hover
  .elementor-heading-title,
.tsl-events-grid
  .e-loop-item:hover
  .elementor-heading-title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.tsl-movies-grid
  .elementor-widget-image a,
.tsl-events-grid
  .elementor-widget-image a {
  display: block;
  line-height: 0;
}

/* Card count variants */
.tsl-movies-grid
  .elementor-loop-container:has(
    .e-loop-item:only-child
  ),
.tsl-events-grid
  .elementor-loop-container:has(
    .e-loop-item:only-child
  ) {
  grid-template-columns: 1fr;
  max-width: 600px;
  margin: 0 auto;
}

.tsl-movies-grid
  .elementor-loop-container:has(
    .e-loop-item:nth-child(2):last-child
  ),
.tsl-events-grid
  .elementor-loop-container:has(
    .e-loop-item:nth-child(2):last-child
  ) {
  grid-template-columns:
    repeat(2, 1fr);
  max-width: 900px;
  margin: 0 auto;
}

/* === SHOWTIMES === */

.tsl-showtimes {
  text-align: center;
  background:
    var(--white) !important;
}

.tsl-movies-grid .tsl-showtimes,
.tsl-events-grid .tsl-showtimes {
  margin: 0 !important;
  padding: 0 !important;
}

.showtime-time-button,
.tsl-showtime-time-button,
.tsl-showtime-time-disabled,
.tsl-showtime-time-text,
.showtime-times,
.showtime-time-filtered,
.showtime-date-button,
a.showtime-time-button {
  color: var(--black) !important;
  font-style: italic !important;
  display:
    inline-block !important;
  text-decoration:
    none !important;
  margin:
    var(--space-xs) 0 !important;
  padding: 3px 8px !important;
  line-height: 1.5 !important;
  border:
    1.5px solid
    var(--red) !important;
  background:
    transparent !important;
  transition:
    background-color 0.4s ease,
    color 0.4s ease !important;
  cursor: pointer !important;
}

/* Gallery title buttons: green border, not italic, slightly bolder */
.showtime-gallery-title.showtime-date-button {
  font-style: normal !important;
  font-weight: 500 !important;
  border-color: var(--seafoam) !important;
}

.showtime-gallery-title.showtime-date-button:hover {
  background: var(--seafoam) !important;
  color: var(--white) !important;
  border-color: var(--seafoam) !important;
}

.showtime-time-button:hover,
.tsl-showtime-time-button:hover,
.showtime-times:hover,
.showtime-time-filtered:hover,
.showtime-date-button:hover,
a.showtime-time-button:hover {
  background:
    var(--red) !important;
  color:
    var(--white) !important;
  border-color:
    var(--red) !important;
}

/* Free-form per-showtime note (e.g. "Followed by Q+A with director Philip Hartman") */
.showtime-special-note {
  font-size: 13px;
  font-style: italic;
  color: var(--red);
  font-weight: 500;
  margin-top: 4px;
  letter-spacing: 0.3px;
  line-height: 1.4;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Movie pages: full-width row tucked inside the date+time row, above the divider */
.showtime-note-row {
  flex-basis: 100%;
  width: 100%;
  font-size: inherit;
  font-style: italic;
  font-weight: 500;
  color: var(--red);
  line-height: 1.5;
  margin: -16px 0 10px 0;
  padding: 0;
  letter-spacing: 0.2px;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Today's schedule (homepage mobile): note under title in agenda row.
   Styles live here because calendar-elementor.html CSS doesn't load on the homepage. */
.todays-schedule-card .schedule-event-special-note {
  font-size: 13px;
  font-style: italic;
  font-weight: 500;
  color: var(--red);
  line-height: 1.3;
  margin-top: 3px;
  letter-spacing: 0.2px;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Movie time/date buttons: blue (activated 2026-05-22) */
.tsl-movie .showtime-time-button,
.tsl-movie .tsl-showtime-time-button,
.tsl-movie .showtime-times,
.tsl-movie .showtime-time-filtered,
.tsl-movie .showtime-date-button,
.tsl-movie a.showtime-time-button,
.tsl-showtimes-movies .showtime-time-button,
.tsl-showtimes-movies .tsl-showtime-time-button,
.tsl-showtimes-movies .showtime-times,
.tsl-showtimes-movies .showtime-time-filtered,
.tsl-showtimes-movies .showtime-date-button,
.tsl-showtimes-movies a.showtime-time-button,
.showtimes-movies .showtime-time-button,
.showtimes-movies a.showtime-time-button {
  border-color: var(--blue) !important;
}

.tsl-movie .showtime-time-button:hover,
.tsl-movie .tsl-showtime-time-button:hover,
.tsl-movie .showtime-times:hover,
.tsl-movie .showtime-time-filtered:hover,
.tsl-movie .showtime-date-button:hover,
.tsl-movie a.showtime-time-button:hover,
.tsl-showtimes-movies .showtime-time-button:hover,
.tsl-showtimes-movies .tsl-showtime-time-button:hover,
.tsl-showtimes-movies .showtime-times:hover,
.tsl-showtimes-movies .showtime-time-filtered:hover,
.tsl-showtimes-movies .showtime-date-button:hover,
.tsl-showtimes-movies a.showtime-time-button:hover,
.showtimes-movies .showtime-time-button:hover,
.showtimes-movies a.showtime-time-button:hover {
  background: var(--blue) !important;
  color: var(--white) !important;
  border-color: var(--blue) !important;
}

/* Gallery time/date buttons: green */
.tsl-showtimes-gallery .showtime-time-button,
.tsl-showtimes-gallery .tsl-showtime-time-button,
.tsl-showtimes-gallery .showtime-times,
.tsl-showtimes-gallery .showtime-time-filtered,
.tsl-showtimes-gallery .showtime-date-button,
.tsl-showtimes-gallery a.showtime-time-button,
.showtimes-gallery .showtime-time-button,
.showtimes-gallery a.showtime-time-button {
  border-color: var(--seafoam) !important;
}

.tsl-showtimes-gallery .showtime-time-button:hover,
.tsl-showtimes-gallery .tsl-showtime-time-button:hover,
.tsl-showtimes-gallery .showtime-times:hover,
.tsl-showtimes-gallery .showtime-time-filtered:hover,
.tsl-showtimes-gallery .showtime-date-button:hover,
.tsl-showtimes-gallery a.showtime-time-button:hover,
.showtimes-gallery .showtime-time-button:hover,
.showtimes-gallery a.showtime-time-button:hover {
  background: var(--seafoam) !important;
  color: var(--white) !important;
  border-color: var(--seafoam) !important;
}

/* Mobile: whole card / whole Today's Schedule row is one tap target (stretched link).
   No hover on mobile, so a transparent overlay link unifies the pieces instead. */
@media (max-width: 768px) {
  .e-loop-item {
    position: relative;
  }
  .e-loop-item .elementor-widget-image a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .todays-schedule-card .agenda-row {
    position: relative;
  }
  .todays-schedule-card .agenda-row-title::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  /* Tap feedback: pressing a card fills its date button (the hover effect, for touch) */
  .e-loop-item:active .tsl-showtimes-movies .showtime-date-button {
    background: var(--blue) !important;
    color: var(--white) !important;
    border-color: var(--blue) !important;
  }
  .e-loop-item:active .tsl-showtimes-gallery .showtime-date-button {
    background: var(--seafoam) !important;
    color: var(--white) !important;
    border-color: var(--seafoam) !important;
  }
  .e-loop-item:active .tsl-showtimes-events .showtime-date-button {
    background: var(--red) !important;
    color: var(--white) !important;
    border-color: var(--red) !important;
  }

  /* Tap feedback: pressing an agenda row fills its time buttons (homepage agenda + mobile calendar) */
  .agenda-row:active .agenda-time-btn:not(.agenda-time-past) {
    background: var(--red) !important;
    color: var(--white) !important;
    border-color: var(--red) !important;
  }
  .agenda-row:active .agenda-time-btn.agenda-time-movie {
    background: var(--blue) !important;
    color: var(--white) !important;
    border-color: var(--blue) !important;
  }
  .agenda-row:active .agenda-time-btn.agenda-time-gallery {
    background: var(--seafoam) !important;
    color: var(--white) !important;
    border-color: var(--seafoam) !important;
  }

  /* Movie time buttons sit above the row overlay so a tap opens the ticket modal */
  .todays-schedule-card .agenda-row-times .agenda-time-btn.agenda-time-movie {
    position: relative;
    z-index: 2;
  }
}

/* Movie's OWN page: showtime buttons -> blue border + arrow (arrow added in markup).
   Calendar/cards also use blue for movies. Unified across the site. */
.movie-showtimes-list.showtimes-movies a.showtime-time-button {
  border-color: var(--blue) !important;
}
.movie-showtimes-list.showtimes-movies a.showtime-time-button:hover {
  background: var(--blue) !important;
  color: var(--white) !important;
  border-color: var(--blue) !important;
}

.tsl-movies-grid
  .showtime-date-button,
.tsl-events-grid
  .showtime-date-button {
  /* card strips are flush plates: no margins (matches snippet 21335) */
  margin: 0 !important;
}

/* Homepage content section: symmetric 25px entry/exit seams (Elementor
   emits 20/25 desktop, 16 bottom mobile) */
.elementor-1105 .elementor-element.elementor-element-57ba18d {
  padding-top: var(--space-sm) !important;
  padding-bottom: var(--space-sm) !important;
}

/* Newsletter bar: heading gets the same 25px inset as the form below */
.elementor-location-footer .elementor-element-795c32e .elementor-widget-container {
  margin-top: 25px !important;
}

/* === DETAIL PAGES === */

.movie-showtimes-list,
.tsl-showtimes-list {
  display: flex;
  flex-direction: column;
  gap: .5px;
  border-top:
    1px solid var(--line-soft);
  padding-top: .5px;
}

.showtime-row,
.tsl-showtime-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  /* never let the date text touch the ticket button; wrapped buttons
     drop to their own right-aligned line */
  column-gap: 16px;
  row-gap: 6px;
  border-bottom:
    1px solid var(--line-soft);
  padding-bottom: .5px;
}

.showtime-row .showtime-times-group,
.tsl-showtime-row .showtime-times-group {
  margin-left: auto;
  flex-shrink: 0;
}

/* Mobile: date steps down a notch and may wrap within its own box;
   the ticket button never leaves the line */
@media (max-width: 768px) {
  .showtime-row,
  .tsl-showtime-row {
    flex-wrap: nowrap;
  }
  .showtime-row .showtime-date,
  .tsl-showtime-row .showtime-date {
    font-size: 16px !important;
    flex: 1 1 auto;
    min-width: 0;
  }
}

.showtime-times-group,
.tsl-showtime-times-group {
  display: flex;
  gap: .5px;
}

.movie-showtimes-list
  .showtime-row,
.movie-showtimes-list
  .showtime-date,
.tsl-showtimes-list
  .tsl-showtime-row,
.tsl-showtimes-list
  .tsl-showtime-date,
.showtime-date,
.tsl-showtime-date {
  color: var(--black) !important;
  font-style: italic !important;
}

/* Movie meta - matches subtitle styling */
/* Apply to wrapper (Elementor element class), nested shortcode, AND nested heading
   so the same .movie-meta class works whether the meta line is a shortcode or a heading widget.
   !important is needed to beat Elementor's per-widget heading styles + the mobile media query
   override at the bottom of this file (.tsl-single-event h2.elementor-heading-title 27px). */
.movie-meta,
.tsl-movie-meta,
.tsl-movie-meta .elementor-shortcode,
.tsl-single-movie .tsl-movie-meta .elementor-shortcode,
.movie-meta .elementor-heading-title,
.movie-meta .elementor-shortcode,
.tsl-single-movie .elementor-widget-heading.movie-meta h1.elementor-heading-title,
.tsl-single-movie .elementor-widget-heading.movie-meta h2.elementor-heading-title,
.tsl-single-movie .elementor-widget-heading.movie-meta h3.elementor-heading-title,
.tsl-single-event .elementor-widget-heading.movie-meta h1.elementor-heading-title,
.tsl-single-event .elementor-widget-heading.movie-meta h2.elementor-heading-title,
.tsl-single-event .elementor-widget-heading.movie-meta h3.elementor-heading-title {
  font-size: 20px !important;
  color: var(--gray-700) !important;
  margin: 0 !important;
  font-weight: 400 !important;
}

/* Event runtime - matches movie meta styling */
.event-runtime {
  font-size: 20px;
  color: var(--gray-700);
  margin: 0;
}


/* === STATUS BADGES === */

/* Status buttons — same shape as showtime-date-button, not clickable */
.showtime-status-cancelled,
.showtime-status-sold_out {
  cursor: default !important;
  font-style: normal !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  background: var(--red) !important;
  color: var(--white) !important;
  border-color: var(--red) !important;
}

.showtime-status-rescheduled {
  cursor: default !important;
  font-style: normal !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  background: #f39c12 !important;
  color: var(--white) !important;
  border-color: #f39c12 !important;
}

.showtime-status-cancelled:hover,
.showtime-status-sold_out:hover,
.showtime-status-rescheduled:hover {
  background: var(--red) !important;
  color: var(--white) !important;
}

/* === MODAL === */

/* Prevent body scroll when modal open */
body.tsl-modal-open {
  overflow: hidden;
}

.tsl-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.tsl-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
}

.tsl-modal-content {
  position: relative;
  max-width: 520px;
  width: 100%;
  background: var(--white);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}

.tsl-modal-close {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 32px !important;
  height: 32px !important;
  font-size: 28px !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  line-height: 32px !important;
  color: var(--gray-600) !important;
  font-weight: 300 !important;
  transition: color 0.2s ease !important;
  padding: 0 !important;
  z-index: 10 !important;
}

.tsl-modal-close:hover {
  color: var(--black) !important;
}

.tsl-modal-body {
  padding: 32px 32px 28px;
}

/* Modal title bar: classic black with white type, old-school Mac style.
   Wraps title + "More info" link in a single black bar at top. */
.tsl-modal-titlebar {
  margin: -32px -32px 28px -32px;
  padding: 22px 64px 18px 64px;
  background: var(--black);
}
#tsl-modal-title {
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--white) !important;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  border: none !important;
}

/* Close button is white on the black title bar */
#tsl-ticket-modal .tsl-modal-close {
  color: var(--white) !important;
}
#tsl-ticket-modal .tsl-modal-close:hover {
  color: rgba(255,255,255,0.75) !important;
}

/* Modal title is a link to the post page (movie/event/gallery).
   Inherits white color from the h2; the underline signals clickability. */
.tsl-modal-title-link {
  color: inherit !important;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 0.5px;
}
.tsl-modal-title-link:hover {
  color: inherit !important;
  text-decoration-thickness: 1px;
}
/* No underline during loading state (href="#" means there's nowhere to click yet) */
.tsl-modal-title-link[href="#"] {
  text-decoration: none !important;
}

/* Showtime block */
.tsl-showtime-block {
  border: none !important;
}

.tsl-showtime-block + .tsl-showtime-block {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--line-soft) !important;
}

/* Two-column layout */
.tsl-showtime-columns {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

/* Left column - Date/time stacked */
.tsl-date-column {
  flex-shrink: 0;
  min-width: 120px;
  text-align: left;
}

.tsl-day-of-week {
  font-size: 18px;
  font-weight: 600;
  color: var(--black);
  line-height: 1.3;
}

.tsl-month-date {
  font-size: 18px;
  font-weight: 600;
  color: var(--black);
  line-height: 1.3;
}

.tsl-time {
  font-size: 16px;
  font-weight: 500;
  color: var(--red);
  margin-top: 4px;
}

.tsl-special-note {
  font-size: 14px;
  font-style: italic;
  font-weight: 600;
  color: var(--red);
  margin-top: 6px;
  line-height: 1.3;
  letter-spacing: 0.3px;
  max-width: 200px;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Right column - Ticket options */
.tsl-tickets-column {
  flex: 1;
}

.tsl-tickets-card {
  background: var(--gray-100);
  border-radius: 0;
  padding: 16px;
}

/* Ticket row with quantity selector */
.tsl-ticket-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border: none !important;
  border-bottom: none !important;
}

.tsl-ticket-row + .tsl-ticket-row {
  border-top: 1px solid var(--line-soft) !important;
}

.tsl-ticket-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tsl-ticket-type {
  font-size: 15px;
  font-weight: 600;
  color: var(--black);
}

.tsl-ticket-price {
  font-size: 14px;
  color: var(--gray-700);
}

/* Quantity control */
.tsl-qty-control {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--white);
  border-radius: 0;
  overflow: hidden;
  border: 1px solid var(--gray-200);
}

.tsl-qty-minus,
.tsl-qty-plus {
  width: 36px;
  height: 36px;
  border: none;
  background: var(--white);
  font-size: 18px;
  font-weight: 500;
  color: var(--black);
  cursor: pointer;
  transition: background 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.tsl-qty-minus:hover,
.tsl-qty-plus:hover {
  background: var(--gray-100);
}

.tsl-qty-minus:active,
.tsl-qty-plus:active {
  background: var(--gray-200);
}

.tsl-qty-value {
  width: 32px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--black);
  border-left: 1px solid var(--gray-200);
  border-right: 1px solid var(--gray-200);
  line-height: 36px;
}

/* Checkout form — full width */
.woocommerce-checkout .woocommerce,
.woocommerce-checkout form.woocommerce-checkout {
  max-width: 100%;
  width: 100%;
}

.woocommerce-checkout .col2-set,
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
  width: 100%;
  max-width: 100%;
  float: none;
}

.woocommerce-checkout .form-row {
  width: 100% !important;
  float: none !important;
}

/* Checkout button */
.tsl-checkout-btn {
  width: 100%;
  margin-top: 24px;
  padding: 16px 24px;
  font-size: 16px;
  font-weight: 600;
  color: var(--white) !important;
  background: var(--red);
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.tsl-checkout-btn:hover:not(.disabled) {
  background: var(--red-hover);
}

.tsl-checkout-btn.disabled {
  background: var(--gray-200);
  color: var(--black) !important;
  cursor: not-allowed;
}

.tsl-checkout-btn.loading {
  background: var(--gray-400);
  cursor: wait;
}

/* Sold out showtime */
.tsl-showtime-block.tsl-sold-out {
  opacity: 0.6;
}

/* Sold-out corner badge — overlays the top-right of the poster on grid cards (homepage
   loop items, calendar cards, etc.). Date/time button stays visible underneath so people
   who already bought tickets can still see when their show is. */
.e-loop-item.tsl-sold-out {
  position: relative;
}
.e-loop-item.tsl-sold-out::after {
  content: "SOLD OUT";
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  background: var(--red);
  color: var(--white);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.8px;
  padding: 8px 16px;
  pointer-events: none;
}

.tsl-sold-out-badge {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 10px;
  background: var(--gray-800, #333);
  color: white;
  font-size: 12px;
  font-weight: 600;
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tsl-sold-out-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
}

.tsl-sold-out-message {
  text-align: center;
  font-size: 14px;
  color: var(--gray-600);
  line-height: 1.5;
}


/* === GALLERY === */

.tsl-gallery .gallery-dates {
  color: var(--gray-600);
}

.gallery-date-range {
  font-weight: 500;
  font-size: var(--h3);
  color: var(--gray-700);
}

.tsl-gallery .gallery-opening,
.gallery-opening {
  font-size: var(--p);
  font-style: italic;
  margin-top: var(--space-sm);
  background: var(--seafoam);
  padding: 12px 16px;
  display: inline-block;
}


.tsl-galleryx
  .gallery-opening strong,
.gallery-opening strong {
  font-weight: 700;
}

.tsl-gallery .gallery-images-grid,
.gallery-images-grid {
  display: flex;
  flex-direction: column;
}

.tsl-gallery
  .gallery-images-grid
  .gallery-columns-1,
.gallery-images-grid
  .gallery-columns-1 {
  gap: var(--gutter);
}

.tsl-gallery .gallery-images-grid.gallery-columns-2,
.gallery-images-grid.gallery-columns-2 {
  gap: var(--gutter);
}

.tsl-gallery .gallery-images-grid.gallery-columns-1 .gallery-grid-item,
.gallery-images-grid.gallery-columns-1 .gallery-grid-item {
  width: 100%;
}

.tsl-gallery .gallery-images-grid.gallery-columns-2 .gallery-row,
.gallery-images-grid.gallery-columns-2 .gallery-row {
  display: flex;
  gap: var(--gutter);
  align-items: flex-start;
  justify-content: center;
}

.tsl-gallery .gallery-images-grid.gallery-columns-2 .gallery-grid-item,
.gallery-images-grid.gallery-columns-2 .gallery-grid-item {
  flex-shrink: 0;
  flex-grow: 0;
}

.tsl-gallery
  .gallery-images-grid img,
.gallery-images-grid img {
  width: 100%;
  height: auto;
  display: block;
}

.tsl-gallery
  .gallery-image-caption,
.gallery-image-caption {
  margin-top: var(--space-xs);
  text-align: left;
  font-size: var(--small);
  line-height: 1.4;
}

.tsl-gallery .caption-title-line,
.caption-title-line {
  margin-bottom: 2px;
}

.tsl-gallery .caption-title,
.caption-title {
  font-style: italic;
}

.tsl-gallery .caption-date,
.tsl-gallery .caption-detail,
.caption-date,
.caption-detail {
  font-style: normal;
}

/* Gallery section 2 */
.tsl-gallery[gallery_section_2] .gallery-images-grid.gallery-columns-1 {
  gap: var(--space-md);
}

.tsl-gallery[gallery_section_2] .gallery-images-grid.gallery-columns-2 {
  gap: var(--space-sm);
}

.tsl-gallery[gallery_section_2] .gallery-images-grid.gallery-columns-2 .gallery-row {
  gap: var(--space-sm);
}

.tsl-gallery
  .gallery-video iframe,
.gallery-video iframe {
  width: 100%;
  height: 600px;
  border: none;
}

.tsl-gallery .gallery-press,
.gallery-press {
  background: var(--red);
  padding: 12px 16px;
  margin-top: var(--space-sm);
  display: inline-block;
}

.gallery-press .press-item {
  margin-bottom: 8px;
}

.gallery-press .press-item:last-child {
  margin-bottom: 0;
}


.tsl-gallery .artist-website,
.artist-website {
  margin-top: var(--space-sm);
}

/* Gallery archive */
.galleries-archive-grid {
  display: grid;
  grid-template-columns:
    repeat(3, 1fr);
  gap: var(--space-md);
  max-width: 1400px;
  margin: 0 auto;
  padding: 0;
}

.gallery-archive-card,
.gallery-landing-card {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: opacity 0.2s;
}

.gallery-archive-card:hover,
.gallery-landing-card:hover {
  opacity: 0.8;
}

.gallery-archive-image,
.gallery-landing-image {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  margin-bottom:
    var(--space-xs);
}

.gallery-archive-image img,
.gallery-landing-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-archive-info,
.gallery-landing-info {
  text-align: left;
}

.gallery-archive-title,
.gallery-landing-title {
  font-size: var(--h3);
  font-weight: 600;
  margin: 0 0 5px 0;
  line-height: 1.3;
}

.gallery-archive-artist,
.gallery-landing-artist {
  font-size: var(--h4);
  margin-bottom: 5px;
  color: var(--gray-700);
}

.gallery-archive-dates,
.gallery-landing-dates {
  font-size: var(--p);
  color: var(--gray-600);
}

/* Gallery landing */
.galleries-landing {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0;
}

.gallery-section {
  margin-bottom:
    var(--space-md);
}

.gallery-section-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom:
    var(--space-sm);
  display: block;
  width: 100%;
}

.current-exhibition
  .gallery-landing-card {
  max-width: 100%;
}

.current-exhibition
  .gallery-landing-card:hover {
  opacity: 1;
}

.current-exhibition,
.current-exhibition
  .gallery-section,
.galleries-landing
  .current-exhibition:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.current-exhibition
  .gallery-section-title {
  display: none !important;
}


.upcoming-exhibitions
  .gallery-landing-card {
  margin-bottom: 0;
  width: 50%;
  max-width: none;
}

.current-exhibitions-link,
.past-exhibitions-link {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--line-soft);
}

/* Arrow CTA links ("View Past Exhibitions →" etc.) - ONE style site-wide */
.view-all-link,
.view-current-link,
.view-past-link,
.tsl-gallery .artist-website a,
.artist-website a,
.trailer-link,
.archive-link {
  display: inline-block;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--black) !important;
  text-decoration: none !important;
  border-bottom: 2px solid var(--black) !important;
  padding-bottom: 2px !important;
  transition: opacity 0.2s;
}

.view-all-link:hover,
.view-current-link:hover,
.view-past-link:hover,
.tsl-gallery .artist-website a:hover,
.artist-website a:hover,
.trailer-link:hover,
.archive-link:hover {
  opacity: 0.6;
  text-decoration: none !important;
}

.no-exhibitions {
  font-size: var(--h5);
  color: var(--gray-600);
  padding: var(--space-md) 0;
}

/* === DATE FILTERS === */

.tsl-date-filter-bar {
  width: 100%;
  margin: var(--space-sm) 0;
  padding: 0;
}

.tsl-date-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  justify-content: flex-start;
  align-items: center;
}

.tsl-date-btn {
  background:
    transparent !important;
  color:
    var(--black) !important;
  border:
    1.5px solid var(--black);
  border-radius: 0;
  padding: 2px 6px;
  font-style: italic;
  line-height: 1.5;
  display: inline-block;
  text-decoration: none;
  margin: var(--space-xs) 0;
  cursor: pointer;
  transition:
    background-color 0.4s ease,
    color 0.4s ease;
  white-space: nowrap;
}

.tsl-date-btn:hover,
.tsl-date-btn.active {
  background:
    var(--black) !important;
  color:
    var(--white) !important;
  border-color:
    var(--black) !important;
}

.tsl-date-btn:disabled {
  background: transparent;
  color: #ccc;
  border-color: #ccc;
  cursor: not-allowed;
  opacity: 0.6;
}

.tsl-date-btn.tsl-loading {
  animation:
    tsl-pulse 1.5s
    ease-in-out infinite;
}

.tsl-date-btn[data-date="all"] {
  font-weight: 600;
}

.tsl-date-btn[data-date="all"]
  .active {
  background:
    var(--red) !important;
  color:
    var(--white) !important;
}

/* Dropdown */


.tsl-filter-button {
  padding:
    10px var(--space-sm);
  background: #f5f5f5;
  border:
    2px solid transparent;
  border-radius: 6px;
  font-size: var(--small);
  font-weight: 500;
  color: #333;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.tsl-filter-button:hover {
  background: #e8e8e8;
  border-color: #ddd;
}

.tsl-filter-button.active {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}

.tsl-dropdown-wrapper {
  position: relative;
  display: inline-block;
}


.tsl-dropdown-wrapper.active
  .dropdown-arrow {
  transform: rotate(180deg);
}


.tsl-dropdown-wrapper.active
  .tsl-dropdown-menu {
  display: block;
}


/* === NEWSLETTER === */

.tsl-newsletter-form,
#mc_embed_signup {
  width: 50%;
  max-width: 1100px;
  margin: 0 auto;
}

.tsl-newsletter-form form,
#mc_embed_signup form {
  display: flex !important;
  flex-direction:
    row !important;
  gap: 0 !important;
  align-items:
    flex-start !important;
  justify-content:
    center !important;
  position: relative !important;
}

.tsl-newsletter-form
  input[type="email"],
#mc_embed_signup
  input[type="email"],
#mce-EMAIL {
  flex: 1 !important;
  padding:
    14px
    var(--space-sm) !important;
  font-size:
    var(--small) !important;
  font-weight: 500 !important;
  line-height: 1.32 !important;
  border: 0 !important;
  background:
    var(--white) !important;
  color:
    var(--black) !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  transition:
    all 0.2s ease !important;
  min-width: 0 !important;
  width: auto !important;
}

.tsl-newsletter-form
  input[type="email"]::placeholder,
#mc_embed_signup
  input[type="email"]::placeholder,
#mce-EMAIL::placeholder {
  color:
    var(--gray-700) !important;
}

.tsl-newsletter-form
  input[type="email"]:focus,
#mc_embed_signup
  input[type="email"]:focus,
#mce-EMAIL:focus {
  outline: none !important;
  background:
    var(--white) !important;
  border-color:
    var(--black) !important;
}

.tsl-newsletter-form button,
.tsl-newsletter-form
  input[type="submit"],
#mc_embed_signup button,
#mc_embed_signup
  input[type="submit"],
#mc-embedded-subscribe {
  padding:
    12px 15px !important;
  font-size:
    var(--small) !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  background:
    var(--blue-hover) !important;
  color:
    var(--black) !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  transition:
    all 0.2s ease !important;
  white-space:
    nowrap !important;
  flex-shrink: 0 !important;
  width: 110px !important;
}

.tsl-newsletter-form
  button:hover,
.tsl-newsletter-form
  input[type="submit"]:hover,
#mc_embed_signup button:hover,
#mc_embed_signup
  input[type="submit"]:hover,
#mc-embedded-subscribe:hover {
  background:
    #FAF5ED !important;
}

.tsl-newsletter-form
  button:disabled,
.tsl-newsletter-form
  input[type="submit"]:disabled,
#mc_embed_signup button:disabled,
#mc_embed_signup
  input[type="submit"]:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}

.tsl-newsletter-form
  .newsletter-message {
  margin-top: var(--space-xs);
  padding:
    var(--space-xs)
    var(--space-sm);
  font-size: var(--p);
  font-weight: 500;
  line-height: 1.6;
  border-radius: 0;
  text-align: center;
}

.tsl-newsletter-form
  .newsletter-success {
  background: var(--blue-hover);
  color: var(--black);
}

.tsl-newsletter-form
  .newsletter-error {
  background: #FFE5E5;
  color: var(--black);
}

/* === UTILITIES === */

.full-bleed,
.full-bleed-padded {
  margin-left: calc(-1 * var(--margin-x)) !important;
  margin-right: calc(-1 * var(--margin-x)) !important;
  padding-left: var(--margin-x) !important;
  padding-right: var(--margin-x) !important;
  width: calc(100% + (var(--margin-x) * 2)) !important;
}


/* Full-bleed works from any depth in footer */
.elementor-location-footer .full-bleed,
.elementor-location-footer .full-bleed-padded {
  margin-left: calc(-1 * var(--margin-x)) !important;
  margin-right: calc(-1 * var(--margin-x)) !important;
}


.underline-remove-hover,
.underline-remove-hover a {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: currentColor;
  transition: text-decoration-color 0.2s ease;
}

.underline-remove-hover:hover,
.underline-remove-hover:hover a {
  text-decoration-color: transparent;
}

.underline-hover:hover,
.underline-hover:hover
  .elementor-button,
.underline-hover:hover a,
.trailer-section:hover
  .underline-hover
  .elementor-button {
  text-decoration:
    underline !important;
  text-decoration-thickness:
    1px !important;
  text-underline-offset:
    4px !important;
}

.dialog-close-button,
.elementor-popup-close-button,
.dialog-widget-content
  .dialog-close-button {
  top: -15px !important;
  right: -15px !important;
}

/* === ANIMATIONS === */

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes tsl-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* === RESPONSIVE === */

@media (max-width: 1024px) {
  .tsl-movies-grid
    .elementor-loop-container,
  .tsl-events-grid
    .elementor-loop-container {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .tsl-movies-grid
    .elementor-loop-container:has(
      .e-loop-item:only-child
    ),
  .tsl-events-grid
    .elementor-loop-container:has(
      .e-loop-item:only-child
    ) {
    grid-template-columns: 1fr;
    max-width: 500px;
  }

  .tsl-movies-grid
    .elementor-loop-container:has(
      .e-loop-item:nth-child(2):last-child
    ),
  .tsl-events-grid
    .elementor-loop-container:has(
      .e-loop-item:nth-child(2):last-child
    ) {
    grid-template-columns:
      repeat(2, 1fr);
    max-width: 100%;
  }

  .galleries-archive-grid {
    grid-template-columns:
      repeat(2, 1fr);
    gap: var(--gutter);
  }

  .tsl-gallery
    .gallery-video iframe,
  .gallery-video iframe {
    height: 500px;
  }

  .tsl-date-buttons {
    justify-content: center;
  }

  .tsl-date-btn {
    padding: 10px 16px;
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  .tsl-movies-grid
    .elementor-loop-container,
  .tsl-events-grid
    .elementor-loop-container {
    grid-template-columns: 1fr;
  }

  .tsl-movies-grid
    .elementor-loop-container:has(
      .e-loop-item:only-child
    ),
  .tsl-events-grid
    .elementor-loop-container:has(
      .e-loop-item:only-child
    ) {
    max-width: 100%;
  }

  .galleries-archive-grid {
    grid-template-columns: 1fr;
    gap: var(--gutter);
    padding: var(--margin-x);
  }

  .upcoming-exhibitions
    .gallery-landing-card {
    width: 100%;
  }

  .tsl-gallery
    .gallery-video iframe,
  .gallery-video iframe {
    height: 300px;
  }

  .tsl-filter-button {
    padding: 8px 16px;
    font-size: 14px;
  }

  .tsl-newsletter-form form {
    flex-direction: column;
  }

  .tsl-newsletter-form
    input[type="email"] {
    width: 100%;
    margin-bottom:
      var(--space-xs);
    font-size: 20px;
    line-height: 1.65;
  }

  .tsl-newsletter-form button,
  .tsl-newsletter-form
    input[type="submit"] {
    width: 100%;
    font-size: 20px;
    line-height: 1.65;
  }

  .tsl-newsletter-form
    .newsletter-message {
    font-size: 20px;
    line-height: 1.65;
  }

  /* Touch targets - larger tap areas on mobile */
  .showtime-time-button,
  .tsl-showtime-time-button,
  a.showtime-time-button,
  .showtime-date-button {
    padding: 8px 12px !important;
    font-size: 17px !important;
    border-width: 1.75px !important;
  }

  /* Modal improvements for mobile */
  .tsl-modal {
    padding: 16px;
  }

  .tsl-modal-content {
    max-width: 100%;
    max-height: calc(100vh - 32px);
  }

  .tsl-modal-body {
    padding: 24px 20px 20px;
  }

  .tsl-modal-titlebar {
    margin: -24px -20px 20px -20px;
    padding: 16px 52px 14px 52px;
  }
  #tsl-modal-title {
    font-size: 21px;
  }

  /* Keep columns side-by-side on mobile */
  .tsl-showtime-columns {
    flex-direction: row;
    gap: 12px;
    align-items: flex-start;
  }

  .tsl-date-column {
    min-width: 70px;
    max-width: 80px;
    flex-shrink: 0;
    text-align: left;
  }

  .tsl-day-of-week {
    font-size: 14px;
  }

  .tsl-month-date {
    font-size: 14px;
  }

  .tsl-time {
    font-size: 15px;
    margin-top: 4px;
    font-weight: 600;
  }

  .tsl-tickets-column {
    flex: 1;
    min-width: 0;
  }

  .tsl-tickets-card {
    padding: 10px;
    border-radius: 0;
  }

  .tsl-ticket-row {
    padding: 8px 0;
    gap: 8px;
  }

  .tsl-ticket-type {
    font-size: 14px;
  }

  .tsl-ticket-price {
    font-size: 13px;
  }

  .tsl-qty-minus,
  .tsl-qty-plus {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }

  .tsl-qty-value {
    width: 28px;
    line-height: 32px;
    font-size: 15px;
  }

  .tsl-checkout-btn {
    margin-top: 20px;
    padding: 14px 20px;
    font-size: 16px;
    border-radius: 0;
  }

  .tsl-modal-close {
    top: 12px !important;
    right: 12px !important;
  }

}

@media (max-width: 480px) {
  .tsl-date-buttons {
    flex-direction: column;
    width: 100%;
  }

  .tsl-date-btn {
    width: 100%;
    text-align: center;
  }

  .gallery-images-grid.gallery-columns-2 .gallery-row,
  .tsl-gallery .gallery-images-grid.gallery-columns-2 .gallery-row {
    flex-direction: column;
  }

  .gallery-images-grid.gallery-columns-2 .gallery-grid-item,
  .tsl-gallery .gallery-images-grid.gallery-columns-2 .gallery-grid-item {
    width: 100% !important;
  }

  /* === MOVIE/EVENT POSTER - FULL BLEED ON MOBILE === */
  /* Override Elementor responsive hiding */
  .tsl-single-movie .tsl-single-left,
  .tsl-single-event .tsl-single-left,
  .tsl-single-movie .tsl-poster,
  .tsl-single-event .tsl-poster,
  .tsl-single-movie .trailer-section,
  .tsl-single-event .trailer-section,
  .tsl-single-movie .elementor-widget-image,
  .tsl-single-event .elementor-widget-image,
  .tsl-single-movie [class*="elementor-hidden"],
  .tsl-single-event [class*="elementor-hidden"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .tsl-single-movie .tsl-poster,
  .tsl-single-event .tsl-poster,
  .tsl-single-movie .poster-padding,
  .tsl-single-event .poster-padding,
  .tsl-single-movie .poster-trailer-padding,
  .tsl-single-event .poster-trailer-padding {
    padding: 0 !important;
    background: transparent !important;
    margin-left: calc(-1 * var(--margin-x)) !important;
    margin-right: calc(-1 * var(--margin-x)) !important;
    width: calc(100% + (var(--margin-x) * 2)) !important;
  }

  .tsl-single-movie .tsl-poster img,
  .tsl-single-event .tsl-poster img,
  .poster-padding img,
  .poster-trailer-padding img {
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    display: block !important;
    visibility: visible !important;
  }

  /* Remove trailer container padding too */
  .tsl-single-movie .trailer-section,
  .tsl-single-event .trailer-section {
    padding: 0 !important;
    background: transparent !important;
  }

  /* === FOOTER MOBILE FIXES === */
  .elementor-location-footer {
    padding: var(--space-sm) var(--margin-x) !important;
  }

  .elementor-location-footer > .e-con {
    flex-direction: column !important;
    gap: var(--space-xs) !important;
  }

  /* Scale down footer typography significantly */
  .elementor-location-footer h2,
  .elementor-location-footer .elementor-heading-title {
    font-size: 14px !important;
  }

  .elementor-location-footer p,
  .elementor-location-footer a,
  .elementor-location-footer .elementor-widget-text-editor {
    font-size: 12px !important;
  }

  /* Reduce footer bottom spacing */
  .elementor-location-footer .e-con:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Newsletter section mobile */
  .elementor-location-footer .tsl-newsletter-form,
  .elementor-location-footer #mc_embed_signup {
    width: 100% !important;
  }

  .elementor-location-footer .tsl-newsletter-form input[type="email"],
  .elementor-location-footer #mce-EMAIL {
    font-size: 14px !important;
    padding: 10px 12px !important;
  }

  .elementor-location-footer .tsl-newsletter-form button,
  .elementor-location-footer #mc-embedded-subscribe {
    font-size: 13px !important;
    padding: 10px 12px !important;
    width: auto !important;
  }

  /* Footer column text scaling */
  .elementor-location-footer .elementor-widget-heading .elementor-heading-title {
    font-size: 14px !important;
    letter-spacing: 0.05em;
  }

  /* Privacy policy and other footer links */
  .elementor-location-footer a {
    font-size: 12px !important;
  }

  }

/* === STATIC PAGES === */

.tsl-page {
  font-family:
    "neue-frutiger-world", "avenir-next-lt-pro",
    "Avenir Next",
    sans-serif;
  background: var(--white);
  color: var(--gray-900);
  line-height: 1.6;
  padding: 0;
}

/* Reduce space between header and content on static pages */
body:has(.tsl-page) main#content {
  padding-top: 0;
  margin-top: 0;
}

/* Mobile: plain .tsl-page pages sit on the same 16px rail as the header
   (the theme's main#content adds its own 10px otherwise) */
@media (max-width: 850px) {
  body:has(.tsl-page) main#content {
    padding-left: 0;
    padding-right: 0;
  }
  .tsl-page .page-wrapper {
    padding-left: var(--margin-x);
    padding-right: var(--margin-x);
  }
}

/* Plain WP pages carrying a .tsl-page template bring their own page-header -
   hide the THEME's title block (direct child of main), else the title shows
   twice (e.g. /about/). The template's own .page-header lives inside
   .tsl-page and is untouched. */
body:has(.tsl-page) main#content > .page-header,
body:has(.tsl-page) .entry-header {
  display: none;
}

body:has(.tsl-page) .e-con.e-parent:has(.tsl-page) {
  padding-top: 0 !important;
}

.tsl-page .page-wrapper {
  padding-top: var(--space-sm);
  padding-bottom: var(--space-md);
  margin-top: 0;
}

.page-header {
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--line-soft);
}

.page-header h1 {
  font-size: var(--h1);
  font-weight: 500;
  color: var(--black);
  margin: 0 0 var(--space-xs) 0;
  letter-spacing: -0.02em;
}

.page-header .subtitle {
  font-size: var(--p);
  color: var(--gray-700);
  margin: 0;
  max-width: 600px;
}

.page-header p {
  font-size: var(--p);
  color: var(--gray-700);
  margin: 0;
}

.page-header p:last-child {
  margin-bottom: 0;
}

.page-header .date {
  font-size: var(--small);
  color: var(--gray-600);
  font-style: italic;
}

.content-section {
  padding: var(--space-md) 0;
}

.content-grid {
  display: grid;
  grid-template-columns:
    1.2fr 1fr;
  gap: var(--space-md);
  align-items: start;
}

.content-text h2 {
  font-size: var(--h2);
  font-weight: 500;
  color: var(--black);
  margin-bottom:
    var(--space-sm);
  margin-top: var(--space-md);
  letter-spacing: -0.01em;
}

.content-text h2:first-child {
  margin-top: 0;
}

.content-text h3 {
  font-size: var(--h3);
  font-weight: 500;
  color: var(--black);
  margin:
    var(--space-sm) 0
    var(--space-xs);
}

.content-text p {
  font-size: var(--p);
  line-height: 1.8;
  color: #444;
  margin-bottom:
    var(--space-sm);
}

.content-text ul {
  margin:
    0 0 var(--space-sm) 20px;
  font-size: var(--p);
  line-height: 1.8;
  color: #444;
}

.content-text li {
  margin-bottom: 8px;
}

.content-text a {
  color: var(--black);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.content-text a:hover {
  color: var(--red);
}

.archive-link {
  display: inline-block;
  margin-top: var(--space-sm);
  font-size: var(--p);
  font-weight: 500;
  color: var(--black);
  text-decoration: none;
  transition:
    text-decoration 0.2s;
}

.archive-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.page-images {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.poster-padding,
.slide-padding,
.poster-trailer-padding {
  background: var(--gray-100);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}


.slide-padding {
  padding: 8% 6%;
}

.poster-trailer-padding {
  flex-direction: column;
  padding: 5% 5% 5% 5%;
}

.poster-padding img,
.slide-padding img,
.poster-trailer-padding img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.poster-trailer-padding img {
  max-height: 75%;
}

.poster-trailer-padding .trailer-link {
  margin-top: auto;
  font-size: var(--small);
  font-style: italic;
  color: var(--gray-700);
  text-decoration: none;
  transition: color 0.2s ease;
}

.poster-trailer-padding .trailer-link:hover {
  color: var(--red);
}

.poster-padding figcaption,
.slide-padding figcaption {
  font-size: var(--small);
  color: var(--gray-600);
  margin-top: var(--space-xs);
  font-style: italic;
}

/* Legacy support */


.form-group {
  margin-bottom:
    var(--space-sm);
}

.form-group label {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: var(--black);
  margin-bottom:
    var(--space-xs);
}

.form-group input[type="number"],
.form-group input[type="text"],
.form-group input[type="email"] {
  width: 100%;
  padding: var(--space-sm);
  font-family: inherit;
  font-size: var(--h4);
  border: 1px solid var(--black);
  border-radius: 0;
  background: var(--white);
  color: var(--black);
  transition:
    border-color 0.3s;
  -webkit-appearance: none;
  -moz-appearance: textfield;
}

.form-group input:focus {
  outline: none;
  border-color: var(--red);
}

.form-group
  input[type="number"]
  ::-webkit-inner-spin-button,
.form-group
  input[type="number"]
  ::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

.btn-primary {
  width: 100%;
  padding: var(--space-sm);
  font-family: inherit;
  font-size: var(--h4);
  font-style: italic;
  font-weight: 500;
  color: var(--black);
  background: transparent;
  border:
    1px solid var(--red);
  border-radius: 0;
  cursor: pointer;
  transition: all 0.4s ease;
  text-align: center;
}

.btn-primary:hover {
  background: var(--red);
  color: var(--white);
}

.tax-info {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--line-soft);
  font-size: 13px;
  font-style: italic;
  color: var(--gray-600);
  text-align: center;
  line-height: 1.5;
}


.tier-item .btn-primary {
  padding:
    var(--space-xs)
    var(--space-sm);
  font-size: 16px;
}

.tsl-page .page-footer {
  border-top: 1px solid var(--line-soft);
  margin-top: var(--space-md);
  padding: 50px 0 0 0;
}

.tsl-page .page-footer p {
  font-size: var(--small);
  color: var(--gray-600);
  margin: 0;
  line-height: 1;
}

/* Privacy/Legal page styles */
.privacy-content {
  max-width: 800px;
  padding-top: var(--space-md);
}

.privacy-content h2 {
  font-size: var(--h2);
  font-weight: 500;
  color: var(--black);
  margin: var(--space-md) 0 var(--space-sm) 0;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--line-soft);
}

.privacy-content h2:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

.privacy-content h3 {
  font-size: var(--h4);
  font-weight: 500;
  color: var(--black);
  margin: var(--space-sm) 0 var(--space-xs) 0;
}

.privacy-content p {
  font-size: var(--p);
  line-height: 1.8;
  color: var(--gray-900);
  margin-bottom: var(--space-sm);
}

.privacy-content ul {
  margin: 0 0 var(--space-sm) var(--space-sm);
  padding-left: var(--space-sm);
}

.privacy-content li {
  font-size: var(--p);
  line-height: 1.8;
  color: var(--gray-900);
  margin-bottom: var(--space-xs);
}

.privacy-content a {
  color: var(--black);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.privacy-content a:hover {
  color: var(--red);
}

.privacy-content strong {
  font-weight: 600;
  color: var(--black);
}

/* Single column layout */
.single-column {
  max-width: 700px;
}

.single-column .content-text {
  max-width: 100%;
}

/* Static pages responsive */
@media (max-width: 768px) {
  .content-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .page-header {
    padding-bottom: var(--space-md);
  }

  .page-header h1 {
    font-size: var(--h1);
  }

  .page-header p {
    font-size: var(--p);
  }

  .content-section {
    padding: var(--space-md) 0;
  }

  .content-text h2 {
    font-size: var(--h2);
  }

  .content-text p {
    font-size: var(--p);
  }

  .archive-link {
    font-size: var(--p);
  }

  .form-group
    input[type="number"] {
    font-size: var(--h5);
    padding: var(--margin-x);
  }

  .btn-primary {
    font-size: var(--h5);
    padding: var(--space-sm);
  }
}

/* === SINGLE POST TEMPLATES (V2) === */

/* Meta info (year, runtime, etc.) */
.tsl-page .page-header .meta {
  color: var(--gray-600);
}

/* Showtimes section in content area */
.tsl-page .showtimes-section {
  margin-bottom: var(--space-md);
}

/* Synopsis styling */
.tsl-page .synopsis {
  margin-bottom: var(--space-md);
}

.tsl-page .synopsis p {
  font-size: var(--p);
  line-height: 1.8;
  color: var(--gray-900);
  margin-bottom: var(--space-sm);
}

.tsl-page .synopsis p:last-child {
  margin-bottom: 0;
}

/* Event excerpt and description */
.tsl-page .event-excerpt {
  margin-bottom: var(--space-md);
}

.tsl-page .event-excerpt p {
  font-size: var(--p);
  line-height: 1.8;
  color: var(--gray-900);
}

.tsl-page .event-description {
  margin-bottom: var(--space-md);
}

.tsl-page .event-description p {
  font-size: var(--p);
  line-height: 1.8;
  color: var(--gray-900);
  margin-bottom: var(--space-sm);
}

.tsl-page .event-description p:last-child {
  margin-bottom: 0;
}

/* Critic quotes */
.tsl-page .critic-quotes {
  padding-top: var(--space-sm);
  border-top: 1px solid var(--line-soft);
}

.tsl-page .critic-quotes blockquote {
  margin: 0 0 var(--space-sm) 0;
  padding: 0;
}

.tsl-page .critic-quotes blockquote:last-child {
  margin-bottom: 0;
}

.tsl-page .critic-quotes p {
  font-size: var(--p);
  font-style: italic;
  line-height: 1.6;
  color: var(--gray-900);
  margin: 0 0 5px 0;
}

.tsl-page .critic-quotes cite {
  font-size: var(--small);
  font-style: normal;
  color: var(--gray-600);
}

/* Divider above the critic-quotes / series-schedule block on movie + event pages.
   The Elementor template tags this widget with .tsl-critic-quotes and only renders it
   when the ACF critic_quotes field has content, so the divider is inherently conditional.
   Equal ~45px space above and below the line: neutralize the previous block's trailing
   margin and this block's leading margin, then use matching top margin + top padding. */
.tsl-critic-quotes.elementor-widget-text-editor {
  /* movies - no divider: the weight contrast (600 quotes vs 400 synopsis)
     does the separating; 50px = the site's section-break beat */
  margin-top: 50px !important;
}
/* events use this block as a SERIES SCHEDULE, not quotes: body weight,
   soft divider restored (no weight contrast to separate it) */
.single-events .tsl-critic-quotes.elementor-widget-text-editor {
  margin-top: var(--space-md) !important;
  border-top: 1px solid var(--line-soft);
  padding-top: var(--space-md);
}
.tsl-critic-quotes > .elementor-widget-container,
.tsl-critic-quotes > .elementor-widget-container > :first-child {
  margin-top: 0 !important;
}

/* Critic quotes: synopsis-weight text, outlets recede to gray
   (settled 2026-07-17 after trying bold/large/left-rule variants) */
.tsl-critic-quotes p {
  font-size: 18px !important;
  font-weight: 600;
  line-height: 1.6 !important;
  color: var(--black);
  margin-bottom: 24px !important;
}
.tsl-critic-quotes p em {
  font-weight: 400;
  color: var(--gray-700);
}
/* whole attribution (critic name + outlet) recedes - the span is wrapped
   by JS in movieevent-page-showtimes-list.php (name is a bare text node) */
.single-movies .tsl-critic-quotes .quote-attrib {
  font-weight: 400;
  color: var(--gray-700);
}
/* events schedule block: regular weight, em/links keep their own colors */
.single-events .tsl-critic-quotes p {
  font-weight: 400;
}
.single-events .tsl-critic-quotes p em {
  color: inherit;
}
.tsl-critic-quotes p:last-child {
  margin-bottom: 0 !important;
}
.elementor-widget:has(+ .tsl-critic-quotes) > .elementor-widget-container > :last-child {
  margin-bottom: 0 !important;
}


/* About artist section (gallery) */
.tsl-page .about-artist {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--line-soft);
}

.tsl-page .about-artist h2 {
  font-size: var(--h3);
  font-weight: 500;
  margin-bottom: var(--space-sm);
}

.tsl-page .about-artist p {
  font-size: var(--p);
  line-height: 1.8;
  color: var(--gray-900);
  margin-bottom: var(--space-sm);
}

/* Gallery opening override for tsl-page */
.tsl-page .gallery-opening {
  margin-bottom: var(--space-md);
}

/* Gallery images grid spacing */
.tsl-page .gallery-images-grid {
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
}

/* Single post templates responsive (movie/event 2-column layouts) */
@media (max-width: 768px) {
  /* Stack the 2-column layout */
  .tsl-single-movie > .e-con,
  .tsl-single-event > .e-con {
    flex-direction: column !important;
  }

  .tsl-single-movie .tsl-single-left,
  .tsl-single-movie .tsl-single-right,
  .tsl-single-event .tsl-single-left,
  .tsl-single-event .tsl-single-right {
    width: 100% !important;
  }

  /* Column order: poster/images (left) first, text (right) second on mobile */
  /* Default flex order keeps left column on top */

  /* Remove poster grey padding on mobile - full bleed */
  .tsl-single-movie .tsl-poster,
  .tsl-single-event .tsl-poster,
  .tsl-single-movie .trailer-section,
  .tsl-single-event .trailer-section,
  .tsl-single-movie .tsl-poster.elementor-widget,
  .tsl-single-event .tsl-poster.elementor-widget {
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    background-color: transparent !important;
  }

  /* Poster frame: 20px above the image, mirroring the 20px image-to-line
     gap below (was an accidental 11px). Placed after the de-matting margin:0
     so this margin-top wins. */
  .tsl-single-movie .trailer-section,
  .tsl-single-event .trailer-section {
    margin-top: 9px !important;
  }

  /* (desktop counterpart lives outside this mobile block, below) */

  /* The image widget's INNER container carries the gray background and a
     phantom 9px line-box below the img - kill both (the poster smudge) */
  .tsl-single-event .trailer-section .elementor-widget-image > .elementor-widget-container,
  .tsl-single-movie .trailer-section .elementor-widget-image > .elementor-widget-container {
    background: transparent !important;
    line-height: 0;
  }

  /* Remove Elementor's background wrapper on poster container */
  .tsl-single-movie .trailer-section.e-con,
  .tsl-single-event .trailer-section.e-con,
  .tsl-single-movie .trailer-section > .e-con-inner,
  .tsl-single-event .trailer-section > .e-con-inner {
    background: none !important;
    background-color: transparent !important;
    padding: 0 !important;
  }

  /* Ensure poster images are visible on mobile */
  .tsl-single-movie .tsl-single-left,
  .tsl-single-event .tsl-single-left {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .tsl-single-movie .tsl-poster,
  .tsl-single-event .tsl-poster,
  .tsl-single-movie .elementor-widget-image,
  .tsl-single-event .elementor-widget-image {
    display: block !important;
    visibility: visible !important;
    background: transparent !important;
  }

  .tsl-single-movie .tsl-poster img,
  .tsl-single-event .tsl-poster img,
  .tsl-single-movie .elementor-widget-image img,
  .tsl-single-event .elementor-widget-image img {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Stack gallery template sections */
  .tsl-single-gallery {
    margin-top: var(--space-sm) !important;
  }

  /* Override Elementor inline mobile font sizes */

  /* Body text (synopsis, description, critic quotes) */
  .tsl-single-movie .elementor-widget-text-editor,
  .tsl-single-movie .elementor-widget-text-editor p,
  .tsl-single-event .elementor-widget-text-editor,
  .tsl-single-event .elementor-widget-text-editor p,
  .tsl-single-gallery .elementor-widget-text-editor,
  .tsl-single-gallery .elementor-widget-text-editor p {
    font-size: var(--p) !important;
  }

  /* Movie/event/gallery title */
  .tsl-single-movie .elementor-widget-heading h1.elementor-heading-title,
  .tsl-single-event .elementor-widget-heading h1.elementor-heading-title,
  .tsl-single-gallery .elementor-widget-heading h1.elementor-heading-title {
    font-size: var(--h1) !important;
  }

  /* Director / presenter / artist headings */
  .tsl-single-movie .elementor-widget-heading h2.elementor-heading-title,
  .tsl-single-movie .elementor-widget-heading h3.elementor-heading-title,
  .tsl-single-event .elementor-widget-heading h2.elementor-heading-title,
  .tsl-single-event .elementor-widget-heading h3.elementor-heading-title,
  .tsl-single-gallery .elementor-widget-heading h2.elementor-heading-title,
  .tsl-single-gallery .elementor-widget-heading h3.elementor-heading-title {
    font-size: 27px !important;
  }

  /* Movie meta & event runtime */
  .movie-meta,
  .tsl-movie-meta,
  .tsl-movie-meta .elementor-shortcode,
  .event-runtime {
    font-size: 19px !important;
  }

  /* Showtime dates and text */
  .showtime-date,
  .tsl-showtime-date,
  .showtime-time-text,
  .showtime-time-disabled {
    font-size: var(--p) !important;
  }

  /* Movie page: shrink the per-showtime note to match small mobile text and let it wrap.
     The note is a full-width flex line of its own; keep its top margin >= 0 so it sits
     BELOW the (taller) time button rather than overlapping it. A negative pull-up tucks
     it tight under the date on desktop, but on narrow mobile the note reaches full width
     and its right side slides under the time button (covers it). */
  .showtime-note-row {
    font-size: var(--small) !important;
    line-height: 1.35;
    margin: 2px 0 10px 0;
  }
}

/* === TODAY'S SCHEDULE (mobile only) === */
/* Uses same classes as mobile calendar agenda view */

/* Hide empty Elementor wrapper when no events today */
.elementor-widget-shortcode:has(.elementor-shortcode:empty) {
  display: none;
}

/* Hidden on desktop */
.todays-schedule-card {
  display: none;
}

/* Mobile only */
@media (max-width: 768px) {
  .todays-schedule-card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    overflow: hidden;
    animation: fadeIn 0.4s ease;
    height: 100%;
  }

  .todays-schedule-card .agenda-date-header {
    padding: 15px 0;
    font-weight: 500;
    font-size: 22px;
    color: var(--black);
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--white);
    border-bottom: none;
    margin: 0;
  }


  .todays-schedule-card .agenda-events {
    padding: 0;
    border-top: 1px solid var(--line-soft);
    flex: 1;
  }

  .todays-schedule-card .agenda-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--line-soft);
    padding: var(--space-xs) 0;
    font-size: 18px;
  }

  .todays-schedule-card .agenda-row-title {
    color: var(--black);
    font-style: normal;
    text-decoration: none;
    line-height: 1.3;
    flex: 1;
    min-width: 0;
  }

  .todays-schedule-card .agenda-row-times {
    display: flex;
    gap: .5px;
    flex-shrink: 0;
    margin-left: var(--space-sm);
  }

  .todays-schedule-card .agenda-time-btn {
    color: var(--black);
    font-style: italic;
    display: inline-block;
    text-decoration: none;
    padding: 2px 6px;
    line-height: 1.5;
    border: 1.5px solid var(--red);
    background: transparent;
    transition: background-color 0.4s ease, color 0.4s ease;
    cursor: pointer;
  }

  .todays-schedule-card .agenda-time-btn:hover {
    background: var(--red);
    color: var(--white);
  }

  /* Movie buttons: blue */
  .todays-schedule-card .agenda-time-btn.agenda-time-movie {
    border-color: var(--blue);
  }
  .todays-schedule-card .agenda-time-btn.agenda-time-movie:hover {
    background: var(--blue);
    color: var(--white);
    border-color: var(--blue);
  }

  /* Gallery buttons: green */
  .todays-schedule-card .agenda-time-btn.agenda-time-gallery {
    border-color: var(--seafoam);
  }
  .todays-schedule-card .agenda-time-btn.agenda-time-gallery:hover {
    background: var(--seafoam);
    color: var(--white);
    border-color: var(--seafoam);
  }

  /* Past showtimes — grayed out, no interaction */
  .todays-schedule-card .agenda-time-past {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
    border-color: var(--gray-200) !important;
  }


  /* Yoga — same button shape but black border, no hover/click */
  .todays-schedule-card .agenda-time-plain {
    color: var(--black);
    font-style: italic;
    display: inline-block;
    padding: 2px 6px;
    line-height: 1.5;
    border: 1.5px solid var(--red);
    background: transparent;
    cursor: default;
  }

  /* Tight trailing arrow on ALL agenda time pills - appearance only, does NOT
     change how the buttons behave. Applies to every type (movie/event/gallery/
     yoga), skipping only past/expired times. Matches the movie-page showtime
     buttons which already include " ->" in markup. */
  .agenda-time-btn:not(.agenda-time-past)::after,
  .agenda-time-plain::after {
    content: " →";
  }
}

/* Footer social icons — bigger on mobile, all on one line */
@media (max-width: 768px) {
  .elementor-social-icons-wrapper .elementor-icon {
    font-size: 24px !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
  }
  .elementor-widget-social-icons .elementor-social-icons-wrapper,
  .elementor-social-icons-wrapper.e-grid-align-center,
  .elementor-social-icons-wrapper.e-grid-align-left,
  .elementor-social-icons-wrapper.e-grid-align-right,
  .elementor-social-icons-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }
  .elementor-widget-social-icons {
    width: 100% !important;
  }
}

/* Remove white space at bottom of page on mobile */
@media (max-width: 768px) {
  .elementor-location-footer > .elementor-section-wrap > :last-child,
  .elementor-location-footer > :last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  footer.elementor-location-footer {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  body:not(.elementor-editor-active) .elementor-location-footer {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* === PRINT BUTTON === */


/* === CLEAN PRINT (site-wide) === */
@media print {
  /* Strip URL suffixes from links */
  a:after, a[href]:after {
    content: none !important;
    display: none !important;
  }

  /* Hide site chrome (by class, not tag — tag selectors break nested semantic markup) */
  .elementor-location-header,
  .elementor-location-footer,
  #wpadminbar,
  .tsl-announcement-banner,
  .tsl-newsletter-form,
  .elementor-widget-button,
  .tsl-print-btn,
  .view-toggle,
  .calendar-nav,
  .calendar-header,
  .header-controls,
  .print-view {
    display: none !important;
  }

  body {
    margin: 0 !important;
    padding: 0 !important;
    background: white !important;
    color: black !important;
  }

  /* Force Elementor containers + #app to flow naturally — they default to fixed heights / overflow hidden which collapses during print */
  html, body,
  .elementor, .elementor-section, .elementor-container,
  .elementor-column, .elementor-column-wrap,
  .elementor-widget-wrap, .elementor-widget,
  .elementor-widget-html, .e-con, .e-parent, .e-child,
  #app, .calendar-grid, .schedule-view, .agenda-view {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    position: static !important;
    background: white !important;
  }
}


/* ========================================
   WooCommerce Overrides
   ======================================== */

/* Hide "added to cart" message everywhere */
.woocommerce-message,
.woocommerce-info {
    display: none !important;
}

/* Hide view cart button */
.added_to_cart {
    display: none !important;
}

/* ========================================
   Termly Cookie Consent
   ======================================== */

/* Hide floating cookie preference button */
.termly-floating-preferences,
.termly-cookie-preference-button,
#termly-cookie-preference-button,
[class*="termly-floating"] {
    display: none !important;
}

/* Mobile: tighten gap above title on movie/event single pages (below trailer link) */
@media (max-width: 768px) {
  body.single-movies h1.elementor-heading-title,
  body.single-events h1.elementor-heading-title {
    margin-top: -10px !important;
  }
}

/* Mobile: 10px space above Current Exhibition heading on gallery landing */
@media (max-width: 768px) {
  .gallery-section.current-exhibition h2.gallery-section-title {
    margin-top: 5px !important;
  }
}

/*TSL-EVX-START*/
.single-events .elementor-element-9a875be{margin-top:-24px !important;}
/*TSL-EVX-END*/

/* Event lead-in (presented_by widget): deck tier, not body copy - joins the
   20px gray meta family (the designed .tsl-event-excerpt rule never got its
   class on the widget) */
.single-events .elementor-element-35476200 .elementor-widget-container,
.single-events .elementor-element-35476200 p {
  font-size: 20px !important;
  color: var(--gray-700) !important;
}

/* Event description: real paragraph beats (theme default was 14.4px) */
.single-events .elementor-element-9a875be p {
  margin-bottom: 24px;
}
.single-events .elementor-element-9a875be p:last-child {
  margin-bottom: 0;
}

/* Single-page headings: balanced wrapping (no weak middle lines, no split names) */
.tsl-single-movie .elementor-widget-heading .elementor-heading-title,
.tsl-single-event .elementor-widget-heading .elementor-heading-title {
  text-wrap: balance;
}

/* Events: match the movie template's meta-to-showtimes beat (~35px, was ~25) */
.single-events .movie-showtimes-list {
  margin-top: 10px;
}


/* ============================================================
   CONSOLIDATED 2026-07-20 - inline blocks relocated here from
   WPCode snippets (verbatim). One stylesheet, one cache.
   Order preserved: head-critical, past-showtimes, site-menu.
   ============================================================ */

/* --- from snippet 18138 'TSL Head Critical' (was wp_head inline) --- */
/* Trailer popup - dark background, minimal white border */
.elementor-popup-modal .dialog-widget-content {
  background: #1a1a1a !important;
  padding: 4px !important;
  border-radius: 4px !important;
}
.elementor-popup-modal .dialog-message {
  padding: 0 !important;
}
.elementor-popup-modal .elementor-container {
  padding: 0 !important;
}


/* Tablet header - buttons shrink more aggressively, logo/title stay stable */
@media (max-width: 1024px) and (min-width: 851px) {
  .main-header-wrapper .elementor-widget-button {
    margin-left: clamp(4px, 1vw, 12px) !important;
  }
  .main-header-wrapper .elementor-button,
  .main-header-wrapper .elementor-button-text {
    font-size: clamp(12px, 1.4vw, 16px) !important;
  }
}

/* Mobile header styles */
@media (max-width: 850px) {
  /* Hide ALL Elementor dividers and remove ALL borders/lines in header */
  .elementor-location-header .elementor-widget-divider,
  .elementor-location-header .elementor-divider,
  .elementor-location-header .elementor-divider-separator {
    display: none !important;
  }

  /* Hide empty banner container after JS moves banner to body */
  .elementor-location-header > .e-con > .e-con:first-child {
    display: none !important;
  }

  /* Kill ALL borders anywhere in header (except our custom ones) */
  .elementor-location-header *:not(.main-header-wrapper),
  .elementor-location-header *::before,
  .elementor-location-header *::after {
    border: none !important;
    box-shadow: none !important;
  }

  /* FIXED HEADER - outer container pinned to viewport top */
  .elementor-location-header,
  .elementor-location-header.elementor-sticky,
  .elementor-location-header.elementor-sticky--active,
  body.elementor-page .elementor-location-header,
  body.elementor-page .elementor-location-header.elementor-sticky,
  body.elementor-page .elementor-location-header.elementor-sticky--active {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    z-index: 999 !important;
    background: white !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
    transition: none !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
  }

  /* Inner wrapper - static within fixed container, NO sticky behavior */
  .main-header-wrapper,
  .main-header-wrapper.elementor-sticky,
  .main-header-wrapper.elementor-sticky--active,
  .main-header-wrapper.elementor-sticky--effects,
  .main-header-wrapper[data-elementor-sticky],
  .main-header-wrapper[data-elementor-sticky-effects] {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
    margin-top: 0 !important;
  }

  /* Reset ALL child positioning to static */
  .main-header-wrapper *,
  .main-header-wrapper > * {
    position: static !important;
    float: none !important;
    transform: none !important;
  }

  /* Mobile header - single compact row: logo + title left, hamburger right */
  .main-header-wrapper {
    display: flex !important;
    flex-flow: row nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    width: 100% !important;
    height: auto !important;
    padding: 7px 0 !important;
    background: white !important;
    border-bottom: 1px solid #999 !important; /* mobile keeps the pre-black grey (desktop lines are black) */
    margin: 0 !important;
    left: 0 !important;
    right: 0 !important;
    gap: 0 !important;
    row-gap: 0 !important;
    column-gap: 0 !important;
    overflow: visible !important;
  }
  /* Zero margins on all widgets in header */
  .main-header-wrapper .elementor-widget {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Logo */
  .main-header-wrapper .elementor-widget-theme-site-logo {
    order: 1 !important;
    flex: 0 0 auto !important;
    margin: 0 10px 0 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .main-header-wrapper .elementor-widget-theme-site-logo img {
    width: 38px !important;
    height: auto !important;
  }

  /* Title - auto right margin pushes the hamburger to the right edge */
  .main-header-wrapper .elementor-widget-heading {
    order: 2 !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    margin: 0 auto 0 0 !important;
    padding: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .main-header-wrapper .elementor-widget-heading .elementor-widget-container {
    padding: 0 !important;
    margin: 0 !important;
  }
  .main-header-wrapper .elementor-heading-title {
    font-size: clamp(17px, 5.6vw, 24px) !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Nav buttons hidden on mobile - they live in the site menu overlay
     (tsl-site-menu.php); the hamburger it injects sits at order 11 */
  .main-header-wrapper .elementor-widget-button {
    display: none !important;
  }

  /* Push content down for fixed header (single-row mobile header) */
  body::before {
    content: '' !important;
    display: block !important;
    height: 57px !important;
    background: white !important;
  }

  /* When announcement banner is present - banner stays visible like desktop */
  body.has-announcement-banner::before {
    height: 89px !important;
    background: white !important;
  }
  /* Banner - ALWAYS visible and fixed at top */
  .tsl-announcement-banner,
  body .tsl-announcement-banner,
  body.has-announcement-banner .tsl-announcement-banner {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 8px 16px !important;
    z-index: 1000 !important;
    box-sizing: border-box !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  body.has-announcement-banner .elementor-location-header,
  body.has-announcement-banner .elementor-location-header.elementor-sticky,
  body.has-announcement-banner .elementor-location-header.elementor-sticky--active,
  body.has-announcement-banner.elementor-page .elementor-location-header,
  body.has-announcement-banner.elementor-page .elementor-location-header.elementor-sticky,
  body.has-announcement-banner.elementor-page .elementor-location-header.elementor-sticky--active {
    position: fixed !important;
    top: 32px !important;
    left: 0 !important;
    right: 0 !important;
    margin-top: 0 !important;
    transform: none !important;
    z-index: 999 !important;
  }
  body.has-announcement-banner .main-header-wrapper {
    margin-top: 0 !important;
    padding-top: 4px !important;
  }

  /* Newsletter form mobile fixes */
  .tsl-newsletter-form input[type="email"],
  .tsl-newsletter-form input[type="submit"] {
    height: 48px !important;
    padding: 12px 16px !important;
    box-sizing: border-box !important;
    font-size: 16px !important; /* Prevents iOS zoom on focus */
  }
  .tsl-newsletter-form input[type="email"]:focus {
    font-size: 16px !important;
  }

  /* Prevent horizontal scroll from honeypot field */
  html {
    overflow-x: hidden !important;
  }
  .tsl-newsletter-form {
    overflow: hidden !important;
  }

  /* Footer HOME/BACK TO TOP section - pull to edges */
  .elementor-element-d6cb509 {
    margin-left: -16px !important;
    margin-right: -16px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: calc(100% + 32px) !important;
  }
  }

/* --- from snippet 18138: past-showtime dimming --- */
/* Past showtime buttons - disabled client-side to handle cached pages */
.tsl-showtime-past {
  opacity: 0.35 !important;
  pointer-events: none !important;
  cursor: default !important;
  border-color: #ccc !important;
}

/* --- from snippet 25518 'TSL Site Menu' (was wp_footer inline) --- */
/* --- Hamburger toggle (injected into .main-header-wrapper) --- */
.tsl-menu-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 40px;
  height: 40px;
  padding: 4px;
  background: none;
  border: 0;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: opacity 0.2s ease;
}
/* Invisible halo brings the tap target to ~46px without visual change.
   position:relative MUST survive head-critical's mobile static-reset, or the
   absolute halo re-anchors to the fixed header and swallows every tap on the
   whole bar (logo and title included) */
.main-header-wrapper .tsl-menu-toggle { position: relative !important; }
.tsl-menu-toggle::after {
  content: "";
  position: absolute;
  inset: -6px;
}
/* burger morphs into an X while the menu is open.
   !important: head-critical's mobile reset forces transform:none on all
   header children - these must outrank it */
html.tsl-menu-open .tsl-menu-toggle span:nth-child(1) { transform: translateY(9px) rotate(45deg) !important; }
html.tsl-menu-open .tsl-menu-toggle span:nth-child(2) { opacity: 0 !important; }
html.tsl-menu-open .tsl-menu-toggle span:nth-child(3) { transform: translateY(-9px) rotate(-45deg) !important; }
.tsl-menu-toggle span { transition: transform 0.18s ease, opacity 0.18s ease; }
.tsl-menu-toggle span {
  display: block;
  width: 32px;
  height: 3px;
  background: #000;
}
.tsl-menu-toggle:hover { opacity: 0.5; }
/* Never show a toggle that got cloned into a sticky spacer */
.elementor-sticky__spacer .tsl-menu-toggle { display: none !important; }

/* --- Desktop header nav (replaces the Elementor button widgets) --- */
.tsl-header-nav { display: none; }
.tsl-header-nav[hidden] { display: none !important; }
@media (min-width: 851px) {
  /* the old template buttons stand down; the snippet nav takes their place */
  .main-header-wrapper .elementor-widget-button { display: none !important; }
  .tsl-header-nav {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: clamp(30px, 3.2vw, 60px);
    font-family: "neue-frutiger-world", "avenir-next-lt-pro", "Avenir Next", -apple-system, sans-serif;
  }
  /* items stay unpositioned so the dropdown anchors to the header bar
     (nearest positioned ancestor = .main-header-wrapper) and hangs flush
     from the header's bottom line */
  .tsl-header-nav .tsl-nav-item { position: static; }
  .tsl-nav-link {
    display: inline-flex;
    align-items: center;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    /* !important: theme button resets pin <button> at 18px otherwise,
       making the dropdown triggers smaller than the plain links */
    font-size: clamp(13px, calc(15px + 0.4vw), 21px) !important;
    font-weight: 400;
    color: #000;
    text-decoration: none !important;
    white-space: nowrap;
    transition: opacity 0.2s ease;
  }
  .tsl-nav-link:hover { opacity: 0.5; }
  .tsl-nav-caret {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 8px;
    margin-top: -4px;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
    transform: rotate(45deg);
  }
  .tsl-nav-drop {
    display: none;
    position: absolute;
    top: 100%;
    left: auto;
    margin-left: -18px;
    flex-direction: column;
    row-gap: 12px;
    padding: 16px 18px;
    background: #fff;
    min-width: 220px;
    z-index: 1500;
  }
  /* invisible bridge so hover survives the trip from trigger down to panel */
  .tsl-nav-drop::before {
    content: "";
    position: absolute;
    top: -24px;
    left: 0;
    right: 0;
    height: 24px;
  }
  /* hover-only: panel opens and the caret flips up */
  .tsl-nav-item:hover .tsl-nav-drop { display: flex; }
  .tsl-nav-item:hover .tsl-nav-caret { transform: rotate(225deg); margin-top: 2px; }
  .tsl-nav-drop a {
    font-size: 16px;
    font-weight: 400;
    color: #000 !important;
    text-decoration: none !important;
    white-space: nowrap;
    transition: opacity 0.2s ease;
  }
  .tsl-nav-drop a:hover { opacity: 0.5; }
  /* active section dimming, same behavior the old buttons had */
  html.section-history .tsl-nav-link[data-section="history"],
  html.section-art .tsl-nav-link[data-section="art"],
  html.section-memberships .tsl-nav-link[data-section="memberships"],
  html.section-donate .tsl-nav-link[data-section="donate"],
  html.section-calendar .tsl-nav-link[data-section="calendar"] { opacity: 0.5; }
}
@media (min-width: 851px) and (max-width: 1120px) {
  .tsl-header-nav { gap: 16px; }
  .tsl-nav-link { font-size: 13px !important; }
}
.elementor-sticky__spacer .tsl-header-nav { display: none !important; }
.tsl-menu-toggle:focus { outline: none; }
.tsl-menu-toggle:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
@media (min-width: 851px) {
  /* Wider gap than the links use, so the hamburger reads as its own element */
  .main-header-wrapper .tsl-menu-toggle { margin-left: clamp(36px, 4vw, 80px); }
}
@media (max-width: 850px) {
  /* head-critical's mobile header orders: logo 1, title 2 (auto right margin);
     11 keeps the hamburger last on the row */
  .main-header-wrapper .tsl-menu-toggle { order: 11; margin-left: 16px; }
}

/* --- Full-screen overlay --- */
.tsl-menu-overlay {
  position: fixed;
  /* desktop: full-screen takeover (top 0). mobile: JS sets top to the
     header's bottom edge so the bar stays put. z 998 covers the desktop
     header (z 100) but sits under the mobile fixed header (z 999). */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 998;
  background: #fff;
  display: flex;
  flex-direction: column;
  padding: 14px var(--margin-x, 16px) calc(28px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  font-family: "neue-frutiger-world", "avenir-next-lt-pro", "Avenir Next", -apple-system, sans-serif;
  opacity: 0;
  transition: opacity 0.18s ease;
}
@media (max-width: 850px) {
  .tsl-menu-overlay { padding-top: 30px; }
  .tsl-menu-head { display: none !important; }
}
.tsl-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(24px, 6vh, 64px);
}
.tsl-menu-brand {
  font-size: var(--h5, 18px);
  font-weight: 500;
  color: #000;
}
.tsl-menu-close {
  background: none;
  border: 0;
  padding: 4px;
  cursor: pointer;
  line-height: 0;
  position: relative;
  transition: opacity 0.2s ease;
}
.tsl-menu-close::after { content: ""; position: absolute; inset: -6px; }
.tsl-menu-close:hover { opacity: 0.5; }
.tsl-menu-close:focus { outline: none; }
.tsl-menu-close:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
.tsl-menu-overlay.is-open { opacity: 1; }
.tsl-menu-overlay[hidden] { display: none; }

.tsl-menu-nav { display: block; }
.tsl-menu-link {
  display: block;
  width: fit-content;
  font-size: clamp(34px, 9vw, 54px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #000 !important;
  text-decoration: none !important;
  transition: opacity 0.2s ease;
}
.tsl-menu-link:hover { opacity: 0.5; }

.tsl-menu-foot {
  display: flex;
  flex-wrap: wrap;
  column-gap: 18px;
  row-gap: 4px;
  margin-top: auto;
  padding-top: 32px;
  font-size: var(--small, 14px);
  color: var(--gray-700, #666);
}
.tsl-menu-foot a { color: inherit !important; text-decoration: none !important; }
.tsl-menu-foot a:hover { opacity: 0.5; }
.tsl-menu-foot-seg { white-space: nowrap; }

html.tsl-menu-open, html.tsl-menu-open body { overflow: hidden !important; }

/* --- Footer nav: same list, styled like the black block's own links
       (20px/500 white caps with arrow), placed into the left column by JS --- */
.tsl-footer-nav {
  display: flex;
  flex-direction: column;
  row-gap: 24px;
  margin: 0 0 40px 0;
  font-family: "neue-frutiger-world", "avenir-next-lt-pro", "Avenir Next", -apple-system, sans-serif;
}
.tsl-footer-nav a {
  width: fit-content;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  color: #fff !important;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: opacity 0.2s ease;
}
.tsl-footer-nav a::after { content: " \2192"; }
.tsl-footer-nav a:hover {
  text-decoration: underline !important;
  text-underline-offset: 4px;
}
.tsl-footer-nav[hidden] { display: none; }

/* every footer text link underlines on hover (incl. the native
   store/yoga/privacy links and HOME/BACK TO TOP) */
.elementor-location-footer .elementor-widget-heading a:hover {
  text-decoration: underline !important;
  text-underline-offset: 4px;
}

@media print {
  .tsl-menu-overlay { display: none !important; }
  html.tsl-menu-open, html.tsl-menu-open body { overflow: visible !important; }
}
@media (prefers-reduced-motion: reduce) {
  .tsl-menu-toggle, .tsl-menu-overlay, .tsl-menu-close, .tsl-menu-link { transition: none; }
}


/* --- consolidated page-specific blocks (2026-07-20, chunk B-D) --- */

/* --- from snippet 21335 homepage cards (tsl-card-bottom-css) --- */
/* Card bottom: full-width showtime button, bigger size, flush to the image, 3-sided box-shadow outline. */
    /* Kill the inline-<img> baseline gap so the button sits truly flush (no white sliver above it). */
    .tsl-movies-grid .e-loop-item img, .tsl-events-grid .e-loop-item img, .tsl-injected-gallery-card img { display: block !important; }
    /* Rest state: ONE continuous frame traced around the whole card (image + time strip),
       structural-line spec (1px var(--line)). The strip itself carries only the seam. */
    .tsl-movies-grid .e-loop-item, .tsl-events-grid .e-loop-item, .tsl-injected-gallery-card {
      border: 1px solid var(--line) !important; box-sizing: border-box !important; position: relative !important; }
    /* Hover (hover-capable devices only — mobile wears the colored state at rest instead):
       1.5px TYPE-COLOR frame (colored-outline canon: 1.5px rested or hovered, site-wide) with
       ZERO layout change — the border stays 1px (color flip only) and a 0.5px ::after ring
       paints INSIDE it. Widening the real border would squeeze the image (border-box) and
       make it visibly jump on hover. Type via :has(). */
    @media (hover: hover) {
      .e-loop-item:hover:has(.tsl-showtimes-movies)   { border-color: var(--blue)    !important; }
      .e-loop-item:hover:has(.tsl-showtimes-events)   { border-color: var(--red)     !important; }
      .e-loop-item:hover:has(.showtime-gallery-title),
      .tsl-injected-gallery-card:hover                { border-color: var(--seafoam) !important; }
      .e-loop-item:hover::after, .tsl-injected-gallery-card:hover::after {
        content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 10;
        border: 0.5px solid; border-color: inherit; }
    }
    .tsl-showtimes-movies .showtime-date-button,
    .tsl-showtimes-events .showtime-date-button,
    .showtime-gallery-title.showtime-date-button {
      display: block !important; width: 100% !important; box-sizing: border-box !important;
      position: relative !important; /* anchors the hover seam-thickening ::before */
      font-size: 16px !important; padding: 2px 11px 3px !important; margin: 0 !important; /* wrapper border 1px + padding 11/3
        keeps the text at the same 12/4 inset; top 2px + the 1px seam line = the old 3px, so nothing shifts */
      border: none !important; border-top: 1px solid var(--line) !important; /* the outline lives on the CARD
        WRAPPER below (one continuous frame around image + strip); the strip carries only the SEAM line
        between image bottom and time strip, same spec as the frame. */
      font-style: normal !important; font-weight: 400 !important; }
    /* Mobile only: lighter date-button TEXT weight + REST STATE = the colored trace
       (touch has no hover): 2px type-color frame + seam. padding-top 1px keeps the
       text where the desktop 2px+1px geometry puts it. */
    @media (max-width: 768px) {
      .tsl-showtimes-movies .showtime-date-button,
      .tsl-showtimes-events .showtime-date-button,
      .showtime-gallery-title.showtime-date-button { font-weight: 400 !important; }
      .e-loop-item:has(.tsl-showtimes-movies)   { border: 1.5px solid var(--blue)    !important; }
      .e-loop-item:has(.tsl-showtimes-events)   { border: 1.5px solid var(--red)     !important; }
      .e-loop-item:has(.showtime-gallery-title),
      .tsl-injected-gallery-card                { border: 1.5px solid var(--seafoam) !important; }
      .tsl-showtimes-movies .showtime-date-button  { border-top: 1.5px solid var(--blue)    !important; padding-top: 1.5px !important; }
      .tsl-showtimes-events .showtime-date-button  { border-top: 1.5px solid var(--red)     !important; padding-top: 1.5px !important; }
      .showtime-gallery-title.showtime-date-button { border-top: 1.5px solid var(--seafoam) !important; padding-top: 1.5px !important; }
    }
    /* Tap/click loading feedback (esp. mobile): on click, fill the card's date button (same as the hover
       effect) and keep it filled while the page navigates/loads. JS adds .tsl-tapped to the .e-loop-item. */
    .tsl-tapped .tsl-showtimes-movies .showtime-date-button  { background: var(--blue)    !important; color: var(--white) !important; }
    .tsl-tapped .tsl-showtimes-events .showtime-date-button  { background: var(--red)     !important; color: var(--white) !important; }
    .tsl-tapped .showtime-gallery-title.showtime-date-button { background: var(--seafoam) !important; color: var(--white) !important; }

/* --- from snippet 21335 homepage cards (tsl-hover-showtimes-css) --- */
@media (hover: hover) and (min-width: 1025px) {
      .e-loop-item a.tsl-hover-card { position: relative; display: block; }
      .tsl-hover-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.75) 42%, rgba(0,0,0,0) 100%);
        opacity: 0; transition: opacity .4s ease; pointer-events: none; z-index: 4; overflow: hidden;
        display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; text-align: left; gap: 9px; padding: 16px 18px; }
      /* Overlay shows on PICTURE hover only; the button fill below stays on .e-loop-item:hover (picture OR button).
         Net: hover picture = overlay + button fill; hover button = button fill only. (Scott 2026-06-18) */
      .e-loop-item a.tsl-hover-card:hover .tsl-hover-overlay { opacity: 1; }
      /* Progressive blur: strong at the top, fading to clear at the bottom (matches the dim). */
      .tsl-hover-overlay::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
        -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
        -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 8%, rgba(0,0,0,0) 25%);
        mask-image: linear-gradient(to bottom, #000 0%, #000 8%, rgba(0,0,0,0) 25%); }
      .tsl-hover-overlay > * { position: relative; z-index: 1; }
      .tsl-hover-overlay .mv-title { color: #fff; font-size: 18px; font-weight: 600; line-height: 1.25; text-wrap: balance; }
      .tsl-hover-overlay .ll  { color: #fff; font-size: 14px; font-weight: 300; line-height: 1.4; }
      .tsl-hover-overlay .sts { display: flex; flex-direction: column; gap: 1px; }
      .tsl-hover-overlay .st  { color: #fff; font-size: 15px; font-weight: 200; letter-spacing: .3px; line-height: 1.5; }
      /* "More →" 5th line: reads as a click-through cue (the whole card links to the page, where the
         real expander lives). Slightly heavier + a hair of gap so it's distinct from the times above. */
      .tsl-hover-overlay .st-more { font-weight: 600; margin-top: 3px; }
      /* Gallery overlay: exhibition title anchors the block (a touch bolder/larger than the
         light detail lines below), artist + dates + reception render as the same light lines. */
      .tsl-hover-overlay .gl-title { color: #fff; font-size: 16px; font-weight: 500; line-height: 1.3; }
      .tsl-hover-overlay .gl-sts { gap: 5px; }
      /* TWO STATES (settled 7/16): REST = 1px black wrap. HOVER = 3px type-color trace +
         strip FILL + the logline/showtimes overlay. No button-only second stage. */
      .e-loop-item:hover .tsl-showtimes-movies .showtime-date-button  { border-color: var(--blue)    !important; background: var(--blue)    !important; color: var(--white) !important; font-weight: 500 !important; }
      .e-loop-item:hover .showtime-gallery-title.showtime-date-button { border-color: var(--seafoam) !important; background: var(--seafoam) !important; color: var(--white) !important; font-weight: 500 !important; }
      .e-loop-item:hover .tsl-showtimes-events .showtime-date-button  { border-color: var(--red)     !important; background: var(--red)     !important; color: var(--white) !important; font-weight: 500 !important; }
      /* Seam matches the 3px hover frame: 1px border-top (above) + this 2px bar painted just
         below the image line, hanging INTO the strip — no layout shift, text untouched. */
      .e-loop-item:hover .showtime-date-button::before {
        content: ''; position: absolute; top: 0; left: 0; right: 0; height: 0.5px;
        pointer-events: none; background: currentColor; }
      .e-loop-item:hover .tsl-showtimes-movies .showtime-date-button::before  { background: var(--blue); }
      .e-loop-item:hover .showtime-gallery-title.showtime-date-button::before { background: var(--seafoam); }
      .e-loop-item:hover .tsl-showtimes-events .showtime-date-button::before  { background: var(--red); }
    }

/* --- from snippet 21431 today's schedule widget --- */
.todays-schedule-card .agenda-date-header-wrap {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            position: sticky;
            top: 0;
            z-index: 10;
            background: var(--white);
            padding: 15px 0;
            border-bottom: none;
        }
        .todays-schedule-card .agenda-date-header-stack {
            position: relative;
            flex: 1;
            text-align: center;
            min-height: 1.3em;
        }
        .todays-schedule-card .agenda-date-header {
            position: relative;
            padding: 0;
            border-bottom: none;
        }
        .todays-schedule-card .agenda-date-header.hidden,
        .todays-schedule-card .agenda-day-block.hidden { display: none; }
        .todays-schedule-card .agenda-nav-btn {
            background: none;
            border: none;
            font-size: 28px;
            line-height: 1;
            color: var(--black);
            cursor: pointer;
            padding: 4px 12px;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
            transition: opacity 0.15s ease;
        }
        .todays-schedule-card .agenda-nav-btn:disabled {
            opacity: 0.2;
            cursor: default;
        }
        .todays-schedule-card .agenda-row-closed {
            justify-content: center;
            padding: 6px 0;
        }
        .todays-schedule-card .day-closed-badge {
            display: inline-block;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            color: var(--white);
            background: var(--red);
            padding: 3px 10px;
        }
        .todays-schedule-card .agenda-row-notice {
            justify-content: center;
            padding: 10px 0;
        }
        .todays-schedule-card .agenda-day-notice {
            font-size: 18px;
            text-align: center;
            color: var(--black);
        }
        .todays-schedule-card .agenda-day-notice a {
            color: var(--black);
            text-decoration: underline;
            text-decoration-color: var(--gray-200);
            text-decoration-thickness: 1px;
            text-underline-offset: 4px;
        }

/* --- from snippet 13428 exhibitions landing --- */
/* Box-sizing reset */
        .galleries-landing *,
        .galleries-landing *::before,
        .galleries-landing *::after {
            box-sizing: border-box !important;
        }

        .galleries-landing {
            width: 100% !important;
            max-width: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
            font-family: "neue-frutiger-world", "avenir-next-lt-pro", "Avenir Next", sans-serif !important;
        }

        /* Sections */
        .galleries-landing .gallery-section {
            margin-bottom: 0 !important;
        }

        .galleries-landing .gallery-section:not(:first-of-type) {
            padding-top: 25px !important;
            border-top: 1px solid #bbb !important;
            margin-top: 15px !important;
        }

        .galleries-landing .gallery-section-title {
            display: block !important;
            font-size: 30px !important;
            font-weight: 500 !important;
            margin: 0 !important;
            margin-bottom: 40px !important;
            padding-bottom: 30px !important;
            border-bottom: 1px solid #bbb !important;
            color: #000 !important;
            letter-spacing: -0.02em !important;
        }

        /* Current exhibition - same size as upcoming cards */
        .galleries-landing .current-exhibition .gallery-landing-card {
            max-width: calc(50% - 15px) !important;
            width: calc(50% - 15px) !important;
        }

        /* Upcoming exhibitions grid */
        .galleries-landing .upcoming-section .gallery-cards {
            display: flex !important;
            flex-wrap: wrap !important;
            gap: 30px !important;
        }

        .galleries-landing .upcoming-section .gallery-landing-card {
            width: calc(50% - 15px) !important;
        }

        .galleries-landing .gallery-landing-card {
            display: block !important;
            text-decoration: none !important;
            color: inherit !important;
            transition: transform 0.2s ease !important;
            padding-bottom: 20px !important;
            border-bottom: 1px solid #bbb !important;
        }

        .galleries-landing .gallery-landing-card:last-child,
        .galleries-landing .current-exhibition .gallery-landing-card {
            border-bottom: none !important;
            padding-bottom: 0 !important;
        }

        /* Remove border from last row of upcoming cards (2-column layout) */
        .galleries-landing .upcoming-section .gallery-landing-card:nth-last-child(-n+2) {
            border-bottom: none !important;
            padding-bottom: 0 !important;
        }

        .galleries-landing .gallery-landing-card:hover {
            transform: translateY(-2px) !important;
        }

        .galleries-landing .gallery-landing-image {
            width: 100% !important;
            overflow: hidden !important;
            margin-bottom: 14px !important;
        }

        .galleries-landing .gallery-landing-image {
            aspect-ratio: 16 / 9 !important;
        }

        .galleries-landing .gallery-landing-image img {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
            display: block !important;
        }

        .galleries-landing .gallery-landing-title {
            font-size: 22px !important;
            font-weight: 500 !important;
            margin: 0 0 2px 0 !important;
            color: #000 !important;
            line-height: 1.3 !important;
        }

        .galleries-landing .gallery-landing-artist {
            font-size: 20px !important;
            color: #666 !important;
            margin-bottom: 2px !important;
        }

        .galleries-landing .gallery-landing-dates {
            font-size: 17px !important;
            color: #888 !important;
        }

        /* Past exhibitions link */
        .galleries-landing .past-exhibitions-link {
            margin-top: 50px !important;
        }

        .galleries-landing .view-past-link {
            display: inline-block !important;
            font-size: 16px !important;
            font-weight: 500 !important;
            color: #000 !important;
            text-decoration: none !important;
            border-bottom: 2px solid #000 !important;
            padding-bottom: 2px !important;
            transition: opacity 0.2s !important;
        }

        .galleries-landing .view-past-link:hover {
            opacity: 0.6 !important;
        }

        /* No exhibitions message */
        .galleries-landing .no-exhibitions {
            font-size: 16px !important;
            color: #666 !important;
            padding: 40px 0 !important;
        }

        /* Tablet */
        @media (max-width: 900px) {
            .galleries-landing .upcoming-section .gallery-landing-card {
                width: calc(50% - 15px) !important;
            }
        }

        /* Mobile */
        @media (max-width: 640px) {
            .galleries-landing .current-exhibition .gallery-landing-card {
                max-width: 100% !important;
                width: 100% !important;
            }
            .galleries-landing .gallery-section {
                margin-bottom: 0 !important;
            }

            .galleries-landing .gallery-section-title {
                font-size: 26px !important;
                margin-bottom: 20px !important;
                padding-bottom: 20px !important;
            }

            .galleries-landing .upcoming-section .gallery-cards {
                flex-direction: column !important;
                gap: 28px !important;
            }

            .galleries-landing .upcoming-section .gallery-landing-card {
                width: 100% !important;
            }

            .galleries-landing .gallery-landing-title {
                font-size: 17px !important;
            }

            .galleries-landing .gallery-landing-artist {
                font-size: 13px !important;
            }

            .galleries-landing .gallery-landing-dates {
                font-size: 12px !important;
            }

            .galleries-landing .past-exhibitions-link {
                margin-top: 30px !important;
            }

            /* Remove section border-top on mobile */
            .galleries-landing .gallery-section:not(:first-of-type) {
                border-top: none !important;
                padding-top: 20px !important;
                margin-top: 0 !important;
            }
            /* Keep title border on mobile like archive page */
            .galleries-landing .gallery-section-title {
                border-bottom: 1px solid #bbb !important;
                padding-bottom: 20px !important;
                margin-bottom: 20px !important;
                font-size: 26px !important;
            }
            /* All cards get dividers on mobile - including current exhibition */
            .galleries-landing .gallery-landing-card,
            .galleries-landing .current-exhibition .gallery-landing-card {
                border-bottom: 1px solid #bbb !important;
                padding-bottom: 20px !important;
            }
            /* Remove divider from last upcoming card only */
            .galleries-landing .upcoming-section .gallery-landing-card:last-child {
                border-bottom: none !important;
                padding-bottom: 0 !important;
            }
        }

/* --- from snippet 13362 past exhibitions grid --- */
/* Box-sizing reset */
        .galleries-archive-wrapper,
        .galleries-archive-wrapper *,
        .galleries-archive-wrapper *::before,
        .galleries-archive-wrapper *::after {
            box-sizing: border-box !important;
        }

        .galleries-archive-wrapper {
            width: 100% !important;
            max-width: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
            font-family: "neue-frutiger-world", "avenir-next-lt-pro", "Avenir Next", sans-serif !important;
        }

        /* Page Header */
        .galleries-archive-wrapper .page-header {
            margin-bottom: 40px !important;
            padding-bottom: 30px !important;
            border-bottom: 1px solid #bbb !important;
        }

        .galleries-archive-wrapper .page-title {
            font-size: 30px !important;
            font-weight: 500 !important;
            margin: 0 !important;
            color: #000 !important;
            letter-spacing: -0.02em !important;
        }

        /* Grid */
        .galleries-archive-grid {
            display: grid !important;
            grid-template-columns: repeat(3, 1fr) !important;
            gap: 30px !important;
            padding: 0 !important;
        }

        .gallery-archive-card {
            display: block !important;
            text-decoration: none !important;
            color: inherit !important;
            transition: transform 0.2s ease !important;
            padding-bottom: 20px !important;
            border-bottom: 1px solid #bbb !important;
        }

        /* Remove border from last row of cards */
        .gallery-archive-card:nth-last-child(-n+3) {
            border-bottom: none !important;
            padding-bottom: 0 !important;
        }

        .gallery-archive-card:hover {
            transform: translateY(-3px) !important;
        }

        .gallery-archive-image {
            width: 100% !important;
            overflow: hidden !important;
            margin-bottom: 14px !important;
        }

        .gallery-archive-image {
            aspect-ratio: 16 / 9 !important;
        }

        .gallery-archive-image img {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
            display: block !important;
        }

        .gallery-archive-info {
            padding: 0 !important;
        }

        .gallery-archive-title {
            font-size: 18px !important;
            font-weight: 500 !important;
            margin: 0 0 8px 0 !important;
            color: #000 !important;
            line-height: 1.3 !important;
        }

        .gallery-archive-artist {
            font-size: 14px !important;
            color: #666 !important;
            margin-bottom: 6px !important;
        }

        .gallery-archive-dates {
            font-size: 13px !important;
            color: #888 !important;
        }

        /* Current exhibitions link */
        .current-exhibitions-link {
            margin-top: 50px !important;
        }

        .view-current-link {
            display: inline-block !important;
            font-size: 16px !important;
            font-weight: 500 !important;
            color: #000 !important;
            text-decoration: none !important;
            border-bottom: 2px solid #000 !important;
            padding-bottom: 2px !important;
            transition: opacity 0.2s !important;
        }

        .view-current-link:hover {
            opacity: 0.6 !important;
        }

        /* Tablet */
        @media (max-width: 900px) {
            .galleries-archive-grid {
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 24px !important;
            }
        }

        /* Mobile */
        @media (max-width: 640px) {
            .galleries-archive-wrapper .page-header {
                margin-bottom: 30px !important;
                padding-bottom: 20px !important;
            }

            .galleries-archive-wrapper .page-title {
                font-size: 26px !important;
            }

            .galleries-archive-grid {
                grid-template-columns: 1fr !important;
                gap: 28px !important;
            }

            .gallery-archive-title {
                font-size: 17px !important;
            }

            .gallery-archive-artist {
                font-size: 13px !important;
            }

            .gallery-archive-dates {
                font-size: 12px !important;
            }

            .current-exhibitions-link {
                margin-top: 35px !important;
            }

            /* On mobile (single column), only remove border from last card */
            .gallery-archive-card:nth-last-child(-n+3) {
                border-bottom: 1px solid #bbb !important;
                padding-bottom: 20px !important;
            }
            .gallery-archive-card:last-child {
                border-bottom: none !important;
                padding-bottom: 0 !important;
            }
        }

/* --- from snippet 11989 showtimes More expander --- */
.movie-showtimes-list .showtimes-more { margin-top: 0; }
        .movie-showtimes-list .showtimes-more > summary {
            list-style: none;
            cursor: pointer;
            padding: 16px 0;
            font-size: 18px;
            font-weight: 400;
            color: #000;
            text-align: center;
            line-height: 29.7px;
            border-bottom: 1px solid #eee;
            text-decoration: none;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
        }
        .movie-showtimes-list .showtimes-more > summary::-webkit-details-marker { display: none; }
        .movie-showtimes-list .showtimes-more > summary::after {
            content: "\00a0\00a0→";
            display: inline-block;
            transform: rotate(0);
            transform-origin: 60% 50%;
            text-decoration: none;
            text-underline-offset: 4px;
            transition: transform 0.25s ease;
        }
        /* Closed + hover: "More →" underlined under both */
        .movie-showtimes-list .showtimes-more:not([open]):not(.is-animating) > summary:hover,
        .movie-showtimes-list .showtimes-more:not([open]):not(.is-animating) > summary:hover::after {
            text-decoration: underline 1px;
            text-underline-offset: 4px;
        }
        /* Open: down arrow rotates 90deg. Border matches the showtime row color. Hover brings back underline ONLY on "More". */
        .movie-showtimes-list .showtimes-more[open] > summary {
            border-bottom-color: #CCCCCC;
        }
        .movie-showtimes-list .showtimes-more[open] > summary::after {
            transform: rotate(90deg);
        }
        .movie-showtimes-list .showtimes-more[open]:not(.is-animating) > summary:hover {
            text-decoration: underline 1px;
            text-underline-offset: 4px;
        }