@import url("./design-tokens.css");

/* Shared finish for public pages: the homepage palette becomes the site language. */
body.page-secondary {
  --brand: var(--hzd-ink-deep);
  --brand-2: var(--hzd-blue);
  --ink: var(--hzd-ink-deep);
  --ink-deep: var(--hzd-ink-deep);
  --blue: var(--hzd-blue);
  --blue-deep: var(--hzd-blue-deep);
  --blue-soft: var(--hzd-blue-soft);
  --text: var(--hzd-text);
  --muted: var(--hzd-muted);
  --line: var(--hzd-line);
  --line-strong: var(--hzd-line-strong);
  --gold: var(--hzd-gold);
  --bg: var(--hzd-tint);
  background: var(--hzd-paper);
  color: var(--hzd-ink);
}

body.page-secondary :is(.legal-header, .tob-head, .header) {
  border-bottom-color: rgb(7 49 104 / 10%);
  background: rgb(255 253 249 / 90%);
  box-shadow: 0 8px 28px rgb(7 49 104 / 4%);
}

body.page-secondary .hzd-header {
  border-bottom-color: rgb(7 49 104 / 10%);
  background: rgb(255 253 249 / 92%);
  color: var(--hzd-ink-deep);
}
body.page-secondary .hzd-header .hzd-header-button { border-color: rgb(0 110 213 / 16%); background: var(--hzd-blue-soft); color: var(--hzd-ink-deep); }
body.page-secondary .site-footer { --ink: var(--hzd-ink-deep); --gold: var(--hzd-gold); }
body.page-secondary :is(.secondary-masthead h1, .legal-main > h1, .tob-hero h1, .season-hero h1, .registration-hero h1, .event-hero h1) { color: var(--hzd-ink-deep); }

body.page-secondary :is(.legal-header .back, .tob-head .back, .registration-back) {
  border-color: rgb(0 110 213 / 16%);
  background: rgb(234 244 255 / 82%);
  color: var(--hzd-ink-deep);
}

body.page-secondary .secondary-masthead {
  isolation: isolate;
  border-color: rgb(0 110 213 / 14%);
  background:
    linear-gradient(90deg, rgb(255 253 249 / 98%) 0%, rgb(255 253 249 / 88%) 42%, rgb(255 253 249 / 34%) 100%),
    url("/media/v20261103/secondary-learning-island.webp") center / cover no-repeat;
  box-shadow: var(--hzd-shadow-sm);
}

body.page-secondary .secondary-masthead::after {
  position: absolute;
  right: 2%;
  bottom: -12%;
  z-index: 0;
  width: 190px;
  height: 140px;
  content: "";
  opacity: .22;
  background: url("/media/v20261103/floating-pages.webp") center / contain no-repeat;
  pointer-events: none;
  transform: rotate(-7deg);
}

body.page-secondary :is(.secondary-eyebrow, .eyebrow, .tob-kicker, .season-kicker) {
  color: var(--hzd-blue);
}

body.page-secondary :is(.button.primary, .event-action--primary) {
  border-color: var(--hzd-blue);
  background: linear-gradient(135deg, var(--hzd-blue), var(--hzd-blue-deep));
  box-shadow: 0 10px 22px rgb(0 110 213 / 18%);
}

body.page-secondary :is(.tob-hero, .season-hero, .registration-hero, .event-hero, .page-document .legal-main) {
  background-color: var(--hzd-tint);
}

body.page-secondary :is(.page-tob .tob-hero, .page-season .season-hero, .page-registration .registration-hero, .page-event .event-hero) {
  background-image:
    linear-gradient(90deg, rgb(246 250 254 / 96%) 0%, rgb(246 250 254 / 82%) 46%, rgb(246 250 254 / 26%) 100%),
    url("/media/v20261103/secondary-learning-island.webp");
  background-position: center, 72% center;
  background-size: cover;
}

body.page-secondary.page-directory .hero {
  border-color: rgb(0 110 213 / 12%);
  background-image:
    linear-gradient(90deg, rgb(255 253 249 / 98%), rgb(255 253 249 / 84%) 52%, rgb(255 253 249 / 42%)),
    url("/media/v20261103/secondary-learning-island.webp");
  background-position: center, 72% center;
  background-size: cover;
}

body.page-secondary.page-album .g-hero {
  background-image:
    linear-gradient(100deg, rgb(255 253 249 / 97%), rgb(255 253 249 / 86%) 56%, rgb(255 253 249 / 35%)),
    url("/media/v20261103/secondary-learning-island.webp");
  background-position: center, 74% center;
  background-size: cover;
}

body.page-secondary.page-leaderboard .mob-head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 28px;
  border: 1px solid rgb(0 110 213 / 13%);
  border-radius: var(--hzd-radius-lg);
  background:
    linear-gradient(100deg, rgb(255 253 249 / 97%), rgb(255 253 249 / 86%) 58%, rgb(255 253 249 / 32%)),
    url("/media/v20261103/secondary-learning-island.webp") 72% center / cover no-repeat;
  box-shadow: var(--hzd-shadow-sm);
}

body.page-secondary.page-leaderboard .mob-head::after {
  position: absolute;
  right: 2%;
  bottom: -38px;
  z-index: 0;
  width: 180px;
  height: 140px;
  content: "";
  opacity: .2;
  background: url("/media/v20261103/floating-pages.webp") center / contain no-repeat;
  pointer-events: none;
}
body.page-secondary.page-leaderboard .mob-head > * { position: relative; z-index: 1; }

body.page-secondary :is(.legal-card, .event-card, .item-row, .course-card, .tob-point, .registration-card, .secondary-related, .secondary-toc) {
  border-color: var(--hzd-line);
  border-radius: var(--hzd-radius-md);
  box-shadow: var(--hzd-shadow-sm);
}

body.page-secondary :is(.legal-card, .event-card, .item-row, .course-card, .tob-point, .registration-card) {
  background: rgb(255 255 255 / 94%);
}

body.page-secondary :is(a, button, input, textarea, select):focus-visible {
  outline: 3px solid rgb(0 110 213 / 28%);
  outline-offset: 3px;
}

body.page-secondary :is(.page-footer, .site-footer, footer.closing-footer) {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, #073168, #0e2a49);
}

body.page-secondary :is(.page-footer, .site-footer, footer.closing-footer)::before {
  position: absolute;
  top: -90px;
  right: 9%;
  width: 260px;
  height: 180px;
  content: "";
  opacity: .12;
  background: url("/media/v20261103/floating-pages.webp") center / contain no-repeat;
  pointer-events: none;
  transform: rotate(12deg);
}

@media (max-width: 767px) {
  body.page-secondary .secondary-masthead { background-position: 62% center; }
  body.page-secondary .secondary-masthead::after { right: -24px; width: 138px; height: 105px; opacity: .18; }
  body.page-secondary :is(.page-tob .tob-hero, .page-season .season-hero, .page-registration .registration-hero, .page-event .event-hero, .page-directory .hero, .page-album .g-hero) { background-position: center, 70% center; }
  body.page-secondary.page-leaderboard .mob-head { padding: 22px; border-radius: var(--hzd-radius-md); }
}

body.page-about {
  --about-deep: var(--hzd-ink-deep);
  --about-ink: var(--hzd-ink);
  --about-blue: var(--hzd-blue);
  --about-gold: var(--hzd-gold);
  --about-paper: var(--hzd-paper);
}
body.page-about .about-hero {
  background-image:
    linear-gradient(90deg, rgb(255 253 249 / 96%) 0%, rgb(255 253 249 / 84%) 45%, rgb(255 253 249 / 20%) 100%),
    url("/media/v20261103/secondary-learning-island.webp");
  background-position: center, 72% center;
  background-size: cover;
}
body.page-about .about-hero-grid::after {
  position: absolute;
  top: 15%;
  right: 12%;
  width: 155px;
  height: 120px;
  content: "";
  opacity: .2;
  background: url("/media/v20261103/floating-pages.webp") center / contain no-repeat;
  pointer-events: none;
  transform: rotate(9deg);
}