/* ============================================================
   QRFup brand styles — everything custom lives in this one file.
   Bootstrap handles layout & components; these ~90 lines are the
   only CSS you need to read or edit.
   ============================================================ */

:root {
  --qrf-purple: #4d2c82;   /* primary brand color (buttons, sections) */
  --qrf-red:    #ed3e4f;   /* crisis / call-to-action color */
  --qrf-red-dk: #d02c3d;   /* darker red: button hover, and any red behind text —
                              white on the lighter red is only 3.9:1, under AA */
  --qrf-teal:   #58aba0;   /* secondary tint used in the hero gradient */
}

body {
  font-family: "Gabarito", sans-serif;
  font-weight: 400;        /* Gabarito is always used at weight 400 */
}

/* Libre Franklin Bold (700) is the accent font: crisis bar and all button
   text. Everything else stays on Gabarito. */
.crisis-bar,
.btn {
  font-family: "Libre Franklin", sans-serif;
  font-weight: 700;
}
.crisis-bar {
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0;
}

.navbar-nav {
  gap: 43px;
}
.navbar-nav .nav-link {
  font-family: "Gabarito", sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.03em;
}

/* ---------- brand buttons (used site-wide) ---------- */
.btn-qrf {
  background-color: var(--qrf-purple);
  border-color: var(--qrf-purple);
  color: #fff;
  border-radius: 50rem;    /* pill shape, like the Wix design */
  padding-inline: 1.5rem;
}
.btn-qrf:hover { background-color: #3a2164; color: #fff; }

.btn-qrf-red {
  background-color: var(--qrf-red);
  border-color: var(--qrf-red);
  color: #fff;
  border-radius: 50rem;
  padding-inline: 1.5rem;
}
.btn-qrf-red:hover { background-color: var(--qrf-red-dk); color: #fff; }

/* Keyboard focus. Bootstrap's default ring all but vanishes on dark
   backgrounds, so use a two-tone ring: the white sits on dark backgrounds,
   the purple on light ones, and one of the two always shows. */
.btn-qrf:focus-visible,
.btn-qrf-red:focus-visible,
.crisis-bar a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--qrf-purple);
}

/* ---------- crisis banner under the navbar ---------- */
.crisis-bar {
  background-color: var(--qrf-red);
  color: #fff;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.crisis-bar a { color: #fff; }

/* ---------- purple "overview" band ---------- */
.bg-qrf-purple { background-color: var(--qrf-purple); }
.text-qrf-purple { color: var(--qrf-purple); }
/* crop card photos to a uniform height so the three cards line up */
.card-img-top { height: 14rem; object-fit: cover; }
.text-qrf-red  { color: var(--qrf-red); }

/* ---------- inner-page hero banner ---------- */
.page-hero {
  background-size: cover;
  background-position: center;
  position: relative;
  /* Each page sets --hero-aspect to its banner image's own proportions, so
     the full photo shows with nothing cropped top or bottom. No min-height:
     an aspect-ratio box automatically grows if its text needs more room. */
  aspect-ratio: var(--hero-aspect, auto);
  display: flex;
  align-items: center;
}
/* media-room: the original centers a narrower photo on a black strip */
.page-hero.hero-contain {
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #000;
}
.page-hero::after {           /* tint for readable headings; pages can pick
                                 their own via --hero-tint (red wash, white
                                 wash, …) to match the original site */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-tint, rgba(20, 10, 40, .55));
}
.page-hero > .container {
  position: relative;
  z-index: 1;
  color: #fff;
}

/* ---------- rounded label boxes used on banner headings ---------- */
.hero-label {
  display: inline-block;
  padding: .5rem 1.75rem;
  border-radius: .75rem;
  color: #fff;
}
.hero-label-teal { background: rgba(104, 148, 135, .85); }    /* How We Help */
.hero-label-red  { background: rgba(237, 62, 79, .85); }      /* Who We Are  */
.hero-label-gradient {                                        /* Media Room  */
  background: linear-gradient(90deg, rgba(121, 201, 193, .9), rgba(179, 157, 219, .9));
  color: var(--qrf-purple);
}

/* ---------- red stat circles (sponsorship) ---------- */
.stat-circle {
  width: 9.5rem;
  height: 9.5rem;
  border-radius: 50%;
  background: var(--qrf-red);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  margin-inline: auto;
}
.stat-circle .stat-number { font-size: 1.6rem; font-weight: 600; }

/* ---------- numbered circles for impact lists ---------- */
.num-badge {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--qrf-purple);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

/* ---------- team headshots (Who We Are) ---------- */
/* square crop like the original cards; keep faces (upper fifth) in frame */
.team-card img {
  aspect-ratio: 1;
  height: auto;
  object-fit: cover;
  object-position: center 20%;
}
/* row of photos with equal heights and natural widths, like the original
   families strip */
.photo-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}
.photo-strip img {
  height: clamp(9rem, 22vw, 18rem);
  width: auto;
  min-width: 9rem;      /* crop very narrow/wide photos to keep the strip even */
  max-width: 13rem;
  object-fit: cover;
  border-radius: .5rem;
}
/* uniform white tiles for partner logos */
.logo-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
}
.logo-strip .logo-box {
  background: #fff;
  border-radius: .5rem;
  height: clamp(7rem, 15vw, 11rem);
  width: clamp(7rem, 15vw, 11rem);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .75rem;
}
.logo-strip .logo-box img {
  max-width: 100%;
  max-height: 100%;
}
/* wide letterboxed photo (the dashed-frame mission image) */
.framed-photo {
  aspect-ratio: 20 / 9;
  width: 100%;
  object-fit: cover;
}
/* long bios stay in the page but display clamped to keep cards tidy */
.bio-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* red star between a heading and its section, like the original */
.star-divider {
  color: var(--qrf-red);
  font-size: 1.2rem;
  line-height: 1;
}

/* ---------- footer ---------- */
.footer-v2 {
  background: #48488E;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.footer-v2__inner {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  max-width: 1448px;
  width: 100%;
  margin-inline: auto;
  box-sizing: border-box;
  padding: 3rem 24px;
}
@media (min-width: 992px) {
  .footer-v2__inner {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: flex-start;
    padding: 3.5rem 102px 3rem;
    gap: 2rem;
  }
}
.footer-v2__logo {
  max-width: 240px;
  width: 100%;
  height: auto;
  flex-shrink: 0;
  justify-self: start;
}
.footer-v2-heading {
  color: #fff;
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 19px;
  margin: 0 0 24px;
}
.footer-v2-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-v2-link {
  color: #fff;
  font-family: "Gabarito", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  letter-spacing: -0.03em;
  text-decoration: none;
}
.footer-v2-columns {
  display: flex;
  flex-wrap: nowrap;
  gap: 2.5rem 64px;
}
@media (min-width: 992px) {
  .footer-v2-columns {
    justify-self: center;
  }
}
@media (max-width: 600px) {
  .footer-v2-columns {
    flex-direction: column;
    gap: 2rem;
  }
}
.footer-v2-link:hover,
.footer-v2-link:focus { color: rgba(255, 255, 255, .8); }
.footer-v2-address {
  display: block;
  font-style: normal;
  line-height: 1.4;
}
.footer-v2-contact-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer-v2-contact-row:last-child {
  align-items: flex-start;
}
.footer-v2-contact-icon {
  flex-shrink: 0;
  display: inline-flex;
  color: #fff;
  opacity: .8;
}
.footer-v2-contact-row:last-child .footer-v2-contact-icon {
  margin-top: 2px;
}
.footer-v2-social-block {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
@media (min-width: 992px) {
  .footer-v2-social-block {
    justify-self: end;
    align-items: flex-end;
    text-align: right;
  }
  .footer-v2-social-block--offset {
    margin-left: 0;
  }
}
.footer-v2-social {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}
@media (min-width: 992px) {
  .footer-v2-social {
    justify-content: flex-end;
  }
}
.footer-v2-social a {
  display: inline-flex;
  transition: transform .15s;
}
.footer-v2-social a:hover { transform: translateY(-2px); }
.footer-v2-copyright {
  color: #fff;
  font-family: "Gabarito", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  margin: 0;
}
@media (min-width: 992px) {
  .footer-v2-copyright {
    text-align: right;
  }
}

/* ---------- footer badges strip ---------- */
.footer-v2-badges-strip {
  background: #39396D;
  width: 100%;
  padding: 1.5rem 1.25rem 1.75rem;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
.footer-v2-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem 2.25rem;
  max-width: 1200px;
  margin: 0 auto;
}
.footer-v2-badge-item {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #39396D;
  border-radius: 8px;
  padding: 2px 4px;
  transition: transform .15s ease;
}
.footer-v2-badge-item:hover {
  transform: translateY(-2px);
}
.footer-v2-badge-img {
  max-height: 50px;
  width: auto;
  object-fit: contain;
  display: block;
}

/* ============================================================
   COMING-SOON PAGE (index.html during the transition)
   Most of index.html is commented out until the new site ships
   on 10 Sep 2026; everything below dresses the handful of
   sections that stay live until then. Delete this block when
   the real homepage comes back.
   ============================================================ */

:root {
  --qrf-night: #1a0f33;    /* deep background behind the synthwave hero */
  --qrf-pink:  #b39ddb;    /* the logo's lilac, used for gradient text */
}

/* ---------- diagonal "work in progress" strip ---------- */
/* the one literal construction cue on the page — brand colors, not
   highway yellow, so it reads as a design element rather than clip art */
.hazard-strip {
  height: .5rem;
  background: repeating-linear-gradient(-45deg,
              var(--qrf-purple) 0 1rem,
              var(--qrf-red)    1rem 2rem);
}

/* ---------- hero ---------- */
.cs-hero {
  position: relative;
  isolation: isolate;      /* keeps the ::before/::after layers behind the text */
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: min(100svh, 46rem);
  padding-block: clamp(3rem, 9vw, 6rem);
  color: #fff;
  text-align: center;
  background:
    radial-gradient(60rem 30rem at 50% -10%, rgba(88, 171, 160, .30), transparent 65%),
    radial-gradient(45rem 28rem at 85% 100%, rgba(237, 62, 79, .22), transparent 60%),
    linear-gradient(180deg, var(--qrf-night), #2a1a4d 55%, #1d1140);
}
/* retro perspective grid along the bottom, echoing the logo artwork */
.cs-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 38%;
  z-index: -1;
  pointer-events: none;
  opacity: .55;
  background-image:
    linear-gradient(rgba(121, 201, 193, .40) 1px, transparent 1px),
    linear-gradient(90deg, rgba(121, 201, 193, .32) 1px, transparent 1px);
  background-size: 3rem 3rem;
  transform: perspective(20rem) rotateX(68deg);
  transform-origin: bottom center;
  -webkit-mask-image: linear-gradient(transparent, #000 65%);
          mask-image: linear-gradient(transparent, #000 65%);
}

.cs-logo {
  width: auto;
  max-height: clamp(6rem, 16vw, 9.5rem);
  filter: drop-shadow(0 0 2.5rem rgba(237, 62, 79, .45));
}

/* small red pill above the headline */
.cs-eyebrow {
  display: inline-block;
  background: var(--qrf-red);
  border-radius: 50rem;
  padding: .4rem 1.2rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.cs-title {
  font-weight: 700;
  font-size: clamp(2rem, 7vw, 4rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
}
/* gradient lettering, in the logo's teal→lilac→red ramp. Guarded so the
   text never turns invisible in a browser without background-clip. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .cs-title {
    background: linear-gradient(100deg, #79c9c1, var(--qrf-pink) 55%, var(--qrf-red));
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
  }
}

.cs-lead {
  font-size: clamp(1rem, 2.4vw, 1.3rem);
  color: rgba(255, 255, 255, .82);
  max-width: 34rem;
  margin-inline: auto;
}
.cs-launch-date { color: #fff; font-weight: 600; white-space: nowrap; }

/* phones: stack the two calls to action full width so they read as one pair */
@media (max-width: 575.98px) {
  .cs-cta .btn { width: 100%; }
}

/* ---------- buttons that sit on the dark hero ---------- */
.btn-qrf-light {
  background-color: #fff;
  border-color: #fff;
  color: var(--qrf-purple);
  font-weight: 600;
  border-radius: 50rem;
  padding-inline: 1.5rem;
}
.btn-qrf-light:hover { background-color: #ece7f6; border-color: #ece7f6; color: var(--qrf-purple); }

/* ---------- mission ---------- */
.section-eyebrow {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--qrf-teal);
}
/* one centered column at a comfortable reading measure */
.mission-body {
  max-width: 38rem;
  margin-inline: auto;
}
.mission-body p {
  font-size: 1.05rem;
  line-height: 1.75;
}
/* ---------- transition footer ---------- */
.cs-footer {
  background: var(--qrf-night);
  color: rgba(255, 255, 255, .7);
}
.cs-footer a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.cs-footer a:hover { color: #fff; }
/* width:auto is load-bearing — with only max-height the image keeps its full
   intrinsic width and the logo comes out stretched */
.cs-footer-logo { max-height: 5rem; width: auto; }
.cs-social img {
  height: 32px;
  width: auto;
  /* the icon PNGs are near-black artwork; flip them to white so they read
     against the dark footer */
  filter: brightness(0) invert(1);
  opacity: .75;
  transition: opacity .15s ease;
}
.cs-social a:hover img { opacity: 1; }

/* ---------- entrance animation ---------- */
@media (prefers-reduced-motion: no-preference) {
  .cs-fade {
    animation: cs-fade-in .7s ease-out both;
  }
  .cs-fade:nth-child(2) { animation-delay: .08s; }
  .cs-fade:nth-child(3) { animation-delay: .16s; }
  .cs-fade:nth-child(4) { animation-delay: .24s; }
  .cs-fade:nth-child(5) { animation-delay: .32s; }
  @keyframes cs-fade-in {
    from { opacity: 0; transform: translateY(1.25rem); }
    to   { opacity: 1; transform: none; }
  }
}