/*
 * The Events Calendar - saffron theming.
 *
 * Update-safe approach: instead of copying The Events Calendar's fragile V2
 * template PHP into the theme (which breaks on every plugin update), this
 * stylesheet maps the site's saffron design tokens (from site.css) onto TEC's
 * stable V2 CSS class names (.tribe-events-calendar-*, .tribe-common-*). It
 * themes the month + list archive views and the single-event page so /events/
 * matches the rest of the site. Mobile-first.
 *
 * Tokens used (defined in site.css :root): --bg --ink --night --gold
 * --gold-soft --line --ink-soft --radius --s* --step-*.
 *
 * Owner stamp: v1.1.0 | Claude Opus 4.8 (1M context) - effort:high | 2026-06-14 15:38 UTC+3
 * (v1.1.0: adopt mattresscenter commerce design system on /events/ + the
 *  .sa-event-ticket card - clean white surface cards w/ soft shadow + lift
 *  hover, serif headings, confident serif price-signal on the ticket, gold CTA,
 *  trust micro-copy. Mapped onto swamiaditya tokens; AA-safe gold text uses
 *  --gold-ink #7A5C1A on white.)
 * (v1.0.0: token-mapped saffron theming of TEC month/list/single + ticket CTA)
 */

/*
 * WCAG-AA text-safe gold. The brand --gold (#B8923A) is only 2.91:1 on white,
 * which FAILS AA for body links (needs 4.5:1) and barely fails large text (3:1).
 * --gold-ink (#7A5C1A) is 6.23:1 on white = AA for normal text AND links, while
 * keeping the saffron feel. Used for ALL gold-on-light TEXT below. Gold as a
 * button BACKGROUND keeps --gold (dark #1c1407 text on it = 6.26:1, AA-safe).
 */
.tribe-events,
.tribe-common {
  --gold-ink: #7A5C1A;
}

/* ---- Layout shell: drop TEC's own width cap, sit inside the site container. */
.tribe-events,
.tribe-common {
  font-family: var(--f-body, inherit);
  color: var(--ink);
}
.tribe-events .tribe-events-l-container,
.tribe-common--breakpoint-medium.tribe-events .tribe-events-l-container {
  padding-block: var(--s7);
}

/*
 * Mobile-first 375 overflow guard. TEC's V2 grids/tables can push past a narrow
 * viewport. Clip horizontal overflow on the EVENTS CONTAINERS ONLY (never on
 * html/body - that silently defeats the site's position:sticky header, per the
 * web-project-standards overflow-x:clip gotcha). overflow-x:clip (not hidden)
 * does not create a scroll container, so the global sticky header stays intact.
 */
.tribe-events,
.tribe-events .tribe-events-l-container,
.single-tribe_events .tribe-events-single {
  max-width: 100%;
  overflow-x: clip;
}
.tribe-events img,
.single-tribe_events img {
  max-width: 100%;
  height: auto;
}

/* ---- Headings + body type to the site scale. */
.tribe-events .tribe-common-h1,
.tribe-events .tribe-common-h2,
.tribe-events .tribe-common-h3,
.tribe-events .tribe-common-h4,
.tribe-events .tribe-events-calendar-month__day-date,
.tribe-events .tribe-events-calendar-list__event-title {
  font-family: var(--f-display, Georgia, serif);
  color: var(--night);
  letter-spacing: 0;
}
.tribe-events .tribe-common-b1,
.tribe-events .tribe-common-b2,
.tribe-events p {
  color: var(--ink);
}

/* ---- Top bar (datepicker, view switcher, find-events). */
.tribe-events .tribe-events-c-top-bar {
  border-bottom: 1px solid var(--line);
}
.tribe-events .tribe-events-c-top-bar__nav-link,
.tribe-events .tribe-events-c-view-selector__button-text {
  color: var(--ink-soft);
}
.tribe-events .tribe-events-c-top-bar__today-button {
  color: var(--gold-ink);
  font-weight: 600;
}

/* ---- Primary CTA / submit buttons -> saffron gold. */
.tribe-events .tribe-common-c-btn,
.tribe-events .tribe-events-c-search__button,
.tribe-events button.tribe-common-c-btn {
  background-color: var(--gold);
  border-color: var(--gold);
  color: #1c1407;
  border-radius: var(--radius-pill, 999px);
  font-weight: 600;
}
.tribe-events .tribe-common-c-btn:hover,
.tribe-events .tribe-common-c-btn:focus {
  background-color: var(--night);
  border-color: var(--night);
  color: var(--gold-soft);
}

/* ---- Links -> warm gold (AA-safe --gold-ink, 6.23:1 on white), not TEC blue. */
.tribe-events a,
.tribe-events .tribe-common a {
  color: var(--gold-ink);
}
.tribe-events a:hover,
.tribe-events .tribe-common a:hover {
  color: var(--night);
}

/* ===================== MONTH VIEW ===================== */
.tribe-events .tribe-events-calendar-month__day {
  border-color: var(--line);
}
.tribe-events .tribe-events-calendar-month__header-column-title {
  color: var(--ink-soft);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: var(--step--1);
}
/* Today + selected day accents. */
.tribe-events .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date {
  background-color: var(--gold);
  color: #1c1407;
  border-radius: var(--radius-pill, 999px);
}
/* Event chips inside a day. */
.tribe-events .tribe-events-calendar-month__calendar-event-title-link,
.tribe-events .tribe-events-calendar-month__multiday-event-bar-inner {
  color: var(--night);
}
.tribe-events .tribe-events-calendar-month__multiday-event-bar-inner {
  background-color: var(--gold-soft);
}
.tribe-events .tribe-events-calendar-month__calendar-event-datetime {
  color: var(--ink-soft);
}

/* ===================== LIST VIEW ===================== */
.tribe-events .tribe-events-calendar-list__event-row {
  border-bottom: 1px solid var(--line);
}
.tribe-events .tribe-events-calendar-list__event {
  background-color: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius, 12px);
  padding: var(--s5);
  margin-block: var(--s4);
}
.tribe-events .tribe-events-calendar-list__event-date-tag-datetime {
  color: var(--night);
}
.tribe-events .tribe-events-calendar-list__event-datetime,
.tribe-events .tribe-events-calendar-list__event-venue {
  color: var(--ink-soft);
}
.tribe-events .tribe-events-calendar-list__event-title-link {
  color: var(--night);
}
.tribe-events .tribe-events-calendar-list__event-title-link:hover {
  color: var(--gold-ink);
}

/* ===================== SINGLE EVENT ===================== */
.single-tribe_events .tribe-events-single-event-title {
  font-family: var(--f-display, Georgia, serif);
  color: var(--night);
}
.single-tribe_events .tribe-events-schedule h2 {
  color: var(--gold-ink);
}
.single-tribe_events .tribe-events-event-meta {
  border-color: var(--line);
  background-color: var(--bg);
}

/*
 * Single-event ticket CTA (rendered by inc/event-tickets-bridge.php via
 * sa_render_event_ticket_cta). Saffron box matching the site's offer cards.
 */
.sa-event-ticket {
  --gold-ink: #7A5C1A; /* guarantee the AA-safe gold resolves even outside .tribe-events */
  margin: var(--s6) auto 0;
  max-width: 60ch;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius, 12px);
  padding: var(--s6);
  box-shadow: var(--sh-1, 0 1px 2px rgba(42, 32, 22, .06));
}
.sa-event-ticket__price {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s3);
}
.sa-event-ticket__eyebrow {
  font-size: var(--step--1);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.sa-event-ticket__amount {
  font-family: var(--f-display, Georgia, serif);
  font-size: var(--step-1);
  color: var(--gold-ink); /* AA-safe gold on white (6.23:1) */
  font-weight: 600;
}
.sa-event-ticket__amount .amount,
.sa-event-ticket__amount bdi {
  color: var(--gold-ink);
}
.sa-event-ticket__context {
  color: var(--ink);
  margin-bottom: var(--s5);
}
.sa-event-ticket__btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
}
.sa-event-ticket__note {
  margin-top: var(--s3);
  color: var(--ink-soft);
  font-size: var(--step--1);
}

/* ============================================================================
   MATTRESSCENTER COMMERCE DESIGN SYSTEM (v1.1.0)
   Brings the shop's mattresscenter-derived polish to /events/ so the calendar
   and the ticket card read as confidently as the product/checkout surfaces:
   clean white surface cards with a soft shadow + subtle lift on hover, serif
   headings, and a confident serif "price-signal" on the ticket. Mapped onto
   swamiaditya's own tokens (mc --surface->#fff, --border->--line,
   --gold-border->--line-gold, --font-head->--f-display, soft-shadow->--sh-*).
   AA-safe gold TEXT = --gold-ink #7A5C1A (6.23:1 on white).
   ========================================================================== */

/* ---- 1. LIST-VIEW EVENT CARD -> mattresscenter surface card.
   The list event is already a white left-gold-rule card; add the soft shadow,
   token radius and a gentle lift on hover (mc .product-card / .intent-card) so
   it feels tactile and clickable, not flat. -------------------------------- */
.tribe-events .tribe-events-calendar-list__event{
  box-shadow: var(--sh-1);
  transition: box-shadow .2s var(--ease), transform .2s var(--ease),
              border-color .2s var(--ease);
}
.tribe-events .tribe-events-calendar-list__event:hover{
  box-shadow: var(--sh-3);
  transform: translateY(-3px);
  border-color: var(--line-gold);
  border-left-color: var(--gold);
}
/* serif weight discipline on the event title (mc serif heads, weight 400-600) */
.tribe-events .tribe-events-calendar-list__event-title,
.tribe-events .tribe-events-calendar-list__event-title-link{
  font-weight: 600; letter-spacing: .004em; line-height: 1.2;
}
/* the date tag reads as a confident serif accent, like the offer-card .when */
.tribe-events .tribe-events-calendar-list__event-date-tag-datetime{
  font-family: var(--f-display, Georgia, serif); line-height: 1.05;
}

/* ---- 2. MONTH-VIEW DAY CELL -> a touch of surface warmth + tidy chips so the
   grid matches the shop's calm card feel. ---------------------------------- */
.tribe-events .tribe-events-calendar-month__day-cell--mobile,
.tribe-events .tribe-events-calendar-month__day{
  transition: background-color .15s var(--ease);
}
.tribe-events .tribe-events-calendar-month__calendar-event{
  border-radius: var(--radius-sm, 8px);
}
.tribe-events .tribe-events-calendar-month__calendar-event-title-link:hover{
  color: var(--gold-ink);
}

/* ---- 3. SINGLE-EVENT META BOX -> clean surface card with soft shadow + radius
   so the event details sit in a defined panel (mc surface card). ---------- */
.single-tribe_events .tribe-events-event-meta{
  border: 1px solid var(--line);
  border-radius: var(--radius, 12px);
  box-shadow: var(--sh-1, 0 1px 2px rgba(42, 32, 22, .06));
  padding: var(--s5);
  background: #fff;
}
.single-tribe_events .tribe-events-single-event-title{
  font-weight: 600; letter-spacing: .004em;
}

/* ---- 4. TICKET CARD -> mattresscenter price-signal / intent-card feel.
   Confident larger serif price, soft shadow + subtle lift on the whole card,
   gold pill CTA, calm trust micro-copy. Restyles ONLY .sa-event-ticket's CSS
   (its rendering PHP is untouched). -------------------------------------- */
.sa-event-ticket{
  box-shadow: var(--sh-2, 0 4px 10px rgba(58, 34, 24, .07));
  transition: box-shadow .2s var(--ease), transform .2s var(--ease),
              border-color .2s var(--ease);
}
.sa-event-ticket:hover{
  box-shadow: var(--sh-3);
  transform: translateY(-3px);
  border-color: var(--line-gold);
  border-left-color: var(--gold);
}
/* confident serif price-signal (mc .price-signal__amount: serif, large,
   tight tracking, line-height 1). AA-safe --gold-ink on white. */
.sa-event-ticket__amount{
  font-size: var(--step-2);
  letter-spacing: -0.015em;
  line-height: 1;
}
.sa-event-ticket__amount .amount,
.sa-event-ticket__amount bdi{
  letter-spacing: -0.015em; line-height: 1;
}
/* the eyebrow reads as the mc "from" label above the number */
.sa-event-ticket__eyebrow{
  font-family: var(--f-body); font-weight: 600; color: var(--ink-soft);
}
/* gold pill CTA, full-width on phones (mobile-first), inline on wider screens */
.sa-event-ticket__btn{
  justify-content: center;
  width: 100%;
}
/* a calm trust line beneath the CTA (template may emit .sa-event-ticket__trust;
   styled here so it matches the shop's reassurance rows if/when used). */
.sa-event-ticket__trust{
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5);
  margin-top: var(--s4); padding-top: var(--s4);
  border-top: 1px solid var(--line);
  list-style: none; padding-left: 0;
  font-size: var(--step--1); color: var(--ink-soft);
}
.sa-event-ticket__trust li{
  display: inline-flex; align-items: center; gap: .5em;
}
.sa-event-ticket__trust .sa-event-ticket__trust-ic{
  color: var(--gold-ink); line-height: 1;
}

/* ---- 5. DESKTOP (>= 760px): bigger ticket price-signal + inline CTA. ----- */
@media (min-width: 760px){
  .sa-event-ticket__amount{ font-size: var(--step-3); }
  .sa-event-ticket__btn{ width: auto; }
}