/* StudyNest final theme layer
   Loaded last so legacy page CSS cannot override the platform identity. */
:root {
  --sn-brand-navy: #123f7a;
  --sn-brand-blue: #2474c8;
  --sn-brand-blue-deep: #1559a6;
  --sn-brand-gold: #f4b51f;
  --sn-brand-gold-soft: #ffe39a;
  --sn-brand-surface: #ffffff;
  --sn-brand-page: #edf4fc;
}

/* Core platform hero: Study by Topic must always use StudyNest blue and gold. */
.topics-hero {
  color: #ffffff !important;
  border: 1px solid rgba(18, 63, 122, .28) !important;
  background:
    radial-gradient(circle at 86% 17%, rgba(255, 224, 128, .42), transparent 24%),
    radial-gradient(circle at 12% 84%, rgba(255, 255, 255, .16), transparent 28%),
    linear-gradient(135deg, #123f7a 0%, #1b5da6 54%, #2879c7 100%) !important;
  box-shadow: 0 20px 46px rgba(18, 63, 122, .24) !important;
}
.topics-hero h1,
.topics-hero h2,
.topics-hero p {
  color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(3, 24, 52, .2) !important;
}
.topics-hero .eyebrow {
  color: #17365f !important;
  background: linear-gradient(135deg, #ffe89f, #f4b51f) !important;
  border: 1px solid rgba(255,255,255,.48) !important;
  box-shadow: 0 7px 18px rgba(4, 31, 67, .17) !important;
}

/* Topic and lesson heroes inherit each topic's existing accent variables. */
.topic-hero,
.lesson-hero,
.page-hero:not(.topics-hero) {
  background:
    radial-gradient(circle at 88% 16%, color-mix(in srgb, var(--yellow-border, #f4b51f) 25%, transparent), transparent 25%),
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--page, var(--light, #edf4fc)) 88%, white),
      color-mix(in srgb, var(--accent, var(--blue, #2474c8)) 22%, white)
    ) !important;
  border-color: color-mix(in srgb, var(--accent, var(--blue, #2474c8)) 32%, white) !important;
}
.topic-hero h1,
.topic-hero h2,
.lesson-hero h1,
.lesson-hero h2,
.page-hero:not(.topics-hero) h1,
.page-hero:not(.topics-hero) h2 {
  color: var(--navy, #123f7a) !important;
  text-shadow: none !important;
}

/* Preserve the richer card identity on topic overview. */
.topic-card {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--topic-tint, #e7f1fc) 54%, white) 0, #ffffff 37%) !important;
}

@media (max-width: 800px) {
  .topics-hero {
    background:
      radial-gradient(circle at 82% 13%, rgba(255, 224, 128, .38), transparent 25%),
      linear-gradient(145deg, #123f7a 0%, #1d62ad 58%, #2c7dcb 100%) !important;
  }
}