/* =========================================================
   Elementor-native bridge rules
   -----------------------------------------------------------
   Everything visual in this theme (colors, spacing, gradients,
   hover states, decorative ::before/::after shapes, the reveal
   and tilt animations, the mobile nav panel) is still driven by
   the ORIGINAL selectors in style.css (.hero, .card, .venue,
   .band, .split, .eyebrow, .btn look-alikes via native Button
   settings, etc.) because every native Elementor Container /
   Heading / Text Editor / Image element below is now given the
   SAME CSS class the original hand-coded markup used, via each
   element's own Advanced tab -> CSS Classes field.

   The only places the new Elementor-generated markup is a
   different shape than the original hand-written HTML is the
   header navigation (a Heading widget + link, instead of a bare
   <ul><li><a>), so this file adds the small number of rules
   needed to bridge just that gap. Nothing here duplicates or
   overrides component styling that already lives in style.css.
   ========================================================= */

.tts-nav-link a{
  position:relative;padding:12px 0;color:#dedbd3;
  font-size:9px;font-weight:800;letter-spacing:.075em;text-transform:uppercase;
  transition:color .25s ease;display:inline-block;
}
.tts-nav-link a:after{
  content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease;
}
.tts-nav-link a:hover{color:var(--gold-bright)}
.tts-nav-link a:hover:after{transform:scaleX(1)}

.tts-menu-toggle{display:none !important;cursor:pointer}
.tts-menu-toggle .elementor-icon{color:var(--ivory);font-size:28px}

@media (max-width:1200px){
  .tts-nav-row{gap:11px !important}
  .tts-nav-link a{font-size:8px}
}

@media (max-width:1050px){
  .tts-nav-row{display:none !important}
  .tts-menu-toggle{display:block !important}
  .tts-nav-row.open{
    display:flex !important;position:absolute;top:92px;left:0;right:0;
    flex-direction:column !important;align-items:stretch !important;justify-content:flex-start !important;gap:0 !important;
    background:rgba(8,8,8,.98);padding:12px 24px 22px;border-bottom:1px solid var(--line-gold);
    box-shadow:0 25px 60px rgba(0,0,0,.55);z-index:150;
  }
  .tts-nav-row.open .tts-nav-link a{padding:15px 0;border-bottom:1px solid rgba(255,255,255,.06);display:block;width:100%}
  .tts-nav-row.open .tts-nav-link a:after{display:none}
  .tts-dropdown{position:static !important}
  .tts-dropdown-menu{
    position:static !important;transform:none !important;display:none;opacity:1;visibility:visible;
    box-shadow:none;border:0;border-left:1px solid var(--line-gold);margin:0 0 6px 10px;padding:0 0 0 10px;
    min-width:0;background:transparent;
  }
  .tts-nav-row.open .tts-dropdown:hover .tts-dropdown-menu,
  .tts-nav-row.open .tts-dropdown:focus-within .tts-dropdown-menu{display:block}
}
@media (max-width:720px){
  .tts-nav-row.open{top:78px}
}

/* Elementor's own container defaults add a small gap/width reset on nested
   flex containers; keep our reused component classes (.card, .venue, .event,
   .split-img, .band, .footer, .site-header, .heading, .eyebrow, .grid2-flex,
   .venue-grid-flex, .gallery-flex) authoritative for anything they already
   set in style.css so spacing/colors/hover states match 1:1. */
.grid2-flex, .venue-grid-flex, .gallery-flex{row-gap:26px}
.venue-grid-flex{row-gap:14px}
.gallery-flex{row-gap:12px}

/* Elementor Icon widget wrapper needs the same reset the old <button class="menu">
   had, since it is now the clickable hamburger target for theme.js */
.tts-menu-toggle{background:none;border:0}