/* ============================================================================
   Legacy page compatibility

   About, Contact, Sponsor, Subscribe and Unsubscribe store hand-written HTML
   in the database, written against the previous theme's class names. Rather
   than rewrite five pages of production content, this sheet re-skins those
   class names in the Broadcast language: flat, square, navy and orange.

   Two things to know before editing:

   1. The old theme animated content in with .reveal / .hero-enter, which set
      opacity:0 and waited for its own IntersectionObserver. That script is
      gone, so the first block here forces everything visible. Without it the
      pages render blank — which is exactly what the old live site did on any
      viewport that never fired a scroll event.

   2. Colour classes (.has-heading-color and friends) came from the old
      theme.json palette. They are remapped, not removed, so the content keeps
      its emphasis without dragging the old blues back in.
   ========================================================================= */

/* ---- 1. Undo the animation-gated invisibility ---------------------------- */
.reveal,
.reveal-left,
.reveal-right,
.reveal-scale,
.hero-enter,
.hero-enter-up,
[data-cnp-anim] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ---- 2. Old palette classes -> Broadcast tokens -------------------------- */
.cnp-legacy .has-heading-color,
.cnp-legacy .has-cyan-bright-text-color { color: var(--cnp-text) !important; }
.cnp-legacy .has-muted-color { color: var(--cnp-body) !important; }
.cnp-legacy .has-foreground-color { color: var(--cnp-text) !important; }
.cnp-legacy .has-accent-color { color: var(--cnp-orange) !important; }

/* Anything the old theme placed on a dark surface reads on light now. */
.cnp-legacy { color: var(--cnp-body); }

/* ---- 3. Page heroes ------------------------------------------------------ */
/* The navy band is rendered by the template, so the in-content hero collapses
   to a plain intro rather than a second competing header. */
.cnp-legacy .page-hero,
.cnp-legacy .hero-full {
  position: relative;
  background: none;
  padding: 0 0 8px;
  text-align: left;
  min-height: 0;
  overflow: visible;
}
.cnp-legacy .page-hero-bg-img,
.cnp-legacy .page-hero-overlay,
.cnp-legacy .hero-bg-img,
.cnp-legacy .hero-bg-overlay,
.cnp-legacy .hero-waveform-bg,
.cnp-legacy .hero-waveform-bars,
.cnp-legacy .signal-ring,
.cnp-legacy .signal-dot,
.cnp-legacy .pulse-divider,
.cnp-legacy .pulse-divider-hero,
.cnp-legacy .page-hero-icon { display: none !important; }

.cnp-legacy .section-wide,
.cnp-legacy .wide-width {
  max-width: none;
  margin: 0;
  padding: 0;
  width: auto;
}

.cnp-legacy .page-hero-title,
.cnp-legacy .hero-tagline {
  font-family: var(--cnp-display);
  font-weight: 900;
  font-size: var(--cnp-h2-size);
  line-height: 1;
  letter-spacing: -.035em;
  text-transform: uppercase;
  color: var(--cnp-text);
  margin: 0 0 14px;
  max-width: none;
  text-wrap: pretty;
}
.cnp-legacy .hero-tagline span { color: var(--cnp-orange); }

.cnp-legacy .page-hero-desc,
.cnp-legacy .hero-subtitle {
  font-size: 20px;
  line-height: 1.55;
  font-weight: 600;
  color: var(--cnp-text) !important;
  margin: 0 0 24px;
  max-width: var(--cnp-body-max);
}

.cnp-legacy .mission-badge,
.cnp-legacy .hero-contact-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--cnp-orange);
  border: 0;
  border-radius: 0;
  padding: 5px 10px;
  font-family: var(--cnp-display);
  font-weight: 900;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cnp-navy) !important;
  margin-bottom: 16px;
}

/* ---- 4. Section headers -------------------------------------------------- */
.cnp-legacy .section-label {
  display: block;
  font-family: var(--cnp-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cnp-orange);
  border-bottom: 0;
  padding: 0;
  margin: 0 0 8px;
}
.cnp-legacy .section-title {
  font-family: var(--cnp-display);
  font-weight: 900;
  font-size: var(--cnp-h2-size);
  line-height: 1;
  letter-spacing: -.035em;
  text-transform: uppercase;
  color: var(--cnp-text);
  margin: 0 0 18px;
  padding-top: 18px;
  border-top: 3px solid var(--cnp-navy);
  text-wrap: pretty;
}
.cnp-legacy .section { padding: 26px 0; }
.cnp-legacy .section-alt,
.cnp-legacy .about-section { background: none; }

/* ---- 5. Card grids ------------------------------------------------------- */
/* Every old card variant becomes the same flat row-card: no radius, no
   shadow, a 2px rule underneath. */
.cnp-legacy .hosts-grid,
.cnp-legacy .stats-grid,
.cnp-legacy .support-grid,
.cnp-legacy .packages-grid,
.cnp-legacy .benefits-grid,
.cnp-legacy .subscribe-options,
.cnp-legacy .contact-info-grid,
.cnp-legacy .features-row,
.cnp-legacy .projects-grid {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 0 28px;
  margin: 0 0 24px;
  border-top: 3px solid var(--cnp-navy);
  max-width: none;
}
@media (min-width: 700px) {
  .cnp-legacy .hosts-grid,
  .cnp-legacy .stats-grid,
  .cnp-legacy .support-grid,
  .cnp-legacy .packages-grid,
  .cnp-legacy .benefits-grid,
  .cnp-legacy .subscribe-options,
  .cnp-legacy .features-row { grid-template-columns: 1fr 1fr; }
  .cnp-legacy .projects-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .cnp-legacy .hosts-grid,
  .cnp-legacy .support-grid,
  .cnp-legacy .packages-grid,
  .cnp-legacy .subscribe-options { grid-template-columns: repeat(3, 1fr) !important; }
  .cnp-legacy .stats-grid,
  .cnp-legacy .projects-grid { grid-template-columns: repeat(4, 1fr); }
}

.cnp-legacy .host-card,
.cnp-legacy .stat-card,
.cnp-legacy .support-card,
.cnp-legacy .package-card,
.cnp-legacy .benefit-card,
.cnp-legacy .option-card,
.cnp-legacy .info-card,
.cnp-legacy .feature-item,
.cnp-legacy .pref-card,
.cnp-legacy .contact-form-card {
  background: none !important;
  border: 0;
  border-bottom: 2px solid var(--cnp-divider);
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 22px 22px 24px 0;
  text-align: left;
  transform: none !important;
  transition: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: visible;
}
.cnp-legacy .host-card:hover,
.cnp-legacy .stat-card:hover,
.cnp-legacy .support-card:hover,
.cnp-legacy .package-card:hover,
.cnp-legacy .benefit-card:hover,
.cnp-legacy .info-card:hover { background: var(--cnp-row-hover) !important; }

.cnp-legacy .stat-card::before,
.cnp-legacy .package-card::before,
.cnp-legacy .guest-cta::before,
.cnp-legacy .cta-banner::before,
.cnp-legacy .cta-banner::after,
.cnp-legacy .advertise-banner::before,
.cnp-legacy .advertise-banner::after { display: none !important; }

/* Icons: the old circular tinted bubbles become square orange marks. */
.cnp-legacy .stat-icon,
.cnp-legacy .support-icon,
.cnp-legacy .info-card-icon,
.cnp-legacy .benefit-icon,
.cnp-legacy .feature-icon,
.cnp-legacy .option-icon,
.cnp-legacy .pref-option-icon {
  width: 34px;
  height: 34px;
  border-radius: 0 !important;
  background: var(--cnp-navy) !important;
  border: 0 !important;
  color: var(--cnp-orange) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 6px;
  flex: none;
}

/* Card typography */
.cnp-legacy .host-name,
.cnp-legacy .support-title,
.cnp-legacy .package-name,
.cnp-legacy .benefit-title,
.cnp-legacy .option-title,
.cnp-legacy .info-card-title,
.cnp-legacy .pref-option-title,
.cnp-legacy .pref-card-heading,
.cnp-legacy .confirmation-heading {
  font-family: var(--cnp-display);
  font-weight: 900;
  font-size: 21px;
  line-height: 1.05;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--cnp-text) !important;
  margin: 0;
}

.cnp-legacy .host-role,
.cnp-legacy .package-tier,
.cnp-legacy .option-frequency,
.cnp-legacy .stat-label {
  font-family: var(--cnp-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cnp-orange) !important;
  font-weight: 400;
  margin: 0;
}

.cnp-legacy .host-bio,
.cnp-legacy .support-desc,
.cnp-legacy .package-desc,
.cnp-legacy .benefit-desc,
.cnp-legacy .option-desc,
.cnp-legacy .info-card-value,
.cnp-legacy .pref-option-desc,
.cnp-legacy .pref-card-desc,
.cnp-legacy .confirmation-text,
.cnp-legacy .about-text {
  font-family: var(--cnp-sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--cnp-body) !important;
  margin: 0;
  border: 0;
  padding: 0;
  text-wrap: pretty;
}

.cnp-legacy .stat-number,
.cnp-legacy .package-price,
.cnp-legacy .about-stat-num {
  font-family: var(--cnp-display);
  font-weight: 900;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -.05em;
  color: var(--cnp-orange) !important;
  margin: 0;
}
.cnp-legacy .package-price span {
  font-family: var(--cnp-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cnp-body);
}

/* Host photos: square, no zoom-on-hover. */
.cnp-legacy .host-photo {
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: 0;
  overflow: hidden;
  margin-bottom: 6px;
}
.cnp-legacy .host-photo img { width: 100%; height: 100%; object-fit: cover; transform: none !important; }
.cnp-legacy .host-photo::after { display: none; }

.cnp-legacy .host-social { display: flex; gap: 8px; margin-top: 4px; }
.cnp-legacy .host-social a,
.cnp-legacy .host-social-link {
  width: 32px;
  height: 32px;
  border-radius: 0 !important;
  border: 2px solid var(--cnp-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cnp-navy);
}
.cnp-legacy .host-social a:hover { background: var(--cnp-navy); color: #fff; }

/* Project chips */
.cnp-legacy .project-tag {
  background: var(--cnp-chip-bg) !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 12px 14px;
  font-family: var(--cnp-mono);
  font-size: 13px;
  font-weight: 400;
  color: var(--cnp-blue) !important;
  text-align: left;
  transform: none !important;
  margin-bottom: 2px;
}
.cnp-legacy .project-tag:hover { background: var(--cnp-navy) !important; color: #fff !important; }
.cnp-legacy .projects-grid { gap: 2px; border-top: 3px solid var(--cnp-navy); padding-top: 16px; }

/* Package "featured" tier: an orange top rule instead of a glow. */
.cnp-legacy .package-card.featured {
  background: none !important;
  border-top: 4px solid var(--cnp-orange);
}
.cnp-legacy .package-badge {
  position: static;
  align-self: flex-start;
  background: var(--cnp-orange) !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 5px 10px;
  font-family: var(--cnp-display);
  font-weight: 900;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cnp-navy) !important;
}
.cnp-legacy .package-features {
  list-style: none;
  margin: 8px 0 16px;
  padding: 0;
  flex: 1;
}
/* Positioned arrow, not a grid column — feature rows carry inline markup and
   each inline element would otherwise become its own grid row. */
.cnp-legacy .package-features li {
  position: relative;
  padding: 9px 0 9px 22px;
  border-bottom: 2px solid var(--cnp-divider);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--cnp-body);
  margin: 0;
}
.cnp-legacy .package-features li svg { display: none; }
.cnp-legacy .package-features li::before {
  content: '→';
  position: absolute;
  left: 0;
  top: 9px;
  font-family: var(--cnp-display);
  font-weight: 900;
  font-size: 14px;
  line-height: 1.55;
  color: var(--cnp-orange);
}

/* ---- 6. Buttons ---------------------------------------------------------- */
.cnp-legacy .btn,
.cnp-legacy .btn-primary,
.cnp-legacy .package-cta,
.cnp-legacy .email-btn,
.cnp-legacy .save-pref-btn,
.cnp-legacy .form-submit button,
.cnp-legacy .form-submit input[type="submit"],
.cnp-legacy .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--cnp-orange) !important;
  color: var(--cnp-navy) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 15px 22px;
  font-family: var(--cnp-display);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  transform: none !important;
  cursor: pointer;
  overflow: visible;
}
.cnp-legacy .btn:hover,
.cnp-legacy .btn-primary:hover,
.cnp-legacy .package-cta:hover,
.cnp-legacy .email-btn:hover,
.cnp-legacy .save-pref-btn:hover,
.cnp-legacy .wp-block-button__link:hover {
  background: var(--cnp-navy) !important;
  color: #fff !important;
}
.cnp-legacy .btn::after,
.cnp-legacy .wp-block-button__link::after { display: none !important; }

.cnp-legacy .btn-secondary,
.cnp-legacy .btn-outline {
  background: none !important;
  border: 3px solid var(--cnp-navy) !important;
  color: var(--cnp-navy) !important;
}
.cnp-legacy .btn-secondary:hover,
.cnp-legacy .btn-outline:hover { background: var(--cnp-navy) !important; color: #fff !important; }

.cnp-legacy .destructive-btn {
  background: none !important;
  border: 3px solid var(--cnp-warn-label) !important;
  color: var(--cnp-warn-label) !important;
}
.cnp-legacy .destructive-btn:hover { background: var(--cnp-warn-label) !important; color: #fff !important; }

.cnp-legacy .btn-sm { padding: 11px 16px; font-size: 11px; }

/* ---- 7. Forms ------------------------------------------------------------ */
.cnp-legacy .contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}
@media (min-width: 1024px) {
  .cnp-legacy .contact-grid { grid-template-columns: 1.5fr 1fr; }
}

.cnp-legacy .form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 700px) {
  .cnp-legacy .form-grid { grid-template-columns: 1fr 1fr; }
}
.cnp-legacy .form-full { grid-column: 1 / -1; }
.cnp-legacy .form-group { display: flex; flex-direction: column; gap: 8px; }

.cnp-legacy .form-label {
  font-family: var(--cnp-display);
  font-weight: 900;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cnp-text) !important;
}

.cnp-legacy .form-input,
.cnp-legacy .form-textarea,
.cnp-legacy .form-select,
.cnp-legacy .email-input,
.cnp-legacy input[type="text"],
.cnp-legacy input[type="email"],
.cnp-legacy textarea,
.cnp-legacy select {
  font-family: var(--cnp-sans);
  font-size: 16px;
  padding: 13px 14px;
  border: 2px solid var(--cnp-navy) !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: var(--cnp-text) !important;
  box-shadow: none !important;
  width: 100%;
}
.cnp-legacy .form-input:focus,
.cnp-legacy .form-textarea:focus,
.cnp-legacy .form-select:focus,
.cnp-legacy .email-input:focus {
  border-color: var(--cnp-orange) !important;
  box-shadow: none !important;
}
.cnp-legacy .form-textarea { min-height: 160px; }
.cnp-legacy .form-submit { margin-top: 8px; }

.cnp-legacy .email-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
  max-width: 620px;
}
.cnp-legacy .email-row .email-input { flex: 1; min-width: 220px; width: auto; }

/* ---- 8. Full-width call-to-action panels --------------------------------- */
.cnp-legacy .guest-cta,
.cnp-legacy .cta-banner,
.cnp-legacy .advertise-banner {
  background: var(--cnp-navy) !important;
  border-radius: 0 !important;
  padding: 28px !important;
  text-align: left;
  overflow: visible;
  margin: 8px 0 24px;
}
.cnp-legacy .guest-cta-inner,
.cnp-legacy .advertise-inner { position: static; }
.cnp-legacy .guest-cta-title,
.cnp-legacy .cta-title,
.cnp-legacy .advertise-title {
  font-family: var(--cnp-display);
  font-weight: 900;
  font-size: 26px;
  line-height: 1;
  letter-spacing: -.035em;
  text-transform: uppercase;
  color: #fff !important;
  margin: 0 0 12px;
  text-wrap: pretty;
}
.cnp-legacy .guest-cta-text,
.cnp-legacy .cta-text,
.cnp-legacy .advertise-text {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--cnp-muted-1) !important;
  margin: 0 0 18px;
  max-width: 62ch;
}
.cnp-legacy .cta-email a { color: var(--cnp-orange); border-bottom: 2px solid var(--cnp-orange); }
.cnp-legacy .guest-cta-actions,
.cnp-legacy .advertise-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.cnp-legacy .guest-cta .btn-secondary,
.cnp-legacy .cta-banner .btn-secondary,
.cnp-legacy .advertise-banner .btn-secondary {
  border-color: var(--cnp-dark-border) !important;
  color: #fff !important;
}
.cnp-legacy .guest-cta .btn-secondary:hover,
.cnp-legacy .advertise-banner .btn-secondary:hover {
  background: none !important;
  border-color: var(--cnp-orange) !important;
}

/* ---- 9. Subscribe / unsubscribe specifics -------------------------------- */
.cnp-legacy .option-card { cursor: pointer; }
.cnp-legacy .option-card.selected { background: var(--cnp-chip-bg) !important; }
.cnp-legacy .option-check {
  width: 20px;
  height: 20px;
  border: 2px solid var(--cnp-navy);
  border-radius: 0 !important;
  display: inline-block;
}
.cnp-legacy .option-card.selected .option-check { background: var(--cnp-orange); }

.cnp-legacy .pref-option {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 2px solid var(--cnp-divider);
}
.cnp-legacy .pref-option-info { display: flex; flex-direction: column; gap: 4px; }

.cnp-legacy .confirmation-icon { display: none; }
.cnp-legacy .save-success {
  background: var(--cnp-warn-bg);
  border-left: 4px solid var(--cnp-orange);
  padding: 14px 18px;
  font-size: 16px;
  color: var(--cnp-on-orange);
}

/* ---- 10. Generic content inside legacy pages ----------------------------- */
.cnp-legacy h2 {
  font-family: var(--cnp-display);
  font-weight: 900;
  font-size: var(--cnp-h2-article);
  line-height: 1;
  letter-spacing: -.035em;
  text-transform: uppercase;
  color: var(--cnp-text);
  margin: 40px 0 16px;
  padding-top: 18px;
  border-top: 3px solid var(--cnp-navy);
  text-wrap: pretty;
}
.cnp-legacy h3 {
  font-family: var(--cnp-display);
  font-weight: 800;
  font-size: var(--cnp-h3-article);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--cnp-text);
  margin: 26px 0 10px;
}
.cnp-legacy p {
  font-size: 17px;
  line-height: 1.8;
  color: var(--cnp-body);
  margin: 0 0 18px;
  max-width: var(--cnp-body-max);
  text-wrap: pretty;
}
.cnp-legacy a { color: var(--cnp-blue); }
.cnp-legacy a:hover { color: var(--cnp-orange); }
.cnp-legacy strong { color: var(--cnp-text); font-weight: 700; }

.cnp-legacy .has-text-align-center { text-align: left !important; }

.cnp-legacy img { border-radius: 0 !important; }

/* Old inline-styled logo images inside articles carried the dark theme's
   chrome. Neutralise it so a logo sits on the light page cleanly. */
.cnp-article img.alignright,
.cnp-article img.alignleft,
.cnp-legacy img.alignright,
.cnp-legacy img.alignleft {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
.cnp-article img.alignright,
.cnp-legacy img.alignright { float: right; margin: 4px 0 20px 24px; }
.cnp-article img.alignleft,
.cnp-legacy img.alignleft { float: left; margin: 4px 24px 20px 0; }

@media (max-width: 699px) {
  .cnp-article img.alignright,
  .cnp-article img.alignleft,
  .cnp-legacy img.alignright,
  .cnp-legacy img.alignleft { float: none; margin: 0 0 18px; }
}