/* =============================================================
   BPN Homepage Hero  |  v1.0
   Blind Professionals Network
   Accessibility-first - WCAG 2.2 AA baseline (AAA on contrast)
   House style: hyphens only, no em dashes
   ============================================================= */

/* ----- Hero container ----- */
.bpn-hero {
  background-color: #000000;
  padding-top: clamp(3rem, 8vw, 6rem);
  padding-bottom: clamp(3rem, 8vw, 6rem);
  padding-left: var(--wp--style--root--padding-left, clamp(1.5rem, 5vw, 4rem));
  padding-right: var(--wp--style--root--padding-right, clamp(1.5rem, 5vw, 4rem));
  position: relative;
  overflow: hidden;
}


/* ----- Eyebrow ----- */
.bpn-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.25rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase; /* visual only - type text in normal case */
  color: #d5dce8;            /* ~14:1 on black */
}
/* The glow bloom - offset to the right like the reference */
.bpn-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* Layer 1 - diagonal beam, shifted right of the text column */
    linear-gradient(
      115deg,
      transparent 45%,
      rgba(61, 90, 254, 0.05) 53%,
      rgba(80, 105, 255, 0.20) 60%,
      rgba(110, 130, 255, 0.30) 64%,
      rgba(80, 105, 255, 0.20) 68%,
      rgba(61, 90, 254, 0.05) 75%,
      transparent 84%
    ),
    /* Layer 2 - unchanged corner bloom */
    radial-gradient(
      ellipse 90% 90% at 85% 0%,
      rgba(61, 90, 254, 0.32) 0%,
      rgba(45, 68, 210, 0.18) 35%,
      rgba(35, 52, 165, 0.07) 60%,
      transparent 80%
    );
  filter: blur(6px);
}
 
/* Content stays above the light layers */
.bpn-hero > * {
	
  position: relative;
  z-index: 1;
}
 
/* Decorative - remove in High Contrast Mode */
@media (forced-colors: active) {
  .bpn-hero::before { display: none; }
}
 
/* Decorative dot - CSS pseudo-element, so screen readers ignore it */
.bpn-eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: #2563ff;
}

/* ----- Title (gradient with safe fallbacks) + shine underline ----- */
.bpn-title {
  position: relative;                /* anchor for the glow line */
  margin: 0 0 1.25rem;
  padding-bottom: 1.25rem;           /* room for the line below the text */
  font-size: clamp(2.5rem, 8vw, 5rem);
  line-height: 1.05;
  font-weight: 800;
  color: #f2f5fb;                    /* fallback if background-clip is unsupported */
  background: linear-gradient(180deg, #ffffff 0%, #c8cdd6 55%, #9aa0ab 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Fading gradient shine line under the title — royal blue.
   Its own text-fill-color reset stops the title's clip from hiding it. */
.bpn-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(420px, 65%);            /* line length - tweak to taste */
  height: 2px;
  border-radius: 2px;
  -webkit-text-fill-color: initial;  /* undo the title's transparent fill */
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(65, 105, 225, 0.15) 12%,
    rgba(65, 105, 225, 0.95) 50%,
    rgba(65, 105, 225, 0.15) 88%,
    transparent 100%
  );
  box-shadow: 0 0 16px 1px rgba(65, 105, 225, 0.45);  /* soft blue halo */
  pointer-events: none;
}

.bpn-title strong {
  background: none;                  /* clear the inherited gradient background */
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: #C9A227;  /* this is what actually shows the color */
  color: #C9A227;                    /* fallback for browsers without background-clip:text */
}
/* Restore solid visible text and drop the decorative line
   in High Contrast / forced-colors mode. */
@media (forced-colors: active) {
  .bpn-title {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
  .bpn-title::after { display: none; }
}



/* ----- Subtitle ----- */
.bpn-subtitle {
  margin: 0 0 2rem;
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  color: #c3c9d4; /* ~10:1 on black */
}

/* ----- Buttons ----- */
.bpn-hero .wp-block-buttons { gap: 1rem; }

.bpn-hero .wp-block-button__link {
  border-radius: 8px;
  padding: 0.85rem 1.75rem;
  font-weight: 700;
}

/* Primary - light fill, dark text (very high contrast) */
.bpn-btn-primary .wp-block-button__link {
  background: #f2f5fb;
  color: #0f1b2b;
}
.bpn-btn-primary .wp-block-button__link:hover {
  background: #e2e8f4;
}

/* Secondary - near-black on near-black, so the visible border does
   the work. Border clears 3:1 against the black background
   (WCAG 1.4.11 non-text contrast for the control boundary). */
.bpn-btn-secondary .wp-block-button__link {
  background: #0f1b2b;
  color: #f2f5fb;
  border: 1px solid #7a88a6;
}
.bpn-btn-secondary .wp-block-button__link:hover {
  background: #16233a;
  border-color: #9aa8c6;
}

/* ----- Focus visibility (critical for keyboard + low-vision users) ----- */
.bpn-hero a:focus-visible,
.bpn-hero .wp-block-button__link:focus-visible {
  outline: 3px solid #ffffff; /* 21:1 on the black hero, always visible */
  outline-offset: 3px;
}


/* --- code for header nav */
.header {
background: #000000;
}


/* ----------bpn mission----------*/
.bpn-mission {
 background-color: #000000;
  padding-top: clamp(3rem, 8vw, 6rem);
  padding-bottom: clamp(3rem, 8vw, 6rem);
  padding-left: var(--wp--style--root--padding-left, clamp(1.5rem, 5vw, 4rem));
  padding-right: var(--wp--style--root--padding-right, clamp(1.5rem, 5vw, 4rem));
  position: relative;
  overflow: hidden;
}

/* =============================================================
   BPN - Fading gradient "shine" underline  |  v1.1
   Decorative accent under the H2 mission title (.bpn-mission-title)
   Built on a pseudo-element so it is ignored by assistive tech.
   House style: hyphens only, no em dashes

   Changelog
   v1.0  Initial - targeted .bpn-eyebrow
   v1.1  Retargeted to .bpn-mission-title (H2); removed border-bottom;
         widened line to suit the larger heading
   ============================================================= */

/* Remove the flat border and make room for the glow line */
.bpn-mission-title {
  position: relative;
  border-bottom: none; /* clears the old 1px border */
  padding-bottom: 1rem;
}

/* Bright core line - horizontal gradient that fades at both ends */
.bpn-mission-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(340px, 70%);   /* wider than the eyebrow version; tweak to taste */
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 12%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(255, 255, 255, 0.15) 88%,
    transparent 100%
  );
  /* Soft halo/glow around the line */
  box-shadow: 0 0 14px 1px rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

/* Remove the decorative glow in High Contrast Mode so it never
   interferes with system colors. */
@media (forced-colors: active) {
  .bpn-mission-title::after { display: none; }
}

/* =============================================================
   BPN Mission - body copy + callout box  |  v1.0
   Matches class names in the live build:
     .bpn-mission-text1   = paragraph under the H2
     .bpn-mission-text-s  = the bordered "Crucially..." callout
   Accessibility-first - WCAG 2.2 AA. Hyphens only, no em dashes.
   ============================================================= */

 
/* -----BPN's Mission Callout box ("Crucially, all BPN programs...") ----- */
.bpn-mission-text-s {
  margin: 0;
  padding: 1.5rem 2rem;
  border: 1px solid #3D5AFE;     /* royal blue, matches site accent */
  border-radius: 12px;
  background: #0b1220;
}

/* The paragraph sitting inside the callout box */
.bpn-mission-text-s,
.bpn-mission-text-s p {
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  line-height: 1.6;
  font-weight: 600;
  color: #f2f5fb;                /* ~15:1 on the callout background */
}

.bpn-mission-text-s strong {
  color: #C9A227;
  font-weight: 700;
}

.bpn-join {
 background-color: #000000;
  padding-top: clamp(3rem, 8vw, 6rem);
  padding-bottom: clamp(3rem, 8vw, 6rem);
  padding-left: var(--wp--style--root--padding-left, clamp(1.5rem, 5vw, 4rem));
  padding-right: var(--wp--style--root--padding-right, clamp(1.5rem, 5vw, 4rem));
  position: relative;
  overflow: hidden;
}




.bpn-title-dark {
  position: relative;                /* anchor for the glow line */
  margin: 0 0 1.25rem;
  padding-bottom: 1.25rem;           /* room for the line below the text */
  font-size: clamp(2.5rem, 8vw, 5rem);
  line-height: 1.05;
  font-weight: 800;
  color: #0f1b2b;                    /* fallback if background-clip is unsupported - ~19:1 on white */
  background: linear-gradient(180deg, #0f1b2b 0%, #2d3748 55%, #46536b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Fading gradient shine line under the title.
   Dark version for white background - subtle, not glowing. */
.bpn-title-dark::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(420px, 65%);
  height: 2px;
  border-radius: 2px;
  -webkit-text-fill-color: initial;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(65, 105, 225, 0.15) 12%,
    rgba(65, 105, 225, 0.85) 50%,
    rgba(65, 105, 225, 0.15) 88%,
    transparent 100%
  );
  box-shadow: 0 0 12px 1px rgba(65, 105, 225, 0.2);  /* soft blue halo, much subtler than glow version */
  pointer-events: none;
}

/* Restore solid visible text and drop the decorative line
   in High Contrast / forced-colors mode. */
@media (forced-colors: active) {
  .bpn-title-dark {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
  .bpn-title-dark::after { display: none; }
}

/* Labels never wrap mid-word at any screen size */
.grp-btn .wp-block-button__link {
  white-space: nowrap;
}
 
/* Small screens - stack the buttons, full width */
@media (max-width: 600px) {
  .grp-btn {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    width: 100%;
  }

  .grp-btn .wp-block-button,
  .grp-btn .wp-block-button[class*="width"] {
    width: 100% !important;
  }

  .grp-btn .wp-block-button__link {
    display: block;
    width: 100%;
    text-align: center;
    padding: 1rem 1.5rem;
  }
}