/*
 * Shared look of socal.wodapalooza.com (Squarespace): header, footer, type,
 * buttons and the ticker band. Values were read off the live site so these
 * pages feel like a subpage of it. Page-specific styles live in each page.
 */

:root{
  --black: #000;
  --ink: #111;
  --white: #fff;
  --mist: #f2f2f2;
  --band: #d9d9d9;
  --line: rgba(0,0,0,0.14);
  --line-dark: rgba(255,255,255,0.16);
  --muted: #5a5a5a;
  --muted-dark: rgba(255,255,255,0.72);
  --peach: #ffa552;          /* live site's outlined "Get Tickets" button */
  --link: #83a2d8;           /* live site's footer links */
  --btn-dark: #282828;

  --display: "Unbounded", "Arial Black", sans-serif;
  --body: "Inter", -apple-system, "Segoe UI", sans-serif;
}

*{ box-sizing: border-box; }
[hidden]{ display: none !important; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
h1,h2,h3,p{ margin: 0; }
h1,h2,h3{ text-wrap: balance; }
a{ color: inherit; }
:focus-visible{ outline: 2px solid var(--peach); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

.wrap{ width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 3rem); }

/* ---------- type ---------- */
.display{
  font-family: var(--display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: -0.05em;
  line-height: 1.04;
}
.overline{ font-family: var(--body); font-weight: 500; font-size: 1rem; letter-spacing: 0.01em; }
.label{
  font-family: var(--body);
  font-weight: 900;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sep{ opacity: 0.4; margin-inline: 0.35em; }

/* ---------- buttons ---------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 3rem;
  padding: 0.85rem 1.5rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: inherit;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn:disabled{ opacity: 0.5; cursor: not-allowed; }
.btn-peach{ color: var(--peach); border-color: var(--peach); }
.btn-peach:hover{ background: var(--peach); color: var(--black); }
.btn-solid{ color: var(--black); background: var(--peach); border-color: var(--peach); }
.btn-solid:hover{ background: var(--white); border-color: var(--white); }
.btn-white{ color: var(--white); border-color: rgba(255,255,255,0.6); }
.btn-white:hover{ background: var(--white); color: var(--black); border-color: var(--white); }
.btn-dark{ color: var(--btn-dark); border-color: var(--btn-dark); }
.btn-dark:hover{ background: var(--btn-dark); color: var(--white); }
.btn-black{ color: var(--white); background: var(--black); border-color: var(--black); }
.btn-black:hover{ background: var(--btn-dark); border-color: var(--btn-dark); }
@media (max-width: 480px){ .btn{ white-space: normal; text-align: center; } }

/* ---------- header (transparent, over a dark hero) ---------- */
.site-header{
  position: absolute; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  padding: 0.9rem clamp(1rem, 4vw, 3rem);
  color: var(--white);
}
.site-logo img{ height: 72px; width: auto; }
.site-nav{ display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 0.35rem 1.6rem; }
.site-nav a, .nav-folder{
  font-family: var(--body);
  font-weight: 900;
  font-size: 0.8rem;
  letter-spacing: 0.01em;
  line-height: 1.3;
  color: var(--white);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0.35rem 0;
  cursor: pointer;
}
.site-nav a:hover, .nav-folder:hover{ text-decoration: underline; text-underline-offset: 4px; }
.nav-item{ position: relative; }
.nav-menu{
  position: absolute; top: 100%; left: -0.8rem; z-index: 5;
  display: none; flex-direction: column;
  min-width: 15rem;
  padding: 0.4rem 0.8rem;
  background: var(--black);
}
.nav-menu a{ padding: 0.45rem 0; }
.nav-item:hover .nav-menu,
.nav-item:focus-within .nav-menu,
.nav-folder[aria-expanded="true"] + .nav-menu{ display: flex; }

.nav-toggle{
  display: none;
  width: 2.75rem; height: 2.75rem;
  place-items: center;
  color: var(--white);
  background: none; border: 0; cursor: pointer;
}
.nav-toggle svg{ width: 1.75rem; height: 1.75rem; }

.mobile-menu{
  position: fixed; inset: 0; z-index: 60;
  overflow-y: auto;
  padding: 1rem clamp(1rem, 4vw, 3rem) 3rem;
  color: var(--white);
  background: var(--black);
}
.mobile-menu-top{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.mobile-menu-top img{ height: 60px; width: auto; }
.mobile-menu nav{ display: flex; flex-direction: column; }
.mobile-menu a, .mobile-menu summary{
  display: block;
  padding: 0.6rem 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.2rem, 5vw, 1.6rem);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--white);
  cursor: pointer;
  list-style: none;
}
.mobile-menu summary::-webkit-details-marker{ display: none; }
.mobile-menu summary::after{ content: " +"; color: var(--peach); }
.mobile-menu details[open] summary::after{ content: " –"; }
.mobile-menu details a{
  padding: 0.45rem 0 0.45rem 1rem;
  font-family: var(--body); font-weight: 900; font-size: 0.9rem; letter-spacing: 0.01em; text-transform: none;
}
@media (max-width: 767px){
  .site-nav{ display: none; }
  .nav-toggle{ display: grid; }
  .site-logo img{ height: 60px; }
}
body.menu-open{ overflow: hidden; }

/* ---------- ticker band ---------- */
/* One group of items in the HTML; site.js clones it until the screen is full and
   sets --ticker-shift to one group's width, so the loop never shows a seam. */
.ticker{ overflow: hidden; background: var(--band); color: var(--black); }
.ticker-track{ display: flex; width: max-content; }
.ticker.is-moving .ticker-track{ animation: ticker var(--ticker-duration, 40s) linear infinite; }
.ticker:hover .ticker-track{ animation-play-state: paused; }
.ticker-group{ display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.ticker-group li{
  display: flex; align-items: center; gap: 0.35em;
  padding-block: 1.1rem;
  font-family: var(--display); font-weight: 500; text-transform: uppercase;
  font-size: clamp(1.05rem, 2.2vw, 1.6rem); line-height: 1; letter-spacing: -0.03em;
  color: #3a3a3a; white-space: nowrap;
}
.ticker-group b{ font-weight: 700; color: var(--black); font-variant-numeric: tabular-nums; }
/* Diamond separator: drawn, not a glyph, so the spacing is exact. */
.ticker-group li::after{
  content: ""; flex: none;
  width: 0.34em; height: 0.34em; margin-inline: 1.15em;
  background: var(--black); transform: rotate(45deg);
}
@keyframes ticker{ to{ transform: translateX(var(--ticker-shift, -50%)); } }

/* ---------- pre-footer tickets band ---------- */
.tickets-band{
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(4rem, 10vw, 7rem);
  text-align: center; color: var(--white);
}
.tickets-band img{ position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.35); }
.tickets-band::after{ content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(150,150,150,0.55); }
.tickets-band h2{ font-size: clamp(2.4rem, 6.5vw, 4.2rem); margin-bottom: 1.75rem; }

/* ---------- footer ---------- */
.site-footer{ background: var(--black); color: var(--white); padding-block: 3.5rem 3.25rem; }
.footer-social{ display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 2.25rem; }
.footer-social a{ display: grid; place-items: center; width: 2rem; height: 2rem; color: var(--white); }
.footer-social svg{ width: 1.5rem; height: 1.5rem; }
.footer-social a:hover{ color: var(--peach); }
.footer-links{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.footer-links a{ font-family: var(--body); font-weight: 500; font-size: 0.9rem; color: var(--link); text-decoration: none; }
.footer-links a:hover{ text-decoration: underline; }