/* ==========================================================================
   Willow Grace Retreats — clean shared stylesheet
   Replaces per-page Elementor CSS. Every value below was measured directly
   from the original rendered page via getComputedStyle (no estimates).
   ========================================================================== */

@font-face {
  font-family: "Glancyr"; font-style: normal; font-weight: 400;
  src: url("../fonts/Glancyr-Regular.otf") format("OpenType");
}
@font-face {
  font-family: "Glancyr"; font-style: normal; font-weight: 600;
  src: url("../fonts/Glancyr-SemiBold.otf") format("OpenType");
}
@font-face {
  font-family: "Glancyr"; font-style: normal; font-weight: 700;
  src: url("../fonts/Glancyr-Bold.otf") format("OpenType");
}

/* Inter 400 — the only weight this site actually uses for body text.
   Without this, "Inter" never loads and every browser silently falls back
   to Arial, which renders visibly heavier at the same declared weight. */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --color-primary: #3d4031;
  --color-secondary: #9da27b;
  --color-accent: #a199cd;
  --color-cream: #f5f1e7;
  --color-text: #24261d;
  --color-white: #ffffff;

  --font-heading: "Glancyr", serif;
  --font-body: "Inter", Arial, sans-serif;

  --content-width: 1140px;
  --pad-x: 34px;
}

/* ---- Base ---- */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--color-cream);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.9rem;      /* 14.4px — verified body text */
  line-height: 1.4rem;    /* 22.4px */
  -webkit-font-smoothing: antialiased;   /* verified: present in original reset.css — */
  -moz-osx-font-smoothing: grayscale;    /* renders text visibly thinner on macOS without changing weight/width */
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--color-primary);
  margin: 0 0 20px;
}
h1 { font-size: 2.4rem; line-height: 2.9rem; }  /* 38.4/46.4 */
h2 { font-size: 2rem; line-height: 2.4rem; }     /* 32/38.4 */
p { margin: 0 0 0.9rem; }                        /* 14.4px inter-paragraph */

/* Shared eyebrow label (banner subtitle, newsletter label, footer heading).
   The 20px margin-bottom is a fixed, unconditional gap to whatever follows
   (usually a heading) so this spacing never needs a per-section override. */
.eyebrow {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.8rem;      /* 12.8px */
  line-height: 1.4rem;    /* 22.4px */
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin: 0 0 20px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--color-white); color: var(--color-primary);
  padding: 8px 16px; z-index: 1000;
}
.skip-link:focus { left: 24px; }

/* ---- Header ---- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--content-width);
  margin: 18px auto;
  padding: 21px var(--pad-x);
}
.site-logo img { height: 56px; width: auto; }

/* Sticky header overlay: a JS-cloned copy of .site-header (see nav.js), kept
   completely independent of the real in-flow header so it never causes any
   layout shift below it. Fixed, full-width translucent bar with the actual
   nav content still centered at --content-width; fades in/out on scroll
   rather than snapping, and never disturbs the original header/hero at all. */
.sticky-clone {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  background: rgba(245, 241, 231, 0.9);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.sticky-clone.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.sticky-clone .site-header { margin: 0 auto; padding: 10px var(--pad-x); }
.sticky-clone .site-logo img { height: 44px; }
.sticky-clone-dark { background: rgba(61, 64, 49, 0.9); box-shadow: none; }
.sticky-clone-dark .site-header .site-logo img { height: 42px; }

.header-right { display: flex; align-items: center; gap: 20px; }

.site-nav ul {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  display: inline-block;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 0.8rem;       /* 12.8px — verified Glancyr 400 */
  line-height: 1.4rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-text);
  padding: 13px 12.8px;    /* verified nav item padding */
}
.site-nav .has-submenu { position: relative; }
.site-nav .has-submenu > a::after {
  content: "";
  display: inline-block;
  margin-left: 6px;
  vertical-align: middle;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;   /* solid caret-down, matches original */
}
.site-nav .submenu {
  display: none;
  position: absolute;
  top: 100%; left: 0;
  background: #e2ddcf;      /* verified dropdown bg */
  border-radius: 5px;
  padding: 0;
  min-width: 210px;
  flex-direction: column;
  z-index: 20;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.site-nav .has-submenu:hover .submenu,
.site-nav .has-submenu:focus-within .submenu { display: flex; }
.site-nav .submenu li { width: 100%; }
.site-nav .submenu a { display: block; padding: 10px 20px; white-space: nowrap; }
.site-nav .submenu a:hover { background: rgba(157,162,123,0.27); }

.social-icon { display: flex; align-items: center; }
.social-icon img { height: 33px; width: 33px; }

.nav-toggle {
  display: none;
  background: none; border: none; cursor: pointer; padding: 6px;
  color: var(--color-primary);
}
.nav-toggle svg { width: 28px; height: 28px; }

/* ---- Banner ---- */
.banner {
  max-width: var(--content-width);
  margin: 48px auto 57px;   /* verified: 69px gap below header logo (margin collapses with header) */
  padding: 34px;
  border-radius: 40px;
  background-color: var(--color-primary);
  background-image: url("../images/Fern002.png");
  background-position: 100% 50%;
  background-repeat: no-repeat;
  background-size: 20% auto;
  box-shadow: 0 10px 0 0 var(--color-accent);
}
.banner h1 {
  color: var(--color-cream);
  max-width: 90%;
}
.banner .eyebrow { color: var(--color-secondary); margin-bottom: 0.9rem; } /* trailing space matches original box height */

/* ---- Light content section ---- */
.section {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--pad-x) 171px;   /* verified big bottom gap */
}
.section h2.mt { margin-top: 20px; }  /* collapses with prev p to 20px */
article.section { padding-top: 60px; padding-bottom: 85.5px; }  /* blog posts: space above title from menu, half the standard gap before "More From The Blog" */
.section > p:last-child { margin-bottom: 0; }

/* ---- Flush section (homepage): sits at the 1140px box with zero extra
   horizontal inset, spacing between sections handled by explicit margins
   rather than the shared .section's padding/pad-x. ---- */
.section-flush {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0;
}
.section-gap { margin: 100px auto; }
.section-gap-lg { margin: 100px auto 160px; }

/* ---- Dark newsletter section ---- */
.section-dark { background: var(--color-primary); color: var(--color-cream); }
.section-dark .inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 91px var(--pad-x) 109px;   /* verified */
}
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
}
.two-col .col-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 90%; /* verified: text column doesn't stretch full grid track — 90% exactly, leaving breathing room before the image */
}
/* This container already spaces every child via flex gap, so any child's own
   margin-bottom (eyebrow, heading, paragraph, button) would double-count —
   zero it out here so the 20px gap is the single source of spacing. */
.two-col .col-text > * { margin-bottom: 0; }
.section-dark h2 { color: var(--color-cream); }
.section-dark .eyebrow { color: var(--color-secondary); }
.nl-copy p { margin: 0 0 0.9rem; }      /* 14.4px between the two sentences */
.nl-copy p:last-child { margin: 0; }
.two-col img {
  border-radius: 40px;
  width: 100%; height: 100%;
  min-height: 60vh;                 /* verified — drives section height */
  object-fit: cover;
}

/* ---- Forms ---- */
.form-honeypot { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-success { display: none; color: #149e60; font-size: 0.85rem; margin: 12px 0 0; }
.form-error { display: none; color: #c0392b; font-size: 0.85rem; margin: 12px 0 0; }
.form-row { display: flex; gap: 12px; margin: 0 0 12px; }
.form-field {
  flex: 1;
  min-width: 0; /* fix: <input> has an implicit min-width:auto in flex, which was overflowing the row */
  height: 40px;
  border-radius: 100px;
  padding: 8px 16px;
  border: none;
  font-family: var(--font-body);
  font-size: 0.9rem;
  background: rgba(245,241,231,0.14);
  color: var(--color-cream);
}
.form-field::placeholder { color: var(--color-cream); opacity: 0.7; }
.section:not(.section-dark) .form-field {
  background: var(--color-white);
  color: var(--color-text);
  border: 1px solid rgba(0,0,0,0.1);
}
.section:not(.section-dark) .form-field::placeholder { color: var(--color-text); opacity: 0.6; }

/* Shared button base: every button/pill CTA on the site (.btn, .btn-tile,
   .btn-outline, .btn-outline-dark) uses this exact same shape, padding, and
   typography so only color needs to change per-variant. Each variant below
   overrides just background/border-color/color. */
.btn,
.btn-tile,
.btn-outline,
.btn-outline-dark {
  display: inline-block;
  padding: 8px 24px;
  border: 2px solid transparent;
  border-radius: 100px;
  background: var(--color-primary);
  color: var(--color-cream);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1.4;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn { width: 100%; text-align: center; } /* form-submit buttons span the row */
.btn-light { background: var(--color-cream); color: var(--color-text); }
.btn-light:hover { background: var(--color-accent); color: var(--color-white); }
.btn:hover { background: var(--color-accent); color: var(--color-primary); }

/* ---- Accordion (FAQs) ---- */
.accordion { display: flex; flex-direction: column; gap: 12.8px; margin-top: 20px; }
.accordion-item {
  border: 1px solid #d5d8dc;
  border-radius: 5px;
}
.accordion-item summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.2rem;      /* 19.2px */
  line-height: 1.45rem;   /* 23.2px */
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
}
.accordion-item summary::-webkit-details-marker,
.accordion-item summary::marker { display: none; content: ""; }
.accordion-item .accordion-icon { flex: none; width: 13px; height: 15px; color: var(--color-text); }
.accordion-item .icon-minus { display: none; }
.accordion-item[open] .icon-plus { display: none; }
.accordion-item[open] .icon-minus { display: block; }
.accordion-item .accordion-body {
  padding: 10px;
  margin: 0 10px 10px;
  background: rgba(157,162,123,0.14);
  border-radius: 5px;
}
.accordion-item .accordion-body p { font-size: 0.9rem; margin: 0 0 0.9rem; }
.accordion-item .accordion-body p:last-child { margin: 0; }

/* ---- Retreat card grid (Past Retreats) ---- */
.retreat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
  margin-top: 20px;
}
.retreat-grid-3 { grid-template-columns: repeat(3, 1fr); }
/* Homepage only: whichever retreat card is placed first (the most recent
   one) is always the accent/purple card — driven by DOM position, not a
   per-retreat class, so it stays correct automatically as retreats are
   swapped in and archived without needing manual re-tagging. */
.retreat-grid-3 .retreat-card:first-child { background: var(--color-accent); }
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 40px;
}
.pagination-btn {
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 2px solid var(--color-primary);
  border-radius: 100px;
  background: transparent;
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.pagination-btn:hover { background: var(--color-primary); color: var(--color-cream); }
.pagination-btn.is-active { background: var(--color-primary); color: var(--color-cream); }
.pagination-btn:disabled { opacity: 0.35; cursor: default; pointer-events: none; }
.retreat-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--color-secondary);
  border-radius: 40px;
  padding: 35px;
}
.retreat-card h2 { color: var(--color-primary); }
.retreat-card .date {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 20px;
}
.retreat-card p:not(.date) { color: var(--color-primary); font-size: 0.9rem; margin: 0; }
.btn-tile { align-self: flex-start; }
.btn-tile:hover { background: var(--color-accent); color: var(--color-white); }
.retreat-card .btn-tile { margin-top: 20px; }  /* guarantees a gap above the CTA even when long text fills the card and space-between has no slack */

/* ---- Contact form card ---- */
.form-card {
  background: #e2ddcf;
  border-radius: 40px;
  padding: var(--pad-x);
  margin-top: 20px;
}
.form-stack { display: flex; flex-direction: column; gap: 24px; }
.form-stack .form-row { gap: 16px; margin: 0; }
.form-stack .form-row > div { flex: 1; min-width: 0; }
.form-stack label,
.form-question-label {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-text);
  margin: 0 0 12px;
}
.contact-form label {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1rem;
}
.form-stack .form-field-light,
.form-stack textarea.form-field-light {
  width: 100%;
  padding: 8px 16px;
  border: none;
  font-family: var(--font-body);
  font-size: 0.8rem;
  background: var(--color-cream);
  color: var(--color-text);
}
/* Pill-shaped like every other input on the site (.form-field is already
   100px) — was 5px, square-ish corners, out of step with the rest of the
   site's form styling. */
.form-stack input.form-field-light { height: 40px; border-radius: 100px; }
.form-stack textarea.form-field-light { min-height: 87px; padding: 5px 14px; resize: vertical; border-radius: 5px; }
.form-stack .form-field-light::placeholder { color: var(--color-text); opacity: 0.6; }
.btn-dark { background: var(--color-primary); color: var(--color-white); }
.btn-dark:hover { background: var(--color-accent); color: var(--color-primary); }

.btn-outline { background: transparent; border-color: var(--color-cream); color: var(--color-cream); }
.btn-outline:hover { background: var(--color-cream); color: var(--color-primary); }

.banner-meta { margin: 0 0 20px; }
.banner-meta .eyebrow { display: inline; margin: 0; color: var(--color-cream); }
.banner-meta .sep { color: var(--color-secondary); margin: 0 8px; }

/* Groups the two confirmed-retreat banner buttons (Register Now + Contact)
   with a defined gap — .btn-outline alone is inline-block with no spacing
   rule between siblings. */
.banner-buttons { display: flex; flex-wrap: wrap; gap: 12px; }

.form-radio-scale {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 12px;
}
.form-radio-scale label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--color-text);
  cursor: pointer;
}

/* ---- Legal content (privacy policy, terms) ---- */
.legal-content h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.25rem;    /* 20px — verified */
  color: var(--color-text);
  margin: 20px 0 12px;
}
.legal-content ul,
.bullet-list { margin: 0 0 0.9rem; padding-left: 20px; }
.legal-content li,
.bullet-list li { margin: 0 0 8px; }
.legal-content li:last-child,
.bullet-list li:last-child { margin-bottom: 0; }

/* ---- Blog post (single article) ---- */
.blog-post-meta {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--color-text);
  text-transform: capitalize;
  margin: 0 0 60px;
}
.blog-post-content { margin-bottom: 40px; }
.blog-post-content h2, .blog-post-content h3 { margin: 8px 0 16px; }
.blog-post-content h2 { font-size: 2rem; }
.blog-post-content h3 { font-family: var(--font-heading); font-weight: 400; color: var(--color-primary); font-size: 1.2rem; }
.blog-post-content p { margin: 0 0 16px; }
.blog-post-content ul { margin: 0 0 16px; padding-left: 40px; }
.blog-post-content li { margin: 0 0 8px; }

.blog-post-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ded8ca;
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 20px;
}
.blog-post-nav a {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-secondary);
  text-decoration: none;
}
.blog-post-nav a:hover { color: var(--color-primary); }
.blog-post-nav .spacer { flex: 1; }

/* ---- Blog card grid ---- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 35px 30px;
  margin-top: 20px;
}
.section-cta { text-align: center; margin-top: 40px; }
.blog-card-thumb { display: block; border-radius: 20px; overflow: hidden; aspect-ratio: 3 / 2; }
.blog-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.blog-card h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.2rem;    /* 19.2px — verified */
  line-height: 1.8rem;  /* 28.8px */
  margin: 20px 0 8px;
}
.blog-card h3 a { text-decoration: none; color: inherit; text-transform: capitalize; }
.blog-date {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--color-secondary);
  margin: 0 0 8px;
}
.blog-read-more {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-accent);
  text-decoration: none;
}
.blog-read-more:hover { color: var(--color-primary); }

/* ---- Gallery (simplified: uniform grid, no masonry, no lightbox JS) ---- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 20px;
}
.gallery-grid a { display: block; border-radius: 10px; overflow: hidden; aspect-ratio: 1 / 1; }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.2s ease; }
.gallery-grid a:hover img { opacity: 0.85; }
.gallery-grid-5 { grid-template-columns: repeat(5, 1fr); }

/* ---- Retreat detail page (past state) ---- */
.retreat-teaching { margin-bottom: 40px; }
.retreat-teaching h2 { font-size: 1.4rem; }
.retreat-teaching h3 { font-family: var(--font-body); font-weight: 600; font-size: 1rem; color: var(--color-text); margin: 20px 0 12px; }
.retreat-teaching ul { padding-left: 20px; margin: 0; }
.retreat-teaching li { margin-bottom: 8px; }

.retreat-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 40px;
}
.retreat-feature-video {
  position: relative;
  display: block;
  border-radius: 40px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.retreat-feature-video img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Same box as .retreat-feature-video, for when a retreat supplies a still
   photo instead of a teaser video for this slot — no anchor/play-button/
   hover-zoom, just a static image filling the same shape. */
.retreat-feature-photo { border-radius: 40px; overflow: hidden; aspect-ratio: 16 / 9; }
.retreat-feature-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.retreat-quote-card {
  border-radius: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 45px 5%;
  margin-bottom: 40px;
}
.retreat-feature .retreat-quote-card { margin-bottom: 0; }
.retreat-quote-card p { max-width: 90%; margin: 0; font-family: var(--font-heading); font-weight: 400; }
.retreat-quote-card.light { background: var(--color-secondary); }
.retreat-quote-card.light .quote-verse { color: var(--color-primary); font-size: 1.4rem; line-height: 2rem; }
.retreat-quote-card.light .quote-citation { color: var(--color-cream); font-size: 1.4rem; line-height: 2.9rem; margin-top: 12px; }
.retreat-quote-card.dark { background: var(--color-primary); padding: 60px 5%; }
.retreat-quote-card.dark img { width: 128px; margin-bottom: 12px; }
.retreat-quote-card.dark .quote-verse { color: var(--color-cream); font-size: 4.2rem; line-height: 4rem; }
.retreat-quote-card.dark .quote-citation { color: var(--color-secondary); font-size: 1.4rem; line-height: 2.9rem; margin-top: 20px; }

.retreat-inline-image { width: 100%; border-radius: 20px; margin-bottom: 40px; }

.retreat-meditation { margin-bottom: 40px; }
.retreat-meditation h2 { margin: 0 0 20px; }
.retreat-meditation ul { padding-left: 40px; margin: 0; }
.retreat-meditation li { margin-bottom: 12px; }
.retreat-meditation .highlight { color: var(--color-accent); font-weight: 600; }

.retreat-videos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.retreat-videos .video-embed {
  position: relative;
  display: block;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.retreat-videos .video-embed img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Link-out video thumbnails: many retreat recap/teaching videos are third-party
   ministry uploads whose owners disabled embedding (YouTube Error 153), so these
   open on YouTube in a new tab instead of playing inline. */
.video-embed img,
.retreat-feature-video img { transition: transform 0.3s ease; }
.video-embed:hover img,
.retreat-feature-video:hover img { transform: scale(1.03); }
.video-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 68px; height: 48px;
  background: rgba(0, 0, 0, 0.72);
  border-radius: 14px;
  pointer-events: none;
  transition: background-color 0.2s ease;
}
.video-play::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-38%, -50%);
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff;
}
.video-embed:hover .video-play,
.retreat-feature-video:hover .video-play { background: #ff0000; }

@media (max-width: 800px) {
  .retreat-feature { grid-template-columns: 1fr; }
  .retreat-videos { grid-template-columns: 1fr; }
}

/* ---- Footer ---- */
.site-footer {
  background: var(--color-text);  /* verified: #24261D — deliberately darker/distinct from the newsletter section above */
  color: var(--color-cream);
  padding: 91px var(--pad-x) 36px;
  border-top: 8px solid var(--color-cream); /* verified: real separator, not a rendering artifact */
}
.footer-top {
  max-width: var(--content-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.footer-brand { display: flex; flex-direction: column; gap: 20px; }
.footer-brand .footer-logo img { width: 126px; height: auto; }
.footer-brand p { font-size: 0.8rem; margin: 0; }
.footer-contact { display: flex; flex-direction: column; justify-content: flex-end; text-align: right; }
.footer-contact .eyebrow { color: var(--color-cream); }
.footer-contact p { font-size: 0.8rem; margin: 0; }   /* verified: 0 margin, tight */
.footer-contact a {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.8rem;
  text-transform: lowercase;
  color: var(--color-secondary);
  text-decoration: underline;
}
.footer-bottom {
  max-width: var(--content-width);
  margin: 24px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(245,241,231,0.25);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.8rem;
}
.footer-bottom .designed { margin: 0; }
.footer-bottom a {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-secondary);
}

/* ---- Responsive ---- */
@media (max-width: 880px) {
  .nav-toggle { display: block; }
  .site-nav { position: static; }
  .site-nav ul {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    background: var(--color-cream);
    padding: 12px 24px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 30;
  }
  .site-nav.is-open ul { display: flex; }
  .site-nav .has-submenu .submenu {
    display: flex; position: static; box-shadow: none;
    background: transparent; padding-left: 16px; min-width: 0;
  }
  .site-header { position: relative; flex-wrap: wrap; }
}
@media (max-width: 800px) {
  .two-col { grid-template-columns: 1fr; }
  .retreat-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .section { padding-bottom: 80px; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-contact { text-align: left; }
  /* Same breakpoint as .two-col above, not 600px — a narrower cutoff here
     left a gap where .two-col had already collapsed to one column but the
     Name/Email inputs were still side by side, forcing that single column
     wider than its container (the two inputs' combined min-width doesn't
     shrink to fit a single grid track by default) and overflowing the
     newsletter section off the right edge. */
  .form-stack .form-row { flex-direction: column; }
}
@media (max-width: 560px) {
  .blog-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .banner { background-size: 0 auto; padding: 40px 28px; }
}

/* ---- Homepage hero ---- */
.hero {
  position: relative;
  margin: 14px 14px 0;
  min-height: 95vh;
}
.hero-bg {
  position: absolute;
  inset: 0;
  border-radius: 40px;
  overflow: hidden;
  z-index: 0;
}
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-text);
  opacity: 0.7;
}
.hero-header {
  position: relative;
  z-index: 10;
  background: transparent;
  padding-top: 54px;
  padding-bottom: 11px;
}
.hero-header .site-nav a,
.hero-header .nav-toggle { color: var(--color-cream); }
.hero-header .submenu a { color: var(--color-text); }
.hero-header .site-logo img { height: 64.8px; }

/* Mobile-only hero-header overrides — MUST come after the rules above:
   these share the same selector specificity, so with an equal-specificity
   tie, whichever rule is later in the file wins regardless of @media. An
   earlier copy of these two rules was silently beaten by the two rules
   just above and never took effect on any real device. */
@media (max-width: 880px) {
  /* The dropdown sits on a cream background once open, on every link —
     top-level and submenu alike — so top-level links need to go dark here
     too (submenu links already had this via .hero-header .submenu a). */
  .hero-header .site-nav a { color: var(--color-text); }
  /* Smaller logo so it comfortably shares the row with the Instagram icon
     and hamburger button on narrow phones instead of the row wrapping. */
  .hero-header .site-logo img { height: 40px; }
}
.hero-content {
  position: relative;
  z-index: 1;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 140px 0 0;
}
.hero-content h2 { color: var(--color-cream); font-size: 2rem; margin: 0 0 28px; }
.hero-content h1 {
  color: var(--color-cream);
  font-size: 4.2rem;
  line-height: 4rem;
  width: 80%;
  text-transform: capitalize;
  margin: 0 0 36px;
}
.hero-content h1 .highlight {
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 6px;
}
.hero-content p { color: var(--color-cream); max-width: 570px; margin: 0 0 34px; }

/* ---- About teaser (two-col with photo) ---- */
.about-teaser .two-col { align-items: center; padding: 6.25% 0 2.5%; }
.about-teaser img { width: 100%; height: 75vh; object-fit: cover; border-radius: 40px; }

.btn-outline-dark { align-self: flex-start; background: transparent; border-color: var(--color-primary); color: var(--color-primary); }
.btn-outline-dark:hover { background: var(--color-primary); color: var(--color-cream); }

/* ---- Upcoming retreat teaser card ---- */
.teaser-card {
  background: var(--color-primary);
  border-radius: 40px;
  padding: 50px;
  margin-top: 20px;
}
.teaser-card h2 { color: var(--color-cream); margin: 0 0 8px; }
.teaser-card h2.tagline { color: var(--color-secondary); font-size: 4.2rem; line-height: 4rem; margin-bottom: 20px; }
.teaser-card .banner-meta { margin-bottom: 20px; }
.teaser-card p:last-child { color: var(--color-cream); margin: 20px 0 0; }

/* ---- Testimonials ---- */
.testimonial-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.testimonial-card {
  border: 3px solid #e2ddcf;
  border-radius: 40px;
  padding: 35px;
}
.testimonial-card p:first-child { margin: 0 0 20px; }
.testimonial-card p:last-child { font-family: var(--font-heading); font-size: 1rem; margin: 0; }

/* ---- Support dialog ---- */
dialog#support-dialog {
  max-width: 480px;
  width: 90%;
  border: none;
  border-radius: 40px;
  padding: 48px;
  background: var(--color-cream);
  color: var(--color-text);
}
dialog#support-dialog::backdrop { background: rgba(36, 38, 29, 0.6); }
dialog#support-dialog p { margin: 0 0 16px; }
dialog#support-dialog .btn-outline-dark { margin-top: 8px; border: none; padding: 0; }

/* ---- Gallery lightbox ---- */
dialog#lightbox {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}
dialog#lightbox::backdrop { background: rgba(36, 38, 29, 0.92); }
dialog#lightbox img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 88vw;
  max-height: 84vh;
  border-radius: 12px;
  object-fit: contain;
}
.lightbox-btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 100px;
  background: rgba(245, 241, 231, 0.14);
  color: var(--color-cream);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.lightbox-btn:hover { background: rgba(245, 241, 231, 0.28); }
.lightbox-close { top: 24px; right: 24px; width: 44px; height: 44px; font-size: 1.6rem; line-height: 1; }
.lightbox-prev, .lightbox-next { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 2rem; line-height: 1; }
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }
.lightbox-counter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-cream);
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.4px;
}
@media (max-width: 700px) {
  .lightbox-prev, .lightbox-next { width: 40px; height: 40px; font-size: 1.5rem; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
  .lightbox-close { top: 12px; right: 12px; }
}

@media (max-width: 800px) {
  .hero-content h1 { font-size: 2.8rem; line-height: 2.8rem; }
  .teaser-card h2.tagline { font-size: 2.8rem; line-height: 2.8rem; }
  .teaser-card h2:not(.tagline) { font-size: 1.4rem; line-height: 1.8rem; }
  .about-teaser .two-col { grid-template-columns: 1fr; }
  .testimonial-grid { grid-template-columns: 1fr; }
  /* Mobile only: every pill button spans full width so buttons of different
     text lengths (e.g. "Find Out More" vs "Support Willow Grace Retreats")
     line up the same size instead of each hugging its own text. Desktop
     keeps the natural inline-block, hug-content sizing. */
  .btn-tile, .btn-outline, .btn-outline-dark { width: 100%; text-align: center; }
  /* Smaller logo on subpages too, matching the hero-header override above,
     so it comfortably shares the row with the Instagram icon and hamburger
     button instead of wrapping onto its own line. */
  .site-logo img { height: 40px; }
  /* Vertically center the hero text within the hero's min-height box instead
     of the desktop's fixed 140px top padding — on mobile that fixed offset
     left a big empty gap up top and pushed the button flush against the
     bottom edge. .hero-header stays pinned at its natural top height (first
     flex item); .hero-content becomes the remaining flexible space and
     centers its own children within it. .hero-bg is position:absolute so
     it's unaffected by .hero becoming a flex container. */
  /* Taller than the desktop's 95vh so there's a bit more breathing room
     below the button before the rounded bottom edge — content stays
     centered via the flex rule below, this just gives it more room to
     sit within. */
  .hero { display: flex; flex-direction: column; min-height: 110vh; }
  /* .site-header's margin:18px auto (for plain block-level centering on
     every other page) has a side effect once .hero becomes a flex column
     above: auto side-margins disable flexbox's default full-width stretch
     for a cross-axis item, so .hero-header shrank to fit its content and
     centered itself instead of spanning full width — logo and icons ended
     up bunched together in the middle instead of logo-left/icons-right. */
  .hero > .hero-header { margin-left: 0; margin-right: 0; }
  .hero-content { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-top: 0; }
  /* .two-col .col-text is 90% width on purpose on desktop, to leave a gap
     before the image sitting beside it in the same row. Once .two-col
     stacks to one column on mobile (above), that gap no longer makes sense
     — it just left the "Find Out More" / "Support..." buttons narrower than
     the full-width image stacked below them. */
  .two-col .col-text { width: 100%; }
  /* Half the usual .section-gap / .section-gap-lg top/bottom margins — at
     mobile widths the full-size gaps read as oversized empty space relative
     to the narrower column next to them. */
  .section-gap { margin: 50px auto; }
  .section-gap-lg { margin: 50px auto 80px; }
  /* Reduced padding so the card's content sits closer to its edges instead
     of the desktop's roomier 50px on all sides. Left-aligned (the default),
     not centered — the button's own text still centers via the
     .btn-tile/.btn-outline/.btn-outline-dark rule above. */
  .teaser-card { padding: 28px; }
  /* Double the gap above "About Willow Grace Retreats" (the desktop's
     6.25% top padding), just for this section — the space between the
     hero and this heading was reading as too tight on mobile. Bottom
     padding (2.5%) is untouched. */
  .about-teaser .two-col { padding-top: 12.5%; }
}

/* .hero-content and .section-flush are deliberately zero-padded so their
   content sits flush with the 1140px content box on wide screens (no
   double-inset). Below that width the box just becomes the viewport, so
   without this they'd run edge-to-edge with no gutter at all. */
@media (max-width: 1140px) {
  .hero-content, .section-flush { padding-left: var(--pad-x); padding-right: var(--pad-x); }
  /* .banner itself (not just the text inside it) was sitting flush against
     the viewport edge below 1140px — its own internal padding gives the
     text breathing room, but the box's edge had none. This is shared by
     every inner page (About, Contact, FAQs, Terms, Registration, Gallery,
     every retreat page, etc.), so one fix covers all of them. */
  .banner { margin-left: var(--pad-x); margin-right: var(--pad-x); }
}