/*
 * SimpleTix Custom CSS — Save The Bay / Hamilton Family Aquarium
 * Brand sourced directly from savebay.org (verified 2026-04-08)
 *
 * Design tokens:
 *   Red:          #ee3a43  — primary brand color (header, nav, logo bg)
 *   Red dark:     #d42b34  — hover/pressed state
 *   Teal:         #0db4c3  — accent color (buttons, links, icons)
 *   Teal dark:    #0a9aaa  — hover/pressed state
 *   White:        #ffffff  — page backgrounds
 *   Off-white:    #f5f5f5  — subtle section backgrounds
 *   Border:       #e0e0e0  — dividers and card borders
 *   Text:         #2c2c2c  — body copy
 *   Font:         Open Sans
 *
 * Paste the content below into:
 *   SimpleTix Manager → General → CSS Editor
 *
 * SimpleTix theme color settings (Settings → Change your theme colors):
 *   Event Page Theme Color:  #0db4c3
 *   Checkout Text Color:     #2c2c2c
 *   Checkout Buttons Color:  #ee3a43
 */

/* ── Google Font import ────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800;900&display=swap');

/* ── Override SimpleTix theme CSS variables ────────────────────── */
:root {
  --event-page-theme-color: #0db4c3;
  --event-page-theme-text-color: #ffffff;
}

/* ── Global reset / base ───────────────────────────────────────── */
body,
.wrapper-inner,
.maincontent {
  background-color: #ffffff !important;
  color: #2c2c2c !important;
  font-family: 'Open Sans', sans-serif !important;
}

/* ── Top / hero section ────────────────────────────────────────── */
.topsection {
  background-color: #ffffff !important;
  border-bottom: none !important;
  padding: 0 !important;
}

/* Event image — override magnificent.css absolute/blurred treatment */
.head_imagemain,
.event_image {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-height: 480px !important;
  object-fit: cover !important;
  opacity: 0.9 !important;
  z-index: 1 !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  filter: none !important;
}

/* Event title bar */
.top-conetent {
  background-color: #ee3a43 !important;
  padding: 24px 32px 20px !important;
}

/* Specific selector required to beat magnificent.css specificity */
.top-conetent h1.st_event_title,
.top-conetent .st_event_title,
.st_event_title {
  color: #ffffff !important;
  font-family: 'Open Sans', sans-serif !important;
  font-size: 2.8rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  line-height: 1.1 !important;
  margin: 0 0 8px !important;
  text-align: left !important;
}

/* ── Inner layout ──────────────────────────────────────────────── */
.innerdiv {
  background-color: #ffffff !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* Left column — event details */
.left-div {
  background-color: #ffffff !important;
  padding: 32px !important;
}

/* ── Desktop hero: full-width image ────────────────────────────────
   SimpleTix still renders an empty .left-div beside the ticket box.
   Magnificent gives that ghost container min-height: 472px on desktop,
   which creates the dead space once we remove its background image.
   Collapse the container completely and let .head_imagemain carry the
   hero image instead.                                              */
@media (min-width: 769px) {
  .topsection .innerdiv {
    display: block !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .topsection .innerdiv .left-div {
    width: 100% !important;
    min-height: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    background-image: none !important;
  }

  .head_imagemain,
  .event_image {
    height: 500px !important;
    max-height: 500px !important;
    min-height: 500px !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
  }

  /* Desktop ticket panel.
     SimpleTix's JS adds .fixed to .innerdiv on scroll, which normally
     makes the ticket box behave differently after the user scrolls. Pin
     the panel into the same right rail from page load so the Description
     remains readable and the layout doesn't jump.                     */
  .topsection .wrapper-inner {
    max-width: 1200px !important;
    margin: 0 auto !important;
    position: relative !important;
  }

  .topsection .innerdiv {
    max-width: 1200px !important;
    margin: 0 auto !important;
    position: relative !important;
  }

  .topsection .innerdiv .right-div,
  .topsection .innerdiv.fixed .right-div {
    position: fixed !important;
    top: 90px !important;
    right: max(32px, calc((100vw - 1200px) / 2 + 32px)) !important;
    left: auto !important;
    bottom: auto !important;
    width: 390px !important;
    max-width: calc(100vw - 64px) !important;
    max-height: calc(100vh - 110px) !important;
    overflow-y: auto !important;
    margin: 0 !important;
    border: none !important;
    z-index: 100 !important;
  }
}

/* Right column — ticket purchase box */
.right-div {
  background-color: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.12) !important;
  border-top: 5px solid #0db4c3 !important;
  padding: 28px 24px !important;
  margin: 20px 12px !important;
}

/* ── Soften the ticket card ────────────────────────────────────── */

/* Card itself: let the inner sections own the padding so the red
   header can sit flush against the rounded top edge.            */
.right-div {
  padding: 0 !important;
  overflow: hidden !important;
}
/* ── Strip the red back to a header band only ──────────────────── */
/* ── Fix icon overlap on date and location ─────────────────────── */
.right-div .top-conetent .st_event_basic_info li.calendar,
.right-div .top-conetent .st_event_basic_info li.st_location {
  padding-left: 26px !important;
  position: relative !important;
}

/* ── Quiet the card so it integrates with the page ─────────────── */
.right-div {
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
  border: 1px solid #e5e5e5 !important;
  border-top: 1px solid #e5e5e5 !important;  /* drops the teal stripe */
  border-radius: 8px !important;             /* softer corners */
}

/* ── Tie the Buy Tickets button visually to the card ──────────── */
.right-div .ticketprice {
  border-top: 1px solid #f0f0f0 !important;
  margin-top: 4px !important;
  padding-top: 16px !important;
  padding-bottom: 20px !important;
}

.right-div .btn-theme {
  width: 100% !important;
  text-align: center !important;
  box-sizing: border-box !important;
  margin-top: 8px !important;
}

/* Kill the red on the wrapper inside the ticket card */
.right-div .top-conetent {
  background-color: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Move the red onto the title itself */
.right-div .top-conetent .st_event_title {
  background-color: #ee3a43 !important;
  color: #ffffff !important;
  display: block !important;
  padding: 16px 20px !important;
  margin: 0 !important;
  font-size: 1.35rem !important;
  letter-spacing: 0.02em !important;
  line-height: 1.2 !important;
}

/* Date + venue render on white, dark text */
.right-div .top-conetent .st_event_basic_info {
  background-color: #ffffff !important;
  list-style: none !important;
  padding: 16px 20px 8px !important;
  margin: 0 !important;
}

.right-div .top-conetent .st_event_basic_info li {
  background-color: transparent !important;
  color: #2c2c2c !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
}

.right-div .top-conetent .st_location p {
  font-weight: 700 !important;
  color: #0db4c3 !important;
  margin: 0 0 4px !important;
}

.right-div .top-conetent .st_location span {
  color: #2c2c2c !important;
  background: transparent !important;
}
/* Red title strip inside the ticket card — slim branded header */
.right-div .top-conetent {
  padding: 14px 20px !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

.right-div .top-conetent .st_event_title,
.right-div .st_event_title {
  font-size: 1.35rem !important;
  letter-spacing: 0.02em !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}
/* ── Reserve right-rail space for the floating card ────────────── */
@media (min-width: 769px) {
  .maincontent {
    padding-right: max(460px, calc((100vw - 1200px) / 2 + 460px)) !important;
    padding-left: max(32px, calc((100vw - 1200px) / 2 + 32px)) !important;
    box-sizing: border-box !important;
  }

  /* Override magnificent.css's calc(100% - 400px) — that 400px was
     reserving space for the old in-flow ticket panel which is now
     position: fixed and out of flow.                                */
  .maincontent .innerconetnt {
    width: 100% !important;
  }
}
/* Restore inner padding the .right-div used to provide */
.right-div .innerconetnt,
.right-div .left_display,
.right-div .event__contentdiv,
.right-div .event-div,
.right-div .ticketprice {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.right-div .event-div {
  margin: 12px 16px !important;
}

/* ── Breathing room between hero and content ───────────────────── */
@media (min-width: 769px) {
  .topsection {
    margin-bottom: 28px !important;
  }
}

/* ── Tab strip: give it a real edge instead of a stranded gray bar ─ */
.tab-content,
.maincontent > .wrapper-inner {
  padding-top: 8px !important;
}

/* ── Section headings ──────────────────────────────────────────── */
/* Specific selector required to beat magnificent.css */
.maincontent .innerconetnt .left_display h5.display_header,
.maincontent .innerconetnt .left_display .display_header,
.display_header,
h5.display_header {
  color: #ee3a43 !important;
  font-family: 'Open Sans', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  border-bottom: 2px solid #e0e0e0 !important;
  padding-bottom: 8px !important;
  margin: 24px 0 12px !important;
}

/* ── Event info / content ──────────────────────────────────────── */
.event__contentdiv,
.innerconetnt,
.left_display {
  color: #2c2c2c !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
  background-color: transparent !important;
}

/* Kill white highlight on any inline text children */
.left_display p,
.left_display span,
.left_display div,
.left_display li,
.innerconetnt p,
.innerconetnt span,
.innerconetnt div,
.innerconetnt li,
.event__contentdiv p,
.event__contentdiv span,
.event__contentdiv div {
  background-color: transparent !important;
}

/* Date & time */
.st_event_basic_info,
.st_date_time_left_display_date_details_time,
.st_event_enddate_time,
.calendar {
  color: #2c2c2c !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
}

/* Location / venue */
.st_location,
.venue-name,
.venue_address,
.venue-address {
  color: #2c2c2c !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
}

.venue-name {
  font-weight: 700 !important;
  color: #0db4c3 !important;
}

/* Map image */
.mapimg img {
  border-radius: 10px !important;
  border: 3px solid #e0e0e0 !important;
}

/* ── Ticket purchase area ───────────────────────────────────────── */
.event-div {
  background-color: #ffffff !important;
  border-radius: 8px !important;
  border: 1px solid #e0e0e0 !important;
  padding: 16px !important;
  margin-bottom: 12px !important;
}

.ticketprice {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

/* Ticket name / label */
.list-box {
  font-weight: 700 !important;
  color: #2c2c2c !important;
  font-size: 1rem !important;
}

/* Buy / select ticket button */
.btn-theme,
span.btn-theme,
a.btn-theme,
button.btn-theme {
  background-color: #0db4c3 !important;
  color: #ffffff !important;
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  border-radius: 4px !important;
  padding: 12px 28px !important;
  border: none !important;
  cursor: pointer !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: background 0.2s ease !important;
}

.btn-theme:hover {
  background-color: #0a9aaa !important;
  color: #ffffff !important;
}

/* ── Links ─────────────────────────────────────────────────────── */
.links a,
.bottom-links a,
.event__contentdiv a,
.left_display a {
  color: #0db4c3 !important;
  text-decoration: underline !important;
  font-weight: 600 !important;
}

.links a:hover,
.bottom-links a:hover {
  color: #0a9aaa !important;
}

/* ── About host section ─────────────────────────────────────────── */
.st_about_host_left_display_details {
  background-color: #f5f5f5 !important;
  border-radius: 10px !important;
  padding: 20px 24px !important;
  border-left: 4px solid #0db4c3 !important;
  margin: 20px 0 !important;
}

/* ── Upcoming events list ───────────────────────────────────────── */
.upcoming_events,
.six-plus-events {
  background-color: #f5f5f5 !important;
  border-radius: 12px !important;
  padding: 20px !important;
  margin-top: 24px !important;
}

.st_event_list_display_body_event_title {
  color: #ee3a43 !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
}

/* ── Navigation bar ─────────────────────────────────────────────── */
.nav,
nav {
  background-color: #ee3a43 !important;
  border-bottom: 3px solid #0db4c3 !important;
  padding: 12px 20px !important;
}

.nav a,
nav a {
  color: #ffffff !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 0.85rem !important;
  text-decoration: none !important;
}

.nav a:hover,
nav a:hover {
  color: #0db4c3 !important;
}

/* ── Footer ─────────────────────────────────────────────────────── */
.footerdiv {
  background-color: #f5f5f5 !important;
  color: #2c2c2c !important;
  padding: 24px 32px !important;
  font-size: 0.85rem !important;
  margin-top: 40px !important;
  border-top: 3px solid #e0e0e0 !important;
}

/* wrapper-inner and nav inside footer — keep transparent */
.footerdiv .wrapper-inner,
.footerdiv .nav,
.footerdiv nav {
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* Hide SimpleTix logo and "powered by" promo text */
.footerdiv img,
.footerdiv .wrapper-inner > img,
.st_footer_with_logo_section_right_header {
  display: none !important;
}

/* Compact utility links */
.footerdiv .bottom-links,
.footerdiv .nav ul,
.footerdiv nav ul {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 4px 16px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

.footerdiv .nav a,
.footerdiv nav a,
.footerdiv .bottom-links a {
  font-size: 0.75rem !important;
  color: #888888 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-weight: 600 !important;
}

.footerdiv .nav a:hover,
.footerdiv nav a:hover,
.footerdiv .bottom-links a:hover {
  color: #ee3a43 !important;
  text-decoration: underline !important;
}

.footerdiv a,
.st_footer_with_logo_section_right_header a {
  color: #ee3a43 !important;
  text-decoration: underline !important;
}

.footerdiv a:hover {
  color: #d42b34 !important;
}

/* ── Tab content ────────────────────────────────────────────────── */
.tab-content {
  background-color: #ffffff !important;
  padding: 20px !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 0 0 8px 8px !important;
}

/* ── Row utility ────────────────────────────────────────────────── */
.row {
  background-color: transparent !important;
}

/* ── Responsive adjustments ─────────────────────────────────────── */
@media (max-width: 768px) {
  .top-conetent h1.st_event_title,
  .top-conetent .st_event_title,
  .st_event_title {
    font-size: 1.8rem !important;
  }

  .top-conetent {
    padding: 16px 20px 12px !important;
  }

  .left-div,
  .right-div {
    padding: 20px !important;
    margin: 10px 0 !important;
  }

  .right-div {
    border-radius: 8px !important;
  }

  .head_imagemain,
  .event_image {
    max-height: 220px !important;
  }
}

/* ── Hide past dates in event range ───────────────────────
   The event's stored range is Apr 23 - Oct 25, 2026, but Apr 23
   has passed. Override the display with the next upcoming start.
   UPDATE THESE TWO STRINGS each time a scheduled date passes:
     Next change: when May 28, 2026 passes → set start to "June 25".
     After that: "July 23" → "August 27" → "September 24" → "October 22".
*/
.calendar.st_event_enddate_time {
  font-size: 0 !important;
  line-height: 0 !important;
}
.calendar.st_event_enddate_time::before {
  content: "May 28 - October 25, 2026";
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
  font-weight: 600 !important;
  color: #2c2c2c !important;
}

.st_date_time_left_display_date_details_time {
  font-size: 0 !important;
  line-height: 0 !important;
}
.st_date_time_left_display_date_details_time::before {
  content: "May 28 - Oct 25, 2026";
  font-size: 1rem !important;
  line-height: 1.7 !important;
  font-weight: 600 !important;
  color: #2c2c2c !important;
}