/* ==========================================================================
   TrueBalance Wire — brand theme
   Loaded after styles.css / styles2.css / comment.css: overrides colors on
   the existing structural rules and adds the new components for the
   redesign (utility bar, breadcrumb, byline, trust strip, ingredient strip,
   countdown, sticky mobile CTA). Does not touch layout/spacing rules that
   already work (header grid, .sh-card grid, comment list).
   ========================================================================== */

:root {
  --tb-primary: #0c4f65;
  --tb-primary-light: #137392;
  --tb-accent: #fbcd28;
  --tb-alert: #e8622c;
  --tb-ink: #16232b;
  --tb-muted: #5b6b73;
  --tb-bg-soft: #f4f8f9;
  --tb-border: #dce6e8;
}

/* ---- Top utility bar ---- */
.tb-topbar {
  background: var(--tb-primary);
  color: #eaf3f5;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2px;
  padding: 6px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tb-topbar span:last-child {
  opacity: .85;
}

@media (max-width: 640px) {
  .tb-topbar span:last-child {
    display: none;
  }
}

/* ---- Header overrides ---- */
.cnn-header-wrapper {
  z-index: 9998;
  /* Overlap the topbar by 1px to prevent a hairline gap between the two
     full-width bars at non-integer browser zoom levels (subpixel rounding). */
  margin-top: -1px;
}

.thick-black-line {
  background-color: var(--tb-primary-light);
  height: 3px;
}

.tb-logo {
  display: flex;
  align-items: baseline;
  gap: 6px;
  text-decoration: none;
}

.tb-logo-word {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 800;
  font-size: 21px;
  color: var(--tb-ink);
  letter-spacing: -.3px;
}

.tb-logo-badge {
  background: var(--tb-primary-light);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 2px 6px;
  border-radius: 3px;
}

.nav-link {
  color: var(--tb-ink);
}

.nav-link:hover {
  color: var(--tb-primary-light);
}

.btn-signin {
  border-color: var(--tb-primary-light);
  color: var(--tb-primary-light);
  font-weight: 800;
}

.btn-signin:hover {
  background-color: var(--tb-primary-light);
  color: #fff;
}

.tb-live-dot {
  background-color: var(--tb-alert) !important;
}

.timeline-dot.breaking {
  background: var(--tb-alert) !important;
}

/* ---- Breadcrumb ---- */
.tb-breadcrumb {
  max-width: 720px;
  margin: 14px auto 0;
  padding: 0 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--tb-primary-light);
}

.tb-breadcrumb .sep {
  color: var(--tb-muted);
  margin: 0 4px;
  font-weight: 400;
}

/* ---- Alert badge (replaces "Breaking News") ---- */
.tb-badge {
  background-color: var(--tb-alert);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .4px;
  padding: 3px 8px;
  border-radius: 3px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}

.tb-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: tb-pulse 1.4s infinite ease-in-out;
}

@keyframes tb-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .3; }
}

/* ---- Byline ---- */
.tb-byline {
  max-width: 480px;
  margin: 6px auto 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--tb-muted);
}

.tb-byline strong {
  color: var(--tb-ink);
}

/* ---- Trust badge strip ---- */
.tb-trust-strip {
  max-width: 680px;
  margin: 18px auto 0;
  padding: 14px 16px;
  background: var(--tb-bg-soft);
  border: 1px solid var(--tb-border);
  border-radius: 10px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 14px;
}

@media (min-width: 640px) {
  .tb-trust-strip {
    grid-template-columns: repeat(4, 1fr);
  }
}

.tb-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--tb-ink);
  line-height: 1.25;
}

.tb-trust-item i {
  color: var(--tb-primary-light);
  font-size: 15px;
  flex-shrink: 0;
}

/* ---- Ingredient teaser strip ---- */
.tb-ingredients {
  max-width: 680px;
  margin: 18px auto 0;
  padding: 0 16px;
}

.tb-ingredients h3 {
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--tb-muted);
  margin: 0 0 10px;
}

.tb-ingredient-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.tb-ingredient-chip {
  background: #fff;
  border: 1.5px solid var(--tb-border);
  color: var(--tb-primary);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
}

/* ---- Post-pitch trust block (revealed with the offer) ---- */
.tb-reveal-intro {
  max-width: 640px;
  margin: 30px auto 14px;
  padding: 0 16px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--tb-ink);
}

.tb-ingredient-grid {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (min-width: 640px) {
  .tb-ingredient-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.tb-ingredient-card {
  background: #fff;
  border: 1px solid var(--tb-border);
  border-radius: 10px;
  padding: 10px 12px;
}

.tb-ingredient-card strong {
  display: block;
  font-size: 12.5px;
  color: var(--tb-primary);
  margin-bottom: 3px;
}

.tb-ingredient-card span {
  display: block;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--tb-muted);
}

.tb-bonus-banner {
  max-width: 640px;
  margin: 16px auto 4px;
  padding: 10px 16px;
  background: #fff8e1;
  border: 1.5px dashed var(--tb-accent);
  border-radius: 10px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--tb-ink);
}

/* ---- Sticky mobile CTA ---- */
.tb-sticky-cta {
  display: none;
}

@media (max-width: 767px) {
  .tb-sticky-cta {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(to top, #fccd15 50%, #ffd814 51%);
    color: var(--tb-ink);
    font-weight: 900;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .3px;
    text-decoration: none;
    box-shadow: 0 -4px 14px rgba(0, 0, 0, .18);
  }
}

/* ---- Trim the feed post's bottom divider spacing (was sized for a multi-post feed) ---- */
.post-container {
  padding-bottom: 12px;
  margin-bottom: 12px;
}

/* ---- Offer reveal spacing: keep content clear of the sticky header ---- */
.delay {
  scroll-margin-top: 90px;
}

#gfq-dtc-external {
  padding-top: 8px;
}

.sh-grid {
  padding-top: 16px !important;
}

/* ---- Best-offer highlight pulse (plays once on reveal) ---- */
.tb-highlight-pulse {
  animation: tb-card-pulse 0.9s ease-out 2;
}

@keyframes tb-card-pulse {
  0% { box-shadow: 0 0 0 0 rgba(251, 205, 40, .7); }
  70% { box-shadow: 0 0 0 14px rgba(251, 205, 40, 0); }
  100% { box-shadow: 0 0 0 0 rgba(251, 205, 40, 0); }
}

/* ---- Comments section header accent ---- */
#fb-comments .fb-heading {
  color: var(--tb-ink);
}