/* ------------------- */
/* Custom Properties   */
/* ------------------- */

:root {
  --clr-background: #fffdf5;
  --clr-primary: #4a9082; /* Muted teal */
  --clr-accent: #f08080;  /* Muted coral */
  --clr-text: #2b2b2b;    /* Charcoal */
  --clr-text-light: #555;
  --clr-white: #ffffff;
  --clr-light-gray: #f7f7f7;

  --font-heading: "Poppins", sans-serif;
  --font-body: "Inter", sans-serif;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --fs-h1: 2.5rem;
  --fs-h2: 2rem;
  --fs-h3: 1.25rem;
  --fs-body: 1rem;

  --border-radius: 12px;
  --shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  --transition: all 0.25s ease-in-out;
}

/* ------------------- */
/* Reset & Base Styles */
/* ------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--clr-text);
  background-color: var(--clr-background);
  max-width: 100%;
  overflow-x: hidden;
}


h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--clr-text);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

a {
  color: var(--clr-primary);
  text-decoration: none;
  transition: var(--transition);
}

a:hover,
a:focus-visible {
  color: var(--clr-accent);
}

ul { list-style: none; }

img {
  max-width: 100%;
  display: block;
}

/* ------------------- */
/* Utility Classes     */
/* ------------------- */

.container {
  width: 90%;
  max-width: 1100px;
  margin-inline: auto;
}

.section-padding {
  padding-block: 4rem;
}

.section-title {
  text-align: center;
  margin-bottom: 1.75rem;
}

.section-intro {
  max-width: 70ch;
  margin-inline: auto;
  margin-bottom: 2rem;
  color: var(--clr-text-light);
}

.text-center { text-align: center; }

.bg-light { background-color: var(--clr-light-gray); }

.btn {
  display: inline-block;
  padding: 0.8em 1.4em;
  border-radius: 999px;
  font-weight: var(--fw-medium);
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  border: 2px solid transparent;
}

.btn-primary {
  background-color: var(--clr-primary);
  color: var(--clr-white);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  filter: brightness(0.95);
  color: var(--clr-white);
}

.btn-secondary {
  background-color: transparent;
  color: var(--clr-primary);
  border-color: rgba(74, 144, 130, 0.35);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  background-color: rgba(74, 144, 130, 0.12);
  color: var(--clr-primary);
}

/* Accessibility: Skip Link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--clr-primary);
  color: white;
  padding: 1rem;
  z-index: 10000;
  transition: top 0.2s ease-in-out;
}

.skip-link:focus { top: 0; }

/* Accessibility: Focus States */
a:focus-visible,
button:focus-visible,
.btn:focus-visible {
  outline: 3px solid rgba(240, 128, 128, 0.8);
  outline-offset: 3px;
}

/* Anchor helper */
.anchor-top {
  position: absolute;
  top: 0;
  left: 0;
  height: 1px;
  width: 1px;
}

/* ------------------- */
/* Header & Navigation */
/* ------------------- */

.site-header {
  position: sticky;
  top: 0;
  width: 100%;
  padding-block: 1rem;
  background-color: rgba(255, 253, 245, 0.9);
  backdrop-filter: blur(10px);
  z-index: 1000;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.site-logo {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: var(--fw-bold);
  color: var(--clr-text);
}

.site-logo:hover {
  color: var(--clr-primary);
}

/* MOBILE NAV – default (mobile-first) */
.main-nav {
  position: fixed;
  inset: 0;                  /* full viewport */
  max-width: 100vw;          /* never wider than screen */
  background: var(--clr-background);
  padding: min(18vh, 9rem) 2rem 3rem;
  transform: translateX(100%);   /* hidden by default */
  transition: transform 320ms ease-out;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 1500;
}

.main-nav[data-visible="true"] {
  transform: translateX(0%);
}

.nav-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  font-size: 1.05rem;
}

.nav-link {
  font-weight: var(--fw-medium);
  color: var(--clr-text);
}

.nav-link:hover {
  color: var(--clr-primary);
}

.nav-link.active {
  color: var(--clr-primary);
  font-weight: var(--fw-semibold);
  border-bottom: 2px solid rgba(240, 128, 128, 0.85);
  padding-bottom: 0.25rem;
  width: fit-content;
}

.nav-donate {
  margin-top: 0.75rem;
}

.nav-toggle {
  display: block;
  background: transparent;
  border: 0;
  width: 2.4rem;
  height: 2.4rem;
  position: relative;
  z-index: 2000;
}

.hamburger {
  display: block;
  position: relative;
  width: 2rem;
  height: 3px;
  background: var(--clr-text);
  border-radius: 1em;
  transition: transform 250ms ease-in-out;
}

.hamburger::before,
.hamburger::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--clr-text);
  border-radius: 1em;
  transition: transform 250ms ease-in-out, opacity 200ms ease-in-out;
}

.hamburger::before { top: -8px; }
.hamburger::after  { top:  8px; }

.nav-toggle[aria-expanded="true"] .hamburger {
  transform: rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .hamburger::before {
  transform: rotate(90deg) translateX(-8px);
}
.nav-toggle[aria-expanded="true"] .hamburger::after {
  opacity: 0;
}

/* DESKTOP NAV – overrides */
@media (min-width: 768px) {
  .nav-toggle {
    display: none;
  }

  .main-nav {
    position: static;     /* back inside header */
    inset: auto;
    transform: none;      /* always visible */
    background: none;
    padding: 0;
    max-width: none;
    width: auto;          /* don’t stretch across full header */
    overflow: visible;
    margin-left: auto;    /* pushes nav to the right side */
  }

  .nav-list {
    flex-direction: row;
    align-items: center;
    gap: 1.4rem;
    font-size: 0.98rem;
  }

  .nav-donate {
    margin-top: 0;
    margin-left: 0.25rem;
  }
}


/* ------------------- */
/* Hero Section        */
/* ------------------- */

.hero {
  padding-block: 3.5rem 2rem;
}

.hero-grid {
  display: grid;
  gap: 2rem;
  align-items: center;
}

.hero-content { text-align: center; }

.hero-title { margin-bottom: 1rem; }

.hero-subtitle {
  font-size: 1.08rem;
  color: var(--clr-text-light);
  max-width: 56ch;
  margin-inline: auto;
  margin-bottom: 2rem;
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}


.hero-image-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--border-radius);
  background: linear-gradient(
    135deg,
    rgba(74, 144, 130, 0.18),
    rgba(240, 128, 128, 0.12)
  );
  border: 1px solid rgba(0,0,0,0.06);
  display: grid;
  place-items: center;
}

.hero-image-text {
  color: var(--clr-text-light);
  font-style: italic;
  padding: 1rem;
  text-align: center;
}

.hero-media {
  width: 100%;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

/* Make the hero image fill the box nicely */
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Who We Care For — Video Wrapper */
.who-video-wrapper {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #000;
}

.who-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}

/* Desktop layout: text left, video right */
@media (min-width: 768px) {
  .who-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: center;
  }
}


/* Give it a nice fixed ratio on larger screens */
@media (min-width: 768px) {
  .hero-media {
    aspect-ratio: 4 / 3;
  }
}


/* ------------------- */
/* Card Grid           */
/* ------------------- */

.card-grid-3,
.card-grid-4 {
  display: grid;
  gap: 1.25rem;
}

.card {
  background: var(--clr-white);
  padding: 1.75rem;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
}

.card h3 {
  margin-bottom: 0.7rem;
  color: var(--clr-primary);
}

/* ------------------- */
/* Specific Sections   */
/* ------------------- */

.care-list {
  list-style: "✓  ";
  padding-left: 1.5rem;
  display: inline-block;
  text-align: left;
  margin-bottom: 1.25rem;
  color: var(--clr-text-light);
}

.care-list li {
  padding-left: 0.4rem;
  margin-bottom: 0.5rem;
}

.gentle-text {
  font-style: italic;
  color: var(--clr-text-light);
}

/* Trust Strip */
.trust-strip {
  background-color: var(--clr-primary);
  color: var(--clr-white);
  padding-block: 1.35rem;
  font-size: 0.95rem;
}

.trust-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.8rem;
}

/* Final CTA */
.final-cta-actions {
  margin-top: 1.75rem;
  display: flex;
  justify-content: flex-start;
  gap: 0.9rem;
  flex-wrap: wrap;
}

/* Center CTA buttons for the Our Story page (mobile + desktop) */
.final-cta-actions.our-story-cta {
  justify-content: center;
  margin-top: 2.5rem;
}

/* ------------------- */
/* Footer              */
/* ------------------- */

.site-footer {
  background-color: #2d2d2d;
  color: #d0d0d0;
  padding-block: 3rem;
  font-size: 0.95rem;
}

.footer-container {
  display: grid;
  gap: 2rem;
  text-align: center;
}

.site-footer h4 {
  font-family: var(--font-heading);
  color: var(--clr-white);
  margin-bottom: 0.9rem;
  font-size: 1.1rem;
}

.site-footer a { color: #d0d0d0; }

.site-footer a:hover,
.site-footer a:focus-visible { color: var(--clr-accent); }

.footer-social a {
  display: inline-block;
  transition: var(--transition);
}

.footer-social a:hover,
.footer-social a:focus-visible { transform: scale(1.12); }

.footer-copyright {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 1.5rem;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: #bdbdbd;
}

/* Who We Care For – text + video layout */
.who-grid {
  display: grid;
  gap: 2rem;
  align-items: center;
}

/* Text side */
.who-text {
  text-align: left;
}

.who-title {
  text-align: left;
  margin-bottom: 0.75rem;
}

.who-intro {
  margin-inline: 0;
}

.who-note {
  margin-top: 1.5rem;
}

/* Video side */
.who-video {
  width: 100%;
}

.placeholder-video {
  aspect-ratio: 16 / 9;
}


/* ------------------- */
/* Media Queries       */
/* ------------------- */

@media (min-width: 768px) {
  :root {
    --fs-h1: 3rem;
    --fs-h2: 2.25rem;
    .who-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    }
  }

  .section-padding { padding-block: 5rem; }

  .nav-toggle { display: none; }

  .main-nav {
    position: static;
    transform: none;
    background: none;
    padding: 0;
    inset: auto;
  }

  .nav-list {
    flex-direction: row;
    align-items: center;
    gap: 1.4rem;
    font-size: 0.98rem;
  }

  .nav-donate { margin-top: 0; margin-left: 0.25rem; }

  .hero-grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 3rem;
  }

  .hero-content { text-align: left; }

  .hero-subtitle { margin-inline: 0; }

  .hero-actions { justify-content: flex-start; }

  .card-grid-3 { grid-template-columns: repeat(3, 1fr); }

  .card-grid-4 { grid-template-columns: repeat(2, 1fr); }

  .trust-container {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
    gap: 1rem;
  }

  .footer-container {
    grid-template-columns: repeat(3, 1fr);
    text-align: left;
    gap: 3rem;
  }

  .footer-copyright {
    grid-column: 1 / -1;
    text-align: center;
  }
}

@media (min-width: 1024px) {
  :root { --fs-h1: 3.4rem; }

  .card-grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* --- Emotional anchors / placeholders (Home) --- */

.hero-softline{
  margin-top: 0.75rem;
  color: var(--clr-text-light);
  font-style: italic;
}

/* Reusable placeholder box */
.placeholder-box{
  width: 100%;
  border-radius: var(--border-radius);
  background: linear-gradient(
    135deg,
    rgba(74, 144, 130, 0.18),
    rgba(240, 128, 128, 0.12)
  );
  border: 1px solid rgba(0,0,0,0.06);
  display: grid;
  place-items: center;
  text-align: center;
  box-shadow: var(--shadow);
}

.placeholder-text{
  color: var(--clr-text-light);
  font-style: italic;
  padding: 1rem;
}

/* Hero placeholder size */
.placeholder-hero{
  aspect-ratio: 4 / 3;
}

/* Story placeholders */
.placeholder-story{
  aspect-ratio: 16 / 10;
  margin-bottom: 1rem;
}

/* Updates placeholders */
.updates-grid{
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
}

.placeholder-update{
  aspect-ratio: 4 / 3;
}

@media (max-width: 768px){
  .updates-grid{
    grid-template-columns: 1fr;
  }
  .placeholder-update{
    aspect-ratio: 16 / 9;
  }
}

/* Micro note under help cards */
.micro-note{
  margin-top: 0.75rem;
  color: var(--clr-text-light);
  font-size: 0.95rem;
  font-style: italic;
}

.pull-quote{
  border-left: 6px solid rgba(74, 144, 130, 0.55);
}

/* Facebook embed - responsive */
.fb-embed-wrap{
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.06);
  background: var(--clr-light-gray);
}

.fb-embed-wrap iframe{
  width: 100%;
  height: 700px;
  display: block;
}

/* Our Story – alternating text + image blocks */
.story-grid {
  display: grid;
  gap: 2rem;
  align-items: flex-start;
  margin-top: 2.5rem;
}

.story-text p + p {
  margin-top: 0.75rem;
}

.story-image .hero-image-placeholder {
  height: 100%;
}

/* Desktop layout */
@media (min-width: 768px) {
  .story-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }

  .story-grid.story-grid--reverse {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  }

  .story-grid.story-grid--reverse .story-text {
    order: 2;
  }

  .story-grid.story-grid--reverse .story-image {
    order: 1;
  }
}

/* Our Team & Trustees */
.team-section .section-title {
  text-align: center;
}

.team-section .section-intro {
  text-align: center;
  margin-bottom: 1.25rem;
  max-width: 80ch;
}

/* Default (mobile): full-width cards like the bottom grid */
.team-grid-top {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: stretch;
  margin-top: 2rem;
}


.team-grid-bottom {
  display: grid;
  gap: 1.5rem;
  margin-top: 2.5rem;
}

/* Default: single column on small screens */
.team-grid-bottom {
  grid-template-columns: 1fr;
}

/* Larger screens: 3 columns for the 6 trustees */
@media (min-width: 768px) {
  .team-grid-top {
    display: flex;
    justify-content: center;
  }

  .team-grid-bottom {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.team-card {
  background: var(--clr-white);
  padding: 1.5rem;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  text-align: center;
  width: 100%;
  max-width: 340px;
  margin-inline: auto;
}


.team-photo {
  width: 100%;
  aspect-ratio: 7 / 9; /* works well with 1050x1350 images */
  border-radius: var(--border-radius);
  overflow: hidden;
  background: var(--clr-light-gray);
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.team-name {
  margin-top: 1rem;
  font-size: 1.05rem;
  font-weight: var(--fw-semibold);
  color: var(--clr-text);
}

.team-role {
  margin-top: 0.25rem;
  font-size: 0.9rem;
  color: var(--clr-text-light);
}

/* Team grid uniform card image sizing */
.team-grid .team-card img {
    width: 100%;
    aspect-ratio: 7 / 9; /* fits your 1050x1350 well */
    object-fit: cover;
    border-radius: 12px;
}

/* Center intro paragraphs for Moments from the Home + Latest Updates */
.moments-section .section-intro,
.updates-section .section-intro {
  text-align: center;
  margin-inline: auto;
}

/* Center CTA buttons in Support the Home section */
.support-section .final-cta-actions {
  justify-content: center !important;
}

/* Images inside story hero placeholders */
.hero-image-placeholder img,
.story-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

/* Standard height for story images */
.story-image .hero-image-placeholder {
  height: 420px; /* adjust if you want */
  border-radius: 16px; /* keep your rounded corners */
  overflow: hidden; /* required to crop cleanly */
}

/* Image behavior */
.story-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* fills box, no distortion */
  object-position: top;     /* crop bottom instead of center */
  display: block;
}

.story-grid {
  align-items: stretch;     /* Make both columns follow the same row height */
}

.story-image {
  height: 100%;             /* Match the height of the text column */
  display: flex;
}

.story-photo-frame {
  width: 100%;
  height: 100%;             /* Fill the available height instead of creating its own */
  overflow: hidden;
  border-radius: 16px;
}

.story-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* Crop to fit */
  object-position: top;     /* Keep the top visible */
}

/* Images inside placeholder boxes (for Moments section, hero, etc.) */
.placeholder-box img,
.moment-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

/* Uniform facility images */
.card-grid-4 .card img {
  width: 100%;
  height: 200px;          /* or 220px if you want it taller */
  object-fit: cover;
  border-radius: var(--border-radius);
}

/* WHAT WE DO – Facilities: 3 on top, 2 centered below (desktop) */
@media (min-width: 768px){
  .page-what-we-do .card-grid-4{
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  /* each card takes 2 of the 6 columns => 3 cards per row */
  .page-what-we-do .card-grid-4 > .card{
    grid-column: span 2;
    max-width: none; /* remove the 420px thing here */
  }

  /* move the last two cards into the middle (symmetric empty cols 1 & 6) */
  .page-what-we-do .card-grid-4 > .card:nth-child(4){
    grid-column: 2 / span 2; /* columns 2-3 */
  }
  .page-what-we-do .card-grid-4 > .card:nth-child(5){
    grid-column: 4 / span 2; /* columns 4-5 */
  }
}

.page-what-we-do .card img{
    margin-bottom: 0.75rem;
}

.page-what-we-do .card h3{
    margin-top: 0.25rem;
}

@media (min-width: 768px){
    .page-what-we-do .card-grid-4 > .card{
        max-width: 420px;
    }
}

/* Center all section titles and intros sitewide */
.section-title,
.section-intro {
  text-align: center !important;
  margin-left: auto;
  margin-right: auto;
}

/* Ensure intro text is centered under titles */
.section-intro {
  max-width: 70ch;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
}

.partner-section .section-intro {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Make only the hero intro left-aligned */
.hero-intro {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* --------------------------------------------- */
/* PAGE-SCOPED FIXES — HOME PAGE ONLY            */
/* --------------------------------------------- */
.page-home .hero-title {
  text-align: left;
  margin-left: 0;
}

/* Section titles */
.page-home #values .section-title,
.page-home #story .section-title,
.page-home #help .section-title,
.page-home .moments-section .section-title {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Who We Care For — left aligned */
.page-home .who-title,
.page-home .who-intro {
  text-align: left;
  margin-left: 0;
}

/* Ensure Moments + Help intros stay centered */
.page-home .moments-section .section-intro,
.page-home #help .section-intro,
.page-home #values .section-intro,
.page-home #story .section-intro {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Ensure the Hero subtitle stays left aligned */
.page-home .hero-subtitle,
.page-home .hero-softline {
  text-align: left;
  margin-left: 0;
}

/* Fix center alignment in Legacy of Care CTA block */
.page-home #story .text-center,
.page-home #story .gentle-text {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* FORCE left alignment for Who We Care For ONLY on Home page */
.page-home .who-title {
  text-align: left !important;
}

.page-home .who-intro {
  text-align: left !important;
}

.page-home .who-text p,
.page-home .who-text ul,
.page-home .who-text li,
.page-home .who-note {
  text-align: left !important;
  margin-left: 0 !important;
}

/* ============================================
   OUR STORY PAGE — TITLE + TEXT ALIGNMENT FIXES
   ============================================ */
.page-our-story .hero-title {
  text-align: left !important;
}

.page-our-story .section-title {
  text-align: left !important;
}

.page-our-story .section-intro {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Story content paragraphs + list */
.page-our-story .story-text p,
.page-our-story .story-text ul,
.page-our-story .story-text li {
  text-align: left !important;
}

/* STORY GRID titles */
.page-our-story .story-text .section-title {
  text-align: left !important;
}

/* TEAM & TRUSTEES — stays centered */
.page-our-story .team-section .section-title,
.page-our-story .team-section .section-intro,
.page-our-story .team-section .team-grid-top,
.page-our-story .team-section .team-grid-bottom {
  text-align: center !important;
}

/* TEAM & TRUSTEES MUST BE CENTERED */
.page-our-story .team-section,
.page-our-story .team-section .container {
  text-align: center !important;
}

.page-our-story .team-section .section-title,
.page-our-story .team-section .section-intro,
.page-our-story .team-section .team-grid-top,
.page-our-story .team-section .team-grid-bottom,
.page-our-story .team-section .team-card {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* WHAT WE DO — force this specific title + intro left */
.page-what-we-do .story-grid .section-title,
.page-what-we-do .story-grid p,
.page-what-we-do .story-grid ul,
.page-what-we-do .story-grid .micro-note {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* HOW YOU CAN HELP — center ONLY the top hero block */
.page-help .hero-title,
.page-help .section-intro,
.page-help .gentle-text {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* How You Can Help – center ONLY the top hero block */
.help-hero .hero-title,
.help-hero .section-intro,
.help-hero .gentle-text,
.help-hero-intro,
.help-hero-note {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Volunteer Page — Center Only the Hero Section */
.volunteer-hero .hero-title,
.volunteer-hero .section-intro,
.volunteer-hero .gentle-text {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Contact Page — Center Only the Hero Section */
.contact-hero .hero-title,
.contact-hero .section-intro,
.contact-hero .gentle-text {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* Donate Page — Center Only the Hero Section */
.donate-hero .hero-title,
.donate-hero .section-intro,
.donate-hero .gentle-text {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* =========================================================
   GLOBAL BUTTON THEME — Green Buttons, White Text
   ========================================================= */

/* Primary Button */
.btn-primary,
.nav-donate,
button.btn-primary {
  background-color: #4A7C59 !important;
  color: #ffffff !important;
  border: 2px solid #4A7C59 !important;
  transition: 0.25s ease-in-out;
}

.btn-primary:hover,
.nav-donate:hover,
button.btn-primary:hover {
  background-color: #ffffff !important;
  color: #4A7C59 !important;
  border-color: #4A7C59 !important;
}

/* Secondary Button */
.btn-secondary,
button.btn-secondary {
  background-color: #4A7C59 !important;
  color: #ffffff !important;
  border: 2px solid #4A7C59 !important;
  transition: 0.25s ease-in-out;
}

.btn-secondary:hover,
button.btn-secondary:hover {
  background-color: #ffffff !important;
  color: #4A7C59 !important;
  border-color: #4A7C59 !important;
}

/* Fix for any anchor tags styled as buttons */
a.btn-primary:hover,
a.btn-secondary:hover {
  text-decoration: none !important;
}

/* =========================================
   MOBILE NAV OVERLAY FIX
   ========================================= */
@media (max-width: 767px) {
  /* Make the nav a full-screen panel */
  .main-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;                 /* full width */
    width: 100vw;
    height: 100vh;
    background-color: var(--clr-background);
    padding: 5rem 2rem 2rem; /* space for header + links */
    z-index: 1500;
    transform: translateX(100%);          /* start off-screen */
    transition: transform 320ms ease-out; /* keep your slide animation */
  }

  /* When JS toggles it on */
  .main-nav[data-visible="true"] {
    transform: translateX(0);
  }

  /* Ensure the links stack nicely */
  .nav-list {
    flex-direction: column;
    gap: 1.5rem;
    font-size: 1.05rem;
  }

  /* Keep the hamburger / close button above the panel */
  .nav-toggle {
    z-index: 1600;
  }
}

//* =========================================
   Fix horizontal scroll on mobile
   ========================================= */

/* Never allow horizontal scrolling */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Tidy mobile nav overlay so it doesn't extend past the viewport */
@media (max-width: 767px) {
  .main-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;              /* full width, but no extra */
    bottom: 0;
    width: 100%;           /* avoid 100vw + transform weirdness */
    height: 100vh;
    background-color: var(--clr-background);
    padding: 5rem 2rem 2rem;
    z-index: 1500;
    transform: translateX(100%);          /* slide fully off-screen */
    transition: transform 320ms ease-out;
  }

  .main-nav[data-visible="true"] {
    transform: translateX(0);
  }

  .nav-toggle {
    z-index: 1600; /* always above the menu panel */
  }
}

/* Two-column card grid (auto-stacks on mobile) */
.card-grid-2 {
  display: grid;
  gap: 1.25rem;
}

/* At tablet/desktop, show two columns */
@media (min-width: 768px) {
  .card-grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Keep “Programmes & Activities” heading left in that section only */
.programmes-title {
  text-align: left;
}

/* Donate Page — After You Donate block */
.after-donate-block {
  text-align: left !important;
}

.after-donate-block .final-cta-actions {
  justify-content: flex-start !important;
}

.after-donate-block .btn {
  margin-right: 1rem;
}

/* Volunteer – image cards */
.card.story-card {
  display: flex;
  flex-direction: column;
}

/* Make all three photos uniform, cropped nicely */
.story-image-wrapper {
  width: 100%;
  aspect-ratio: 4 / 3;                /* tweak to 16 / 9 if you prefer */
  border-radius: var(--border-radius);
  overflow: hidden;
  margin-bottom: 1rem;                /* space between image and heading */
}

.story-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;                  /* crop, don’t squish */
  display: block;
}

/* Volunteer – force How It Works block to be left aligned */
.volunteer-how-card {
  text-align: left !important;
}

/* Make sure all text inside is left aligned */
.volunteer-how-card h3,
.volunteer-how-card p,
.volunteer-how-card li {
  text-align: left !important;
}

/* List spacing/indent inside that card */
.volunteer-how-list {
  margin-top: 1rem;
  padding-left: 1.5rem;
}

/* Keep ticks & text tidy */
.volunteer-how-list li {
  padding-left: 0.4rem;
  margin-bottom: 0.4rem;
}

/* Note line spacing */
.volunteer-how-note {
  margin-top: 1.25rem;
}

/* ============================= */
/* DONATION QR STYLING */
/* ============================= */

.donation-qr-wrapper {
  margin-top: 1.5rem;
  text-align: center;
}

.donation-qr {
  width: 100%;
  max-width: 360px;   
  height: auto;
  display: inline-block;
  padding: 14px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

/* QR Donation Accent Border */
.donation-qr {
  max-width: 370px;              /* half of original approx */
  width: 100%;
  display: block;
  margin: 0 auto;
  padding: 14px;
  background: var(--clr-white);
  border-radius: 16px;
  border: 3px solid var(--clr-primary);   /* green accent */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Optional subtle hover effect (desktop only) */
@media (hover: hover) {
  .donation-qr:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    transition: 0.25s ease;
  }
}

/* ------------------- */
/* LOGO STYLING        */
/* ------------------- */

/* Header logo */
.header-logo {
  height: 150px;      /* keep small because resolution not great */
  width: auto;
  display: block;
}

/* Ensure header alignment stays clean */
.site-logo {
  display: flex;
  align-items: center;
}

.site-header{
    height:90px;
    display: flex;
    align-items: center;
}

/* =========================
   CONTACT PAGE — button alignment fix
   ========================= */

/* Make each card a vertical flex column so we can push buttons down */
.page-contact .card-grid-3 > .card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Give the 3 cards a consistent minimum height (tweak if needed) */
.page-contact .card-grid-3 > .card {
  min-height: 340px;
}

/* Push ONLY the button-style links to the bottom of the card */
.page-contact .card-grid-3 > .card > .btn {
  margin-top: auto !important; /* overrides your inline margin-top */
  align-self: flex-start;      /* keeps button left aligned */
}

/* Optional: if you want both buttons to feel equally sized */
.page-contact .card-grid-3 > .card > .btn {
  min-width: 170px;
  text-align: center;
}

.page-volunteer .volunteer-how-card .volunteer-how-note,
.page-volunteer .volunteer-how-card .gentle-text{
    text-align: left !important;
    margin-left: 0;
    margin-right: 0;
}

/* What We Do — center the hero block itself (not just the text) */
.page-what-we-do .hero-title,
.page-what-we-do .gentle-text,
.page-what-we-do .hero-intro{
  text-align: center;
}

/* This is the key: center the paragraph BLOCK */
.page-what-we-do .hero-intro{
  text-align: center !important;
  max-width: 70ch;
  margin-inline: auto;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ================================
   PAGE: HOW YOU CAN HELP (Donate in Kind)
   Scoped to body.page-help
================================ */

.page-help .inkind-urgent,
.page-help .inkind-ongoing,
.page-help .inkind-corporate{
  margin-top: 1.25rem;
  padding: 1.25rem;
  border-radius: var(--border-radius);
  background: var(--clr-light-gray);
  border: 1px solid rgba(0,0,0,0.06);
}

/* Accent styles */
.page-help .inkind-urgent{
  border-left: 6px solid rgba(240, 128, 128, 0.85);
  background: rgba(240, 128, 128, 0.08);
}

.page-help .inkind-corporate{
  border-left: 6px solid rgba(74, 144, 130, 0.75);
  background: rgba(74, 144, 130, 0.08);
}

/* Titles */
.page-help .inkind-subtitle{
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  margin-bottom: 0.5rem;
  color: var(--clr-text);
}

/* Notes (force LEFT aligned properly) */
.page-help .inkind-note{
  text-align: left;
  margin: 0.35rem 0 1rem 0;
}

/* Two-column layout for ongoing needs */
.page-help .inkind-two-col{
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

/* Columns stack nicely */
.page-help .inkind-col-left,
.page-help .inkind-col-right{
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Desktop layout */
@media (min-width: 768px){
  .page-help .inkind-two-col{
    grid-template-columns: 1.15fr 0.85fr;
    align-items: start;
  }
}

/* Category cards */
.page-help .inkind-group{
  background: var(--clr-white);
  border-radius: var(--border-radius);
  padding: 1rem;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: var(--shadow);
}

.page-help .inkind-group h5{
  font-family: var(--font-heading);
  color: var(--clr-primary);
  margin-bottom: 0.5rem;
}

/* List styling */
.page-help .inkind-list{
  list-style: "•  ";
  padding-left: 1.2rem;
  color: var(--clr-text-light);
}

.page-help .inkind-list li{
  margin-bottom: 0.35rem;
}

/* Buttons */
.page-help .inkind-actions{
  justify-content: flex-start;
  margin-top: 1rem;
}

.page-help .gentle-text{
    text-align: left !important;
}


/* ==== OUR STORY mobile overflow fix (Growing With The Children + Education As A Promise) ==== */
@media (max-width: 768px) {
  /* Force the story blocks to stack on mobile */
  .story-grid,
  .story-grid--reverse {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.25rem;
  }

  /* Critical: allow grid/flex children to actually shrink (prevents overflow) */
  .story-text,
  .story-image {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Make sure headings + paragraphs don’t push outside */
  .story-text,
  .story-text * {
    max-width: 100% !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Images/videos inside story blocks must not overflow */
  .story-image img,
  .story-image video,
  .story-photo,
  .hero-image-placeholder img,
  .hero-image-placeholder video {
    width: 100% !important;
    height: auto !important;
    display: block;
  }
}

/* Safety net: if anything STILL creates sideways scroll */
html, body {
  overflow-x: hidden;
}

/* Fix weird "border frame" image scaling on mobile story sections */
@media (max-width: 768px) {
  .story-photo-frame,
  .hero-image-placeholder {
    padding: 0 !important;
    height: auto !important;
    aspect-ratio: auto !important;
    background: transparent !important;
  }

  .story-photo-frame img,
  .hero-image-placeholder img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    display: block;
    border-radius: var(--border-radius);
  }
}

.page-help .help-hero .gentle-text2{
    text-align: center!important;
    font-style: italic;
    color: var(--clr-text-light);
    opacity: 0.9;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* Home Updates Section */
.home-updates .update-video-wrapper{
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}

/* Portrait video styling */
.home-updates .update-video{
  width: 100%;
  max-width: 320px;   /* Keeps it elegant on desktop */
  aspect-ratio: 9 / 16;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  object-fit: cover;
}

.home-updates{
  background: var(--clr-light-gray);
  border-top: 1px solid rgba(0,0,0,0.06);
}

.home-updates .update-caption{
    text-align: center;
    margin-top: -0.5rem;
}