:root {
  --gold: #c9a24b;
  --cream: #f5efe3;
}

/* Always reserve the vertical scrollbar's gutter, even on pages short
   enough not to need one. Without this, navigating between a tall page
   (scrollbar visible) and a short one (no scrollbar) shifts the centered
   content horizontally, since only .hero-bg is full-bleed/fixed and
   doesn't move, making the jump between pages feel janky. */
html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

.text-gold { color: var(--gold); }
.border-gold { border-color: var(--gold); }
.text-cream { color: var(--cream); }

body[data-env="staging"] #env-banner { display: block; }
body[data-env="production"] #env-banner,
body:not([data-env]) #env-banner { display: none; }

.hero-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60vh;
  min-height: 320px;
  max-height: 640px;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.75) 70%, #000 100%), url("../images/band-bg.jpg");
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
}

/* iOS Safari fails to paint position:fixed elements that use a negative
   z-index, so .hero-bg sits at z-index: 0 and the actual page content is
   raised above it instead of pushing the background behind everything. */
#env-banner,
header,
main,
footer {
  position: relative;
  z-index: 1;
}

.icon-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  color: var(--cream);
  transition: color 0.15s ease, transform 0.15s ease;
}

.icon-link svg {
  width: 2.25rem;
  height: 2.25rem;
  fill: currentColor;
}

.icon-link:hover,
.icon-link:focus-visible {
  color: var(--gold);
  transform: translateY(-2px);
}

.icon-link-sm {
  width: 2.25rem;
  height: 2.25rem;
}

.icon-link-sm svg {
  width: 1.5rem;
  height: 1.5rem;
}

.link-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 0.6rem;
  border-radius: 1rem;
  border: 2px solid var(--gold);
  color: var(--cream);
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.link-card:hover,
.link-card:focus-visible {
  background-color: rgba(201, 162, 75, 0.12);
  transform: translateY(-2px);
}

.link-card-cover {
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.5rem;
  overflow: hidden;
}

.link-card-cover-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(201, 162, 75, 0.12);
}

.link-card-cover-icon svg {
  width: 1.75rem;
  height: 1.75rem;
  fill: var(--gold);
}

.link-card-text {
  display: flex;
  flex-direction: column;
  text-align: left;
  min-width: 0;
}

.link-card-title {
  font-weight: 600;
  color: var(--cream);
  line-height: 1.2;
}

.link-card-subtitle {
  font-size: 0.8125rem;
  color: rgba(245, 239, 227, 0.65);
  line-height: 1.3;
}

.site-nav-link {
  color: rgba(245, 239, 227, 0.65);
  transition: color 0.15s ease;
}

.site-nav-link:hover,
.site-nav-link:focus-visible {
  color: var(--cream);
}

.site-nav-link[aria-current="page"] {
  color: var(--gold);
}

.listen-get-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-size: 0.8125rem;
  font-weight: 600;
  transition: background-color 0.15s ease;
}

.listen-get-btn:hover,
.listen-get-btn:focus-visible {
  background-color: rgba(201, 162, 75, 0.12);
}

.listen-get-menu {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.5rem;
  padding: 0.5rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(201, 162, 75, 0.35);
  background-color: rgba(0, 0, 0, 0.35);
}

.listen-get-menu a {
  padding: 0.35rem 0.5rem;
  border-radius: 0.5rem;
  color: var(--cream);
  font-size: 0.875rem;
  transition: background-color 0.15s ease;
}

.listen-get-menu a:hover,
.listen-get-menu a:focus-visible {
  background-color: rgba(201, 162, 75, 0.12);
}

.lang-switcher-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(201, 162, 75, 0.35);
  color: var(--cream);
  font-size: 1rem;
  line-height: 1;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.lang-switcher-btn:hover,
.lang-switcher-btn:focus-visible {
  border-color: var(--gold);
  background-color: rgba(201, 162, 75, 0.12);
}

.lang-switcher-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 8.5rem;
  padding: 0.5rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(201, 162, 75, 0.35);
  background-color: rgba(0, 0, 0, 0.85);
}

/* In the footer the switcher button sits centered (not flush to a container
   edge like it did in the header), so center the dropdown under the button
   instead of right-aligning it. It also opens upward (bottom instead of
   top) since the footer is the last thing on the page -- opening downward
   would extend the page past what should be its natural end. */
.lang-switcher-menu-footer {
  top: auto;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

.lang-switcher-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: 0.5rem;
  color: var(--cream);
  font-size: 0.8125rem;
  font-weight: 600;
  transition: background-color 0.15s ease;
}

.lang-switcher-item:hover,
.lang-switcher-item:focus-visible {
  background-color: rgba(201, 162, 75, 0.12);
}

.lang-switcher-item.is-active {
  color: var(--gold);
}

.show-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
  padding: 1rem;
  border-radius: 1rem;
  border: 2px solid var(--gold);
}

.show-card-date {
  color: var(--gold);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.show-card-title {
  color: var(--cream);
  font-weight: 600;
}

.show-card-venue {
  color: rgba(245, 239, 227, 0.65);
  font-size: 0.8125rem;
}

.show-card.is-past {
  opacity: 0.55;
}

/* Homepage "next show" teaser — same .show-card, but the ticket/website
   action sits on the right on wider screens (info left, button right)
   instead of stacking below the venue like the /shows/ grid cards. */
@media (min-width: 640px) {
  .show-card-teaser {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }
}

/* Free-entry indicator on a show card — visually distinct (dashed border)
   from the .listen-get-btn links since it isn't clickable. */
.show-free-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px dashed var(--gold);
  color: var(--gold);
  font-size: 0.8125rem;
  font-weight: 600;
}

/* Shop carousel — hides the native scroll bar so the CSS scroll-snap track
   (js/shop-carousel.js) reads as a carousel, not a plain overflowing div.
   Scrolling/swiping itself needs no JS at all. */
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
/* Cart badge — small pill on the header's Shop nav link (nav_shop) showing
   the current item count from cart-store.js / cart-badge.js. */
.cart-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1rem;
  height: 1.1rem;
  margin-left: 0.3rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background-color: var(--gold);
  color: #000;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.1rem;
}

/* /shop/ product grid + cart (layouts/shop/list.html, js/shop-page.js). */
.product-card {
  display: flex;
  flex-direction: column;
  border-radius: 1rem;
  overflow: hidden;
  border: 2px solid var(--gold);
}

.product-card-photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.product-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: flex-start;
  padding: 0.75rem;
}

.product-card-title {
  color: var(--cream);
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.3;
}

.product-card-price {
  color: rgba(245, 239, 227, 0.65);
  font-size: 0.8125rem;
}

.size-select {
  width: 100%;
  padding: 0.35rem 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(201, 162, 75, 0.35);
  background-color: rgba(0, 0, 0, 0.35);
  color: var(--cream);
  font-size: 0.8125rem;
}

.cart-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.6rem;
  border-radius: 1rem;
  border: 1px solid rgba(201, 162, 75, 0.35);
}

.cart-item-photo {
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.5rem;
  object-fit: cover;
}

.cart-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.cart-item-title {
  color: var(--cream);
  font-weight: 600;
  font-size: 0.875rem;
}

.cart-item-price {
  color: rgba(245, 239, 227, 0.65);
  font-size: 0.8125rem;
}

.cart-item-size {
  color: rgba(245, 239, 227, 0.5);
}

.cart-item-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cart-qty-input {
  width: 3rem;
  padding: 0.3rem 0.4rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(201, 162, 75, 0.35);
  background-color: rgba(0, 0, 0, 0.35);
  color: var(--cream);
  font-size: 0.875rem;
  text-align: center;
}

.cart-remove-btn {
  color: rgba(245, 239, 227, 0.65);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color 0.15s ease;
}

.cart-remove-btn:hover,
.cart-remove-btn:focus-visible {
  color: var(--cream);
}

.cart-subtotal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 0.25rem;
  color: rgba(245, 239, 227, 0.75);
  font-size: 0.8125rem;
}

.cart-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.6rem 0.75rem;
  border-radius: 1rem;
  border: 2px solid var(--gold);
  color: var(--cream);
  font-weight: 700;
}

.cart-success {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
  padding: 1rem;
  border-radius: 1rem;
  border: 2px solid var(--gold);
}

.cart-success-title {
  color: var(--gold);
  font-weight: 700;
}

.cart-success-message {
  color: rgba(245, 239, 227, 0.75);
  font-size: 0.875rem;
}

.cart-international-note {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 100%;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 1rem;
  border: 2px solid var(--gold);
  color: var(--cream);
  font-size: 0.875rem;
}

.cart-international-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}

.cart-international-links a {
  color: var(--gold);
  font-weight: 700;
  text-decoration: underline;
}

/* PayPal's Smart Payment Buttons cap their own rendered width at ~750px
   (a hard SDK limit, not something we can override via CSS on the button
   iframe itself). On wide viewports the shop's main content can exceed
   that, leaving a visible gap between the button and the wider cart
   items/total above it -- so cap the whole cart column to match instead
   of fighting the SDK. */
.shop-cart-col {
  width: 100%;
  max-width: 46.875rem;
  margin-left: auto;
  margin-right: auto;
}

[data-x-cloak] {
  display: none !important;
}

iframe {
  border: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}