/*
 * 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;
  }
}

/* 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;
}

/* ── Section headings ──────────────────────────────────────────── */
.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;
  }
}