/* TEMPORARY — October 2026 Breast Cancer Awareness campaign (site-wide bar + tint, homepage band).
   Design source: /home/patricia/projects/breast-cancer-awareness (premier-october-awareness-mockup.html).
   To remove in November: delete this file, assets/graphics/awareness-ribbon.webp, and every block in
   every *.html page between <!-- BCA-START --> and <!-- BCA-END --> (including the awareness.css <link>). */

:root {
  --bca-pink: #ed64a6;
  --bca-pink-light: #ffe6f1;
  --bca-forest: #073f3b;
  --bca-forest-deep: #032f2c;
  --bca-bar-height: 52px; /* pre-JS fallback at standard desktop/tablet widths */
}

@media (min-width: 1500px) { :root { --bca-bar-height: 48px; } }
@media (max-width: 475px) { :root { --bca-bar-height: 54.4px; } }
@media (max-width: 305px) { :root { --bca-bar-height: 73.6px; } }

/* Subtle pink hue over the page (campaign band + top bar sit above it, untinted) */
.bca-tint {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  background: rgba(237, 100, 166, 0.075);
  mix-blend-mode: color;
}

/* Keep the campaign bar above the existing sticky navigation. */
.bca-bar {
  position: sticky;
  top: 0;
  z-index: 41; /* above the sticky header (z 40) so the corner ribbons can overhang it */
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 8px 28px;
  background: linear-gradient(100deg, #c82d76 0%, #ed64a6 48%, #f38bbb 100%);
  color: #fff;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
}
/* The header stays below the bar instead of sliding behind it. JS measures the
   banner after fonts/load and when text wraps on narrower or zoomed screens. */
.bca-bar ~ header { top: var(--bca-bar-height, 52px); }

.bca-bar::before,
.bca-bar::after { content: ""; width: 80px; height: 1px; background: rgba(255,255,255,0.45); }

/* Ribbons (right one mirrored). Narrow screens: flank the text. Wide screens (>=1500px, where
   the header gutters are empty): pinned to the far corners, hanging down over the header. */
.bca-bar-ribbon {
  flex: none;
  width: 24px;
  height: 36px;
  pointer-events: none;
  filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff) drop-shadow(0 3px 5px rgba(90,10,50,0.3));
}
.bca-bar-ribbon--flip { transform: scaleX(-1); }

@media (min-width: 1500px) {
  .bca-bar-ribbon { position: absolute; top: 4px; width: 46px; height: 69px; }
  .bca-bar-ribbon { left: 24px; }
  .bca-bar-ribbon--flip { left: auto; right: 24px; }
}

/* Homepage: while the band sits right under the "Most Requested" strip, drop that strip's lime swirl
   and the bottom padding reserved for it, so the strip meets the band with no empty gap. */
.featured:has(+ .bca-campaign) { padding-bottom: 26px; }
.featured:has(+ .bca-campaign) .swirl-wave { display: none; }

/* Campaign band */
section.bca-campaign {
  position: relative;
  z-index: 31;
  min-height: 360px;
  display: grid;
  grid-template-columns: 280px minmax(0, 620px);
  justify-content: center;
  align-items: center;
  gap: 48px;
  padding: 44px 84px;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 40%, rgba(237,100,166,0.3), transparent 28%),
    radial-gradient(circle at 92% 20%, rgba(182,210,59,0.13), transparent 26%),
    linear-gradient(118deg, var(--bca-forest-deep), var(--bca-forest));
  color: #fff;
  isolation: isolate;
}
.bca-campaign::before,
.bca-campaign::after {
  content: "";
  position: absolute;
  left: -3%;
  width: 106%;
  height: 22px;
  border-radius: 50%;
  background: var(--bca-pink);
  opacity: 0.9;
  z-index: -1;
}
.bca-campaign::before { top: -17px; }
.bca-campaign::after { bottom: -17px; }

.bca-ribbon-wrap { position: relative; display: grid; place-items: center; min-height: 250px; }
.bca-ribbon-wrap::before {
  content: "";
  position: absolute;
  width: 210px;
  height: 210px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 50%;
  box-shadow: 0 0 0 18px rgba(255,255,255,0.035);
}
.bca-ribbon { width: 185px; height: auto; position: relative; z-index: 1; filter: drop-shadow(0 22px 34px rgba(0,0,0,0.32)); }

.bca-copy { max-width: 620px; }
.bca-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--bca-pink-light);
  font-family: "Poppins", Arial, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.bca-kicker::before { content: ""; width: 34px; height: 2px; background: var(--bca-pink); }
.bca-campaign h2 {
  max-width: 650px;
  margin: 0;
  color: #fff;
  font-size: clamp(38px, 4vw, 62px);
  line-height: 0.98;
  letter-spacing: -0.045em;
}
.bca-campaign h2 span { color: var(--bca-pink); }
.bca-campaign .bca-copy p { max-width: 650px; margin: 18px 0 0; color: rgba(255,255,255,0.84); font-size: 16px; line-height: 1.65; }

@media (max-width: 900px) {
  .bca-bar::before, .bca-bar::after { display: none; }
  section.bca-campaign { grid-template-columns: 130px 1fr; gap: 28px; padding: 42px 34px; }
  .bca-ribbon-wrap { min-height: 180px; }
  .bca-ribbon-wrap::before { width: 148px; height: 148px; }
  .bca-ribbon { width: 125px; }
}

@media (max-width: 560px) {
  .bca-bar { font-size: 12px; }
  section.bca-campaign { grid-template-columns: 1fr; gap: 12px; text-align: center; padding: 40px 24px; }
  .bca-ribbon-wrap { min-height: 150px; }
  .bca-ribbon { width: 108px; }
  .bca-ribbon-wrap::before { width: 130px; height: 130px; }
  .bca-kicker { justify-content: center; }
  .bca-campaign h2 { font-size: 42px; }
  .bca-campaign .bca-copy p { font-size: 14px; }
}