/* Seasonal accents are active only during the 2026 Halloween window. */
.home-page .hh-season {
  display: none;
}

html.halloween-2026 .home-page .home-dashboard {
  background-image: url('/assets/home-halloween-2026.png');
  background-position: right bottom;
}

html.halloween-2026 .home-page .home-dashboard::before {
  background: linear-gradient(90deg, rgba(1, 15, 31, .86) 0%, rgba(2, 24, 46, .62) 40%, rgba(2, 24, 46, .08) 62%, transparent 72%), linear-gradient(180deg, rgba(2, 19, 37, .28), transparent 28%, rgba(1, 12, 25, .66) 76%, rgba(1, 12, 25, .84));
}

html.halloween-2026 .home-page .site-header {
  border-bottom-color: rgba(237, 165, 102, .36);
}

html.halloween-2026 .home-page .site-nav a:hover,
html.halloween-2026 .home-page .site-nav a:focus-visible,
html.halloween-2026 .home-page .site-nav a[aria-current=page] {
  background: rgba(146, 110, 176, .23);
}

html.halloween-2026 .home-page .hh-season {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin: 0 0 12px;
  padding: 4px 10px;
  border: 1px solid rgba(240, 174, 115, .6);
  border-radius: 999px;
  background: rgba(49, 28, 47, .84);
  color: #ffcc99;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  line-height: 1.3;
  text-transform: uppercase;
  text-shadow: none;
}

html.halloween-2026 .home-page .home-values span {
  color: #ffc18a;
}

html.halloween-2026 .home-page .home-action {
  border-color: #dba071;
  background: rgba(48, 29, 47, .94);
  box-shadow: inset 0 1px 0 rgba(255, 220, 178, .08);
}

html.halloween-2026 .home-page .home-action.survey {
  border-color: #f0b17a;
  background: rgba(145, 57, 19, .96);
}

html.halloween-2026 .home-page .home-action.den {
  border-color: #bba0d6;
  background: rgba(68, 41, 102, .96);
}

html.halloween-2026 .home-page .home-action > span,
html.halloween-2026 .home-page .home-action b {
  color: #ffd1a3;
}

html.halloween-2026 .home-page .home-action.den > span,
html.halloween-2026 .home-page .home-action.den b {
  color: #e1cdf4;
}

html.halloween-2026 .home-page .home-membership {
  border-color: rgba(225, 155, 98, .72);
  background: rgba(9, 23, 43, .95);
}

html.halloween-2026 .home-page .home-membership h2 {
  color: #ffc18a;
}

html.halloween-2026 .home-page .home-benefits a {
  border-color: rgba(177, 142, 200, .35);
}

html.halloween-2026 .home-page .home-benefits a > span {
  color: #edba91;
}

html.halloween-2026 .home-page .home-benefits a:hover {
  background: rgba(169, 120, 202, .12);
}

html.halloween-2026 .home-page .home-afscme {
  border-color: rgba(177, 142, 200, .68);
}

html.halloween-2026 .home-page .home-union-line {
  background: linear-gradient(90deg, rgba(60, 37, 84, .95), rgba(60, 37, 84, .1));
}

html.halloween-2026 .home-page a:focus-visible {
  outline: 3px solid #ffdbb6;
  outline-offset: 3px;
}

/* Allow the additional badge to fit on short laptop windows. */
@media (min-width: 761px) and (max-height: 650px) {
  html.halloween-2026 .home-page {
    height: auto;
    min-height: 100dvh;
    overflow: auto;
  }

  html.halloween-2026 .home-page .home-dashboard {
    height: auto;
    min-height: calc(100dvh - 76px);
  }

  html.halloween-2026 .home-page .home-dashboard-inner {
    min-height: 550px;
  }
}

@media (max-width: 760px) {
  html.halloween-2026 .home-page .home-dashboard {
    background-position: right -55px;
  }

  html.halloween-2026 .home-page .home-dashboard::before {
    background: linear-gradient(180deg, rgba(2, 21, 41, .18) 0, rgba(2, 21, 41, .74) 370px, #02152a 610px);
  }

  html.halloween-2026 .home-page .hh-season {
    margin-bottom: 12px;
    font-size: 10px;
  }
}