/**
 * Header / homepage layout fixes that must survive LiteSpeed CSS combine.
 * - Transparent TES logo plate
 * - What’s Hot carousel height (no ~500px stretch)
 * - Desktop (≥1200px) white MENU button with dark text / black rim
 *   (survives LiteSpeed CSS combine if tes-desktop-nav.css is missing)
 */

/* Transparent TES logo plate (keep existing logo-tes.png asset) */
.brand-logo-wrap,
.site-header .brand-logo-wrap {
  background: transparent !important;
  box-shadow: none !important;
}

.brand-logo,
.site-header .brand-logo {
  object-fit: contain !important;
  background: transparent !important;
}

/*
 * What’s Hot / portrait gig carousels share .grid-3.
 * Without clearing template columns, the first tracks collapse to 0px and CSS
 * equal-row height stretches every gig card to ~500px tall.
 */
.venue-swipe-carousel.grid-3,
.venue-swipe-carousel.portrait-gig-grid,
.portrait-gig-grid.venue-swipe-carousel,
.js-hot-carousel.grid-3,
.js-hot-carousel.portrait-gig-grid,
.js-hot-carousel {
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  grid-auto-flow: column !important;
  align-items: start !important;
}

.venue-swipe-carousel.grid-3 > *,
.venue-swipe-carousel.portrait-gig-grid > *,
.js-hot-carousel > * {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  align-self: start !important;
}

.js-hot-carousel .directory-card.gig-card,
.js-hot-carousel .oblong-gig-card,
.js-hot-carousel .unified-gig-card,
.featured-acts-section .js-hot-carousel .gig-card {
  min-height: 136px !important;
  height: auto !important;
  max-height: none !important;
}

.js-hot-carousel .directory-card.gig-card .thumb,
.js-hot-carousel .oblong-gig-card .thumb,
.featured-acts-section .js-hot-carousel .gig-card .thumb {
  height: 136px !important;
  min-height: 136px !important;
  max-height: 136px !important;
}

/* White desktop MENU button — only ≥1200px */
@media (min-width: 1200px) {
  .site-header .menu-toggle,
  .site-header .menu-toggle.tes-desktop-menu-trigger,
  .site-header .btn.menu-toggle.tes-desktop-menu-trigger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    min-height: 48px !important;
    padding: 12px 18px !important;
    border-radius: 14px !important;
    border: 3px solid #111 !important;
    background: #fff !important;
    background-color: #fff !important;
    color: #111 !important;
    font-weight: 800 !important;
    font-size: 0.95rem !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08) !important;
  }

  .site-header .menu-toggle:hover,
  .site-header .menu-toggle:focus-visible,
  .site-header .menu-toggle.tes-desktop-menu-trigger:hover,
  .site-header .menu-toggle.tes-desktop-menu-trigger:focus-visible {
    background: #f3f3f3 !important;
    background-color: #f3f3f3 !important;
    color: #111 !important;
    border: 3px solid #111 !important;
  }

  .site-header .menu-toggle.tes-desktop-menu-trigger[aria-expanded="true"] {
    background: #ebebeb !important;
    background-color: #ebebeb !important;
  }

  .site-header .tes-desktop-menu-trigger__icon span {
    background: #111 !important;
  }
}