/* Section bands + buttons used by the Section and Button block definitions.
   Everything is scoped under .bt-section so the site header/footer are untouched. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&family=Open+Sans:wght@400;600;700&display=swap');

.bt-section {
  --bt-blue: #4260c4;
  --bt-yellow: #f7e01a;
  width: 100%;
  box-sizing: border-box;
  padding: 4rem 1rem;
  font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #1a1a1a;
  background: #ffffff;
}
.bt-section__inner {
  max-width: 1100px;
  margin: 0 auto;
}
.bt-section h1,
.bt-section h2,
.bt-section h3 {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 0.6em 0;
}
.bt-section h1 { font-size: 2.6rem; }
.bt-section h2 { font-size: 2rem; }
.bt-section h3 { font-size: 1.35rem; }
.bt-section p { margin: 0 0 1em 0; }
.bt-section p:last-child { margin-bottom: 0; }
.bt-section img { max-width: 100%; height: auto; display: block; }
.bt-section a { color: inherit; }

/* --- Themes ------------------------------------------------------------- */

/* Full-bleed photo with a blue wash; content sits at the bottom.
   The band's height scales with the window width (within sensible limits)
   so the photo keeps roughly the same crop at any size. The focal point sits
   a quarter of the way down the photo rather than dead centre. */
.bt-section--photo {
  position: relative;
  min-height: clamp(420px, 45vw, 640px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 6rem;
  padding-bottom: 3rem;
  color: #ffffff;
  background-color: var(--bt-blue);
  background-image:
    linear-gradient(rgba(66, 96, 196, 0.55), rgba(66, 96, 196, 0.55)),
    var(--bt-bg);
  background-size: cover;
  background-position: center 25%;
  background-repeat: no-repeat;
}
.bt-section--photo .bt-section__inner { width: 100%; }
.bt-section--photo h1,
.bt-section--photo h2,
.bt-section--photo h3 { color: #ffffff; }
.bt-section--photo .bt-badge { max-width: 180px; margin-left: auto; }

/* Solid blue band, white text, centered. */
.bt-section--blue {
  background: var(--bt-blue);
  color: #ffffff;
  text-align: center;
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.bt-section--blue h1,
.bt-section--blue h2,
.bt-section--blue h3 { color: #ffffff; }

/* White band with blue headings. */
.bt-section--white h1,
.bt-section--white h2,
.bt-section--white h3 { color: var(--bt-blue); }

/* Yellow inset box on a white band. */
.bt-section--yellow { padding-top: 3rem; padding-bottom: 3rem; }
.bt-section--yellow .bt-section__inner {
  background: var(--bt-yellow);
  color: var(--bt-blue);
  padding: 3rem 2rem;
  border-radius: 4px;
}
.bt-section--yellow h1,
.bt-section--yellow h2,
.bt-section--yellow h3 { color: var(--bt-blue); }
.bt-section--yellow h2 { font-size: 1.6rem; margin: 0; }

/* --- Buttons ------------------------------------------------------------ */
.bt-btn {
  display: inline-block;
  padding: 0.8em 1.6em;
  border-radius: 4px;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.bt-btn:hover { opacity: 0.85; }
.bt-btn--blue { background: #4260c4; color: #ffffff; }
.bt-btn--white { background: #ffffff; color: #4260c4; }
a:has(> .bt-btn) { text-decoration: none; }
.bt-section p + a:has(> .bt-btn),
.bt-section h2 + a:has(> .bt-btn) { margin-top: 0.5em; }

/* --- Section-specific helpers ------------------------------------------ */
.bt-hero-text { max-width: 560px; }
.bt-hero-text .bt-caption { font-size: 0.85rem; margin-top: 1em; }

.bt-calendar iframe { width: 100%; border: 0; display: block; }
.bt-calendar--month iframe { height: 600px; }
.bt-calendar--agenda iframe { height: 600px; }
.bt-calendar--agenda { display: none; }
@media (max-width: 719px) {
  .bt-calendar--month { display: none; }
  .bt-calendar--agenda { display: block; }
}

.bt-centered { text-align: center; }
.bt-card { text-align: center; }
.bt-card img { max-width: 260px; margin: 0 auto 1rem auto; }
.bt-card h3 { font-size: 1.1rem; margin-bottom: 0.4em; }
.bt-card a { color: var(--bt-blue); font-size: 0.85rem; }

.bt-mascot img { max-width: 220px; margin: 0 auto; }
.bt-tee img { max-width: 300px; margin: 0 auto; }

/* Sub-headings and quotes inside prose (Who We Are page). h4 keeps the body
   colour so it reads as a label under a blue h2. */
.bt-section h4 {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.3;
  margin: 1.5em 0 0.6em 0;
}
.bt-section h4:first-child { margin-top: 0; }
.bt-section blockquote { margin: 0.5em 0 1em 1.5em; }

/* Vertical rhythm helpers: a lead-in before a grid, extra space before a block. */
.bt-lead { margin-bottom: 2rem; }
.bt-spaced { margin-top: 2.5rem; }

@media (max-width: 719px) {
  .bt-section { padding: 2.5rem 1rem; }
  .bt-section h1 { font-size: 2rem; }
  .bt-section h2 { font-size: 1.6rem; }
  .bt-section--photo { min-height: 380px; }
  .bt-section--photo .bt-badge { margin-left: 0; }
  .bt-section--yellow .bt-section__inner { padding: 2rem 1.25rem; }
}

/* Small label above a heading (Get Involved page). */
.bt-eyebrow {
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0 0 0.75rem 0;
}

/* Call-to-action row: text on the left, button on the right; wraps on
   narrow screens. */
.bt-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem 2rem;
}
.bt-cta h3 { margin-bottom: 0.4em; }
.bt-cta p { font-size: 1.2rem; }

/* Full-bleed yellow hero band (Advocacy / Defensa pages): a tall centered
   heading with a button beneath it. */
.bt-section--yellow-hero {
  background: var(--bt-yellow);
  color: #1a1a1a;
  text-align: center;
  padding-top: 9rem;
  padding-bottom: 9rem;
}
.bt-section--yellow-hero h1,
.bt-section--yellow-hero h2 { color: #1a1a1a; margin-bottom: 1.25rem; }
.bt-section--yellow-hero .bt-btn { font-size: 0.85rem; }
@media (max-width: 719px) {
  .bt-section--yellow-hero { padding-top: 5rem; padding-bottom: 5rem; }
}

/* Larger lead copy (Advocacy intro). */
.bt-large p { font-size: 1.15rem; }

/* A bold blue note block (Volunteer page welcome message). */
.bt-note { color: var(--bt-blue); font-weight: 600; }

/* Bulleted list that reads as a plain list of demands (Advocacy). */
.bt-section ul, .bt-section ol { margin: 0 0 1em 0; padding-left: 1.4rem; }
.bt-section li { margin-bottom: 0.45em; }
.bt-section li > ul { margin-top: 0.3em; }

/* A narrower centered column for lists and FAQs. */
.bt-narrow { max-width: 760px; margin-left: auto; margin-right: auto; }

/* Sponsor / partner logos in a grid (Auction page): boxed to a fixed height
   and centered so mixed logo shapes line up. */
.bt-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 140px;
  padding: 0.5rem;
}
.bt-logo img { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; margin: 0 auto; }

/* A poster or flyer image centered in its column. */
.bt-poster img { max-width: 360px; margin: 0 auto; border-radius: 4px; }
.bt-flyer img { max-width: 700px; margin: 0 auto; }

/* Program cards (Events & News page): image + bold label + short text. */
.bt-program img { margin-bottom: 1rem; border-radius: 4px; }
.bt-program h4 { margin-top: 0; color: var(--bt-blue); }

/* Tight paragraph list (cast list). */
.bt-tight p { margin-bottom: 0.35em; }

/* A vertical stack of buttons. */
.bt-btn-stack a { display: block; text-align: center; margin-bottom: 0.75rem; }
.bt-btn-stack .bt-btn { display: block; }

/* Mailchimp newsletter archive (Newsletters page). */
.bt-archive .campaign { margin-bottom: 0.5em; }
.bt-archive a { color: var(--bt-blue); }