/* ===== Design tokens (captured from bethelmacclesfield.org.uk) ===== */
:root {
  --color-dark: #1c1b19;
  --color-dark-2: #2e2d2a;
  --color-orange: #e8772e;
  --color-coral: #EF626C;
  --color-red: #e63a4a;
  --color-bg: #ffffff;
  --color-bg-alt: #f7f5f2;
  --color-text: #2e2d2a;
  --color-text-muted: #666b68;
  --color-border: #eeeeee;
  --color-card: #ffffff;
  --color-page-ground: #eaeaea;
  --font: "Epilogue", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --max-width: 1200px;
}

:root[data-theme="dark"] {
  --color-bg: #1c1b19;
  --color-bg-alt: #262521;
  --color-text: #ece9e4;
  --color-text-muted: #a8a39a;
  --color-border: #3a3833;
  --color-card: #262521;
  --color-page-ground: #0f0e0d;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--color-text);
  background: var(--color-page-ground);
  line-height: 1.6;
  transition: background-color 0.2s, color 0.2s;
}
.site-frame {
  max-width: 1320px;
  margin: 0 auto;
  background: var(--color-bg);
  box-shadow: 0 5px 20px rgba(0,0,0,0.15);
  overflow-x: hidden;
  position: relative;
  transition: background-color 0.2s;
}
/* height: auto matters here, not just max-width — a plain HTML height
   attribute (which eleventy-img adds, to avoid layout shift) otherwise
   gets used as a literal pixel height instead of scaling with the image,
   distorting anything whose width gets constrained without it. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }

h1, h2, h3, h4 { margin: 0 0 20px; line-height: 1.2; font-weight: 700; }

.btn {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: none;
}
.btn-primary { background: var(--color-coral); color: #fff; }
.btn-primary:hover { background: var(--color-red); }
.btn-donate {
  background: var(--color-orange); color: #fff;
  padding: 10px 20px; border-radius: 6px; font-weight: 600;
  font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase;
}
.btn-donate:hover { background: var(--color-red); }

.section-title {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 2px;
  text-align: center;
  position: relative;
  padding-bottom: 30px;
  margin-bottom: 40px;
}
.section-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 24'%3E%3Cline x1='0' y1='12' x2='60' y2='12' stroke='%23EF626C' stroke-width='1'/%3E%3Cline x1='100' y1='12' x2='160' y2='12' stroke='%23EF626C' stroke-width='1'/%3E%3Crect x='74' y='10' width='12' height='8' fill='%23EF626C'/%3E%3Cpolygon points='72,10 80,4 88,10' fill='%23EF626C'/%3E%3Cline x1='80' y1='4' x2='80' y2='0' stroke='%23EF626C' stroke-width='1.5'/%3E%3Cline x1='77' y1='1.5' x2='83' y2='1.5' stroke='%23EF626C' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

/* ===== Header ===== */
.top-bar { background: var(--color-dark); color: #fff; font-size: 14px; }
.top-bar .wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 10px 24px;
  flex-wrap: wrap;
}
.top-bar-item { color: #fff; opacity: 0.9; }
.top-bar-utilities { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.top-bar .social-icons { display: flex; gap: 10px; }
.top-bar .social-icons a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50%; color: #fff;
}
.top-bar .social-icons a:hover { background: rgba(255,255,255,0.15); }

.text-size-control { display: flex; gap: 4px; border-left: 1px solid rgba(255,255,255,0.25); padding-left: 18px; }
.text-size-control button {
  background: transparent; border: 1px solid rgba(255,255,255,0.3); color: #fff;
  border-radius: 4px; width: 28px; height: 26px; font-size: 12px; font-weight: 700;
  cursor: pointer; font-family: var(--font); line-height: 1;
}
.text-size-control button:hover { background: rgba(255,255,255,0.15); }

.theme-toggle {
  background: transparent; border: 1px solid rgba(255,255,255,0.3); color: #fff;
  border-radius: 50%; width: 26px; height: 26px; display: inline-flex;
  align-items: center; justify-content: center; cursor: pointer;
  border-left: none; margin-left: 4px;
}
.theme-toggle:hover { background: rgba(255,255,255,0.15); }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

.main-nav { background: var(--color-bg); box-shadow: 0 2px 6px rgba(0,0,0,0.06); }
.main-nav .wrap { display: flex; align-items: center; gap: 32px; padding: 8px 24px; }
.logo img { height: 46px; width: auto; }
.site-nav { flex: 1; }
.site-nav > .menu { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.site-nav .menu-item { position: relative; }
.site-nav > .menu > .menu-item > a {
  font-weight: 600; font-size: 15px; padding: 8px 0; display: block;
}
.site-nav .menu-item.has-children > a::after { content: " +"; font-size: 12px; font-weight: 700; }
.site-nav .menu-item .menu { display: none; position: absolute; top: 100%; left: 0; background: var(--color-card);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12); min-width: 220px; padding: 8px 0; z-index: 20; }
.site-nav .menu-item:hover > .menu { display: block; }
.site-nav .menu-item .menu .menu-item { position: relative; }
.site-nav .menu-item .menu a { padding: 8px 20px; display: block; font-size: 14px; font-weight: 500; white-space: nowrap; }
.site-nav .menu-item .menu a:hover { background: var(--color-bg-alt); color: var(--color-orange); }

/* A dropdown nested inside another dropdown (e.g. Adults and Children,
   both within Church Life) must fly out sideways instead of dropping
   down, otherwise it covers its own sibling items in the parent list
   and they become unreachable. */
.site-nav > .menu > .menu-item > .menu .menu-item > .menu {
  top: 0;
  left: 100%;
}

/* ===== Hero ===== */
.hero {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: center;
  background: var(--color-dark) url("/images/hero-jesus.jpg") no-repeat center center / cover;
  color: #fff;
  overflow: hidden;
  /* Extra bottom padding beyond the top's 60px: the original reserves
     this space below the button so the image reads as a taller, more
     spacious frame around Jesus rather than a tightly-cropped strip. */
  padding: 60px 0 220px;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 70% 52%, rgba(255,230,150,0.3) 0%, rgba(255,220,120,0.16) 20%, rgba(0,0,0,0) 42%),
    linear-gradient(90deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.58) 38%, rgba(0,0,0,0.1) 66%, rgba(0,0,0,0.03) 100%),
    linear-gradient(rgba(0,0,0,0.03) 0%, rgba(0,0,0,0.18) 100%);
}
.hero .wrap { position: relative; z-index: 1; width: 100%; }

.hero-heading-block { text-align: center; margin-bottom: 50px; }
.hero-eyebrow { font-size: 15px; opacity: 0.9; margin: 0 0 4px; }
.hero-name {
  font-size: 40px; font-weight: 700; letter-spacing: 2px; color: #fff;
  position: relative; padding-bottom: 30px; margin: 0 0 30px;
}
.hero-name::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 24'%3E%3Cline x1='0' y1='12' x2='60' y2='12' stroke='%23EF626C' stroke-width='1'/%3E%3Cline x1='100' y1='12' x2='160' y2='12' stroke='%23EF626C' stroke-width='1'/%3E%3Crect x='74' y='10' width='12' height='8' fill='%23EF626C'/%3E%3Cpolygon points='72,10 80,4 88,10' fill='%23EF626C'/%3E%3Cline x1='80' y1='4' x2='80' y2='0' stroke='%23EF626C' stroke-width='1.5'/%3E%3Cline x1='77' y1='1.5' x2='83' y2='1.5' stroke='%23EF626C' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}
.hero-subtext { font-size: 16px; opacity: 0.9; max-width: 480px; margin: 0 auto; }

.hero-label {
  display: inline-block; color: #fff;
  text-transform: uppercase; letter-spacing: 2px; font-size: 14px; font-weight: 700;
  border-bottom: 2px solid var(--color-coral);
  padding-bottom: 8px; margin-bottom: 30px;
}
.hero h1 { font-size: 56px; font-weight: 800; letter-spacing: -1.5px; margin-bottom: 46px; max-width: 700px; }
.hero-btn { border-radius: 0; padding: 12px 26px; font-weight: 700; letter-spacing: 0.5px; }

.announcement-bar { background: var(--color-dark-2); color: #fff; text-align: center; padding: 16px; font-size: 14px; letter-spacing: 1px; }
.announcement-bar a { text-decoration: underline; font-weight: 700; margin-left: 8px; }

/* ===== Simple content pages ===== */
.page-header {
  background-position: center;
  background-size: cover;
  color: #fff;
  padding: 130px 0 70px;
  min-height: 340px;
  display: flex;
  align-items: center;
}
.page-header h1 { margin: 0 0 20px; font-size: 48px; }
.breadcrumbs { display: flex; gap: 8px; }
.breadcrumbs a, .breadcrumbs span {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 5px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.26);
}
.breadcrumbs a { background: var(--color-orange); }
.breadcrumbs a:hover { background: var(--color-red); }
.breadcrumbs span { background: var(--color-dark-2); }
.page-content { max-width: 760px; }
.page-content h2 { font-size: 26px; margin-top: 40px; }
.page-content h2:first-child { margin-top: 0; }
.page-content h3 { font-size: 20px; margin-top: 28px; }
.page-content p { margin: 0 0 18px; }
.page-content ul, .page-content ol { margin: 0 0 18px; padding-left: 22px; }
.page-content li { margin-bottom: 6px; }
.page-content a { color: var(--color-orange); text-decoration: underline; }
.page-content figure { margin: 24px 0; }
.page-content img { border-radius: 4px; }
.page-content a.btn { text-decoration: none; color: #fff; }
.page-content a.media-icon { color: #fff; text-decoration: none; }
.page-content h2 a, .page-content h3 a { color: inherit; text-decoration: none; }
.page-content a.team-member { color: inherit; text-decoration: none; }
.page-content a.team-member h4 { color: var(--color-text); }
.page-content a.team-member:hover h4 { color: var(--color-orange); }

/* ===== Content sections ===== */
section { padding: 80px 0; }
.section-alt { background: var(--color-bg-alt); }

.welcome-block {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
  background: var(--color-bg-alt); padding: 48px; border-radius: 4px;
}
.welcome-block img { border-radius: 4px; }
.welcome-block p { color: var(--color-text-muted); }

.progress-block { margin: 24px 0; }
.progress-bar { background: var(--color-bg-alt); border-radius: 8px; height: 20px; overflow: hidden; margin-bottom: 10px; }
.progress-fill { background: var(--color-orange); height: 100%; border-radius: 8px; transition: width 0.3s; }

.restoration-updates { display: flex; flex-direction: column; gap: 48px; margin: 40px 0; }
.restoration-update { padding-bottom: 40px; border-bottom: 1px solid var(--color-border); }
.restoration-update:last-child { border-bottom: none; padding-bottom: 0; }
.restoration-update h3 { margin-bottom: 4px; }
.restoration-update .update-date { color: var(--color-text-muted); font-size: 13px; margin-bottom: 12px; }
.before-after { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.before-after figure { margin: 0; }
.before-after img { border-radius: 4px; aspect-ratio: 4/3; object-fit: cover; width: 100%; height: auto; }
.before-after figcaption {
  text-align: center; font-size: 12px; color: var(--color-text-muted);
  margin-top: 6px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600;
}

.visit-card {
  background: var(--color-card); border: 1px solid var(--color-border); border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  padding: 40px; max-width: 720px; margin: 0 auto;
}
.visit-card p { margin: 0 0 12px; }

.testimonials { display: grid; gap: 28px; max-width: 800px; margin: 0 auto; }
.testimonial { display: grid; grid-template-columns: 80px 1fr; gap: 20px; align-items: start; }
.testimonial img { width: 80px; height: 80px; border-radius: 8px; object-fit: cover; border: 2px solid var(--color-orange); padding: 3px; }
.testimonial p { color: var(--color-text-muted); margin: 0 0 8px; }
.testimonial strong { display: block; }

/* ===== Reusable content components ===== */

/* FAQ accordion (native details/summary, no JS needed) */
.accordion { max-width: 760px; margin: 0 auto; }
.accordion details {
  background: var(--color-coral);
  color: #fff;
  border-radius: 4px;
  margin-bottom: 12px;
  overflow: hidden;
}
.accordion summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 24px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; font-size: 20px; }
.accordion details[open] summary::after { content: "\2212"; }
.accordion details[open] summary { background: rgba(0,0,0,0.1); }
.accordion .accordion-body {
  background: var(--color-card);
  color: var(--color-text);
  padding: 16px 24px;
}
.accordion .accordion-body p:last-child { margin-bottom: 0; }

/* Team grid */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  max-width: 900px;
  margin: 0 auto;
}
.team-member { text-align: center; }
.team-member img { border-radius: 8px; aspect-ratio: 5/6; object-fit: cover; width: 100%; height: auto; margin-bottom: 12px; }
.team-member h4 { margin: 0; font-size: 17px; }
.team-member span { color: var(--color-text-muted); font-size: 14px; }

/* Date-badge card grid (News, Events) — photo card with a floating
   two-tier date tag overlapping the bottom-left corner of the image. */
.date-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 32px;
  margin-top: 40px;
}
.date-card {
  background: var(--color-card);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.date-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,0.12); }
/* The wrapper is the positioning context for the badge, and is NOT
   clipped — only the photo link inside it is, so the badge (which
   deliberately overflows below the photo) never gets cut off. */
.date-card-photo-wrap { position: relative; }
.date-card-photo { display: block; border-radius: 10px 10px 0 0; overflow: hidden; }
.date-card-photo img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; transition: transform 0.3s ease; }
.date-card:hover .date-card-photo img { transform: scale(1.04); }
.date-card-photo-fallback {
  width: 100%; aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark-2) 100%);
}
.date-card-badge {
  position: absolute; left: 20px; bottom: -18px; z-index: 2;
  border-radius: 6px; overflow: hidden;
  box-shadow: 0 8px 18px rgba(0,0,0,0.18);
  text-align: center; min-width: 58px;
}
.date-card-badge .month-day {
  display: block; background: #fbdfe1; color: var(--color-coral);
  font-weight: 700; font-size: 13px; padding: 5px 10px;
}
.date-card-badge .year {
  display: block; background: var(--color-coral); color: #fff;
  font-weight: 700; font-size: 13px; padding: 5px 10px;
}
.date-card-body { padding: 34px 22px 22px; }
.date-card-body h3 { font-size: 18px; margin-bottom: 12px; line-height: 1.35; }
.date-card-body h3 a { color: var(--color-text); }
.date-card-body h3 a:hover { color: var(--color-orange); }
.date-card-body .read-more { color: var(--color-coral); font-weight: 600; font-size: 14px; text-decoration: none; }
.date-card-body .read-more:hover { color: var(--color-red); }
.date-card-summary { color: var(--color-text-muted); font-size: 14px; line-height: 1.6; margin-bottom: 14px; }

/* Video/audio/PDF icon row, shown on Sermon cards */
.media-icons { display: flex; gap: 10px; margin-bottom: 16px; }
.media-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--color-orange); color: #fff;
}
.media-icon:hover { background: var(--color-red); }

/* Hub / link cards (Church Life, Resources, What's On) */
.hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.hub-card {
  background: var(--color-bg-alt);
  border-radius: 8px;
  padding: 28px;
}
.hub-card h3 { font-size: 20px; margin-bottom: 12px; }
.hub-card p { color: var(--color-text-muted); margin-bottom: 16px; }

/* Responsive iframe embeds (Google Calendar / Maps) */
.embed-wrap { position: relative; width: 100%; padding-bottom: 66%; border-radius: 4px; overflow: hidden; }
.embed-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Contact form */
.contact-form { max-width: 600px; }
.contact-form .hp-field {
  position: absolute; left: -9999px; top: -9999px;
  height: 0; overflow: hidden;
}
.contact-form label { display: block; font-weight: 600; margin-bottom: 6px; }
.contact-form .field { margin-bottom: 20px; }
.contact-form input, .contact-form textarea, .contact-form select {
  width: 100%; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: 4px;
  font-family: var(--font); font-size: 15px; background: var(--color-card); color: var(--color-text);
}
.contact-form textarea { min-height: 140px; resize: vertical; }
.contact-form button { border: 0; cursor: pointer; font-family: var(--font); }

.contact-table { width: 100%; border-collapse: collapse; margin-bottom: 0; }
.contact-table td { padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.contact-table td:first-child { color: var(--color-text-muted); padding-right: 16px; }

.video-embed video { width: 100%; border-radius: 4px; }
.media-links { display: flex; gap: 12px; flex-wrap: wrap; }
.media-links .btn { text-decoration: none; }

/* ===== Footer ===== */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--color-red);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  z-index: 90;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--color-orange); }

.wave-divider {
  height: 60px;
  background: var(--color-dark);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 30 C 200 60 400 0 600 30 C 800 60 1000 0 1200 30 L1200 60 L0 60 Z'/%3E%3C/svg%3E") center/cover;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 30 C 200 60 400 0 600 30 C 800 60 1000 0 1200 30 L1200 60 L0 60 Z'/%3E%3C/svg%3E") center/cover;
}
.site-footer { background: var(--color-dark); color: #fff; padding: 56px 0 24px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer-col h3 { color: var(--color-orange); font-size: 16px; margin-bottom: 12px; }
.footer-col p, .footer-col a { color: rgba(255,255,255,0.8); }
.footer-logo { height: 60px; margin-bottom: 16px; background: #fff; border-radius: 6px; padding: 6px 10px; }
.footer-col .social-icons { display: flex; gap: 12px; }
.footer-col .social-icons a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border: 1px solid rgba(255,255,255,0.3); border-radius: 50%; color: #fff;
}
.footer-col .social-icons a:hover { background: rgba(255,255,255,0.15); }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding-top: 20px; font-size: 13px; color: rgba(255,255,255,0.6); }
.footer-links a { text-decoration: underline; }

/* Hamburger icon (hidden on desktop, shown at the mobile breakpoint) */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.nav-toggle span { display: block; height: 2px; background: var(--color-text); border-radius: 1px; }
.nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .hub-grid { grid-template-columns: 1fr; }
  .date-card-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 780px) {
  html { overflow-x: hidden; }

  /* Top bar: drop the address/email (repeated in the footer) and
     center what's left so it never has to fight for width. */
  .hide-mobile { display: none; }
  .top-bar .wrap { justify-content: center; gap: 8px 14px; }
  .top-bar-utilities { margin-left: 0; flex-wrap: wrap; justify-content: center; row-gap: 8px; }
  .text-size-control { border-left: none; padding-left: 0; }

  /* Header: logo + hamburger on one row, donations button drops to
     its own full-width row so nothing has to squeeze horizontally */
  .main-nav .wrap { flex-wrap: wrap; gap: 12px; }
  .logo { order: 1; }
  .nav-toggle { display: flex; order: 2; margin-left: auto; }
  .btn-donate { order: 3; width: 100%; text-align: center; }
  .site-nav { display: none; width: 100%; order: 4; flex: none; }
  .site-nav.is-open { display: block; }
  .site-nav > .menu { flex-direction: column; gap: 0; }
  .site-nav > .menu > .menu-item { border-top: 1px solid var(--color-border); }
  .site-nav > .menu > .menu-item > a { padding: 14px 4px; }

  /* Dropdowns become tap-to-expand inline sections, not hover flyouts */
  .site-nav .menu-item .menu {
    display: none;
    position: static;
    box-shadow: none;
    padding: 0 0 8px 16px;
    min-width: 0;
  }
  .site-nav .menu-item.mobile-open > .menu { display: block; }
  .site-nav .menu-item .menu a { padding: 10px 4px; white-space: normal; }
  .site-nav > .menu > .menu-item > .menu .menu-item > .menu { top: auto; left: auto; }

  .welcome-block { grid-template-columns: 1fr; }
  .before-after { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; text-align: center; }
  .footer-col .social-icons { justify-content: center; }
  .hero { background-position: center; min-height: auto; padding: 40px 0; }
  .hero h1 { font-size: 30px; }
  .hero h2 { font-size: 22px !important; }
  .team-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .hub-grid { grid-template-columns: 1fr; }
  .date-card-grid { grid-template-columns: 1fr; }
  .section-title { font-size: 26px; }
  .testimonial { grid-template-columns: 60px 1fr; }
  .page-header h1 { font-size: 32px; }

  /* Post-list thumbnails and the team bio layout are set inline
     (200px/180px + 1fr grids) — force them to stack on narrow screens. */
  article[style*="grid-template-columns"],
  div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}