/* HSC announcement banner. One markup pattern, four layouts, four colors. */
.hsc-banner {
  --hsc-ground: #0B3562; --hsc-ink: #FFFFFF; --hsc-badge: #FFFFFF; --hsc-mark: #0B3562;
  --hsc-btn-bg: #FFFFFF; --hsc-btn-ink: #0B3562; --hsc-link: #B5E4EF;
  position: relative;
  background: var(--hsc-ground);
  color: var(--hsc-ink);
  font-family: Lexend, "Segoe UI", Helvetica, Arial, sans-serif;
}
.hsc-banner, .hsc-banner * { box-sizing: border-box; }
.hsc-banner[hidden] { display: none; }

/* Colors. Each pairing sets text, badge, button, and link colors together. */
.hsc-banner--gold      { --hsc-ground: #D8A168; --hsc-ink: #0B3562; --hsc-badge: #0B3562; --hsc-mark: #F5F9F9; --hsc-btn-bg: #0B3562; --hsc-btn-ink: #F5F9F9; --hsc-link: #0B3562; }
.hsc-banner--dark-blue { --hsc-ground: #0B3562; --hsc-ink: #FFFFFF; --hsc-badge: #FFFFFF; --hsc-mark: #0B3562; --hsc-btn-bg: #FFFFFF; --hsc-btn-ink: #0B3562; --hsc-link: #B5E4EF; }
.hsc-banner--sky       { --hsc-ground: #B5E4EF; --hsc-ink: #0B3562; --hsc-badge: #0B3562; --hsc-mark: #F5F9F9; --hsc-btn-bg: #0B3562; --hsc-btn-ink: #F5F9F9; --hsc-link: #165470; }
.hsc-banner--alert-red { --hsc-ground: #B42318; --hsc-ink: #FFFFFF; --hsc-badge: #FFFFFF; --hsc-mark: #B42318; --hsc-btn-bg: #FFFFFF; --hsc-btn-ink: #B42318; --hsc-link: #FFFFFF; }

/* Shared pieces, desktop first */
.hsc-banner__inner { display: flex; align-items: center; gap: 20px; max-width: 1440px; min-height: 120px; margin: 0 auto; padding: 16px 118px; }
.hsc-banner__badge { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--hsc-badge); color: var(--hsc-mark); }
.hsc-banner__badge svg { width: 30px; height: 30px; }
.hsc-banner__icon { flex-shrink: 0; width: 48px; height: 48px; }
.hsc-banner__text { display: flex; flex-direction: column; flex-grow: 1; gap: 4px; min-width: 0; }
.hsc-banner__headline { margin: 0; font-size: 28px; line-height: 36px; font-weight: 500; letter-spacing: -0.2px; text-wrap: pretty; }
.hsc-banner__headline strong { font-weight: 600; }
.hsc-banner__detail { margin: 0; font-size: 18px; line-height: 26px; font-weight: 400; text-wrap: pretty; }
.hsc-banner__cta { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; height: 56px; padding: 0 34px; border-radius: 50px; background: var(--hsc-btn-bg); color: var(--hsc-btn-ink); font-size: 18px; font-weight: 500; line-height: 1.2; text-decoration: none; white-space: nowrap; }
/* Restate the color on hover: the theme's a:hover outranks .hsc-banner__cta and turns the text link-blue */
.hsc-banner__cta:hover { color: var(--hsc-btn-ink); text-decoration: underline; text-underline-offset: 3px; }
.hsc-banner__close { position: absolute; top: 50%; right: 24px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-top: -22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--hsc-ink); cursor: pointer; }
.hsc-banner__close svg { width: 22px; height: 22px; }
.hsc-banner__close:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
.hsc-banner a:focus-visible, .hsc-banner__close:focus-visible { outline: 3px solid var(--hsc-ink); outline-offset: 3px; }

/* Layout 2: large, icon on its own */
.hsc-banner--large-icon .hsc-banner__inner { gap: 24px; }
.hsc-banner--large-icon .hsc-banner__icon { stroke-width: 1.75; }

/* Layout 3: large statement (no icon, no second line) */
.hsc-banner--statement .hsc-banner__inner { justify-content: space-between; }
.hsc-banner--statement .hsc-banner__text { flex-grow: 0; max-width: 720px; }

/* Layout 4: small strip (the button becomes a text link) */
.hsc-banner--strip .hsc-banner__inner { justify-content: center; gap: 10px; min-height: 48px; padding-top: 12px; padding-bottom: 12px; }
.hsc-banner--strip .hsc-banner__icon { width: 22px; height: 22px; }
.hsc-banner--strip .hsc-banner__text { display: block; flex-grow: 0; }
.hsc-banner--strip .hsc-banner__headline { font-size: 16px; line-height: 24px; font-weight: 400; letter-spacing: 0; }
.hsc-banner--strip .hsc-banner__cta { display: inline; height: auto; margin-left: 4px; padding: 0; border-radius: 0; background: none; color: var(--hsc-link); font-size: 16px; line-height: 24px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.hsc-banner--strip .hsc-banner__cta:hover { color: var(--hsc-link); }
.hsc-banner--strip .hsc-banner__close svg { width: 18px; height: 18px; }

/* Narrower desktop and tablet: keep clear of the close button */
@media (max-width: 1279px) {
  .hsc-banner__inner { padding-left: 32px; padding-right: 88px; }
}

/* Phone */
@media (max-width: 767px) {
  .hsc-banner__inner { flex-direction: column; align-items: stretch; gap: 16px; min-height: 0; padding: 20px 20px 24px; }
  .hsc-banner__badge { width: 48px; height: 48px; }
  .hsc-banner__badge svg { width: 24px; height: 24px; }
  .hsc-banner__icon { width: 36px; height: 36px; }
  .hsc-banner__text { padding-right: 8px; }
  .hsc-banner__headline { font-size: 20px; line-height: 28px; letter-spacing: 0; text-wrap: balance; }
  .hsc-banner--large-icon .hsc-banner__headline strong { display: block; }
  .hsc-banner__detail { font-size: 16px; line-height: 24px; }
  .hsc-banner__cta { width: 100%; height: auto; min-height: 52px; padding: 12px 20px; font-size: 17px; white-space: normal; text-align: center; }
  .hsc-banner__close { top: 12px; right: 12px; margin-top: 0; }
  .hsc-banner__close svg { width: 20px; height: 20px; }
  .hsc-banner--statement .hsc-banner__inner { gap: 20px; }
  .hsc-banner--statement .hsc-banner__text { max-width: none; padding-right: 36px; }
  .hsc-banner--statement .hsc-banner__headline { font-size: 22px; line-height: 30px; }
  .hsc-banner--strip .hsc-banner__inner { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; row-gap: 0; align-items: start; min-height: 104px; padding: 14px 56px 14px 16px; }
  .hsc-banner--strip.hsc-banner--no-icon .hsc-banner__inner { grid-template-columns: minmax(0, 1fr); }
  .hsc-banner--strip .hsc-banner__icon { grid-row: span 2; margin-top: 1px; }
  .hsc-banner--strip .hsc-banner__headline strong { display: block; }
  .hsc-banner--strip .hsc-banner__cta { display: inline-block; justify-self: start; width: auto; min-height: 0; margin: 0; padding: 0; text-align: left; }
  .hsc-banner--strip .hsc-banner__close { top: 6px; right: 6px; }
  .hsc-banner--strip .hsc-banner__close svg { width: 18px; height: 18px; }
}