/* ============================================================
   Born in the City — Component styles
   Loaded after tokens.css. Provides drop-in CSS classes you can
   use in any Gutenberg, Spectra, or Elementor block by adding
   an "Additional CSS class" on the block.
   ============================================================ */

/* ----- Buttons ----- */
.bitc-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 700;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  padding: 10px 16px;
  border-radius: var(--radius-1);
  border: 1.5px solid var(--ink-900);
  cursor: pointer; text-decoration: none;
  line-height: 1;
  transition: background 120ms, color 120ms, transform 80ms;
}
.bitc-btn--ink   { background: var(--ink-900); color: var(--paper); }
.bitc-btn--ink:hover { background: var(--ink-700); color: var(--paper); }
.bitc-btn--gold  { background: var(--marquee-gold); color: var(--ink-900); }
.bitc-btn--gold:hover { background: var(--marquee-gold-deep); color: var(--paper); }
.bitc-btn--ghost { background: transparent; color: var(--ink-900); }
.bitc-btn--ghost:hover { background: var(--ink-900); color: var(--paper); }
.bitc-btn--red   { background: var(--curtain-red); color: var(--paper); border-color: var(--curtain-red-deep); }
.bitc-btn:active { transform: translateY(1px); }

/* ----- Masthead / section labels ----- */
.bitc-mast {
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 700;
  letter-spacing: var(--track-caps-lg);
  text-transform: uppercase;
  color: var(--ink-900);
  border-top: 2px solid var(--ink-900);
  border-bottom: 2px solid var(--ink-900);
  padding: 8px 0;
  display: flex; justify-content: space-between; align-items: center;
}

/* ----- Signature gold mini-rule under section headers ----- */
.bitc-goldrule { display:inline-block; width:64px; height:3px; background: var(--marquee-gold); margin: var(--space-3) 0; }

/* ----- Eyebrows ----- */
.bitc-eyebrow {
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 700;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--fg-accent);
}

/* ----- Cards (blog + show) ----- */
.bitc-card {
  background: var(--paper-2);
  border: 1.5px solid var(--ink-900);
  border-radius: var(--radius-2);
  padding: var(--space-4);
}
.bitc-card--ticket { box-shadow: var(--shadow-ticket); }
.bitc-card--promo  { box-shadow: var(--shadow-ticket-gold); }

/* ----- Italic lede ----- */
.bitc-lede {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px; line-height: 1.5;
  color: var(--fg-2);
}

/* ----- Broadway poster-tile (for the lottery page) ----- */
.bitc-show {
  background: var(--paper-2);
  border: 1.5px solid var(--ink-900);
  padding: 14px;
  box-shadow: var(--shadow-ticket);
  transition: transform 120ms, box-shadow 120ms;
}
.bitc-show:hover { transform: translate(-1px,-1px); box-shadow: 8px 8px 0 var(--ink-900); }
.bitc-show img { width:100%; aspect-ratio: 2/3; object-fit: cover; border: 1.5px solid var(--ink-900); display:block; }

/* ----- Stars (5-star rating — replace plugin output) ----- */
.bitc-stars { color: var(--marquee-gold); letter-spacing: 2px; font-size: 16px; }
.bitc-stars .dim { color: var(--ink-300); }

/* ----- Newsletter panel (Won Lotteries) ----- */
.bitc-newsletter {
  background: var(--ink-900);
  color: var(--paper);
  padding: 44px 32px;
  text-align: center;
  border-top: 2px solid var(--ink-900);
  border-bottom: 2px solid var(--ink-900);
}
.bitc-newsletter h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 40px; line-height: 1.1;
  margin: 12px 0 8px; color: var(--paper);
}
.bitc-newsletter p { color: rgba(246,242,231,.75); max-width: 540px; margin: 0 auto 20px; }

/* ----- Inverted logo on dark surfaces ----- */
.site-footer img.custom-logo,
.bitc-invert-logo { filter: invert(1); }