/*
 * Holiday Support + Wishes — public program page. See includes/holiday-program.php.
 *
 * Every colour, size and radius is a Member Portal token from tokens.css, so the page reads as
 * part of BBN. Literal fallbacks follow each var() only so the page stays legible if tokens.css
 * ever fails to load. Interactive selectors are DOUBLED (.bbn-hsw-btn.bbn-hsw-btn): the Go theme
 * and the Elementor kit style plain anchors at (0,1,1), which beats a single class.
 * Breakpoint 767px matches Elementor's mobile breakpoint. No animation.
 */

.bbn-hsw {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--bbn-page-max, 1180px) + 48px);
  margin: 0 auto;
  padding: 32px 24px 48px;
  font-family: var(--bbn-font, Poppins, system-ui, sans-serif);
  font-size: var(--bbn-size-body, 15px);
  line-height: var(--bbn-leading-body, 1.55);
  color: var(--bbn-text, #3F291B);
}
.bbn-hsw *, .bbn-hsw *::before, .bbn-hsw *::after { box-sizing: border-box; }
.bbn-hsw p { margin: 0 0 10px; }
.bbn-hsw p:last-child { margin-bottom: 0; }
.bbn-hsw ul, .bbn-hsw ol { margin: 0; padding: 0; list-style: none; }

.bbn-hsw-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---- hero ---- */
.bbn-hsw-hero {
  padding: 32px;
  border-radius: var(--bbn-radius-lg, 10px);
  background: var(--bbn-canvas, #FBF7EF);
  border: 1px solid var(--bbn-border, #E7E1D5);
  border-left: 6px solid var(--bbn-brand, #0A5A45);
}
.bbn-hsw-eyebrow {
  font-size: var(--bbn-size-label, 12.5px);
  font-weight: var(--bbn-weight-strong, 600);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bbn-brand, #0A5A45);
}
.bbn-hsw .bbn-hsw-title {
  margin: 4px 0 2px;
  font-family: inherit;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  line-height: var(--bbn-leading-tight, 1.25);
  color: var(--bbn-ink, #3F291B);
}
.bbn-hsw-sub {
  font-size: clamp(17px, 2vw, 20px);
  font-weight: var(--bbn-weight-section, 600);
  color: var(--bbn-accent-ink, #8A6416);   /* the readable gold: 5.02:1 on cream */
}
.bbn-hsw-lede { max-width: var(--bbn-reading, 60rem); font-size: 16px; color: var(--bbn-text-secondary, #5B5347); }
.bbn-hsw-note { margin-top: 14px; font-size: var(--bbn-size-support, 14px); color: var(--bbn-text-secondary, #5B5347); }

/* ---- sections ---- */
.bbn-hsw-section { margin-top: 40px; }
.bbn-hsw .bbn-hsw-h {
  margin: 0 0 14px;
  font-family: inherit;
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: var(--bbn-weight-title, 650);
  line-height: var(--bbn-leading-tight, 1.25);
  color: var(--bbn-ink, #3F291B);
}
.bbn-hsw-intro { max-width: var(--bbn-reading, 60rem); color: var(--bbn-text-secondary, #5B5347); margin-bottom: 16px; }
.bbn-hsw-fine { margin-top: 14px; font-size: var(--bbn-size-support, 14px); color: var(--bbn-text-muted, #6B5B4D); }
.bbn-hsw-label {
  margin: 22px 0 10px;
  font-size: var(--bbn-size-label, 12.5px);
  font-weight: var(--bbn-weight-strong, 600);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bbn-text-muted, #6B5B4D);
}

/* ---- cards ---- */
.bbn-hsw-grid { display: grid; gap: var(--bbn-gap-card, 16px); }
.bbn-hsw-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bbn-hsw-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bbn-hsw-card {
  padding: var(--bbn-pad-card, 18px);
  border-radius: var(--bbn-radius, 6px);
  background: var(--bbn-surface, #FFFFFF);
  border: 1px solid var(--bbn-border, #E7E1D5);
  color: var(--bbn-text-secondary, #5B5347);
}
.bbn-hsw-card-t {
  font-size: var(--bbn-size-card-title, 16px);
  font-weight: var(--bbn-weight-strong, 600);
  color: var(--bbn-ink, #3F291B);
  margin-bottom: 6px;
}

.bbn-hsw-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bbn-hsw-chips li {
  padding: 6px 12px;
  border-radius: var(--bbn-radius-pill, 999px);
  background: var(--bbn-surface-tint, #F2EADA);
  font-size: var(--bbn-size-meta, 13px);
  font-weight: var(--bbn-weight-strong, 600);
  color: var(--bbn-ink, #3F291B);
}

/* ---- how BBN protects families: the one dark panel on the page ---- */
.bbn-hsw-section--ink {
  padding: 28px;
  border-radius: var(--bbn-radius-lg, 10px);
  background: var(--bbn-ink, #3F291B);
  color: #FBF7EF;
}
.bbn-hsw .bbn-hsw-section--ink .bbn-hsw-h { color: #FFFFFF; }
.bbn-hsw-section--ink .bbn-hsw-intro { color: #F2EADA; }
.bbn-hsw-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; counter-reset: bbn-hsw-step; }
.bbn-hsw-steps li {
  counter-increment: bbn-hsw-step;
  padding: 16px;
  border-radius: var(--bbn-radius, 6px);
  background: rgba(255, 255, 255, .07);
  color: #F2EADA;
  font-size: var(--bbn-size-support, 14px);
}
.bbn-hsw-steps li::before {
  content: counter(bbn-hsw-step);
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin-bottom: 10px;
  border-radius: var(--bbn-radius-pill, 999px);
  background: #FBF7EF; color: var(--bbn-ink, #3F291B);
  font-weight: 700; font-size: 14px;
}
.bbn-hsw-section--ink .bbn-hsw-card-t { color: #FFFFFF; }
.bbn-hsw-promise {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--bbn-radius, 6px);
  background: var(--bbn-brand-tint, #E1F5EE);
  color: var(--bbn-brand-deep, #07493B);
  font-weight: var(--bbn-weight-strong, 600);
}

/* ---- families panel and event ---- */
.bbn-hsw-panel, .bbn-hsw-event {
  padding: 22px;
  border-radius: var(--bbn-radius, 6px);
  border: 1px solid var(--bbn-border, #E7E1D5);
  background: var(--bbn-surface-subtle, #FDFBF6);
  color: var(--bbn-text-secondary, #5B5347);
  max-width: var(--bbn-reading, 60rem);
}
.bbn-hsw-panel strong { color: var(--bbn-ink, #3F291B); }
.bbn-hsw-event { border-left: 6px solid var(--bbn-accent, #C6A664); }   /* decorative edge only */
.bbn-hsw-event-when { font-size: 18px; font-weight: 700; color: var(--bbn-ink, #3F291B); }
.bbn-hsw-event-when span + span::before { content: "·"; margin: 0 8px; }
.bbn-hsw-event-where { font-weight: var(--bbn-weight-strong, 600); color: var(--bbn-ink, #3F291B); }

/* ---- links and buttons ---- */
.bbn-hsw a:not([class]),
.bbn-hsw a:not([class]):visited {
  color: var(--bbn-link, #0A5A45);
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;   /* the email address is one 34-character word: 339px at a 320px phone */
}
.bbn-hsw-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.bbn-hsw a.bbn-hsw-btn.bbn-hsw-btn,
.bbn-hsw a.bbn-hsw-btn.bbn-hsw-btn:visited {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--bbn-brand, #0A5A45);
  border-radius: var(--bbn-radius, 6px);
  background: var(--bbn-brand, #0A5A45);
  color: var(--bbn-text-on-brand, #FFFFFF);
  font-family: inherit;
  font-size: 15px;
  font-weight: var(--bbn-weight-strong, 600);
  line-height: 1.3;
  text-decoration: none;
  text-align: center;
}
.bbn-hsw a.bbn-hsw-btn.bbn-hsw-btn:hover { background: var(--bbn-brand-deep, #07493B); border-color: var(--bbn-brand-deep, #07493B); }
.bbn-hsw a.bbn-hsw-btn--quiet.bbn-hsw-btn--quiet,
.bbn-hsw a.bbn-hsw-btn--quiet.bbn-hsw-btn--quiet:visited {
  background: var(--bbn-surface, #FFFFFF);
  color: var(--bbn-link, #0A5A45);
  border-color: var(--bbn-border-strong, #998663);
}
.bbn-hsw a.bbn-hsw-btn--quiet.bbn-hsw-btn--quiet:hover { background: var(--bbn-hover-tint, rgba(10, 90, 69, .08)); color: var(--bbn-link-hover, #07493B); }

/* Two-tone ring from the portal: white inside, deep teal outside, readable on cream, white and
 * the dark panel alike. */
.bbn-hsw a:focus-visible {
  outline: 3px solid var(--bbn-focus-ring, #0B4437);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--bbn-focus-inner, #FFFFFF);
}
.bbn-hsw-section--ink a:focus-visible { outline-color: #FFFFFF; box-shadow: 0 0 0 2px var(--bbn-ink, #3F291B); }

/* ---- layout steps down ---- */
@media (max-width: 1024px) {
  .bbn-hsw-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bbn-hsw-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .bbn-hsw { padding: 20px 16px 40px; }
  .bbn-hsw-hero { padding: 22px 18px; }
  .bbn-hsw-section--ink { padding: 22px 16px; }
  .bbn-hsw-grid--2, .bbn-hsw-grid--3, .bbn-hsw-steps { grid-template-columns: minmax(0, 1fr); }
  .bbn-hsw-actions { flex-direction: column; }
  .bbn-hsw a.bbn-hsw-btn.bbn-hsw-btn { width: 100%; }
}