/* TJ-only light hero treatment. Loaded after shared and page-specific styles.
   Keep this separate from the generated EduAvenues bundle and photo heroes. */
:root {
  --tj-interior-hero-surface: var(--color-white);
  --tj-interior-nav-offset: 74px;
  --tj-interior-hero-clearance: 2rem;
}

body
  :is(
    .tj-page-hero,
    .ea-page-hero,
    .schedule-hero,
    .terms-hero,
    .sp-hero,
    .tj-proof-hero,
    .pc-intro
  ) {
  background: var(--tj-interior-hero-surface);
}

/* The header is fixed. The announcement bar already reserves its own space
   on body, so only account for the navigation here, not the announcement. */
body .tj-page-hero:not(.instructions-hero),
body .terms-hero {
  padding-top: calc(var(--tj-interior-nav-offset) + var(--tj-interior-hero-clearance));
}

/* The prompt-access page has no navigation. Keep its header-free layout. */
body .ea-page-hero {
  padding-top: 5rem;
}

@media (min-width: 768px) {
  :root {
    --tj-interior-hero-clearance: 2.5rem;
  }

  body .ea-page-hero {
    padding-top: 6rem;
  }
}

/* The newer program and testimonial templates already reserve header space.
   Add only a small amount of breathing room to their existing layouts. */
body .sp-hero {
  padding-top: 88px;
}

body .tj-proof-hero {
  padding-top: 156px;
}

body .pc-intro {
  padding-top: 70px;
}

@media (max-width: 900px) {
  body .sp-hero {
    padding-top: 57px;
  }
}

@media (max-width: 640px) {
  body .tj-proof-hero {
    padding-top: 142px;
  }
}

@media (max-width: 700px) {
  body .pc-intro {
    padding-top: 54px;
  }
}

@media (max-width: 560px) {
  body .sp-hero {
    padding-top: 48px;
  }
}