/*
 * TMC Global CSS Framework
 * Semantic brand classes for Texas Music Cafe®
 * All colors reference Elementor Global Color CSS variables.
 * Version: 1.2.0
 */

/* ============================================================
   GLOBAL COLOR TOKENS (mapped from Elementor Global Colors)
   ============================================================ */
:root {
  --tmc-color-navy-dark:   var(--e-global-color-accent,        #1E2A38);
  --tmc-color-gold:        var(--e-global-color-primary,       #D4AF37);
  --tmc-color-gold-mid:    var(--e-global-color-secondary,     #C9A84C);
  --tmc-color-text:        var(--e-global-color-text,          #E0E0E0);
  --tmc-color-navy:        var(--e-global-color-72a6eb0c,      #1A2E5A);
  --tmc-color-neon-green:  var(--e-global-color-2545afcd,      #39FF14);
  --tmc-color-success:     var(--e-global-color-67685a52,      #00C853);
  --tmc-color-error-neon:  var(--e-global-color-2dc08a2a,      #FF1744);
  --tmc-color-error:       var(--e-global-color-3d3663ca,      #B71C1C);

  /* Layout tokens — derived from site-wide audit */
  --tmc-section-padding-v:  80px;
  --tmc-section-padding-h:  40px;
  --tmc-container-max-width: 1265px;
  --tmc-card-radius:         8px;
  --tmc-card-gap:            25px;
  --tmc-card-padding:        24px;
}

/* ============================================================
   .tmc-card  — Unified card / content block
   ============================================================ */
.tmc-card {
  background-color: var(--tmc-color-navy);
  color:            var(--tmc-color-text);
  border-radius:    var(--tmc-card-radius);
  padding:          var(--tmc-card-padding);
  box-sizing:       border-box;
  transition:       box-shadow 0.25s ease, transform 0.25s ease;
}

.tmc-card:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  transform:  translateY(-2px);
}

/* Card title */
.tmc-card .elementor-heading-title,
.tmc-card h1, .tmc-card h2,
.tmc-card h3, .tmc-card h4 {
  color: var(--tmc-color-gold);
}

/* Card body text */
.tmc-card p,
.tmc-card .elementor-widget-text-editor {
  color: var(--tmc-color-text);
}

/* Card divider accent */
.tmc-card::before {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  background: var(--tmc-color-gold);
  margin-bottom: 12px;
  border-radius: 2px;
}

/* ============================================================
   .tmc-container  — Unified section / layout wrapper
   Audit baseline: padding 80px v / 40px h, max-width 1265px,
   flex-direction column, align-items center, gap 25px
   ============================================================ */
.tmc-container {
  width:          100%;
  max-width:      var(--tmc-container-max-width);
  margin-left:    auto;
  margin-right:   auto;
  padding-top:    var(--tmc-section-padding-v);
  padding-bottom: var(--tmc-section-padding-v);
  padding-left:   var(--tmc-section-padding-h);
  padding-right:  var(--tmc-section-padding-h);
  box-sizing:     border-box;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--tmc-card-gap);
}

/* Row variant — side-by-side children (e.g. 2-col layouts) */
.tmc-container--row {
  flex-direction: row;
  align-items:    stretch;
  flex-wrap:      wrap;
  gap:            48px;
}

/* Full-bleed variant — no max-width, no horizontal padding */
.tmc-container--full {
  max-width:    none;
  padding-left: 0;
  padding-right: 0;
}

/* Boxed variant — tighter inner content, centered */
.tmc-container--boxed {
  max-width:   960px;
  padding-left:  var(--tmc-section-padding-h);
  padding-right: var(--tmc-section-padding-h);
}

/* ============================================================
   RESPONSIVE OVERRIDES
   ============================================================ */
@media (max-width: 1024px) {
  :root {
    --tmc-section-padding-v: 64px;
    --tmc-section-padding-h: 24px;
  }
  .tmc-container--row {
    gap: 32px;
  }
}

@media (max-width: 767px) {
  :root {
    --tmc-section-padding-v: 40px;
    --tmc-section-padding-h: 16px;
    --tmc-card-padding:      16px;
  }
  .tmc-container--row {
    flex-direction: column;
    gap: 20px;
  }
  .tmc-card:hover {
    transform: none;
  }
}