/**
 * EKM Portal — seasonal home banner themes (build 2026-06-28.881)
 * html[data-ekm-seasonal="<id>"] — active when portal banner preset is default + holiday color theme.
 * Hero typography defers to html[data-portal-hero-contrast] tokens from applyTheme/refreshPortalContrast.
 */

/* ── Shared seasonal banner base ── */
html[data-ekm-seasonal]:not([data-portal-banner-preset="skyline"]):not([data-portal-banner-preset="custom"]) .hp-awareness-row {
  background: var(--ekm-seasonal-hero-bg, #0a0c12) !important;
  background-image: none !important;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

html[data-ekm-seasonal] .hp-awareness-row::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
  background: var(--ekm-seasonal-banner, none) var(--ekm-seasonal-banner-position, center / cover no-repeat);
  filter: var(--ekm-seasonal-banner-filter, none);
}

html[data-ekm-seasonal] .hp-awareness-row .hp-hero::before,
html[data-ekm-seasonal] .hp-awareness-row .hp-hero-zone::before {
  display: none !important;
}

html[data-ekm-seasonal] .hp-awareness-row .hp-hero {
  min-height: clamp(11rem, 24vw, 14rem) !important;
  background: transparent !important;
}

/* Dark scrim (default for most holidays) */
html[data-ekm-seasonal][data-ekm-seasonal-scrim="dark"] .hp-awareness-row::after,
html[data-ekm-seasonal]:not([data-ekm-seasonal-scrim]) .hp-awareness-row::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
  background:
    linear-gradient(102deg, rgba(6, 8, 14, 0.28) 0%, rgba(6, 8, 14, 0.55) 36%, rgba(6, 8, 14, 0.88) 56%, rgba(6, 8, 14, 0.97) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.28) 100%);
}

/* Light scrim (birthday, valentines, pride light) */
html[data-ekm-seasonal][data-ekm-seasonal-scrim="light"] .hp-awareness-row::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
  background:
    linear-gradient(102deg, rgba(255, 255, 255, 0.08) 0%, rgba(248, 246, 242, 0.55) 42%, rgba(248, 246, 242, 0.88) 62%, rgba(248, 246, 242, 0.96) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, transparent 24%, transparent 76%, rgba(0, 0, 0, 0.06) 100%);
}

/* Shared dark-scrim typography */
html[data-ekm-seasonal][data-ekm-seasonal-scrim="dark"] .hp-awareness-row .hp-hero-greeting,
html[data-ekm-seasonal]:not([data-ekm-seasonal-scrim]) .hp-awareness-row .hp-hero-greeting {
  color: rgba(212, 196, 168, 0.88);
  font-family: "Italiana", Georgia, serif;
  letter-spacing: 0.36em;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

html[data-ekm-seasonal][data-ekm-seasonal-scrim="dark"] .hp-awareness-row .hp-hero-name,
html[data-ekm-seasonal]:not([data-ekm-seasonal-scrim]) .hp-awareness-row .hp-hero-name {
  color: #f5f3ef !important;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.62), 0 1px 8px rgba(0, 0, 0, 0.48) !important;
}

html[data-ekm-seasonal][data-ekm-seasonal-scrim="dark"] .hp-awareness-row .hp-hero-date,
html[data-ekm-seasonal]:not([data-ekm-seasonal-scrim]) .hp-awareness-row .hp-hero-date {
  color: rgba(255, 255, 255, 0.84);
  font-family: "Italiana", Georgia, serif;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.42);
}

html[data-ekm-seasonal][data-ekm-seasonal-scrim="dark"] .hp-awareness-row .hp-hero-clock,
html[data-ekm-seasonal]:not([data-ekm-seasonal-scrim]) .hp-awareness-row .hp-hero-clock {
  padding: 5px 16px;
  border-radius: 999px;
  border: 0.5px solid rgba(201, 168, 106, 0.24);
  background: rgba(14, 18, 28, 0.58);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #e8dcc8;
  font-size: clamp(10px, 1.2vw, 11px);
  letter-spacing: 0.06em;
}

html[data-ekm-seasonal][data-ekm-seasonal-scrim="dark"] .hp-awareness-row .hp-flank-panel,
html[data-ekm-seasonal]:not([data-ekm-seasonal-scrim]) .hp-awareness-row .hp-flank-panel {
  align-self: start;
  margin: clamp(0.25rem, 0.65vw, 0.45rem);
  background: rgba(12, 16, 26, 0.58) !important;
  border: 0.5px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

html[data-ekm-seasonal][data-ekm-seasonal-scrim="dark"] .hp-awareness-row .hp-flank-title,
html[data-ekm-seasonal]:not([data-ekm-seasonal-scrim]) .hp-awareness-row .hp-flank-title {
  color: rgba(255, 255, 255, 0.92) !important;
}

html[data-ekm-seasonal][data-ekm-seasonal-scrim="dark"] .hp-awareness-row .hp-flank-meta,
html[data-ekm-seasonal]:not([data-ekm-seasonal-scrim]) .hp-awareness-row .hp-flank-meta,
html[data-ekm-seasonal][data-ekm-seasonal-scrim="dark"] .hp-awareness-row .hp-flank-empty,
html[data-ekm-seasonal]:not([data-ekm-seasonal-scrim]) .hp-awareness-row .hp-flank-empty {
  color: rgba(255, 255, 255, 0.52) !important;
}

html[data-ekm-seasonal][data-ekm-seasonal-scrim="dark"] .hp-awareness-row .hp-flank-label,
html[data-ekm-seasonal]:not([data-ekm-seasonal-scrim]) .hp-awareness-row .hp-flank-label {
  color: rgba(212, 196, 168, 0.92);
  letter-spacing: 0.28em;
}

html[data-ekm-seasonal][data-ekm-seasonal-scrim="dark"] .hp-awareness-row .hp-flank-link,
html[data-ekm-seasonal]:not([data-ekm-seasonal-scrim]) .hp-awareness-row .hp-flank-link {
  color: #c8dce8 !important;
  opacity: 0.9;
}

/* Light-scrim typography */
html[data-ekm-seasonal][data-ekm-seasonal-scrim="light"] .hp-awareness-row .hp-hero-greeting {
  color: rgba(60, 56, 50, 0.62);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
}

html[data-ekm-seasonal][data-ekm-seasonal-scrim="light"] .hp-awareness-row .hp-hero-name {
  color: #141414 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.88), 0 2px 16px rgba(255, 255, 255, 0.55) !important;
}

html[data-ekm-seasonal][data-ekm-seasonal-scrim="light"] .hp-awareness-row .hp-hero-date {
  color: rgba(20, 20, 20, 0.72);
  text-shadow: none;
}

html[data-ekm-seasonal][data-ekm-seasonal-scrim="light"] .hp-awareness-row .hp-hero-clock {
  background: #2e2e2e;
  border-color: transparent;
  color: #fff;
}

html[data-ekm-seasonal][data-ekm-seasonal-scrim="light"] .hp-awareness-row .hp-flank-panel {
  background: rgba(255, 255, 255, 0.42) !important;
  border: 0.5px solid rgba(255, 255, 255, 0.52) !important;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.38) !important;
}

html[data-ekm-seasonal][data-ekm-seasonal-scrim="light"] .hp-awareness-row .hp-flank-title {
  color: #0f0f0f !important;
}

html[data-ekm-seasonal][data-ekm-seasonal-scrim="light"] .hp-awareness-row .hp-flank-meta,
html[data-ekm-seasonal][data-ekm-seasonal-scrim="light"] .hp-awareness-row .hp-flank-empty {
  color: rgba(0, 0, 0, 0.52) !important;
}

html[data-ekm-seasonal][data-ekm-seasonal-scrim="light"] .hp-awareness-row .hp-flank-label {
  color: rgba(0, 0, 0, 0.58);
}

html[data-ekm-seasonal][data-ekm-seasonal-scrim="light"] .hp-awareness-row .hp-flank-link {
  color: #141414 !important;
}

/* ── Fourth of July — premium watercolor flag (custom scrim) ── */
html[data-ekm-seasonal="july4"] .hp-awareness-row::after {
  background:
    linear-gradient(102deg, rgba(10, 12, 18, 0.18) 0%, rgba(10, 12, 18, 0.42) 38%, rgba(10, 12, 18, 0.78) 58%, rgba(10, 12, 18, 0.94) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, transparent 22%, transparent 78%, rgba(0, 0, 0, 0.22) 100%);
}

html[data-ekm-seasonal="july4"][data-dark] .hp-awareness-row::after {
  background:
    linear-gradient(102deg, rgba(6, 8, 14, 0.28) 0%, rgba(6, 8, 14, 0.55) 36%, rgba(6, 8, 14, 0.88) 56%, rgba(6, 8, 14, 0.97) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.28) 100%);
}

html[data-ekm-seasonal="july4"]:not([data-dark]) .hp-awareness-row::after {
  background:
    linear-gradient(102deg, rgba(255, 255, 255, 0.08) 0%, rgba(248, 246, 242, 0.55) 42%, rgba(248, 246, 242, 0.88) 62%, rgba(248, 246, 242, 0.96) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, transparent 24%, transparent 76%, rgba(0, 0, 0, 0.06) 100%);
}

html[data-ekm-seasonal="july4"]:not([data-dark]) .hp-awareness-row .hp-hero-greeting {
  color: rgba(60, 56, 50, 0.62);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
}

html[data-ekm-seasonal="july4"]:not([data-dark]) .hp-awareness-row .hp-hero-name {
  color: #141414 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.88), 0 2px 16px rgba(255, 255, 255, 0.55) !important;
}

html[data-ekm-seasonal="july4"]:not([data-dark]) .hp-awareness-row .hp-flank-panel {
  background: rgba(255, 255, 255, 0.42) !important;
  border: 0.5px solid rgba(255, 255, 255, 0.52) !important;
}

html[data-ekm-seasonal="july4"][data-dark] body.hp-active .hp-wrap #home-announcements-zone .hp-softbox,
html[data-ekm-seasonal="july4"][data-dark] body.hp-active .hp-wrap #home-announcements-zone .hp-card {
  background: rgba(18, 22, 32, 0.92) !important;
  border: 0.5px solid rgba(255, 255, 255, 0.1) !important;
}

@media (max-width: 900px) {
  html[data-ekm-seasonal="july4"] .hp-awareness-row::before {
    background-position: 28% 42%;
  }

  html[data-ekm-seasonal] .hp-awareness-row .hp-flank-panel {
    margin: 0 clamp(0.55rem, 1.8vw, 0.75rem);
  }
}