/* ==========================================================================
   EverWell Report — brand theme (BloodPril / blood pressure)
   Loaded after styles.css / styles2.css / comment.css: overrides the teal
   palette baked into the structural sheets and adds the components this
   layout needs (utility bar, breadcrumb, byline, trust strip, ingredient
   cards, sticky mobile CTA). Does not touch layout/spacing rules that
   already work (header grid, .sh-card grid, comment list).
   ========================================================================== */

:root {
  --ew-primary: #143a63;
  --ew-primary-light: #1f5f9e;
  --ew-accent: #e04b3c;
  --ew-accent-deep: #b3271b;
  --ew-gold: #ffb020;
  --ew-ink: #14202c;
  --ew-muted: #5c6b7a;
  --ew-bg-soft: #f3f7fb;
  --ew-border: #dae4ee;
}

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

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

@media (max-width: 640px) {
  .ew-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(--ew-accent);
  height: 3px;
}

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

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

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

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

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

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

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

.ew-live-dot {
  background-color: var(--ew-accent) !important;
}

.timeline-dot.breaking {
  background: var(--ew-accent) !important;
}

/* ---- Breadcrumb ---- */
.ew-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(--ew-primary-light);
}

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

/* ---- Alert badge ---- */
.ew-badge {
  background-color: var(--ew-accent-deep);
  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;
}

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

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

/* ---- Headline accent ---- */
.ew-headline-accent {
  color: var(--ew-accent-deep);
}

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

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

/* ---- Offer card palette (overrides the teal hard-coded in styles2.css) ---- */
.sh-grid .sh-card {
  border-color: var(--ew-primary);
}

.sh-grid .sh-card.promo {
  border-color: var(--ew-accent-deep);
  background: radial-gradient(ellipse at center, #1c4c80, #102c4c);
}

.sh-grid .sh-header {
  background: var(--ew-primary);
}

.sh-grid .sh-card.promo .sh-header {
  background: #fff;
  color: var(--ew-accent-deep);
}

.sh-grid .sh-card.promo .sh-btn {
  background: linear-gradient(to top, #d33a2a 50%, #e8503e 51%);
  color: #fff;
}

.sh-grid .sh-card.promo .sh-totals .sh-free,
.sh-grid .sh-card.promo .sh-feature.biggest {
  color: var(--ew-gold);
}

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

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

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

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

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

.ew-ingredients {
  max-width: 680px;
  margin: 18px auto 0;
  padding: 0 16px;
}

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

/* Three ingredients, so a single column on phones reads better than an
   orphaned card on a 2-up grid. */
.ew-ingredient-grid {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

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

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

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

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

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

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

@media (max-width: 767px) {
  .ew-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, #b3271b 50%, #d33a2a 51%);
    color: #fff;
    font-weight: 900;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .3px;
    text-decoration: none;
    box-shadow: 0 -4px 14px rgba(0, 0, 0, .22);
  }
}

/* ---- Trim the feed post's bottom divider spacing (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) ---- */
.ew-highlight-pulse {
  animation: ew-card-pulse 0.9s ease-out 2;
}

@keyframes ew-card-pulse {
  0% { box-shadow: 0 0 0 0 rgba(224, 75, 60, .7); }
  70% { box-shadow: 0 0 0 14px rgba(224, 75, 60, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 75, 60, 0); }
}

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