/* ==========================================================================
   04-components.css
   Reusable pieces: buttons, the navbar and its mobile drawer, the four card
   types, form controls, the donate panel, and the footer.
   Each block is self-contained — you can lift one out without touching others.
   ========================================================================== */


/* ==========================================================================
   BUTTONS
   .btn is the shape; a --modifier picks the colors.
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.875rem 1.5rem;
  border-radius: var(--radius-button);
  transition: all 250ms ease;
}

.btn:hover { transform: scale(1.02); }

.btn--primary {
  background-color: var(--purple);
  color: var(--white);
  box-shadow: var(--shadow-button);
}
.btn--primary:hover { background-color: rgb(107 44 145 / 0.9); }

/* Purple outline on light backgrounds. Not currently used on the page, but
   kept because it completes the set — delete it if it stays unused. */
.btn--outline {
  border: 2px solid var(--purple);
  color: var(--purple);
  background-color: transparent;
}
.btn--outline:hover {
  background-color: var(--purple);
  color: var(--white);
}

/* White outline, for use over the hero photo and the dark Impact section. */
.btn--outline-light {
  border: 2px solid var(--white);
  color: var(--white);
  background-color: transparent;
}
.btn--outline-light:hover {
  background-color: var(--white);
  color: var(--purple);
}

.btn--lg {
  font-size: var(--text-base);
  line-height: var(--lh-base);
  padding: 1rem 2rem;
}

/* Full width on phones, natural width from the md breakpoint up. */
.btn--block { width: 100%; }

@media (min-width: 768px) {
  .btn--block { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover { transition: none; transform: none; }
}


/* ==========================================================================
   NAVBAR
   Transparent over the hero; js/nav.js adds .nav--scrolled past 50px.
   ========================================================================== */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: var(--nav-height);
  background-color: transparent;
  transition: background-color 300ms ease, box-shadow 300ms ease;
}

.nav--scrolled {
  background-color: rgb(255 255 255 / 0.95);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-nav);
}

.nav__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.nav__logo {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.nav__brand-text {
  display: none;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: var(--lh-lg);
  font-weight: 700;
  color: var(--white);
  transition: color 300ms ease;
}

.nav--scrolled .nav__brand-text { color: var(--purple); }

.nav__links { display: none; }

.nav__link {
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  font-weight: 500;
  color: rgb(255 255 255 / 0.9);
  transition: color 200ms ease;
}
.nav__link:hover { color: var(--white); }

.nav--scrolled .nav__link       { color: var(--charcoal); }
.nav--scrolled .nav__link:hover { color: var(--purple); }

.nav__cta {
  display: none;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  font-weight: 600;
  padding: 0.625rem 1.5rem;
  border-radius: var(--radius-button);
  background-color: var(--white);
  color: var(--purple);
  transition: all 250ms ease;
}
.nav__cta:hover {
  background-color: rgb(255 255 255 / 0.9);
  transform: scale(1.02);
}

.nav--scrolled .nav__cta {
  background-color: var(--purple);
  color: var(--white);
  box-shadow: var(--shadow-button);
}
.nav--scrolled .nav__cta:hover { background-color: rgb(107 44 145 / 0.9); }

.nav__toggle {
  padding: 0.5rem;
  color: var(--white);
  transition: color 300ms ease;
}
.nav--scrolled .nav__toggle { color: var(--charcoal); }

/* The toggle shows a hamburger when closed and an X when open. */
.nav__toggle-close { display: none; }
.nav__toggle[aria-expanded="true"] .nav__toggle-open  { display: none; }
.nav__toggle[aria-expanded="true"] .nav__toggle-close { display: block; }

@media (min-width: 640px) {
  .nav__brand-text { display: block; }
}

@media (min-width: 768px) {
  .nav__brand-text { font-size: var(--text-xl); line-height: var(--lh-xl); }
}

@media (min-width: 1024px) {
  .nav__links {
    display: flex;
    align-items: center;
    gap: 2rem;
  }
  .nav__cta    { display: inline-flex; }
  .nav__toggle { display: none; }
}


/* ==========================================================================
   MOBILE DRAWER
   ========================================================================== */

/* `visibility: hidden` is what actually takes the closed drawer's links out of
   the keyboard tab order — opacity and pointer-events alone leave six invisible
   links focusable. The 300ms visibility delay holds the drawer visible for the
   length of the fade-out; on opening it applies immediately. */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 300ms ease, visibility 0s linear 300ms;
}

.drawer--open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 300ms ease, visibility 0s linear 0s;
}

.drawer__overlay {
  position: absolute;
  inset: 0;
  background-color: rgb(0 0 0 / 0.5);
}

.drawer__panel {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 280px;
  background-color: var(--white);
  box-shadow: var(--shadow-drawer);
  transform: translateX(100%);
  transition: transform 300ms ease;
}

.drawer--open .drawer__panel { transform: translateX(0); }

.drawer__links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 6rem 1.5rem 0;
}

.drawer__link {
  font-size: var(--text-base);
  line-height: var(--lh-base);
  font-weight: 500;
  color: var(--charcoal);
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--border-gray-100);
  transition: color 200ms ease;
}
.drawer__link:hover { color: var(--purple); }

.drawer__cta {
  margin-top: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  font-weight: 600;
  background-color: var(--purple);
  color: var(--white);
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-button);
}
.drawer__cta:hover { background-color: rgb(107 44 145 / 0.9); }

@media (min-width: 1024px) {
  .drawer { display: none; }
}


/* ==========================================================================
   CARDS
   Three families, three jobs — each looks like what it's for:
     .program-card  what we fund     — a photograph you can lean on
     .story-card    who it helped    — a voice, not a container
     .involve-card  how to help      — a plain option in a short list, not a
                                        button (it isn't one; it points down
                                        at the actual Donate/Volunteer panel)
   (.info-card existed in the original build but was never used anywhere in
   the markup — removed rather than carried forward as dead weight.)
   ========================================================================== */

/* ---- Program card ---------------------------------------------------------
   Photo-forward: the image carries the card, so it keeps the original
   white-surface-plus-shadow treatment as a plain frame underneath it. */

.program-card {
  overflow: hidden;
  background-color: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: box-shadow 300ms ease, transform 300ms ease;
}

.program-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-0.25rem);
}

@media (prefers-reduced-motion: reduce) {
  .program-card, .program-card:hover { transition: none; transform: none; }
}

.program-card__media {
  height: 200px;
  overflow: hidden;
}

.program-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms ease;
}

.program-card:hover .program-card__img { transform: scale(1.05); }

.program-card__body { padding: 1.5rem; }

.program-card__title {
  font-size: var(--text-lg);
  line-height: var(--lh-lg);
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 0.5rem;
}

.program-card__text {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--soft-gray);
}

@media (prefers-reduced-motion: reduce) {
  .program-card__img,
  .program-card:hover .program-card__img { transition: none; transform: none; }
}

/* ---- Story card -------------------------------------------------------------
   No card chrome — a testimonial is a voice, not a product tile. Reads as a
   quotation: an oversized mark, serif italic for the words, and a left rule
   instead of a box to hold the two together. */

.story-card {
  padding-left: 1.5rem;
  border-left: 3px solid var(--light-purple);
}

.story-card__inner {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}

.story-card__avatar {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-full);
  object-fit: cover;
  flex-shrink: 0;
}

.story-card__body { flex: 1; }

.story-card__mark {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--light-purple);
  margin-bottom: 0.5rem;
}

.story-card__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--charcoal);
  margin-bottom: 1rem;
}

.story-card__name {
  font-weight: 600;
  color: var(--charcoal);
}

.story-card__role {
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--soft-gray);
}

@media (min-width: 768px) {
  .story-card__avatar { width: 4rem; height: 4rem; }
}

/* ---- Involvement option -----------------------------------------------------
   These four are a menu of options, not buttons — the actual Donate/Volunteer
   controls live in the panel below. No card box, no hover-lift (nothing here
   is clickable); a rule separates one option from the next, the way a list
   does, rather than a shadow implying each is its own floating surface. */

.involve-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--border-gray);
}

.involve-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  border-radius: var(--radius-full);
  background-color: var(--icon-circle-bg);
  color: var(--purple);
}

.involve-card__title {
  font-size: var(--text-lg);
  line-height: var(--lh-lg);
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 0.5rem;
}

.involve-card__text {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--soft-gray);
}

@media (min-width: 640px) {
  .involve-card {
    padding: 1.5rem;
    border-bottom: none;
    border-right: 1px solid var(--border-gray);
  }
  .involve-grid > .involve-card:nth-child(2n) { border-right: none; }
}

@media (min-width: 1024px) {
  .involve-card { padding: 2rem; }
  .involve-grid > .involve-card:nth-child(2n) { border-right: 1px solid var(--border-gray); }
  .involve-grid > .involve-card:last-child { border-right: none; }
}


/* ==========================================================================
   FORM CONTROLS
   ========================================================================== */

.input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid var(--border-gray);
  border-radius: var(--radius-button);
  background-color: var(--white);
  color: var(--charcoal);
  transition: border-color 200ms ease;
}

.input::placeholder { color: var(--soft-gray); }

.input:focus {
  border-color: var(--purple);
  outline: none;
}

/* The newsletter field uses a 1px border rather than 2px. */
.newsletter__input { border-width: 1px; }

/* Natural width from md up — used by the custom donation amount. */
@media (min-width: 768px) {
  .input--auto {
    width: auto;
    min-width: 200px;
  }
}

.field { margin-bottom: 1.5rem; }

.field__label {
  display: block;
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  font-weight: 500;
  color: var(--charcoal);
  margin-bottom: 0.5rem;
}


/* ==========================================================================
   DONATE / VOLUNTEER PANEL
   ========================================================================== */

.action-panel {
  background-color: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
}

@media (min-width: 768px) {
  .action-panel { padding: 3rem; }
}

.tabs {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

.tabs__group {
  display: inline-flex;
  border: 1px solid var(--purple);
  border-radius: var(--radius-button);
  overflow: hidden;
}

.tab {
  padding: 0.75rem 2rem;
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  font-weight: 600;
  color: var(--purple);
  background-color: transparent;
  transition: all 200ms ease;
}

.tab:hover { background-color: rgb(107 44 145 / 0.05); }

.tab--active,
.tab--active:hover {
  background-color: var(--purple);
  color: var(--white);
}

.panel--hidden { display: none; }
.panel--center { text-align: center; }

.panel__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--lh-2xl);
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 1rem;
}

.panel__title--center {
  text-align: center;
  margin-bottom: 2rem;
}

.panel__text {
  max-width: 500px;
  margin: 0 auto 1.5rem;
  color: var(--soft-gray);
  text-align: center;
}

/* Always rendered with exactly three suggested amounts per project — see the
   PROJECTS map in donate.js. */
.amount-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

@media (min-width: 640px) {
  .amount-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.amount {
  border: 2px solid var(--border-gray);
  border-radius: var(--radius-card);
  background-color: var(--white);
  padding: 1.25rem;
  text-align: center;
  transition: all 200ms ease;
}

.amount:hover { border-color: var(--purple); }

.amount--active {
  border-color: var(--purple);
  background-color: var(--lavender-cream);
}

.amount__value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--lh-2xl);
  font-weight: 600;
  color: var(--charcoal);
}

.amount__desc {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--soft-gray);
  margin-top: 0.5rem;
}

@media (min-width: 768px) {
  .amount__value { font-size: var(--text-3xl); line-height: var(--lh-3xl); }
}

.volunteer-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  max-width: 600px;
  margin: 0 auto 1.5rem;
}

@media (min-width: 768px) {
  .volunteer-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ==========================================================================
   FOOTER
   ========================================================================== */

.footer { background-color: var(--deep-purple); }

.footer__inner {
  padding-top: 4rem;
  padding-bottom: 2rem;
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
}

@media (min-width: 640px) {
  .footer__grid  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: span 2; }
}

@media (min-width: 1024px) {
  .footer__grid  { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
  .footer__brand { grid-column: span 1; }
}

.footer__identity {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1rem;
}

.footer__logo {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.footer__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: var(--lh-lg);
  font-weight: 700;
  color: var(--white);
}

.footer__tagline {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: rgb(255 255 255 / 0.7);
  margin-bottom: 1.5rem;
}

.footer__social {
  display: flex;
  gap: 0.75rem;
}

.footer__social-link {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  border: 1px solid rgb(255 255 255 / 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(255 255 255 / 0.7);
  transition: all 200ms ease;
}

.footer__social-link:hover {
  background-color: var(--purple);
  border-color: var(--purple);
  color: var(--white);
}

.footer__heading {
  font-size: var(--text-base);
  line-height: var(--lh-base);
  font-weight: 600;
  color: var(--white);
  margin-bottom: 1rem;
}

.footer__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer__link {
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: rgb(255 255 255 / 0.7);
  transition: color 200ms ease;
}
.footer__link:hover { color: var(--white); }

.footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: rgb(255 255 255 / 0.7);
}

.footer__contact-icon {
  margin-top: 0.125rem;
  flex-shrink: 0;
}

.footer__bottom {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgb(255 255 255 / 0.2);
  text-align: center;
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: rgb(255 255 255 / 0.5);
}


/* ==========================================================================
   COLLAPSIBLE PANEL
   A panel that a button opens and closes (see js/collapse.js). The height is
   animated with grid-template-rows: 0fr -> 1fr, which — unlike max-height —
   needs no guess at how tall the content is. The inner wrapper does the
   clipping; the outer element does the animating.

   TO USE IT:
     <button data-collapse="panelId" aria-expanded="true" aria-controls="panelId">
     <div class="collapse" id="panelId" data-collapse-start="closed">
       <div class="collapse__inner"> ... </div>
     </div>

   The markup is written open so the content is still there with scripts off.
   data-collapse-start="closed" closes it in CSS the moment <html> is stamped
   with data-js — before the script runs, so the panel never flashes open.
   ========================================================================== */

.collapse {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.4s var(--ease-out-quart);
}

.collapse__inner {
  overflow: hidden;
  min-height: 0;
}

.collapse--closed,
html[data-js] .collapse[data-collapse-start="closed"] {
  grid-template-rows: 0fr;
}

/* Hidden from the tab order and from screen readers only once it has finished
   closing; on the way open it is visible immediately. */
.collapse--closed .collapse__inner {
  visibility: hidden;
  transition: visibility 0s linear 0.4s;
}

@media (prefers-reduced-motion: reduce) {
  .collapse                        { transition: none; }
  .collapse--closed .collapse__inner { transition: none; }
}