/* ============================================================
   TBB Pages — Common Base Styles
   Scoped under .tbb-page to avoid conflicts with the
   active WordPress theme.
   ============================================================ */

/* ── Scoped reset ──────────────────────────────────────────── */
.tbb-page *,
.tbb-page *::before,
.tbb-page *::after {
  box-sizing: border-box;
}

.tbb-page {
  font-family: var(--tbb-font);
  font-size:   var(--tbb-text-base);
  font-weight: var(--tbb-weight-normal);
  line-height: var(--tbb-leading-normal);
  color:       var(--tbb-gray-800);
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.tbb-page img {
  display: block;
  max-width: 100%;
  height: auto;
}

.tbb-page a {
  color: var(--tbb-blue-600);
  text-decoration: none;
  transition: color var(--tbb-t-fast);
}

.tbb-page a:hover {
  color: var(--tbb-blue-700);
}

/* ── Layout ────────────────────────────────────────────────── */
.tbb-container {
  width: 100%;
  max-width: var(--tbb-container);
  margin-inline: auto;
  padding-inline: var(--tbb-container-px);
}

.tbb-section {
  padding-block: var(--tbb-section-py);
}

/* ── Section Header ────────────────────────────────────────── */
.tbb-section-header {
  text-align: center;
  margin-bottom: var(--tbb-s-12);
}

.tbb-section-header--left {
  text-align: left;
}

.tbb-eyebrow {
  display: inline-block;
  font-size:      var(--tbb-text-xs);
  font-weight:    var(--tbb-weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tbb-blue-600);
  margin-bottom: var(--tbb-s-3);
}

.tbb-section-title {
  font-size:   var(--tbb-text-4xl);
  font-weight: var(--tbb-weight-extrabold);
  line-height: var(--tbb-leading-tight);
  color:       var(--tbb-gray-900);
  margin: 0 0 var(--tbb-s-4);
}

.tbb-section-subtitle {
  font-size:   var(--tbb-text-lg);
  line-height: var(--tbb-leading-relaxed);
  color:       var(--tbb-gray-500);
  max-width:   640px;
  margin-inline: auto;
}

.tbb-section-header--left .tbb-section-subtitle {
  margin-inline: 0;
}

/* ── Buttons ───────────────────────────────────────────────── */
.tbb-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--tbb-s-2);
  padding:         0.75rem 1.625rem;
  font-family:     var(--tbb-font);
  font-size:       var(--tbb-text-base);
  font-weight:     var(--tbb-weight-semibold);
  line-height:     1;
  border-radius:   var(--tbb-r-full);
  border:          2px solid transparent;
  cursor:          pointer;
  text-decoration: none !important;
  white-space:     nowrap;
  transition:      all var(--tbb-t-base);
  letter-spacing:  -0.01em;
}

/* Sizes */
.tbb-btn--lg {
  padding:   1rem 2rem;
  font-size: var(--tbb-text-lg);
  gap:       var(--tbb-s-3);
}

.tbb-btn--sm {
  padding:   0.5rem 1rem;
  font-size: var(--tbb-text-sm);
}

/* Variants */
.tbb-btn--primary {
  background:  var(--tbb-blue-600);
  color:       var(--tbb-white);
  border-color: var(--tbb-blue-600);
  box-shadow:  var(--tbb-shadow-blue);
}
.tbb-btn--primary:hover {
  background:  var(--tbb-blue-700);
  border-color: var(--tbb-blue-700);
  color:       var(--tbb-white);
  transform:   translateY(-2px);
  box-shadow:  var(--tbb-shadow-blue-lg);
}

.tbb-btn--white {
  background:   var(--tbb-white);
  color:        var(--tbb-blue-700);
  border-color: var(--tbb-white);
  box-shadow:   var(--tbb-shadow-sm);
}
.tbb-btn--white:hover {
  background:   var(--tbb-blue-50);
  color:        var(--tbb-blue-800);
  transform:    translateY(-2px);
}

.tbb-btn--outline-white {
  background:   transparent;
  color:        var(--tbb-white);
  border-color: rgba(255, 255, 255, 0.55);
}
.tbb-btn--outline-white:hover {
  background:   rgba(255, 255, 255, 0.12);
  border-color: var(--tbb-white);
  color:        var(--tbb-white);
}

.tbb-btn--outline {
  background:   transparent;
  color:        var(--tbb-blue-600);
  border-color: var(--tbb-blue-300);
}
.tbb-btn--outline:hover {
  background:   var(--tbb-blue-50);
  border-color: var(--tbb-blue-600);
  color:        var(--tbb-blue-700);
}

.tbb-btn--ghost {
  background:   transparent;
  color:        var(--tbb-blue-600);
  border-color: transparent;
  padding-inline: var(--tbb-s-2);
}
.tbb-btn--ghost:hover {
  background: var(--tbb-blue-50);
  color: var(--tbb-blue-700);
}

.tbb-btn--accent {
  background:   var(--tbb-orange);
  color:        var(--tbb-white);
  border-color: var(--tbb-orange);
  box-shadow:   0 4px 14px rgb(249 115 22 / .35);
}
.tbb-btn--accent:hover {
  background:   var(--tbb-orange-dark);
  border-color: var(--tbb-orange-dark);
  color:        var(--tbb-white);
  transform:    translateY(-2px);
}

/* ── Inline SVG Icons ──────────────────────────────────────── */
.tbb-icon {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  width:           1em;
  height:          1em;
}

.tbb-icon svg {
  display:  block;
  width:    100%;
  height:   100%;
  fill:     none;
  stroke:   currentColor;
}

/* ── Badges ────────────────────────────────────────────────── */
.tbb-badge {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--tbb-s-1);
  padding:        0.25rem 0.625rem;
  border-radius:  var(--tbb-r-full);
  font-size:      var(--tbb-text-xs);
  font-weight:    var(--tbb-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height:    1;
}

.tbb-badge--blue   { background: var(--tbb-blue-100);   color: var(--tbb-blue-700); }
.tbb-badge--green  { background: var(--tbb-green-light); color: var(--tbb-green); }
.tbb-badge--orange { background: var(--tbb-orange-light);color: var(--tbb-orange-dark); }
.tbb-badge--purple { background: var(--tbb-purple-light);color: var(--tbb-purple-dark); }

/* ── Error state ───────────────────────────────────────────── */
.tbb-error {
  padding:       1rem 1.25rem;
  border-radius: var(--tbb-r-md);
  background:    #fef2f2;
  color:         #b91c1c;
  border:        1px solid #fecaca;
  font-size:     var(--tbb-text-sm);
}

/* ── Divider ───────────────────────────────────────────────── */
.tbb-divider {
  border: none;
  border-top: 1px solid var(--tbb-gray-200);
  margin-block: var(--tbb-s-8);
}

/* ── Reduced-motion safety ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .tbb-page *,
  .tbb-page *::before,
  .tbb-page *::after {
    animation-duration:    0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:   0.01ms !important;
  }
}