/**
 * Legacy bridge — unifies migrated pages with the modern design system.
 * Loaded last via chrome.js on every page.
 */

/* ── Typography ─────────────────────────────────────────────── */
.legacy-content {
  font-family: var(--font);
  color: var(--text);
  line-height: 1.65;
}

.legacy-content h1,
.legacy-content h2,
.legacy-content h3,
.legacy-content h4 {
  color: var(--ink);
  line-height: 1.25;
  font-weight: 700;
}

.legacy-content h1 {
  font-size: clamp(1.65rem, 4.5vw, 2.35rem);
}

.legacy-content h2 {
  font-size: clamp(1.35rem, 3.5vw, 1.85rem);
}

.legacy-content h3 {
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
}

.legacy-content p {
  color: var(--text);
  margin-bottom: 0.85rem;
}

.legacy-content .lead,
.legacy-content .hero-text,
.legacy-content .about-lead {
  color: var(--muted);
  font-size: 1.05rem;
}

.legacy-content .eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pink-deep);
  margin-bottom: 0.5rem;
}

.legacy-content a:not(.btn):not(.btn-primary):not(.btn-secondary):not(.social-btn):not(.read-btn):not(.card-link) {
  color: var(--pink-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legacy-content a:not(.btn):not(.btn-primary):not(.btn-secondary):hover {
  color: var(--hot);
}

/* ── Unified legacy buttons (standalone .btn-primary / .btn-secondary) ── */
.legacy-content a.btn-primary:not(.btn),
.legacy-content button.btn-primary:not(.btn),
.legacy-content .btn-primary:not(.btn):not(.btn-dark),
.legacy-content a.btn-secondary:not(.btn),
.legacy-content button.btn-secondary:not(.btn),
.legacy-content .btn-secondary:not(.btn),
.prodev-page a.btn-primary,
.prodev-page a.btn-secondary,
.prodev-page button.btn-primary,
.prodev-page button.btn-secondary,
.legacy-content .apply-job-btn,
.legacy-content .book-session-btn,
.legacy-content .submit-btn:not(.btn) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 48px;
  padding: 0.75rem 1.35rem !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 650 !important;
  font-size: 0.95rem !important;
  font-family: var(--font) !important;
  text-decoration: none !important;
  cursor: pointer;
  border: 2px solid transparent !important;
  transition: transform 0.2s var(--spring), box-shadow 0.2s, background 0.2s, border-color 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.legacy-content a.btn-primary:not(.btn),
.legacy-content button.btn-primary:not(.btn),
.legacy-content .btn-primary:not(.btn):not(.btn-dark),
.prodev-page a.btn-primary,
.prodev-page button.btn-primary,
.legacy-content .apply-job-btn,
.legacy-content .book-session-btn,
.legacy-content .submit-btn:not(.btn) {
  background: linear-gradient(180deg, var(--pink-hot), var(--pink-deep)) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(214, 51, 132, 0.28) !important;
}

.legacy-content a.btn-secondary:not(.btn),
.legacy-content button.btn-secondary:not(.btn),
.legacy-content .btn-secondary:not(.btn),
.prodev-page a.btn-secondary,
.prodev-page button.btn-secondary {
  background: rgba(255, 255, 255, 0.95) !important;
  color: var(--pink-deep) !important;
  border-color: var(--pink-soft) !important;
}

.legacy-content a.btn-primary:not(.btn):hover,
.legacy-content a.btn-secondary:not(.btn):hover,
.prodev-page a.btn-primary:hover,
.prodev-page a.btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(214, 51, 132, 0.32) !important;
}

.legacy-content .btn.primary,
.legacy-content button.btn.primary {
  background: linear-gradient(180deg, var(--pink-hot), var(--pink-deep)) !important;
  color: #fff !important;
  border-radius: var(--radius-pill) !important;
  min-height: 48px;
  font-weight: 650;
  border: none;
}

.legacy-content .btn.secondary {
  background: rgba(255, 255, 255, 0.95) !important;
  color: var(--pink-deep) !important;
  border: 2px solid var(--pink-soft) !important;
  border-radius: var(--radius-pill) !important;
  min-height: 48px;
  font-weight: 650;
}

/* ── Cards & surfaces ───────────────────────────────────────── */
.legacy-content .service-card,
.legacy-content .glass-card,
.legacy-content .explorer-card,
.legacy-content .workshop-card,
.legacy-content .article-card,
.legacy-content .insta-card,
.legacy-content .mentor-card,
.legacy-content .job-card {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-soft) !important;
  background: var(--white);
}

.legacy-content .service-hero .service-card {
  border: 1px solid var(--pink-soft);
}

.legacy-content .lead {
  color: var(--muted) !important;
}

.legacy-content .service-info h2,
.legacy-content .service-info h3,
.legacy-content .section-head h2,
.legacy-content .academics-breadcrumb {
  color: var(--ink);
}

.legacy-content .academics-breadcrumb a {
  color: var(--pink-deep);
}

/* ── Forms ──────────────────────────────────────────────────── */
.legacy-content input:not([type="checkbox"]):not([type="radio"]),
.legacy-content textarea,
.legacy-content select {
  font-family: var(--font);
  font-size: 1rem;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.65rem 0.85rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s;
}

.legacy-content input:focus,
.legacy-content textarea:focus,
.legacy-content select:focus {
  outline: none;
  border-color: var(--pink);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.legacy-content label {
  font-weight: 600;
  color: var(--ink);
  font-size: 0.92rem;
}

/* ── Sections & spacing ─────────────────────────────────────── */
.legacy-content .section {
  padding: var(--space-6) var(--space-4);
}

.legacy-content .hero,
.legacy-content .prodev-hero,
.legacy-content .caregiver-hero,
.legacy-content .individual-hero {
  border-radius: var(--radius-xl);
}

/* ── Hide embedded legacy chrome (duplicate nav/footer) ─────── */
.legacy-content .premium-footer,
.legacy-content footer:not(.site-footer) {
  display: none !important;
}

.legacy-content .journal-header,
.legacy-content .mini-nav {
  display: none !important;
}

/* ── Pro-dev & resource pages hero alignment ────────────────── */
.prodev-page .hero-copy h1,
.legacy-content .hero-content h1 {
  color: var(--ink);
}

.prodev-page .section-head h2 {
  color: var(--ink);
}

/* ── Search & legal utility pages ───────────────────────────── */
.legacy-content.legacy-content--utility {
  padding: var(--space-5) var(--space-4) var(--space-7);
}

.legacy-content.legacy-content--utility h1,
.legacy-content.legacy-content--utility h2 {
  margin-bottom: var(--space-4);
}

/* ── Images ─────────────────────────────────────────────────── */
.legacy-content img {
  border-radius: var(--radius);
}

/* ── Animations (consistent easing) ─────────────────────────── */
.legacy-content .fade-up,
.legacy-content .reveal {
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

@media (max-width: 699px) {
  .legacy-content a.btn-primary:not(.btn),
  .legacy-content a.btn-secondary:not(.btn),
  .prodev-page a.btn-primary,
  .prodev-page a.btn-secondary {
    width: 100%;
    justify-content: center;
  }

  .legacy-content .service-actions {
    flex-direction: column;
  }
}