/*
 * Glorious Hope theme styles
 * Colors come from the church logo: blue #0B6AC5, red #B5121B, black #201E1F.
 * The prism background is a set of pastel light blobs moved with transforms
 * (cheap on the compositor) over a warm ivory base, with a faint grain to
 * stop banding. Every animation is switched off under prefers-reduced-motion.
 */

:root {
  --gh-ink: #201E1F;
  --gh-ink-soft: #5A5E66;
  --gh-blue: #0B6AC5;
  --gh-blue-deep: #084E92;
  --gh-blue-tint: #E3F0FC;
  --gh-red: #B5121B;
  --gh-white: #FFFFFF;
  --gh-base: #FFFBF5;
  --gh-rose: #FFD9E1;
  --gh-peach: #FFE1C8;
  --gh-butter: #FFF3C4;
  --gh-mint: #DCF5E6;
  --gh-sky: #D9EBFF;
  --gh-lilac: #E9E0FF;
  --gh-panel: rgba(255, 255, 255, 0.82);
  --gh-line: rgba(11, 106, 197, 0.16);
  --gh-radius: 14px;
  --gh-shadow: 0 10px 30px rgba(32, 30, 31, 0.06);
  --gh-shadow-lift: 0 18px 40px rgba(11, 106, 197, 0.14);
  --gh-serif: "Lora", Georgia, "Times New Roman", serif;
  --gh-sans: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --gh-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --gh-orb-a: rgba(255, 217, 225, 0.9);
  --gh-orb-b: rgba(217, 235, 255, 0.95);
}

/* ---------- Prism background ---------- */

.gh-prism {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--gh-base);
}
.gh-prism::before {
  content: "";
  position: absolute;
  inset: -22%;
  background:
    radial-gradient(38% 34% at 14% 22%, var(--gh-rose) 0%, rgba(255, 217, 225, 0) 70%),
    radial-gradient(34% 30% at 82% 14%, var(--gh-butter) 0%, rgba(255, 243, 196, 0) 70%),
    radial-gradient(44% 40% at 72% 66%, var(--gh-sky) 0%, rgba(217, 235, 255, 0) 70%),
    radial-gradient(36% 34% at 22% 78%, var(--gh-peach) 0%, rgba(255, 225, 200, 0) 70%),
    radial-gradient(30% 28% at 54% 38%, var(--gh-mint) 0%, rgba(220, 245, 230, 0) 70%),
    radial-gradient(30% 30% at 92% 88%, var(--gh-lilac) 0%, rgba(233, 224, 255, 0) 70%);
  will-change: transform;
  animation: gh-drift 52s ease-in-out infinite alternate;
}
/* Two soft orbs of light that wander slowly behind the page. */
.gh-orb {
  position: absolute;
  width: 48vmax;
  height: 48vmax;
  border-radius: 50%;
  opacity: 0.6;
  will-change: transform;
  background: radial-gradient(circle at 50% 50%, var(--gh-orb-a) 0%, rgba(255, 255, 255, 0) 64%);
}
.gh-orb--a {
  top: -18vmax;
  left: -14vmax;
  animation: gh-orb-a 38s ease-in-out infinite alternate;
}
.gh-orb--b {
  right: -16vmax;
  bottom: -22vmax;
  background: radial-gradient(circle at 50% 50%, var(--gh-orb-b) 0%, rgba(255, 255, 255, 0) 64%);
  animation: gh-orb-b 46s ease-in-out infinite alternate;
}
.gh-prism::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes gh-drift {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to   { transform: translate3d(3%, 2.5%, 0) scale(1.08); }
}
@keyframes gh-orb-a {
  to { transform: translate3d(12vmax, 10vmax, 0) scale(1.15); }
}
@keyframes gh-orb-b {
  to { transform: translate3d(-14vmax, -8vmax, 0) scale(1.1); }
}

/* ---------- Base ---------- */

html { scroll-behavior: smooth; }
body {
  font-family: var(--gh-sans);
  color: var(--gh-ink);
  -webkit-font-smoothing: antialiased;
}
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible {
  outline: 3px solid var(--gh-blue);
  outline-offset: 3px;
}
h1:focus, h2:focus { outline: none; }
/* Anchored headings stop below the sticky header, not under it. */
h2[id], h3[id], section[id], div[id] { scroll-margin-top: 5.5rem; }

mark.has-inline-color {
  border-radius: 3px;
  padding: 0 0.2em;
}

/* ---------- Sections and panels ---------- */

.gh-section {
  padding-top: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
}
.gh-section.gh-section--tight {
  padding-top: clamp(1.25rem, 3vw, 2rem);
  padding-bottom: clamp(1.25rem, 3vw, 2rem);
}
.gh-panel,
.is-style-panel,
.wp-block-group.gh-panel,
.wp-block-group.is-style-panel {
  background: var(--gh-panel);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: var(--gh-radius);
  box-shadow: var(--gh-shadow);
  padding: clamp(1.25rem, 3vw, 2.25rem);
}
.gh-panel.gh-mini { padding: clamp(1rem, 2vw, 1.5rem); }
.gh-panel.gh-mini h3 { margin-top: 0; font-size: 1.15rem; }
.gh-page-head {
  padding-top: clamp(1.5rem, 4vw, 2.75rem);
}
.gh-page-lead {
  font-size: 1.15rem;
  color: var(--gh-ink-soft);
}

/* Small label above a heading: "Next steps", "Find us", "Give". The red dot
   is the one place the logo red appears on a page, so it stays rare. */
.gh-eyebrow {
  display: block;
  margin: 0 0 0.4rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gh-blue-deep);
}
.gh-eyebrow::before {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-right: 0.6em;
  border-radius: 50%;
  background: var(--gh-red);
  vertical-align: 0.1em;
}
.gh-eyebrow + h2,
.gh-eyebrow + .wp-block-heading { margin-top: 0; }
.gh-sub {
  color: var(--gh-ink-soft);
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}

/* A short gradient bar under section headings, drawn when the section reveals. */
.gh-section h2.wp-block-heading:not(.gh-purpose)::after {
  content: "";
  display: block;
  width: 3.25rem;
  height: 4px;
  margin-top: 0.65rem;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gh-blue) 0%, var(--gh-blue-deep) 65%, var(--gh-red) 100%);
  transform-origin: left center;
  transition: transform 0.9s var(--gh-ease) 0.25s;
}
.gh-section h2.wp-block-heading.has-text-align-center::after {
  margin-left: auto;
  margin-right: auto;
  transform-origin: center;
}
.js .gh-reveal:not(.is-visible) h2.wp-block-heading::after { transform: scaleX(0); }

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

.gh-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-top: clamp(2rem, 6vw, 4.5rem);
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
.gh-hero::before {
  /* the light beam: one refracted band that sweeps in once on load */
  content: "";
  position: absolute;
  z-index: -1;
  top: -45%;
  bottom: -45%;
  left: 8%;
  width: 46%;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(255, 217, 225, 0) 0%,
    rgba(255, 217, 225, 0.75) 16%,
    rgba(255, 243, 196, 0.85) 34%,
    rgba(220, 245, 230, 0.8) 50%,
    rgba(217, 235, 255, 0.85) 66%,
    rgba(233, 224, 255, 0.7) 84%,
    rgba(233, 224, 255, 0) 100%);
  filter: blur(22px);
  transform: rotate(-16deg);
  will-change: transform, opacity;
  animation: gh-beam 2.2s var(--gh-ease) 0.15s both;
}
@keyframes gh-beam {
  from { opacity: 0; transform: translateX(-28%) rotate(-16deg); }
  to   { opacity: 1; transform: translateX(0) rotate(-16deg); }
}
/* The hero text rises in, line by line, once on load. */
.gh-hero .gh-kicker,
.gh-hero .gh-hero__title,
.gh-hero .gh-next,
.gh-hero .gh-lead,
.gh-hero .wp-block-buttons {
  animation: gh-rise 0.9s var(--gh-ease) both;
}
.gh-hero .gh-hero__title { animation-delay: 0.08s; }
.gh-hero .gh-next { animation-delay: 0.16s; }
.gh-hero .gh-lead { animation-delay: 0.26s; }
.gh-hero .wp-block-buttons { animation-delay: 0.36s; }
@keyframes gh-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.gh-kicker {
  color: var(--gh-blue-deep);
  font-weight: 600;
  margin: 0;
}
.gh-hero__title {
  letter-spacing: -0.015em;
  line-height: 1.02;
  margin: 0.35rem 0 0.9rem;
  color: var(--gh-ink);
}
/* "Next service" chip; the script fills in the live wording. */
.gh-next {
  display: inline-block;
  margin: 0 0 1rem;
  padding: 0.4rem 0.9rem 0.4rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--gh-line);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gh-blue-deep);
  box-shadow: var(--gh-shadow);
}
.gh-next::before {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  margin-right: 0.55em;
  border-radius: 50%;
  background: var(--gh-blue);
  vertical-align: 0.05em;
  box-shadow: 0 0 0 0 rgba(11, 106, 197, 0.45);
  animation: gh-pulse 2.4s ease-out infinite;
}
@keyframes gh-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(11, 106, 197, 0.45); }
  70%  { box-shadow: 0 0 0 9px rgba(11, 106, 197, 0); }
  100% { box-shadow: 0 0 0 0 rgba(11, 106, 197, 0); }
}
.gh-lead {
  color: var(--gh-ink-soft);
  max-width: 46ch;
}
.gh-hero__logo img {
  display: block;
  width: min(78%, 360px);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 14px 26px rgba(11, 106, 197, 0.18));
  animation: gh-float 9s ease-in-out infinite;
}
@keyframes gh-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
.gh-hero .wp-block-buttons,
.gh-hero .gh-btn-row { margin-top: 1.25rem; }
@media (max-width: 781px) {
  .gh-hero__logo img { width: min(58%, 220px); margin-top: 0.5rem; }
}
/* The logo column rises in a moment after the text. */
.gh-hero__cols > .wp-block-column:nth-child(2) { animation: gh-rise 0.9s var(--gh-ease) 0.2s both; }

/* Caption chips laid over the mosaic photos. */
.gh-tile .wp-element-caption {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  z-index: 1;
  max-width: calc(100% - 1.5rem);
  margin: 0;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgba(255, 251, 245, 0.92);
  color: var(--gh-blue-deep);
  font-family: var(--gh-sans);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  box-shadow: 0 4px 14px rgba(32, 30, 31, 0.14);
  pointer-events: none;
}
@media (max-width: 600px) {
  .gh-tile .wp-element-caption { font-size: 0.75rem; left: 0.5rem; bottom: 0.5rem; padding: 0.25rem 0.55rem; }
}

/* ---------- Reveal on scroll (only when JS is running) ---------- */

.js .gh-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.75s var(--gh-ease), transform 0.75s var(--gh-ease);
}
.js .gh-reveal.is-visible {
  opacity: 1;
  transform: none;
}
/* Children of a .gh-stagger container follow one after another. */
.js .gh-reveal .gh-stagger > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--gh-ease), transform 0.6s var(--gh-ease);
}
.js .gh-reveal.is-visible .gh-stagger > * { opacity: 1; transform: none; }
.js .gh-reveal.is-visible .gh-stagger > :nth-child(1) { transition-delay: 0.1s; }
.js .gh-reveal.is-visible .gh-stagger > :nth-child(2) { transition-delay: 0.2s; }
.js .gh-reveal.is-visible .gh-stagger > :nth-child(3) { transition-delay: 0.3s; }
.js .gh-reveal.is-visible .gh-stagger > :nth-child(4) { transition-delay: 0.4s; }
.js .gh-reveal.is-visible .gh-stagger > :nth-child(5) { transition-delay: 0.5s; }
.js .gh-reveal.is-visible .gh-stagger > :nth-child(6) { transition-delay: 0.6s; }
.js .gh-reveal.is-visible .gh-stagger > :nth-child(n+7) { transition-delay: 0.7s; }

/* ---------- Schedule ---------- */

.gh-schedule {
  border-top: 1px solid var(--gh-line);
}
.wp-block-group.gh-schedule__row,
.gh-schedule__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--gh-line);
}
.gh-schedule__when {
  font-family: var(--gh-serif);
  font-size: 1.3rem;
  line-height: 1.25;
  color: var(--gh-blue-deep);
  flex: 0 0 15rem;
  margin: 0;
}
.gh-schedule__what {
  flex: 1 1 16rem;
  margin: 0;
}
.gh-schedule__what strong { color: var(--gh-ink); }

/* ---------- Photos and bands ---------- */

.gh-photo img,
.gh-photo svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--gh-radius);
  box-shadow: var(--gh-shadow);
}
/* Fixed shapes, so the layout holds whatever photo the church swaps in. */
.gh-photo--portrait img {
  max-width: 320px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 25%;
}
.gh-photo--3x2 img { aspect-ratio: 3 / 2; object-fit: cover; }
.gh-photo--16x9 img { aspect-ratio: 16 / 9; object-fit: cover; }
.gh-photo--kids img { aspect-ratio: 4 / 3; object-fit: cover; }
.gh-photo--room img { aspect-ratio: 720 / 328; object-fit: cover; }
.gh-photo--captioned .wp-element-caption {
  margin: 0.55rem 0 0;
  font-size: 0.85rem;
  color: var(--gh-ink-soft);
  text-align: left;
}
.gh-band { gap: clamp(1.5rem, 4vw, 3.5rem); }
/* A wide photo band at the top of a section (the praise team). */
.gh-photo-band { margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.gh-photo--wide img {
  aspect-ratio: 21 / 9;
  object-fit: cover;
  object-position: center 40%;
  box-shadow: 0 24px 50px rgba(8, 78, 146, 0.18);
}
@media (max-width: 600px) {
  .gh-photo--wide img { aspect-ratio: 3 / 2; }
}
/* A tall "story" graphic (the Sunday Worship card) beside the schedule. */
.gh-meet { gap: clamp(1.25rem, 3vw, 2.5rem); }
.gh-meet .wp-block-column { min-width: 0; }
.gh-photo--story img {
  max-width: 280px;
  margin: 0 auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
}
@media (max-width: 781px) {
  .gh-photo--story img { max-width: 300px; margin-top: 0.5rem; }
}

/* ---------- Facts table ---------- */

.gh-facts table { border-collapse: collapse; width: 100%; }
.gh-facts td, .gh-facts th {
  border: 0;
  border-bottom: 1px solid var(--gh-line);
  padding: 0.6rem 0.5rem;
  vertical-align: top;
  text-align: left;
}
.gh-facts tr td:first-child {
  font-weight: 700;
  color: var(--gh-blue-deep);
  width: 38%;
}

/* ---------- Verse ---------- */

.gh-verse,
.wp-block-quote.gh-verse {
  border: 0;
  padding: 0;
  margin: 0 auto;
  max-width: 34ch;
  text-align: center;
}
.gh-verse p {
  font-family: var(--gh-serif);
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  line-height: 1.4;
  color: var(--gh-blue-deep);
  margin: 0 0 0.75rem;
}
.gh-verse cite {
  display: block;
  font-family: var(--gh-sans);
  font-style: normal;
  font-size: 1rem;
  color: var(--gh-ink-soft);
}

/* ---------- Embed placeholders (replace with a Custom HTML block) ---------- */

.gh-embed {
  border: 2px dashed rgba(11, 106, 197, 0.35);
  border-radius: var(--gh-radius);
  background: rgba(255, 255, 255, 0.6);
  min-height: 240px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1.25rem;
  color: var(--gh-blue-deep);
}
.gh-embed p { margin: 0; max-width: 36ch; }
.gh-embed--form { min-height: 300px; }

/* ---------- Map ---------- */

/* The width is set explicitly: with an automatic width, a min-height would be
   transferred through the aspect ratio and make the box wider than its column. */
.gh-map {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--gh-radius);
  background: var(--gh-blue-tint);
  box-shadow: var(--gh-shadow);
  border: 1px solid rgba(255, 255, 255, 0.75);
}
.gh-map iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.gh-map--tall { aspect-ratio: 4 / 3; }
.gh-map--wide { aspect-ratio: 21 / 9; }
@media (min-width: 782px) {
  /* Beside the address panel, the map fills the panel's height. */
  .gh-map--tall { aspect-ratio: auto; height: 100%; min-height: 24rem; }
}
.gh-panel > .gh-map { margin-top: 1.5rem; }
@media (max-width: 600px) {
  .gh-map, .gh-map--wide, .gh-map--tall { aspect-ratio: 4 / 3; }
}
/* "Find us" on the home page: the address card floats over the map. */
.gh-findus { position: relative; }
@media (min-width: 782px) {
  .gh-findus .gh-findus__card {
    position: absolute;
    left: 1.5rem;
    bottom: 1.5rem;
    max-width: 21rem;
    margin: 0;
    padding: 1.25rem 1.5rem;
  }
}
@media (max-width: 781px) {
  .gh-findus .gh-findus__card { margin-top: 1rem; }
}
.gh-findus__card h3 { margin: 0 0 0.4rem; font-size: 1.15rem; }
.gh-findus__card p { margin: 0 0 0.5rem; }
.gh-findus__card .wp-block-buttons { margin-top: 0.75rem; }

/* ---------- Buttons ---------- */

.wp-block-button__link,
.gh-btn {
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
/* Every button sits at the top of its line. Filled buttons clip their light
   sweep with overflow: hidden, and on an inline-block that moves the baseline
   to the bottom edge, which used to lift them about 4px above an outline
   button standing beside them (and off centre next to the menu button). */
.wp-block-button__link,
.gh-btn {
  vertical-align: top;
}
.wp-block-button__link:hover,
.gh-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(11, 106, 197, 0.22);
}
/* A soft light sweeps across filled buttons on hover. */
.wp-block-button:not(.is-style-outline):not(.is-style-quiet) .wp-block-button__link {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.wp-block-button:not(.is-style-outline):not(.is-style-quiet) .wp-block-button__link::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -30%;
  width: 30%;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-20deg) translateX(-140%);
  transition: transform 0.7s var(--gh-ease);
}
.wp-block-button:not(.is-style-outline):not(.is-style-quiet) .wp-block-button__link:hover::after {
  transform: skewX(-20deg) translateX(520%);
}
.is-style-outline .wp-block-button__link,
.gh-btn--outline {
  background: rgba(255, 255, 255, 0.55);
  color: var(--gh-blue-deep);
  border: 2px solid var(--gh-blue-deep);
  padding: calc(0.8rem - 2px) calc(1.35rem - 2px);
}
.is-style-quiet .wp-block-button__link,
.gh-btn--quiet {
  background: transparent;
  color: var(--gh-blue-deep);
  border: 2px solid var(--gh-line);
  padding: calc(0.8rem - 2px) calc(1.35rem - 2px);
}
.is-style-quiet .wp-block-button__link:hover,
.gh-btn--quiet:hover {
  background: rgba(255, 255, 255, 0.7);
  box-shadow: none;
}
/* The Give button: a blue gradient with a small heart. */
.gh-btn-give .wp-block-button__link {
  background: linear-gradient(135deg, var(--gh-blue) 0%, var(--gh-blue-deep) 100%);
  color: var(--gh-white);
}
.gh-btn-give .wp-block-button__link:hover {
  background: linear-gradient(135deg, #1A78D2 0%, var(--gh-blue-deep) 100%);
  box-shadow: 0 10px 22px rgba(8, 78, 146, 0.3);
}
.gh-btn-give .wp-block-button__link::before {
  content: "";
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  margin-right: 0.45em;
  vertical-align: -0.12em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 21s-7.5-4.6-9.6-9.4C.9 8.2 3.1 4.8 6.6 4.8c2.1 0 3.7 1.3 5.4 3.2 1.7-1.9 3.3-3.2 5.4-3.2 3.5 0 5.7 3.4 4.2 6.8C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Header ---------- */

.gh-sticky {
  position: sticky;
  top: 0;
  z-index: 30;
}
.gh-main,
footer.wp-block-template-part { margin-block-start: 0; }
.gh-header {
  position: relative;
  isolation: isolate;
  background: rgba(255, 251, 245, 0.72);
  border-bottom: 1px solid rgba(11, 106, 197, 0.12);
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}
/* The blur lives on a pseudo-element so the mobile menu overlay, which is a
   fixed descendant of the header, keeps the viewport as its containing block. */
.gh-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  backdrop-filter: saturate(150%) blur(12px);
}
.gh-header.is-scrolled {
  background: rgba(255, 251, 245, 0.86);
  box-shadow: 0 6px 24px rgba(32, 30, 31, 0.08);
}
body.admin-bar .gh-sticky { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .gh-sticky { top: 46px; }
}
/* On a very short screen (a laptop zoomed in to 400 percent) a header that
   stays put would cover a third of it, so there it scrolls away with the page. */
@media (max-height: 300px) {
  .gh-sticky { position: relative; }
}
.gh-header__row {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  align-items: center;
}
.wp-block-group.gh-brand,
.gh-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  text-decoration: none;
  color: var(--gh-ink);
}
/* The logo keeps its size and round shape on narrow screens; the site title
   wraps instead of squeezing it. */
.gh-brand .gh-logo { flex: none; }
.gh-logo img,
img.gh-logo {
  width: 52px;
  height: 52px;
  display: block;
  object-fit: contain;
}
.gh-brand__text .wp-block-site-title,
.gh-brand__text b {
  font-family: var(--gh-serif);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.1;
  margin: 0;
  display: block;
}
.gh-brand__text .wp-block-site-title a { text-decoration: none; color: var(--gh-ink); }
.gh-brand__sub,
.gh-brand__text small {
  display: block;
  margin: 0;
  font-size: 0.8rem;
  color: var(--gh-ink-soft);
  line-height: 1.1;
}
.wp-block-group.gh-header__actions,
.gh-header__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: none;
}
.wp-block-buttons.gh-header__cta,
.gh-header__cta {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  align-items: center;
}
.gh-header__cta .wp-block-button { margin: 0; }
.gh-header__cta .wp-block-button__link,
.gh-btn--cta {
  padding: 0.55rem 1rem;
  white-space: nowrap;
}
.gh-header__cta .is-style-outline .wp-block-button__link {
  padding: calc(0.55rem - 2px) calc(1rem - 2px);
}
/* The header's width breakpoints are in em, so they follow the text size set
   in the browser. With the usual 16 px text they are exactly the same as
   pixels (64em is 1024 px, 37.5em is 600 px, 30em is 480 px, 23.75em is
   380 px). With Chrome or Edge set to Very large text (24 px), the menu folds
   into the Menu button below 1536 px instead of overlapping the church name. */
.gh-header .gh-header__row.alignwide { max-width: 70rem; }
/* Below desktop width the buttons sit before the Menu button. */
@media (max-width: 63.999em) {
  .gh-header__cta { order: -1; }
}
@media (max-width: 37.5em) {
  .gh-brand__sub,
  .gh-brand__text small { display: none; }
  .gh-brand__text .wp-block-site-title,
  .gh-brand__text b { font-size: 0.95rem; }
  .gh-logo img,
  img.gh-logo { width: 42px; height: 42px; }
  .gh-header__cta .wp-block-button__link,
  .gh-btn--cta { padding: 0.5rem 0.8rem; font-size: 0.95rem; }
  /* "Plan your visit" is the first item in the menu, so the button can go;
     Give stays visible at every width. */
  .gh-header .gh-btn-new { display: none; }
  .wp-block-group.gh-header__actions,
  .gh-header__actions { gap: 0.5rem; }
  .gh-next { font-size: 0.88rem; }
}
/* Narrow phones (360 px, the most common Android width, and below): a little
   less of everything, so the church name fits on two lines there. */
@media (max-width: 23.75em) {
  .wp-block-group.gh-brand,
  .gh-brand { gap: 0.45rem; }
  .gh-logo img,
  img.gh-logo { width: 36px; height: 36px; }
  .gh-brand__text .wp-block-site-title,
  .gh-brand__text b { font-size: 0.88rem; }
  .gh-header__cta .wp-block-button__link,
  .gh-btn--cta { padding: 0.5rem 0.7rem; }
}

/* ---------- Navigation block (WordPress) ---------- */

.gh-nav .wp-block-navigation-item__content { text-decoration: none; }
.gh-nav .wp-block-navigation-item__content:hover { text-decoration: underline; text-underline-offset: 4px; }
.gh-nav .current-menu-item > .wp-block-navigation-item__content {
  box-shadow: inset 0 -2px 0 var(--gh-red);
}
.gh-nav .wp-block-navigation__responsive-container-open {
  border: 1.5px solid var(--gh-line);
  border-radius: 10px;
  padding: 0.45rem 0.7rem;
  color: var(--gh-blue-deep);
  gap: 0.35rem;
}
.gh-nav .wp-block-navigation__responsive-container-open::after {
  content: "Menu";
  font-weight: 700;
  font-size: 0.95rem;
}
@media (max-width: 30em) {
  /* Icon-only menu button, so the church name keeps two lines beside the logo. */
  .gh-nav .wp-block-navigation__responsive-container-open::after { content: none; }
  .gh-nav .wp-block-navigation__responsive-container-open { padding: 0.45rem 0.55rem; }
}
@media (min-width: 64em) {
  .gh-nav .gh-nav__home,
  .gh-nav__list .gh-nav__home { display: none; }
  /* Give is the header button on desktop, so the menu item would repeat it.
     Two rules, not one: a browser without :has() (Firefox 120 and older)
     drops a whole rule it cannot read, and the class rule must still apply. */
  .gh-nav .gh-nav__give { display: none; }
  .gh-nav .wp-block-navigation-item:has(> .wp-block-navigation-item__content[href$="/give/"]) { display: none; }
}
/* Hamburger up to tablet width, not just phones: the header row does not fit
   six items plus a button between 600px and 1023px (64em, so it grows with
   the browser's text size). The 600px stays in pixels to match WordPress's
   own Menu button rule. */
@media (min-width: 600px) and (max-width: 63.999em) {
  .gh-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
  .gh-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
.gh-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
  --navigation-layout-justification-setting: flex-start;
  background: linear-gradient(160deg, #FFFBF5 0%, var(--gh-sky) 55%, var(--gh-lilac) 100%);
  padding: 1.5rem 1.5rem 2rem;
}
.gh-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  gap: 0.25rem;
  padding-top: 3.5rem;
  align-items: stretch;
}
.gh-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  width: 100%;
  align-items: stretch;
}
.gh-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  width: 100%;
}
.gh-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  width: 100%;
}
.gh-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  display: block;
  font-family: var(--gh-serif);
  font-size: 1.45rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--gh-line);
  color: var(--gh-ink);
}
.gh-nav .wp-block-navigation__responsive-container-close {
  color: var(--gh-blue-deep);
}

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

.gh-footer {
  color: #EAF2FB;
}
.gh-footer a { color: var(--gh-white); }
.gh-footer .wp-block-heading,
.gh-footer h3 { color: var(--gh-white); margin-bottom: 0.5rem; }
.gh-footer p { margin: 0 0 0.5rem; }
.gh-footer__fine {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 1rem;
  font-size: 0.9rem;
  color: #C9D9EA;
}
.gh-footer mark.has-inline-color { color: var(--gh-ink); }
.gh-footer .gh-btn-give--footer .wp-block-button__link {
  background: var(--gh-white);
  color: var(--gh-blue-deep);
}
.gh-footer .gh-btn-give--footer .wp-block-button__link:hover {
  background: var(--gh-blue-tint);
  color: var(--gh-blue-deep);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
}
.gh-footer .gh-btn-give--footer .wp-block-button__link::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23084E92' d='M12 21s-7.5-4.6-9.6-9.4C.9 8.2 3.1 4.8 6.6 4.8c2.1 0 3.7 1.3 5.4 3.2 1.7-1.9 3.3-3.2 5.4-3.2 3.5 0 5.7 3.4 4.2 6.8C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E");
}

/* ---------- Links list ---------- */

.gh-links { list-style: none; padding: 0; margin: 0; }
.gh-links li {
  padding: 0.9rem 0;
  margin: 0;
  border-bottom: 1px solid var(--gh-line);
}
.gh-links li:first-child { border-top: 1px solid var(--gh-line); }
.gh-links a { font-weight: 700; }

/* ---------- Lists ---------- */

.gh-steps li { margin-bottom: 0.5rem; }
.gh-steps li::marker { color: var(--gh-blue); font-weight: 700; }
/* Ways to give, teams to join: plain lists with a blue dot. */
.gh-ways,
.gh-teams { list-style: none; padding: 0; margin: 0; }
.gh-ways li,
.gh-teams li {
  position: relative;
  padding: 0.55rem 0 0.55rem 1.4rem;
  margin: 0;
  border-bottom: 1px solid var(--gh-line);
}
.gh-ways li::before,
.gh-teams li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 1.1rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--gh-blue);
}
.gh-ways strong,
.gh-teams strong { color: var(--gh-blue-deep); }

/* ---------- Pills (the five ministry areas, About) ---------- */

.gh-ministry-title { margin-top: clamp(1.5rem, 4vw, 2.5rem); color: var(--gh-ink-soft); font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--gh-sans); }
.wp-block-list.gh-pills,
.gh-pills {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}
.gh-pills li {
  margin: 0;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--gh-line);
  box-shadow: var(--gh-shadow);
  font-family: var(--gh-serif);
  font-size: 1.05rem;
  color: var(--gh-blue-deep);
}
.gh-pills a { text-decoration: none; }
.gh-pills a:hover { text-decoration: underline; text-underline-offset: 4px; }
.gh-pills + .gh-verse,
.gh-pills + .wp-block-quote.gh-verse { margin-top: clamp(2rem, 5vw, 3rem); }

/* ---------- Page lead lines up with the page title (WordPress pages) ---------- */

.wp-block-post-content > .gh-page-lead {
  max-width: var(--wp--style--global--wide-size, 1120px);
}

/* ---------- Cards (next steps, ways to give) ---------- */

.wp-block-group.gh-cards,
.gh-cards {
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  margin-top: clamp(1.25rem, 3vw, 2rem);
}
.wp-block-group.gh-card,
.gh-card {
  display: flex;
  flex-direction: column;
  background: var(--gh-panel);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: var(--gh-radius);
  box-shadow: var(--gh-shadow);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  transition: transform 0.3s var(--gh-ease), box-shadow 0.3s var(--gh-ease);
}
.gh-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--gh-shadow-lift);
}
.gh-card::before {
  content: "";
  display: block;
  width: 56px;
  height: 56px;
  margin-bottom: 1rem;
  border-radius: 50%;
  background-color: var(--gh-blue-tint);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 28px 28px;
}
.gh-card--new::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B6AC5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.6 7-12a7 7 0 0 0-14 0c0 5.4 7 12 7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.6'/%3E%3C/svg%3E");
}
.gh-card--serve::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B6AC5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.5s-7.2-4.4-9.2-9C1.4 8.3 3.5 5 6.9 5c2 0 3.5 1.2 5.1 3 1.6-1.8 3.1-3 5.1-3 3.4 0 5.5 3.3 4.1 6.5-2 4.6-9.2 9-9.2 9z'/%3E%3C/svg%3E");
}
.gh-card--pray::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B6AC5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c1.5 3 5 5 5 9.5a5 5 0 0 1-10 0c0-2 .8-3.4 1.8-4.6.4 1.3 1.1 2.1 2.2 2.6C10.6 8.2 11 5.6 12 3z'/%3E%3Cpath d='M8 21h8'/%3E%3C/svg%3E");
}
.gh-card--online::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B6AC5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='12' rx='2'/%3E%3Cpath d='M3 10h18M7 15h3'/%3E%3C/svg%3E");
}
.gh-card--zelle::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B6AC5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='3' width='10' height='18' rx='2'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E");
}
.gh-card--mail::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B6AC5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
}
.gh-card--sunday::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B6AC5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V11l8-6 8 6v10'/%3E%3Cpath d='M12 3v4M10 5h4M9 21v-6h6v6'/%3E%3C/svg%3E");
}
.gh-card h3,
.gh-card .wp-block-heading { margin: 0 0 0.45rem; font-size: 1.3rem; }
.gh-card p { margin: 0 0 1rem; color: var(--gh-ink-soft); }
.gh-card p:last-child { margin-bottom: 0; }
.gh-card .wp-block-buttons { margin-top: auto; }
/* Cards with a photo across the top (the groups on Ministries). */
.wp-block-group.gh-card--photo,
.gh-card--photo { padding: 0; overflow: hidden; }
.gh-card--photo::before { display: none; }
.gh-card--photo > .wp-block-image,
.gh-card--photo > .gh-card__photo { margin: 0; }
.gh-card--photo .gh-card__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  border-radius: 0;
  transition: transform 0.9s var(--gh-ease);
}
.gh-card--photo .gh-card__photo--low img { object-position: center 62%; }
.gh-card--photo:hover .gh-card__photo img { transform: scale(1.04); }
.wp-block-group.gh-card__body,
.gh-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
}
.gh-card__body > :last-child { margin-bottom: 0; }

/* ---------- Life together: the photo mosaic (Home) ---------- */

.wp-block-group.gh-mosaic,
.gh-mosaic {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 0.75rem;
  margin-top: clamp(1.25rem, 3vw, 2rem);
}
.gh-mosaic > .wp-block-image,
.gh-mosaic > .gh-tile { margin: 0; margin-block-start: 0; }
.wp-block-image.gh-tile,
.gh-tile {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--gh-radius);
  background: var(--gh-blue-tint);
  box-shadow: var(--gh-shadow);
}
/* Wide tiles take two columns and stretch to the row the 4:3 tiles set. */
.gh-mosaic .gh-tile--wide { grid-column: span 2; aspect-ratio: auto; }
.gh-mosaic .gh-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
  transition: transform 0.9s var(--gh-ease);
}
.gh-mosaic .gh-tile--low img { object-position: center 62%; }
@media (hover: hover) {
  .gh-mosaic .gh-tile:hover img { transform: scale(1.045); }
}
@media (max-width: 899px) {
  .wp-block-group.gh-mosaic,
  .gh-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .gh-mosaic .gh-tile--wide { aspect-ratio: 2.1 / 1; }
  .gh-mosaic .gh-tile--wider { aspect-ratio: 2.5 / 1; }
}
.gh-mosaic__more { margin-top: 1.25rem; }

/* Each mosaic photo is a link to the full photo. The script opens it in the
   photo viewer below; without the script the link simply opens the photo. */
.gh-mosaic .gh-tile > a {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  cursor: zoom-in;
}
.gh-mosaic .gh-tile > a:focus-visible { outline: none; }
/* Focus ring drawn inside the tile, because the tile clips anything outside it. */
.gh-mosaic .gh-tile > a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow: inset 0 0 0 3px var(--gh-white), inset 0 0 0 6px var(--gh-blue);
  opacity: 0;
  pointer-events: none;
}
.gh-mosaic .gh-tile > a:focus-visible::before { opacity: 1; }
/* A small "open" badge in the corner of every photo shows it can be opened. */
.gh-mosaic .gh-tile > a::after {
  content: "";
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 2;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(255, 251, 245, 0.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23084E92' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4H4v5M15 4h5v5M20 15v5h-5M4 15v5h5'/%3E%3C/svg%3E") center / 14px no-repeat;
  box-shadow: 0 4px 14px rgba(32, 30, 31, 0.18);
  transition: transform 0.25s var(--gh-ease), background-color 0.25s ease;
  pointer-events: none;
}
.gh-mosaic .gh-tile:hover > a::after,
.gh-mosaic .gh-tile > a:focus-visible::after { transform: scale(1.12); background-color: #FFFFFF; }
@media (max-width: 600px) {
  .gh-mosaic .gh-tile > a::after { top: 0.45rem; right: 0.45rem; width: 1.75rem; height: 1.75rem; background-size: 12px; }
}

/* ---------- Photo viewer (opened from the mosaic) ---------- */

html.gh-viewer-open { overflow: hidden; }
.gh-viewer {
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 4rem 5.5rem 1.5rem;
  border: 0;
  background: rgba(9, 22, 40, 0.95);
  color: #F4F8FD;
  overflow: hidden;
  /* Room kept free around the photo: the side buttons, and the close button
     plus the caption. */
  --gh-viewer-side: 11rem;
  --gh-viewer-reserve: 9rem;
}
.gh-viewer::backdrop { background: rgba(9, 22, 40, 0.6); }
.gh-viewer[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.gh-viewer__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
  max-width: 100%;
  margin: 0;
}
.gh-viewer__img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, calc(100vw - var(--gh-viewer-side)));
  max-height: calc(100vh - var(--gh-viewer-reserve));
  max-height: calc(100dvh - var(--gh-viewer-reserve));
  border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  transition: opacity 0.2s ease;
}
.gh-viewer.is-loading .gh-viewer__img { opacity: 0.25; }
.gh-viewer__caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  max-width: 60ch;
  margin: 0;
  font-family: var(--gh-sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  color: #F4F8FD;
}
.gh-viewer__count {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #A9C8EA;
}
.gh-viewer__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.gh-viewer__btn[hidden] { display: none; }
.gh-viewer__btn:hover { background: rgba(255, 255, 255, 0.26); }
.gh-viewer__btn:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; }
.gh-viewer__btn svg { display: block; width: 1.5rem; height: 1.5rem; }
.gh-viewer__close { top: 1rem; right: 1rem; }
.gh-viewer__prev { left: 1.25rem; top: 50%; transform: translateY(-50%); }
.gh-viewer__next { right: 1.25rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 700px) {
  /* On phones the photo uses the full width and the arrows sit below it. */
  .gh-viewer { padding: 4rem 0.75rem 5.5rem; --gh-viewer-side: 1.5rem; --gh-viewer-reserve: 13rem; }
  .gh-viewer__prev,
  .gh-viewer__next { top: auto; bottom: 1.25rem; transform: none; }
  .gh-viewer__prev { left: calc(50% - 4rem); }
  .gh-viewer__next { right: calc(50% - 4rem); }
}
@media (max-height: 500px) and (orientation: landscape) {
  /* Short, wide screens (a phone turned sideways, a laptop zoomed in): the
     arrows go to the sides and the photo takes nearly all the height. A short
     upright screen (a small phone zoomed in) keeps the arrows below, where
     they do not squeeze the photo. */
  .gh-viewer { padding: 0.75rem 4.25rem; --gh-viewer-side: 8.5rem; --gh-viewer-reserve: 4.25rem; }
  .gh-viewer__figure { gap: 0.4rem; }
  .gh-viewer__close { top: 0.6rem; right: 0.6rem; }
  .gh-viewer__prev,
  .gh-viewer__next { top: 50%; bottom: auto; transform: translateY(-50%); }
  .gh-viewer__prev { left: 0.6rem; }
  .gh-viewer__next { right: 0.6rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .gh-viewer[open] { animation: gh-viewer-in 0.25s ease both; }
}
@keyframes gh-viewer-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- Give strip (Home) and Mission Support (Give) ---------- */

.gh-give-strip {
  background: linear-gradient(135deg, rgba(227, 240, 252, 0.95) 0%, rgba(255, 255, 255, 0.9) 55%, rgba(255, 243, 196, 0.75) 100%);
}
.gh-give-strip h2 { margin-top: 0; }
.gh-give-strip .wp-block-buttons { margin-top: 1rem; }
.gh-missions h2 { font-size: clamp(1.35rem, 2.6vw, 1.7rem); }
.gh-connect {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.9) 0%, rgba(227, 240, 252, 0.9) 100%);
}

/* ---------- Announcements (Home) ---------- */

.gh-announcements .gh-panel > h2 { margin-top: 0; }
.wp-block-group.gh-announcements__list,
.gh-announcements__list {
  gap: 1rem;
  /* auto-fit, so one, two or three announcements always fill the row */
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}
.wp-block-group.gh-announcement,
.gh-announcement {
  background: var(--gh-blue-tint);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--gh-blue);
}
.gh-announcement > * { margin-top: 0; margin-bottom: 0; }
.gh-announcement > * + * { margin-top: 0.35rem; }
.gh-announcement__date {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--gh-blue-deep);
}
.gh-announcement h3,
.gh-announcement .wp-block-heading { font-size: 1.2rem; }

/* ---------- Events ---------- */

.gh-event + .gh-event { margin-top: 1.25rem; }
.gh-event h2 { margin-top: 0; }
.gh-event .gh-eyebrow { text-transform: none; letter-spacing: 0.02em; font-size: 0.9rem; }

/* ---------- Purpose, mission and vision (About) ---------- */

.gh-purpose {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--gh-blue-deep);
  margin: 0 0 clamp(1.25rem, 3vw, 2rem);
}
.gh-mv .gh-panel h3,
.gh-mv .gh-panel .wp-block-heading { color: var(--gh-blue-deep); margin-top: 0; }
.gh-mv .gh-panel p {
  font-family: var(--gh-serif);
  font-size: 1.15rem;
  line-height: 1.5;
}
.gh-mv + .gh-verse,
.gh-mv + .wp-block-quote.gh-verse { margin-top: clamp(2rem, 5vw, 3rem); }

/* ---------- Statement of faith (About) ---------- */

.gh-faith {
  border-top: 1px solid var(--gh-line);
  margin-top: 1.25rem;
}
.gh-faith > details,
.gh-faith > .wp-block-details {
  border-bottom: 1px solid var(--gh-line);
  margin: 0;
  padding: 0;
}
.gh-faith summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.95rem 0.25rem;
  font-family: var(--gh-serif);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--gh-ink);
  transition: color 0.2s ease;
}
.gh-faith summary::-webkit-details-marker { display: none; }
/* A plus in a circle that turns into a cross when the section is open. */
.gh-faith summary::after {
  content: "";
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background-color: var(--gh-blue-tint);
  background-image: linear-gradient(var(--gh-blue), var(--gh-blue)), linear-gradient(var(--gh-blue), var(--gh-blue));
  background-size: 12px 2px, 2px 12px;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.35s var(--gh-ease), background-color 0.2s ease;
}
.gh-faith details[open] > summary::after {
  transform: rotate(45deg);
  background-color: var(--gh-blue);
  background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
}
.gh-faith summary:hover { color: var(--gh-blue-deep); }
.gh-faith summary:focus-visible {
  outline: 3px solid var(--gh-blue);
  outline-offset: 2px;
  border-radius: 4px;
}
.gh-faith details > :not(summary) { margin: 0 0.25rem 1rem; }
.gh-faith details[open] > :not(summary) { animation: gh-open 0.4s var(--gh-ease) both; }
@keyframes gh-open {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Video placeholder (About) ---------- */

.gh-embed.gh-embed--video {
  aspect-ratio: 16 / 9;
  min-height: 0;
  align-content: center;
  gap: 0.75rem;
}
.gh-embed--video::before {
  content: "";
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--gh-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E") center / 55% no-repeat;
  box-shadow: 0 8px 18px rgba(11, 106, 197, 0.25);
}
@media (max-width: 600px) {
  .gh-embed.gh-embed--video { aspect-ratio: auto; min-height: 220px; }
}

/* ---------- Forms (Contact and Ministries) ---------- */

.gh-form { display: grid; gap: 1.15rem; margin: 0; }
.gh-form__note { margin: 0; font-size: 0.95rem; color: var(--gh-ink-soft); }
.gh-form__note--warn { color: var(--gh-red); font-weight: 600; }
.gh-field { display: grid; gap: 0.35rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.gh-field > label,
.gh-field > legend { padding: 0; font-size: 1rem; font-weight: 700; color: var(--gh-ink); }
/* A legend sits outside the fieldset's grid, so it needs its own space below. */
.gh-field > legend { margin-bottom: 0.4rem; }
.gh-req { font-size: 0.9em; font-weight: 500; color: var(--gh-ink-soft); }
.gh-field__hint { margin: 0; font-size: 0.92rem; color: var(--gh-ink-soft); }
.gh-form input[type="text"],
.gh-form input[type="email"],
.gh-form input[type="tel"],
.gh-form select,
.gh-form textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 2.9rem;
  margin: 0;
  padding: 0.65rem 0.85rem;
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--gh-ink);
  background-color: var(--gh-white);
  /* Dark enough (about 4 to 1 against white) that the outline of each field
     meets the 3 to 1 contrast rule for form controls. */
  border: 1.5px solid rgba(8, 78, 146, 0.7);
  border-radius: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.gh-form textarea { min-height: 8.5rem; line-height: 1.5; resize: vertical; }
.gh-form select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23084E92' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 0.8rem;
  cursor: pointer;
}
.gh-form input:hover,
.gh-form select:hover,
.gh-form textarea:hover { border-color: var(--gh-blue); }
.gh-form input:focus,
.gh-form select:focus,
.gh-form textarea:focus {
  /* Transparent rather than none: Windows high contrast mode drops the shadow
     below but still draws this outline, so the focus stays visible there. */
  outline: 2px solid transparent;
  border-color: var(--gh-blue);
  box-shadow: 0 0 0 3px rgba(11, 106, 197, 0.3);
}
/* Round choices and the tick box: no square glow after a click, and a clear
   ring for keyboard users. */
.gh-form .gh-choice input:focus { box-shadow: none; }
.gh-form .gh-choice input:focus-visible {
  outline: 3px solid var(--gh-blue);
  outline-offset: 2px;
  box-shadow: none;
}
/* A field reached from the list of problems stops below the sticky header,
   with room for its label above it. */
.gh-form input,
.gh-form select,
.gh-form textarea { scroll-margin-top: 9rem; }
.gh-form .gh-field--invalid input,
.gh-form .gh-field--invalid select,
.gh-form .gh-field--invalid textarea { border-color: var(--gh-red); }
.gh-field__error { margin: 0; font-size: 0.92rem; font-weight: 600; color: var(--gh-red); }
.gh-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem; }
.gh-choices { display: flex; flex-wrap: wrap; gap: 0.6rem 1.25rem; }
.gh-choice { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 500; line-height: 1.35; cursor: pointer; }
.gh-choice input { flex: none; width: 1.2rem; height: 1.2rem; margin: 0; accent-color: var(--gh-blue); cursor: pointer; }
.gh-field--check .gh-choice { align-items: flex-start; font-weight: 600; }
.gh-field--check .gh-choice input { margin-top: 0.1rem; }
.gh-bday { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 0.6rem; max-width: 22rem; }
/* Visible to screen readers only. */
.gh-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* The field only spam robots fill in: shrunk to nothing like .gh-sr, and kept
   out of the tab order and away from screen readers in the markup. */
.gh-form__trap {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.gh-form__actions { margin: 0.25rem 0 0; }
.gh-form__submit { border: 0; font: inherit; font-weight: 700; cursor: pointer; }
.gh-form__submit[aria-disabled="true"] { opacity: 0.8; cursor: progress; }
.gh-form__alert,
.gh-form__done { margin: 0 0 1.15rem; padding: 1rem 1.15rem; border-radius: 12px; }
.gh-form__alert { background: #FFF4F4; border: 2px solid var(--gh-red); }
.gh-form__done { background: #EFF9F3; border: 2px solid #1E7A4A; }
.gh-form__title { margin: 0; font-family: var(--gh-sans); font-size: 1.08rem; font-weight: 700; line-height: 1.35; }
.gh-form__alert .gh-form__title { color: var(--gh-red); }
.gh-form__done .gh-form__title { color: #17603A; }
.gh-form__alert p,
.gh-form__done p { margin: 0.4rem 0 0; }
.gh-form__alert ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }
.gh-form__alert a { color: var(--gh-red); font-weight: 600; }
.gh-form__alert:focus,
.gh-form__done:focus { outline: 3px solid var(--gh-blue); outline-offset: 3px; }
.gh-form__preview { margin: 0; font-weight: 600; color: var(--gh-blue-deep); }
@media (max-width: 600px) {
  .gh-form__row { grid-template-columns: 1fr; }
}

/* ---------- Very narrow screens ---------- */

/* Under 320 pixels wide: a phone with its page zoom or display size turned
   up (a 360-pixel phone at 130 percent lays the page out 277 pixels wide), or
   the cover screen of the first Galaxy Fold. A little less of everything in
   the header, schedule times and headings that fit, and long words such as
   email addresses that wrap instead of running off the screen. Nothing here
   applies at 320 pixels and wider. */
@media (max-width: 319px) {
  .gh-header.has-global-padding { padding-left: 0.75rem; padding-right: 0.75rem; }
  .wp-block-group.gh-brand,
  .gh-brand { gap: 0.35rem; }
  .gh-logo img,
  img.gh-logo { width: 30px; height: 30px; }
  .gh-brand__text .wp-block-site-title,
  .gh-brand__text b { font-size: 0.8rem; }
  .gh-header__cta .wp-block-button__link,
  .gh-btn--cta { padding: 0.45rem 0.6rem; }
  .gh-nav .wp-block-navigation__responsive-container-open { padding: 0.4rem 0.45rem; }
  .wp-block-group.gh-header__actions,
  .gh-header__actions { gap: 0.35rem; }
  .gh-schedule__when { flex-shrink: 1; }
  main h2.wp-block-heading { font-size: 1.4rem; }
  main { overflow-wrap: anywhere; }
}

/* ---------- Windows contrast themes ---------- */

/* In a contrast theme the browser takes away background colours, so a filled
   button would look like plain text and the dark lettering of the logo would
   sit on black. Filled buttons get an outline drawn inside their edge (it
   moves outward on keyboard focus), and the logo keeps a white disc behind
   it. Nothing here applies outside a contrast theme. */
@media (forced-colors: active) {
  .wp-block-button:not(.is-style-outline) > .wp-block-button__link { outline: 2px solid; outline-offset: -2px; }
  .wp-block-button:not(.is-style-outline) > .wp-block-button__link:focus-visible { outline: 3px solid; outline-offset: 3px; }
  .gh-logo img,
  img.gh-logo,
  .gh-hero__logo img { forced-color-adjust: none; background-color: #FFFFFF; border-radius: 50%; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .gh-prism::before,
  .gh-orb,
  .gh-hero::before,
  .gh-hero__logo img,
  .gh-hero__cols > .wp-block-column,
  .gh-hero .gh-kicker,
  .gh-hero .gh-hero__title,
  .gh-hero .gh-next,
  .gh-hero .gh-lead,
  .gh-hero .wp-block-buttons,
  .gh-next::before,
  .gh-faith details[open] > :not(summary) {
    animation: none !important;
  }
  .gh-hero::before { opacity: 1; transform: rotate(-16deg); }
  .js .gh-reveal,
  .js .gh-reveal .gh-stagger > * { opacity: 1; transform: none; transition: none; }
  .js .gh-reveal:not(.is-visible) h2.wp-block-heading::after { transform: none; }
  .gh-section h2.wp-block-heading::after { transition: none; }
  .wp-block-button__link,
  .gh-btn,
  .gh-card,
  .gh-header,
  .gh-mosaic .gh-tile img,
  .gh-mosaic .gh-tile > a::after,
  .gh-viewer__img,
  .gh-card--photo .gh-card__photo img,
  .gh-faith summary::after { transition: none; }
  .wp-block-button__link:hover,
  .gh-btn:hover,
  .gh-card:hover,
  .gh-mosaic .gh-tile:hover img,
  .gh-card--photo:hover .gh-card__photo img { transform: none; }
  .wp-block-button .wp-block-button__link::after { display: none; }
}