/*
 * CUMC CONCEPT-SITE STYLES
 * Consolidated and annotated for the WordPress theme build
 *
 * HOW TO FIND A STYLE
 * -------------------
 * Search this file for the numbered section names below, or search for a
 * visible page element such as "HEADER", "HERO", "CARDS", "EVENTS", "MAPS",
 * "VIDEO", or "FOOTER".
 *
 * Most site-wide colors are CSS variables in Section 1. Changing a variable
 * there updates every component that uses it.
 *
 * RESPONSIVE STYLES
 * -----------------
 * Desktop/tablet/mobile adjustments are consolidated at the end of this file:
 *   - 64rem: smaller desktops and tablets
 *   - 50rem: tablets and phones
 *   - 600px: a small footer-heading adjustment
 *
 * This pass removes duplicate selectors, duplicate breakpoint blocks, and
 * declarations that were superseded by later declarations of the same
 * property. It does not remove unique selectors merely because they may not
 * appear on every page.
 */


/* ======================================================================
   1. SITE-WIDE SETTINGS
   Change colors, maximum page width, borders, and the shared shadow here.
   ====================================================================== */

:root {
  --page-width: 72rem;
  --font-body: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-display: var(--font-body);
  --text: #253247;
  --muted: #617083;
  --surface: #ffffff;
  --surface-soft: #f2f6fa;
  --accent: #2f5f91;
  --accent-dark: #1f456d;
  --accent-light: #dce9f5;
  --gold: #d9a441;
  --blue: #395f73;
  --border: #d7e0e8;
  --shadow: 0 1rem 2.5rem rgb(28 50 40 / 10%);
}


/* ======================================================================
   2. BASIC PAGE DEFAULTS
   Browser reset, body text, links, images, and heading defaults.
   ====================================================================== */

* {
  box-sizing: border-box;
}

html {
  font-family: var(--font-body);
  color: var(--text);
  line-height: 1.55;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--surface);
}

a {
  color: var(--accent-dark);
  text-underline-offset: .2em;
}

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

h1,
h2,
h3 {
  line-height: 1.08;
}

h2 {
  font-size: clamp(2rem,4.5vw,3.5rem);
}


/* ======================================================================
   3. ACCESSIBILITY AND PROTOTYPE NOTICE
   Keyboard skip link and the small concept-site banner.
   ====================================================================== */

.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
  z-index: 100;
  padding: .75rem 1rem;
  background: #fff;
}

.prototype-banner {
  padding: .45rem 1rem;
  text-align: center;
  font-size: .8rem;
  background: #ece8d9;
}


/* ======================================================================
   4. HEADER, LOGO, AND MAIN MENU
   Top navigation, church identity, member button, and mobile menu button.
   ====================================================================== */

/* Main white header bar. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid var(--border);
  background: rgb(255 255 255 / 96%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Keep the sticky header below WordPress's front-end admin toolbar. */
body.admin-bar .site-header {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px;
  }
}

.site-header__inner,
.site-footer__inner,
.section,
.hero__content,
.page-hero__inner,
.statement-band>div {
  width: min(calc(100% - 2rem),var(--page-width));
  margin-inline: auto;
}

.site-header__inner {
  min-height: 5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.site-brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
}

.site-brand__mark {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 800;
}

.site-brand__name,
.site-brand__full {
  display: block;
}

.site-brand__name {
  font-size: 1.45rem;
  font-weight: 800;
}

.site-brand__full {
  color: var(--muted);
  font-size: .75rem;
}

/* Desktop and mobile main navigation links. */
.primary-navigation {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.primary-navigation a {
  text-decoration: none;
  font-weight: 650;
  font-size: .92rem;
}

.member-link {
  padding: .65rem .9rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
}

.nav-toggle {
  display: none;
}


/* ======================================================================
   5. HOME-PAGE HERO
   Large opening banner, headline, supporting text, and hero buttons.
   ====================================================================== */

.hero {
  display: grid;
  align-items: center;
  min-height: 36rem;
  background: radial-gradient(circle at 75% 28%,rgb(217 164 65 / 65%) 0 7%,transparent 7.5%),radial-gradient(circle at 78% 32%,rgb(255 255 255 / 28%) 0 13%,transparent 13.5%),linear-gradient(115deg,#193d30 0 52%,#527661 52% 70%,#b2c1a6 70%);
  color: #fff;
  overflow: hidden;
}

.hero__content {
  padding-block: 6rem;
}

.hero h1 {
  max-width: 10ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3.5rem,8vw,6.5rem);
  font-weight: 750;
  letter-spacing: -.045em;
  line-height: .92;
}

.hero__summary {
  max-width: 35rem;
  font-size: 1.3rem;
}

.eyebrow {
  margin-bottom: .5rem;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 2rem;
}

/* Shared shape and typography for all button-style links. */
.button {
  display: inline-block;
  padding: .85rem 1.15rem;
  border-radius: .35rem;
  text-decoration: none;
  font-weight: 750;
}

.button--primary {
  background: #fff;
  color: var(--accent-dark);
}

.button--secondary {
  border: 1px solid #fff;
  color: #fff;
}

.button--dark {
  background: var(--accent-dark);
  color: #fff;
}


/* ======================================================================
   6. PAGE SECTIONS AND GENERAL LAYOUT
   Standard content widths, spacing, soft backgrounds, and two-column layouts.
   ====================================================================== */

.section {
  padding-block: 5rem;
}

/* Full-width pale section background. */
.section--soft {
  width: 100%;
  max-width: none;
  padding-inline: max(1rem,calc((100% - var(--page-width))/2));
  background: var(--surface-soft);
}

.section__heading {
  max-width: 48rem;
  margin-bottom: 2rem;
}

.section__heading h2 {
  margin-top: 0;
}


/* ======================================================================
   7. CARDS
   Reusable two- and three-column cards, icons, images, and card content.
   ====================================================================== */

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

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

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

.card {
  padding: 1.6rem;
  border: 1px solid var(--border);
  border-radius: .7rem;
  background: var(--surface);
  box-shadow: 0 .35rem 1rem rgb(28 50 40 / 4%);
}

.card--illustrated {
  min-height: 15rem;
}

.card__accent {
  color: var(--accent);
  font-weight: 800;
}

.card__icon {
  display: block;
  font-size: 2.2rem;
  color: var(--gold);
}


/* ======================================================================
   8. INTERIOR-PAGE HEROES
   Large headings and summaries at the top of Visit, Events, Ministries, and similar pages.
   ====================================================================== */

.page-hero {
  padding-block: 5.5rem;
  background: linear-gradient(135deg,#eef2ea,#faf7ee);
}

.page-hero h1 {
  max-width: 13ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3.4rem,7vw,5.8rem);
  font-weight: 750;
  letter-spacing: -.04em;
  line-height: .94;
}

.page-hero__summary {
  max-width: 43rem;
  margin-top: 1.5rem;
  color: var(--muted);
  font-size: 1.28rem;
}

.split-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}


/* ======================================================================
   9. VISUAL PANELS AND FEATURE IMAGES
   Prototype visual blocks and the reusable large image treatment.
   ====================================================================== */

.visual-placeholder {
  min-height: 23rem;
  display: grid;
  place-items: center;
  padding: 2rem;
  border-radius: .8rem;
  background: radial-gradient(circle at 70% 30%,rgb(255 255 255 / 30%) 0 10%,transparent 10.5%),linear-gradient(135deg,#315f4d,#6e917d);
  color: #fff;
  text-align: center;
  box-shadow: var(--shadow);
}

.visual-placeholder strong {
  max-width: 14ch;
  font-family: var(--font-display);
  font-size: clamp(2.3rem,5vw,4.3rem);
  font-weight: 750;
  letter-spacing: -.035em;
  line-height: 1;
}

.visual-placeholder--sun {
  background: radial-gradient(circle at 72% 30%,#f4c568 0 13%,transparent 13.5%),linear-gradient(135deg,#8e6c3f,#dfb667);
}

.visual-placeholder--blue {
  background: radial-gradient(circle at 24% 70%,rgb(255 255 255 / 26%) 0 15%,transparent 15.5%),linear-gradient(135deg,#26495b,#668ea1);
}

.visual-placeholder--earth {
  background: radial-gradient(circle at 70% 34%,#d9a441 0 10%,transparent 10.5%),linear-gradient(145deg,#345341,#8b7552);
}


/* ======================================================================
   10. VISIT STEPS AND QUICK FACTS
   Numbered visit cards and compact fact panels.
   ====================================================================== */

.step-grid {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 1rem;
  counter-reset: visit-step;
}

/* One numbered 'what to expect' card. */
.step-card {
  position: relative;
  padding: 0;
  border-top: 0;
  background: #fff;
  counter-increment: visit-step;
  border-radius: .65rem;
  overflow: hidden;
  box-shadow: 0 .3rem 1rem rgb(28 50 40 / 8%);
}

.step-card::before {
  content: counter(visit-step);
  position: absolute;
  top: 9.25rem;
  left: 1.2rem;
  color: #fff;
  font-size: .9rem;
  font-weight: 850;
  z-index: 2;
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
}

.step-card h3 {
  margin-top: 0;
}

.fact-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1rem;
}

.fact {
  padding: 1.5rem;
  border-left: 4px solid var(--accent);
  background: var(--surface-soft);
}

.fact strong {
  display: block;
  margin-bottom: .35rem;
}


/* ======================================================================
   11. EVENTS
   Event rows, date blocks, event images, and event descriptions.
   ====================================================================== */

.event-list {
  display: grid;
  gap: 1rem;
}

/* One event listing, including date, image, and details. */
.event-card {
  display: grid;
  grid-template-columns: 13rem 10rem 1fr;
  border: 1px solid var(--border);
  border-radius: .65rem;
  overflow: hidden;
  background: var(--surface);
}

.event-card__date {
  display: grid;
  align-content: center;
  gap: .4rem;
  padding: 1.5rem;
  background: var(--accent);
  color: #fff;
}

.event-card__body {
  padding: 1.5rem;
}

.event-card__body h3 {
  margin-top: 0;
}


/* ======================================================================
   12. CALLOUTS, ICON CARDS, AND STATEMENT BANDS
   Prominent colored messages, ministry cards, and full-width statements.
   ====================================================================== */

.callout {
  padding: 2.3rem;
  border-radius: .75rem;
  background: var(--accent);
  color: #fff;
}

.callout h2 {
  margin-top: 0;
}

.callout a {
  color: #fff;
}

.icon-card {
  padding: 1.6rem;
  border: 1px solid var(--border);
  border-radius: .65rem;
  background: #fff;
}

.icon-card__symbol {
  display: block;
  margin-bottom: 1rem;
  font-size: 2rem;
  color: var(--gold);
}

/* Full-width message band. */
.statement-band {
  padding-block: 5rem;
  background: #1f382e;
  color: #fff;
}

.statement-band>div {
  max-width: 60rem;
  margin-inline: auto;
  text-align: center;
}

.statement-band h2 {
  margin: .3rem auto 0;
  font-family: var(--font-display);
  font-weight: 750;
  letter-spacing: -.03em;
}

.statement-band--light {
  background: #e9efe9;
  color: var(--text);
}


/* ======================================================================
   13. PATHS, IMPACT NUMBERS, AND STORIES
   Photo paths, statistics, stories, checklists, and simple data-flow diagrams.
   ====================================================================== */

.path-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 1rem;
}

.path-card {
  position: relative;
  padding: 2rem 2rem 2rem 5rem;
  border-bottom: 1px solid var(--border);
}

.path-card>span {
  position: absolute;
  left: 1rem;
  top: 2.15rem;
  color: var(--gold);
  font-size: 1.2rem;
  font-weight: 850;
}

.path-card h2 {
  margin: 0;
  font-size: 1.6rem;
}

.impact-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1rem;
}

.impact {
  padding: 2rem 1rem;
  border-radius: .65rem;
  background: var(--accent-dark);
  color: #fff;
  text-align: center;
}

.impact strong,
.impact span {
  display: block;
}

.impact strong {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -.04em;
}

.prototype-note {
  color: var(--muted);
  font-size: .9rem;
}

.story-grid {
  display: grid;
  gap: 1.25rem;
}

.story-card {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 1.5rem;
  align-items: center;
  padding: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: .7rem;
  overflow: hidden;
}

.story-card__art {
  display: grid;
  place-items: center;
  min-height: 8rem;
  border-radius: .5rem;
  background: linear-gradient(135deg,var(--gold),#f0d394);
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 750;
}

.data-flow {
  display: grid;
  gap: 1rem;
  justify-items: center;
}

.data-flow div {
  width: min(100%,20rem);
  padding: 1.5rem;
  border-radius: .6rem;
  background: var(--accent-dark);
  color: #fff;
  text-align: center;
  font-weight: 750;
}

.data-flow span {
  padding: .5rem 1rem;
  border: 1px dashed var(--accent);
  border-radius: 999px;
}

.check-list {
  padding-left: 0;
  list-style: none;
}

.check-list li {
  margin: .65rem 0;
  padding-left: 1.6rem;
}

.check-list li::before {
  content: "✓";
  margin-left: -1.6rem;
  margin-right: .55rem;
  color: var(--accent);
  font-weight: 900;
}


/* ======================================================================
   14. FOOTER
   Footer background, columns, links, and spacing.
   ====================================================================== */

.site-footer {
  padding-block: 3.5rem;
  background: #202923;
  color: #fff;
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2rem;
  padding-top: 1.5rem;
}

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


/* ======================================================================
   15. PHOTO-BASED CONCEPT-SITE ENHANCEMENTS
   Real-photo logo, photo heroes, image ribbons, image cards, and photo sections.
   ====================================================================== */

.site-brand__logo {
  width: 2.65rem;
  height: 2.65rem;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--accent-light);
}

/* Adds a full-bleed photograph to the home-page hero. */
.hero--photo {
  position: relative;
  isolation: isolate;
  background: #173d5f;
}

.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

/* Dark overlay that keeps hero text readable over a photograph. */
.hero__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg,rgb(15 43 70 / 92%) 0%,rgb(15 43 70 / 72%) 48%,rgb(15 43 70 / 20%) 78%,transparent 100%);
}

.photo-ribbon {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  height: 12rem;
  overflow: hidden;
}

.photo-ribbon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card--media,
.card--image-link {
  padding: 0;
  overflow: hidden;
}

.card--media>img,
.card--image-link>img {
  width: 100%;
  height: 15rem;
  object-fit: cover;
}

.card__body {
  padding: 1.5rem;
}

.statement-band--photo {
  position: relative;
  isolation: isolate;
  background-image: linear-gradient(rgb(19 44 69 / 80%),rgb(19 44 69 / 80%)),var(--band-image);
  background-size: cover;
  background-position: center;
}

.page-hero--image {
  position: relative;
  isolation: isolate;
  color: #fff;
  background-image: linear-gradient(90deg,rgb(17 45 72 / 92%),rgb(17 45 72 / 62%),rgb(17 45 72 / 28%)),var(--page-hero-image);
  background-size: cover;
  background-position: center;
}

.page-hero--image .page-hero__summary {
  color: rgb(255 255 255 / 90%);
}

/* Large photograph with an optional caption over the image. */
.feature-image {
  position: relative;
  margin: 0;
  border-radius: .85rem;
  overflow: hidden;
  box-shadow: var(--shadow);
  min-height: 24rem;
}

.feature-image img {
  width: 100%;
  height: 100%;
  min-height: 24rem;
  object-fit: cover;
}

.feature-image figcaption {
  position: absolute;
  inset: auto 1rem 1rem 1rem;
  padding: 1rem 1.15rem;
  border-radius: .5rem;
  background: rgb(18 48 76 / 90%);
  color: #fff;
  font-weight: 750;
}

.step-card img {
  width: 100%;
  height: 8.5rem;
  object-fit: cover;
}

.step-card>div {
  position: relative;
  padding: 3rem 1.2rem 1.2rem;
}

.fact__icon {
  display: block;
  margin-bottom: .7rem;
  font-size: 1.7rem;
}

/* Two-column church photo and map treatment. */
.location-panel {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: stretch;
  border-radius: .8rem;
  overflow: hidden;
  background: var(--accent-dark);
  color: #fff;
  gap: 0;
}

.location-panel img {
  width: 100%;
  height: 100%;
  min-height: 22rem;
  object-fit: cover;
}

.location-panel>div {
  padding: 2.5rem;
}

.location-panel h2 {
  margin-top: .2rem;
}

.icon-card--photo {
  padding: 0;
  overflow: hidden;
}

.icon-card--photo img {
  width: 100%;
  height: 12rem;
  object-fit: cover;
}

.icon-card--photo h3,
.icon-card--photo p {
  margin-left: 1.35rem;
  margin-right: 1.35rem;
}

.icon-card--photo p {
  margin-bottom: 1.5rem;
}

.photo-story {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: stretch;
  background: var(--accent-dark);
  color: #fff;
}

.photo-story img {
  width: 100%;
  height: 100%;
  min-height: 26rem;
  object-fit: cover;
}

.photo-story>div {
  display: grid;
  align-content: center;
  padding: clamp(2rem,6vw,5rem);
}

.photo-story h2 {
  margin-top: .3rem;
  font-family: var(--font-display);
  font-weight: 750;
  letter-spacing: -.03em;
}

.path-card--photo {
  display: grid;
  grid-template-columns: 11rem 1fr;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: .7rem;
  background: #fff;
}

.path-card--photo img {
  width: 100%;
  height: 100%;
  min-height: 13rem;
  object-fit: cover;
}

.path-card--photo>div {
  position: relative;
  padding: 2rem 1.5rem 1.5rem 4rem;
}

.path-card--photo>div>span {
  position: absolute;
  left: 1.25rem;
  top: 2.1rem;
  color: var(--gold);
  font-weight: 850;
}

.impact__icon {
  display: block;
  font-size: 2rem;
  margin-bottom: .6rem;
}

.story-card>img {
  width: 100%;
  height: 100%;
  min-height: 10rem;
  object-fit: cover;
}

.story-card>div {
  padding: 1.25rem;
}

.event-card__image {
  width: 100%;
  height: 100%;
  min-height: 12rem;
  object-fit: cover;
}

.data-flow__icon {
  display: block;
  font-size: 2rem;
  margin-bottom: .5rem;
}

.callout--image {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  padding: 0;
  overflow: hidden;
}

.callout--image img {
  width: 100%;
  height: 100%;
  min-height: 20rem;
  object-fit: cover;
}

.callout--image>div {
  padding: 2.3rem;
}


/* ======================================================================
   16. VIDEO AND LIVESTREAM FEATURES
   Coming-up video, expandable hero sermon, video frame, and close control.
   ====================================================================== */

.coming-up-feature {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 3rem;
  align-items: center;
  margin-bottom: 3rem;
}

.coming-up-feature__text h2 {
  margin-top: 0;
}

.video-embed {
  overflow: hidden;
  border-radius: 0.8rem;
  background: #000;
  box-shadow: var(--shadow);
  aspect-ratio: 16 / 9;
}

.video-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

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

.hero__layout.sermon-is-open {
  grid-template-columns: minmax(0, 0.85fr) minmax(22rem, 1.15fr);
}

.hero__copy {
  min-width: 0;
}

.hero__sermon {
  min-width: 0;
}

.hero__sermon[hidden] {
  display: none;
}

.sermon-toggle {
  appearance: none;
  font: inherit;
  cursor: pointer;
  background: transparent;
}

.hero__sermon .video-embed {
  width: 100%;
  overflow: hidden;
  border-radius: 0.8rem;
  background: #000;
  box-shadow: var(--shadow);
  aspect-ratio: 16 / 9;
}

.hero__sermon .video-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.sermon-close {
  margin-top: 0.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}



/* WordPress native YouTube block inside the Coming Up component. */
.coming-up-feature > .wp-block-embed {
  width: 100%;
  margin: 0;
}

.coming-up-feature .wp-block-embed__wrapper {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
}

.coming-up-feature .wp-block-embed__wrapper iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.coming-up-feature__text > :first-child {
  margin-top: 0;
}

.coming-up-feature__text > :last-child {
  margin-bottom: 0;
}


/* ======================================================================
   17. MAPS AND LOCATION PANELS
   Standalone maps and the side-by-side church photo/map panel.
   ====================================================================== */

.map-embed {
  width: 100%;
  min-height: 28rem;
  overflow: hidden;
  border-radius: 0.8rem;
  box-shadow: var(--shadow);
  background: #e8e8e8;
}

.map-embed iframe {
  display: block;
  width: 100%;
  height: 28rem;
  border: 0;
}

.visit-map .button {
  margin-top: 1.5rem;
}

.location-panel__map {
  min-width: 0;
  height: 100%;
  min-height: 22rem;
  overflow: hidden;
  border-radius: 0.75rem;
}

.location-panel__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 30rem;
  border: 0;
}

.location-panel > img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 30rem;
  object-fit: cover;
  border-radius: 0;
}

.location-panel > .location-panel__map {
  min-width: 0;
  min-height: 30rem;
  height: auto;
  padding: 0;
  overflow: hidden;
  border-radius: 0;
  background: none;
}


/* ======================================================================
   18. FOOTER PHOTO BANNER
   Church photo, dark overlay, and centered footer invitation.
   ====================================================================== */

/* Wide church photo immediately above the footer columns. */
.site-footer__photo {
  position: relative;
  opacity: 1;
}

.site-footer__photo img {
  display: block;
  width: 100%;
  height: 11rem;
  object-fit: cover;
  object-position: center 25%;
}

.site-footer__photo h2 {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  text-align: center;
  z-index: 1;
}

.site-footer__photo h2 a {
  color: white;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}

.site-footer__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}


/* ======================================================================
   19. SMALL UTILITIES
   Disabled buttons and the rule that makes the HTML hidden attribute reliable.
   ====================================================================== */

.button--disabled {
  cursor: default;
  opacity: 0.78;
  pointer-events: none;
  user-select: none;
}

[hidden] {
  display: none !important;
}


/* ======================================================================
   20. RESPONSIVE ADJUSTMENTS
   These rules change layouts as the browser becomes narrower.
   ====================================================================== */

/* TABLETS AND SMALLER DESKTOPS */
@media (max-width: 64rem) {
  .primary-navigation {
    gap: .7rem;
  }

  .primary-navigation a {
    font-size: .85rem;
  }

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

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

  .event-card {
    grid-template-columns: 11rem 9rem 1fr;
  }

  .photo-ribbon {
    height: 9rem;
  }
}

/* TABLETS AND PHONES */
@media (max-width: 50rem) {
  .site-brand__full {
    display: none;
  }

  .nav-toggle {
    display: block;
    padding: .55rem .8rem;
    border: 1px solid var(--border);
    background: #fff;
  }

  .primary-navigation {
    display: none;
    position: absolute;
    inset: auto 1rem auto 1rem;
    top: 5.1rem;
    z-index: 10;
    padding: 1rem;
    border: 1px solid var(--border);
    background: #fff;
    box-shadow: var(--shadow);
  }

  .primary-navigation.is-open {
    display: grid;
  }

  .card-grid--two,
.card-grid--three,
.split-section,
.step-grid,
.fact-grid,
.path-grid,
.impact-grid,
.site-footer__inner {
    grid-template-columns: 1fr;
  }

  .event-card,
.story-card {
    grid-template-columns: 1fr;
  }

  .story-card__art {
    min-height: 6rem;
  }

  .hero {
    min-height: 32rem;
    background: linear-gradient(145deg,#193d30,#6f927f);
  }

  .section {
    padding-block: 4rem;
  }

  .hero__shade {
    background: linear-gradient(rgb(15 43 70 / 78%),rgb(15 43 70 / 82%));
  }

  .photo-ribbon {
    grid-template-columns: repeat(2,1fr);
    height: 18rem;
  }

  .location-panel,
.photo-story,
.callout--image {
    grid-template-columns: 1fr;
  }

  .path-card--photo {
    grid-template-columns: 1fr;
  }

  .path-card--photo img {
    height: 12rem;
  }

  .event-card {
    grid-template-columns: 1fr;
  }

  .event-card__image {
    height: 13rem;
    min-height: 0;
  }

  .step-grid {
    grid-template-columns: 1fr;
  }

  .step-card img {
    height: 13rem;
  }

  .step-card::before {
    top: 13.8rem;
  }

  .site-footer__photo {
    height: 8rem;
  }

  .coming-up-feature {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .hero__layout.sermon-is-open {
    grid-template-columns: 1fr;
  }

  .map-embed,
.map-embed iframe {
    min-height: 22rem;
    height: 22rem;
  }

  .location-panel {
    grid-template-columns: 1fr;
  }

  .location-panel > img,
.location-panel__map,
.location-panel__map iframe {
    min-height: 22rem;
  }
}

/* SMALL PHONES */
@media (max-width: 600px) {
  .site-footer__photo h2 {
    font-size: 2rem;
    line-height: 1.05;
  }
}


/* ======================================================================
   21. WORDPRESS THEME BRIDGE
   These rules connect normal WordPress-generated markup to the concept-site
   design without changing the original component classes above.
   ====================================================================== */

.site-main {
  min-height: 50vh;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.screen-reader-text:focus {
  width: auto;
  height: auto;
  margin: 0;
  padding: .75rem 1rem;
  clip: auto;
  background: #fff;
  color: var(--text);
  z-index: 100000;
}

.custom-logo-link {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.custom-logo {
  width: 2.65rem;
  height: 2.65rem;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--accent-light);
}

.primary-navigation ul,
.site-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.primary-navigation > ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.primary-navigation .current-menu-item > a,
.primary-navigation .current_page_item > a {
  text-decoration: underline;
  text-decoration-thickness: .12em;
}

.entry-content > :first-child {
  margin-top: 0;
}

.entry-content > :last-child {
  margin-bottom: 0;
}

.entry-content {
  overflow-wrap: break-word;
}

.entry-content .alignwide {
  width: min(calc(100vw - 2rem), var(--page-width));
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
}

.entry-content .alignfull {
  width: 100vw;
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
}

.entry-content iframe {
  max-width: 100%;
}

.wp-block-image img {
  height: auto;
}

.wp-block-button__link {
  border-radius: .35rem;
  background: var(--accent-dark);
  color: #fff;
  font-weight: 750;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus {
  color: #fff;
}

.wp-caption-text,
.wp-element-caption {
  color: var(--muted);
  font-size: .9rem;
}

.page-hero__summary:empty {
  display: none;
}

.site-footer__title {
  margin-top: 0;
  font-family: var(--font-display);
  font-weight: 750;
  letter-spacing: -.03em;
}

.site-footer__meta {
  color: rgb(255 255 255 / 75%);
  font-size: .9rem;
}

.site-footer__menu a {
  text-decoration: none;
}

.site-footer__menu a:hover,
.site-footer__menu a:focus {
  text-decoration: underline;
}

.post-list {
  display: grid;
  gap: 1.5rem;
}

.post-list article {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.post-list h2 {
  margin: 0 0 .5rem;
  font-size: 2rem;
}

.pagination {
  margin-top: 2rem;
}

.error404 .section {
  min-height: 45vh;
}

@media (max-width: 50rem) {
  .primary-navigation > ul {
    display: grid;
  }
}

/* ======================================================================
   22. STAFF-EDITABLE WORDPRESS BLOCKS
   These rules allow native WordPress blocks to use the concept-site styles.
   ====================================================================== */

.cumc-page-content > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

.wp-block-group.section,
.wp-block-group.section--soft {
  display: block;
}

.wp-block-cover.hero {
  min-height: 36rem;
  padding: 0;
  color: #fff;
}

.wp-block-cover.hero .wp-block-cover__inner-container {
  width: 100%;
}

.wp-block-cover.hero .hero__content {
  padding-block: 6rem;
}

.wp-block-cover.page-hero {
  min-height: 26rem;
  padding: 0;
}

.wp-block-cover.page-hero .wp-block-cover__inner-container {
  width: 100%;
}

.wp-block-cover.page-hero .page-hero__inner {
  padding-block: 5.5rem;
}

.wp-block-columns.card-grid,
.wp-block-columns.step-grid,
.wp-block-columns.path-grid,
.wp-block-columns.impact-grid {
  margin-bottom: 0;
}

.wp-block-column.card,
.wp-block-column.icon-card,
.wp-block-column.fact,
.wp-block-column.impact {
  margin: 0;
}

.card--media .wp-block-image,
.card--image-link .wp-block-image,
.icon-card--photo .wp-block-image,
.step-card .wp-block-image,
.path-card--photo .wp-block-image,
.story-card .wp-block-image {
  margin: 0;
}

.card--media .wp-block-image img,
.card--image-link .wp-block-image img {
  width: 100%;
  height: 15rem;
  object-fit: cover;
}

.step-card .wp-block-image img {
  width: 100%;
  height: 8.5rem;
  object-fit: cover;
}

.path-card--photo .wp-block-image img {
  width: 100%;
  height: 100%;
  min-height: 13rem;
  object-fit: cover;
}

.story-card .wp-block-image img {
  width: 100%;
  height: 100%;
  min-height: 10rem;
  object-fit: cover;
}

.photo-ribbon .wp-block-image {
  margin: 0;
  height: 100%;
}

.photo-ribbon .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wp-block-group.statement-band,
.wp-block-group.callout {
  max-width: none;
}

.wp-block-group.statement-band > .wp-block-group__inner-container,
.wp-block-group.callout > .wp-block-group__inner-container {
  width: min(calc(100% - 2rem), var(--page-width));
  margin-inline: auto;
}

.cumc-footer-widgets {
  display: contents;
}

.site-footer__photo-setting {
  position: relative;
}

.site-footer__photo-setting img {
  display: block;
  width: 100%;
  height: 11rem;
  object-fit: cover;
  object-position: center 25%;
}

.site-footer__photo-setting::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 35%);
}

.site-footer__photo-setting h2 {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 1rem;
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 8px rgb(0 0 0 / 85%);
}

.site-footer__photo-setting h2 a { color: inherit; }

@media (max-width: 50rem) {
  .wp-block-cover.hero { min-height: 32rem; }
  .step-card .wp-block-image img { height: 13rem; }
}


/* ======================================================================
   23. CONCEPT-FIDELITY WORDPRESS CORRECTIONS
   Native blocks add wrappers. These rules make those wrappers visually
   disappear so the editable page matches the approved concept layout.
   ====================================================================== */

.cumc-page-content article,
.cumc-page-content .wp-block-cover,
.cumc-page-content .wp-block-group {
  margin-block: 0;
}

.wp-block-cover.hero {
  display: grid;
  align-items: center;
  min-height: 36rem !important;
}

.wp-block-cover.hero .wp-block-cover__image-background {
  object-position: center center;
}

.wp-block-cover.hero .wp-block-cover__background {
  background: linear-gradient(90deg, rgb(15 43 70 / 92%) 0%, rgb(15 43 70 / 72%) 48%, rgb(15 43 70 / 20%) 78%, transparent 100%) !important;
  opacity: 1 !important;
}

.wp-block-cover.hero .hero__content {
  width: min(calc(100% - 2rem), var(--page-width));
  margin-inline: auto;
}

.wp-block-cover.hero h1 {
  max-width: 10ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 8vw, 6.5rem);
  font-weight: 750;
  letter-spacing: -.045em;
  line-height: .92;
}

.wp-block-buttons.button-group {
  display: flex;
  gap: .8rem;
}

.wp-block-button.button--primary,
.wp-block-button.button--secondary,
.wp-block-button.button--dark {
  padding: 0;
  background: transparent;
}

.wp-block-button.button--primary .wp-block-button__link,
.wp-block-button.button--secondary .wp-block-button__link,
.wp-block-button.button--dark .wp-block-button__link {
  padding: .85rem 1.15rem;
  border-radius: .35rem;
  text-decoration: none;
  font-weight: 750;
}

.wp-block-button.button--primary .wp-block-button__link {
  background: #fff;
  color: var(--accent-dark);
}

.wp-block-button.button--secondary .wp-block-button__link {
  border: 1px solid #fff;
  background: transparent;
  color: #fff;
}

.wp-block-button.button--dark .wp-block-button__link {
  background: var(--accent-dark);
  color: #fff;
}

.wp-block-group.photo-ribbon {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  width: 100%;
  max-width: none;
  height: 12rem;
  overflow: hidden;
}

.wp-block-group.photo-ribbon > * {
  min-width: 0;
  height: 100%;
}

.wp-block-group.photo-ribbon figure,
.wp-block-group.photo-ribbon img {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
}

.wp-block-columns.card-grid {
  align-items: stretch !important;
}

.wp-block-columns.card-grid > .wp-block-column {
  display: flex;
}

.wp-block-columns.card-grid > .wp-block-column > .card {
  width: 100%;
}

.card .wp-block-group__inner-container,
.card__body .wp-block-group__inner-container {
  display: contents;
}

.site-header .custom-logo-link {
  line-height: 0;
}

.primary-navigation__menu > li:last-child > a,
.primary-navigation__menu .member-link > a,
.primary-navigation__menu a.member-link {
  padding: .65rem .9rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
}

@media (max-width: 50rem) {
  .wp-block-cover.hero .wp-block-cover__background {
    background: linear-gradient(rgb(15 43 70 / 78%), rgb(15 43 70 / 82%)) !important;
  }

  .wp-block-group.photo-ribbon {
    grid-template-columns: repeat(2, 1fr);
    height: 18rem;
  }
}


/* ======================================================================
   24. CONCEPT-FIDELITY ALIGNMENT PASS
   Keeps WordPress block wrappers from narrowing or re-centering content and
   tightens the header to match the approved concept site.
   ====================================================================== */

/* Header proportions and brand treatment. */
.site-header__inner {
  min-height: 4.4rem;
  gap: 1rem;
}

.site-brand {
  min-width: 0;
  flex: 0 1 auto;
  gap: .6rem;
}

.site-brand > span:last-child {
  min-width: 0;
}

.site-brand__logo,
.custom-logo {
  width: 2.4rem;
  height: 2.4rem;
}

.site-brand__name {
  font-size: 1.08rem;
  line-height: 1.05;
  white-space: nowrap;
}

.site-brand__full {
  margin-top: .12rem;
  font-size: .66rem;
  line-height: 1.1;
  white-space: nowrap;
}

.primary-navigation,
.primary-navigation > ul {
  flex-wrap: nowrap;
}

.primary-navigation > ul {
  gap: .72rem;
}

.primary-navigation a {
  font-size: .82rem;
  white-space: nowrap;
}

/* The Members outline belongs on the link only, never on both the list item
   and its link. */
.primary-navigation__menu > li:last-child,
.primary-navigation__menu li.member-link {
  padding: 0;
  border: 0;
  border-radius: 0;
}

.primary-navigation__menu > li:last-child > a,
.primary-navigation__menu li.member-link > a,
.primary-navigation__menu a.member-link {
  padding: .52rem .78rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
}

/* Remove WordPress link decoration from button blocks in every state. */
.wp-block-button.button--primary .wp-block-button__link,
.wp-block-button.button--secondary .wp-block-button__link,
.wp-block-button.button--dark .wp-block-button__link,
.wp-block-button.button--primary .wp-block-button__link:hover,
.wp-block-button.button--secondary .wp-block-button__link:hover,
.wp-block-button.button--dark .wp-block-button__link:hover,
.wp-block-button.button--primary .wp-block-button__link:focus,
.wp-block-button.button--secondary .wp-block-button__link:focus,
.wp-block-button.button--dark .wp-block-button__link:focus {
  text-decoration: none !important;
}

/* WordPress applies the theme.json content width to the cover's inner wrapper.
   The concept hero instead uses the full 72rem site container. */
.wp-block-cover.hero .wp-block-cover__inner-container,
.wp-block-cover.hero .hero__content {
  width: min(calc(100% - 2rem), var(--page-width)) !important;
  max-width: none !important;
  margin-inline: auto !important;
}

/* Do not center or narrow the editable blocks inside normal concept sections. */
.wp-block-group.section > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.wp-block-group.section--soft > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  width: auto;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Restore the concept's left edge for section headings and grids. */
.wp-block-group.section,
.wp-block-group.section--soft {
  width: min(calc(100% - 2rem), var(--page-width));
  max-width: none !important;
  margin-inline: auto;
}

/* A soft section remains full-bleed while its editable content aligns to the
   same page grid as every other section. */
.wp-block-group.section--soft {
  width: 100%;
  padding-inline: max(1rem, calc((100% - var(--page-width)) / 2));
}

@media (max-width: 64rem) {
  .site-header__inner {
    gap: .7rem;
  }

  .site-brand__name {
    font-size: .96rem;
  }

  .site-brand__full {
    font-size: .6rem;
  }

  .primary-navigation > ul {
    gap: .52rem;
  }

  .primary-navigation a {
    font-size: .72rem;
  }

  .primary-navigation__menu > li:last-child > a,
  .primary-navigation__menu li.member-link > a,
  .primary-navigation__menu a.member-link {
    padding: .42rem .64rem;
  }
}

@media (max-width: 50rem) {
  .site-brand__name {
    font-size: 1rem;
    white-space: normal;
  }

  .site-brand__full {
    display: none;
  }

  .primary-navigation,
  .primary-navigation > ul {
    flex-wrap: wrap;
  }
}


/* ======================================================================
   25. HEADER, HERO, AND SERMON CORRECTIONS
   Final high-specificity rules for WordPress-generated wrappers.
   ====================================================================== */

/* Navigation links should look like the concept navigation, including the
   current page. */
.site-header .primary-navigation a,
.site-header .primary-navigation a:visited,
.site-header .primary-navigation a:hover,
.site-header .primary-navigation a:focus,
.site-header .primary-navigation .current-menu-item > a,
.site-header .primary-navigation .current_page_item > a {
  text-decoration: none !important;
}

/* WordPress's Cover block centers constrained children. Make the cover's
   inner canvas full-width, then place the hero copy on the normal site grid. */
body .wp-block-cover.hero .wp-block-cover__inner-container {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

body .wp-block-cover.hero .hero__content {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 6rem max(1rem, calc((100vw - var(--page-width)) / 2)) !important;
}

body .wp-block-cover.hero .hero__layout,
body .wp-block-cover.hero .hero__copy {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

/* The shortcode wrappers must not become extra visible boxes or interfere
   with the hero grid/flex layouts. */
.hero__layout > .wp-block-shortcode,
.button-group > .wp-block-shortcode {
  display: contents;
  margin: 0;
}

/* The border belongs on the clickable sermon button itself. WordPress's
   Button block wrapper must remain borderless so no square outline appears. */
.wp-block-button.button--primary,
.wp-block-button.button--secondary,
.wp-block-button.button--dark {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.sermon-toggle {
  display: inline-block;
  padding: .85rem 1.15rem;
  border: 1px solid #fff;
  border-radius: .35rem;
  color: #fff;
  text-decoration: none;
  font-weight: 750;
}

.sermon-toggle:hover,
.sermon-toggle:focus {
  color: #fff;
  text-decoration: none;
}

@media (max-width: 50rem) {
  body .wp-block-cover.hero .hero__content {
    padding-block: 4rem !important;
  }
}


/* ======================================================================
   26. CONCEPT FOOTER CORRECTION
   The public footer is a fixed three-column structure. Staff edit its content
   through Appearance → Customize → CUMC Footer and the Footer Navigation menu.
   ====================================================================== */

.site-footer__inner {
  align-items: start;
}

.site-footer__contact,
.site-footer__services,
.site-footer__navigation {
  min-width: 0;
}

.site-footer__church-name {
  margin: 0 0 1rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.3;
}

.site-footer__contact p,
.site-footer__services p {
  margin: 0 0 .8rem;
}

.site-footer__contact a,
.site-footer__navigation a {
  color: #fff;
}

.site-footer__service strong,
.site-footer__service span {
  display: block;
}

.site-footer__service strong {
  margin-bottom: .1rem;
}

.site-footer__menu {
  display: grid;
  gap: .25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__menu a {
  text-decoration: underline;
  text-underline-offset: .18em;
}

.site-footer__menu a:hover,
.site-footer__menu a:focus {
  text-decoration-thickness: .12em;
}

.site-footer__photo::after {
  pointer-events: none;
}

@media (max-width: 50rem) {
  .site-footer__inner {
    gap: 2.5rem;
  }
}


.site-footer__copyright {
  margin-top: 1.25rem;
}

.site-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin-top: 1.25rem;
}

.site-footer__social-link {
  display: inline-grid;
  width: 2.65rem;
  height: 2.65rem;
  place-items: center;
  border: 0;
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 .2rem .55rem rgba(0, 0, 0, .2);
  transition: filter .18s ease, transform .18s ease;
}

.site-footer__social-link--youtube {
  background: #ff0000;
}

.site-footer__social-link--facebook {
  background: #1877f2;
}

.site-footer__social-link--instagram {
  background: radial-gradient(circle at 30% 107%, #fdf497 0 5%, #fdf497 5% 10%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

.site-footer__social-link svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

.site-footer__social-link:hover,
.site-footer__social-link:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-1px);
}


/* ======================================================================
   27. NATIVE EDITABLE EVENT CARDS
   Each event is a WordPress Columns block. Staff can reorder, duplicate,
   delete, or resize its three columns in the normal block editor.
   ====================================================================== */

.event-list {
  width: min(calc(100% - 2rem), var(--page-width));
  max-width: var(--page-width);
  margin-inline: auto;
}

.event-list > .event-card.wp-block-columns {
  display: flex;
  gap: 0;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: .65rem;
  overflow: hidden;
  background: var(--surface);
}

.event-list > .event-card.wp-block-columns + .event-card.wp-block-columns {
  margin-top: 1rem;
}

.event-card > .wp-block-column {
  min-width: 0;
  margin: 0;
}

.event-card__image-column,
.event-card__date-column {
  display: flex;
}

.event-card__image {
  width: 100%;
  height: 100%;
  margin: 0;
}

.event-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 12rem;
  object-fit: cover;
}

.event-card__date {
  display: flex;
  width: 100%;
  min-height: 12rem;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: .6rem;
  padding: 1.5rem;
  background: var(--accent);
  color: #fff;
}

.event-card__date h3,
.event-card__date p {
  margin: 0;
  color: inherit;
}

.event-card__date h3 {
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.2;
}

.event-card__body {
  width: 100%;
  padding: 1.5rem;
}

.event-card__body > :first-child {
  margin-top: 0;
}

.event-card__body > :last-child {
  margin-bottom: 0;
}

.event-card__body h3 {
  margin-top: .25rem;
  font-size: 1.15rem;
}

@media (max-width: 50rem) {
  .event-list > .event-card.wp-block-columns {
    display: flex;
    flex-direction: column;
  }

  .event-card > .wp-block-column {
    flex-basis: auto !important;
    width: 100%;
  }

  .event-card__image img {
    height: 13rem;
    min-height: 0;
  }

  .event-card__date {
    min-height: 0;
  }
}


/* ======================================================================
   28. PRIMARY NAVIGATION SUBMENUS
   One submenu level is available under each main navigation item.
   Desktop users open it by hover or keyboard focus. On mobile, submenu items
   remain visible beneath their parent so they are easy to discover and tap.
   ====================================================================== */

.primary-navigation__menu > li {
  position: relative;
}

.primary-navigation .sub-menu {
  position: absolute;
  top: calc(100% + .65rem);
  left: 0;
  z-index: 50;
  display: none;
  min-width: 15rem;
  margin: 0;
  padding: .55rem;
  border: 1px solid var(--border);
  border-radius: .55rem;
  background: #fff;
  box-shadow: var(--shadow);
  list-style: none;
}

.primary-navigation .sub-menu::before {
  content: "";
  position: absolute;
  inset: -.7rem 0 auto;
  height: .7rem;
}

.primary-navigation .menu-item-has-children:hover > .sub-menu,
.primary-navigation .menu-item-has-children:focus-within > .sub-menu {
  display: grid;
}

.primary-navigation .sub-menu li {
  margin: 0;
}

.primary-navigation .sub-menu a {
  display: block;
  padding: .65rem .75rem;
  border-radius: .35rem;
  white-space: nowrap;
  color: var(--text);
  font-weight: 650;
}

.primary-navigation .sub-menu a:hover,
.primary-navigation .sub-menu a:focus {
  background: var(--surface-soft);
  color: var(--accent-dark);
}

.primary-navigation .menu-item-has-children > a::after {
  content: "▾";
  display: inline-block;
  margin-left: .35rem;
  font-size: .75em;
  vertical-align: .08em;
}

@media (max-width: 50rem) {
  .primary-navigation .sub-menu {
    position: static;
    display: grid;
    min-width: 0;
    margin: .35rem 0 .25rem .75rem;
    padding: 0 0 0 .8rem;
    border: 0;
    border-left: 2px solid var(--accent-light);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .primary-navigation .sub-menu::before {
    content: none;
  }

  .primary-navigation .sub-menu a {
    padding: .5rem .6rem;
    white-space: normal;
    font-size: .92rem;
  }
}


/* ======================================================================
   31. STEP CARD EDITING AND GUTENBERG COMPATIBILITY
   Keeps visit cards intact despite WordPress block wrappers and provides a
   reusable, directly editable CUMC Step Card pattern.
   ====================================================================== */

.wp-block-columns.step-grid {
  align-items: stretch;
  padding-bottom: 1.75rem;
}

.wp-block-columns.step-grid > .wp-block-column {
  display: flex;
  min-width: 0;
}

.wp-block-columns.step-grid > .wp-block-column > .step-card,
.step-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 100%;
}

.step-card > .wp-block-image,
.step-card__image {
  flex: 0 0 auto;
  width: 100%;
  margin: 0 !important;
}

.step-card > .wp-block-image img,
.step-card__image img {
  display: block;
  width: 100%;
  height: 8.5rem;
  object-fit: cover;
}

/* New pattern: an explicit body wrapper and editable number. */
.step-card > .step-card__body {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: .55rem;
  padding: 3rem 1.2rem 1.25rem;
}

.step-card__body > * {
  margin-block: 0;
}

.step-card__number {
  position: absolute;
  top: .55rem;
  left: 1.2rem;
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  margin: 0 !important;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: .9rem;
  font-weight: 850;
  line-height: 1;
}

/* Do not add a second generated number to cards using the new pattern. */
.step-card:has(.step-card__number)::before {
  content: none;
}

/* Legacy page cards from earlier theme versions have no body wrapper. Keep
   those already-published cards readable without requiring manual rebuilding. */
.step-card:not(:has(.step-card__body)) > h3 {
  margin: 0;
  padding: 2.45rem 1.2rem 0;
}

.step-card:not(:has(.step-card__body)) > h3 + p {
  flex: 1 1 auto;
  margin: 0;
  padding: .55rem 1.2rem 1.25rem;
}

.step-card:not(:has(.step-card__body))::before {
  top: 7.6rem;
}

/* Give the transition from the visit cards to the next section the same
   breathing room as the concept layout. */
.wp-block-group.section:has(> .step-grid) {
  padding-bottom: 3.75rem;
}

/* Editable two-column worship introduction used by the updated Visit pattern. */
.visit-service-intro {
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}

.visit-service-intro .wp-block-image {
  margin: 0;
  overflow: hidden;
  border-radius: .65rem;
}

.visit-service-intro .wp-block-image img {
  display: block;
  width: 100%;
  min-height: 20rem;
  object-fit: cover;
}

@media (max-width: 50rem) {
  .wp-block-columns.step-grid > .wp-block-column {
    display: block;
  }

  .step-card > .wp-block-image img,
  .step-card__image img {
    height: 13rem;
  }

  .step-card:not(:has(.step-card__body))::before {
    top: 12.1rem;
  }
}

/* Visit page: editable worship choices and visitor FAQ sections. */
.worship-choice-section {
  padding-block: clamp(4rem, 7vw, 7rem);
}

.visit-service-intro {
  gap: clamp(2.5rem, 5vw, 5.5rem);
}

.worship-choice-cards {
  gap: 1rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.worship-choice-card {
  height: 100%;
  padding: clamp(1.4rem, 2.5vw, 2rem);
  background: #fff;
  border: 1px solid rgba(18, 54, 89, 0.08);
  border-radius: 0.65rem;
  box-shadow: 0 0.6rem 1.4rem rgba(21, 50, 78, 0.06);
}

.worship-choice-card__time {
  margin: 0 0 0.85rem;
  color: var(--color-accent, #28659a);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.worship-choice-card h3 {
  margin-block: 0 0.8rem;
  font-size: clamp(1.05rem, 1.4vw, 1.22rem);
}

.worship-choice-card p:last-child {
  margin-bottom: 0;
}

.worship-choice-media {
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
  box-shadow: 0 1rem 2.4rem rgba(21, 50, 78, 0.12);
}

.worship-choice-media .wp-block-image,
.worship-choice-media .wp-block-image img {
  width: 100%;
  margin: 0;
}

.worship-choice-media .wp-block-image img {
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.worship-choice-media__caption {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  margin: 0;
  padding: 0.85rem 1rem;
  color: #fff;
  background: rgba(12, 46, 78, 0.9);
  border-radius: 0.35rem;
  font-weight: 700;
}

.visit-faq-section {
  padding-block: clamp(4rem, 7vw, 7rem);
}

.visit-faq-section > h2 {
  max-width: 16ch;
}

.visit-faq-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1rem);
  margin-top: 0 !important;
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
}

.visit-faq-grid > .wp-block-column,
.visit-faq-grid > .visit-faq-card {
  min-width: 0;
  margin: 0 !important;
}

.visit-faq-card {
  height: 100%;
  padding: clamp(1.35rem, 2vw, 1.8rem);
  background: var(--color-soft, #eef5fa);
  border-left: 3px solid var(--color-accent, #28659a);
}

.visit-faq-card__icon {
  min-height: 1.8rem;
  margin: 0 0 0.85rem;
  color: var(--color-accent, #28659a);
  font-size: 1.25rem;
  line-height: 1;
}

.visit-faq-card h3 {
  margin-block: 0 0.65rem;
  font-size: 1rem;
}

.visit-faq-card p:last-child {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .visit-faq-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 781px) {
  .worship-choice-media__caption {
    position: static;
    border-radius: 0;
  }
}

@media (max-width: 560px) {
  .visit-faq-grid {
    grid-template-columns: 1fr;
  }
}

/* Visit page: responsive Google Maps section. */
.visit-map-section h2 {
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.visit-map-embed {
  width: 100%;
  overflow: hidden;
  border-radius: 0.65rem;
  background: #e9eef4;
}

.visit-map-embed iframe {
  display: block;
  width: 100%;
  height: clamp(24rem, 48vw, 34rem);
  border: 0;
}

@media (max-width: 640px) {
  .visit-map-embed iframe {
    height: 26rem;
  }
}


/* Visit page: paired parking approach image, live map, and arrival notes. */
.visit-map-section {
  padding-bottom: clamp(5rem, 8vw, 7rem);
}

.visit-map-pair {
  align-items: stretch;
  gap: 0;
  margin-bottom: 1.5rem;
  border-radius: 18px;
  overflow: hidden;
}

.visit-map-pair > .wp-block-column {
  min-width: 0;
}

.visit-parking-map,
.visit-map-embed {
  height: clamp(22rem, 38vw, 30rem);
  margin: 0;
  overflow: hidden;
  border-radius: 0;
  background: #e9eef4;
}

.visit-parking-map img,
.visit-map-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.visit-parking-map img {
  object-fit: cover;
}

.visit-driving-directions {
  max-width: 58rem;
  margin-inline: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.65;
}

.visit-driving-directions p {
  margin-block: 0 0.8rem;
}

/* A slightly lower crop keeps the people visible behind the Visit-page message. */
body.cumc-visit-page .site-footer__photo img {
  object-position: center 38%;
}

@media (max-width: 781px) {
  .visit-map-pair {
    gap: 1rem;
  }

  .visit-parking-map,
  .visit-map-embed {
    height: 24rem;
    border-radius: 0.65rem;
  }
}


/* Find Your Place: editable two-column wrapping card grid. */
.find-place-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.85rem, 1.6vw, 1.25rem);
}

.find-place-grid > .find-place-card {
  min-width: 0;
  margin: 0 !important;
}

.find-place-card {
  display: grid;
  grid-template-columns: minmax(9rem, 31%) minmax(0, 1fr);
  min-height: 10.5rem;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 0.7rem;
  background: #fff;
}

.find-place-card__image,
.find-place-card__image img {
  width: 100%;
  height: 100%;
  margin: 0 !important;
}

.find-place-card__image img {
  display: block;
  min-height: 10.5rem;
  object-fit: cover;
}

.find-place-card__body {
  display: grid;
  align-content: center;
  gap: 0.65rem;
  padding: clamp(1.25rem, 2.3vw, 2rem);
}

.find-place-card__body h3,
.find-place-card__body p {
  margin: 0;
}

.find-place-card__body h3 {
  font-family: inherit;
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  font-weight: 750;
}

.find-place-card__body p {
  color: var(--muted);
}

@media (max-width: 760px) {
  .find-place-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .find-place-card {
    grid-template-columns: 1fr;
  }

  .find-place-card__image img {
    height: 12rem;
    min-height: 0;
  }
}

/* Find Your Place cards: the heading link is stretched across the whole card. */
.find-place-card {
  position: relative;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.find-place-card__body h3 a {
  color: inherit;
  text-decoration: none;
}

.find-place-card__body h3 a::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  content: "";
}

.find-place-card:has(.find-place-card__body h3 a):hover {
  transform: translateY(-2px);
  border-color: rgb(47 95 145 / 35%);
  box-shadow: 0 0.65rem 1.5rem rgb(17 43 65 / 12%);
}

.find-place-card:has(.find-place-card__body h3 a:focus-visible) {
  outline: 3px solid var(--accent, #2f5f91);
  outline-offset: 3px;
}


/* Find Your Place closing sections. */
.statement-band--light {
  text-align: center;
}

.statement-band--light > .eyebrow,
.statement-band--light > h2,
.statement-band--light > p {
  max-width: 58rem;
  margin-inline: auto;
}

.statement-band--light > h2 {
  max-width: 46rem;
  margin-top: 0.45rem;
  font-size: clamp(2.25rem, 5vw, 4.15rem);
  line-height: 1.05;
}

.statement-band--light > p:last-child {
  margin-top: 1rem;
}

.find-place-explore {
  padding-block: clamp(4.5rem, 8vw, 7rem);
}

.find-place-explore__columns {
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}

.find-place-explore h2 {
  max-width: 32rem;
  margin: 0.5rem 0 1.5rem;
  font-size: clamp(2.4rem, 4.5vw, 4rem);
  line-height: 1.04;
}

.find-place-explore .wp-block-column > p:not(.eyebrow) {
  max-width: 35rem;
  color: var(--muted);
}

.find-place-explore .wp-block-buttons {
  margin-top: 1.5rem;
}

.find-place-explore__media {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 0.75rem;
  box-shadow: 0 1.25rem 2.5rem rgb(28 48 67 / 12%);
}

.find-place-explore__media .wp-block-image {
  margin: 0;
}

.find-place-explore__media img {
  display: block;
  width: 100%;
  aspect-ratio: 1.45 / 1;
  object-fit: cover;
}

.find-place-explore__caption {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  z-index: 2;
  margin: 0 !important;
  padding: 1rem 1.25rem;
  border-radius: 0.35rem;
  background: rgb(15 55 91 / 92%);
  color: #fff !important;
  font-weight: 700;
}

@media (max-width: 781px) {
  .find-place-explore__columns {
    gap: 2.5rem;
  }

  .find-place-explore h2 {
    max-width: none;
  }
}


/* 0.6.8: Love Your Neighbor closing section robustness. */
.love-neighbor-join .wp-block-column:first-child > .wp-block-group,
.love-neighbor-join .find-place-explore__media {
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
  box-shadow: 0 1.25rem 2.5rem rgb(28 48 67 / 12%);
}

.love-neighbor-join .wp-block-column:first-child .wp-block-image,
.love-neighbor-join .wp-block-column:first-child figure {
  margin: 0;
}

.love-neighbor-join .wp-block-column:first-child img {
  display: block;
  width: 100%;
  aspect-ratio: 1.45 / 1;
  object-fit: cover;
}

.love-neighbor-join .find-place-explore__caption,
.love-neighbor-join .wp-block-column:first-child > .wp-block-group > p:last-child {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  z-index: 2;
  margin: 0 !important;
  padding: 1rem 1.25rem;
  border-radius: 0.35rem;
  background: rgb(15 55 91 / 92%);
  color: #fff !important;
  font-weight: 700;
}

/* 0.7.0: Give every interior hero a reliable viewport-edge gutter. */
body .wp-block-cover.page-hero > .wp-block-cover__inner-container {
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: none;
  padding-inline: clamp(2rem, 4vw, 3rem);
}

body .wp-block-cover.page-hero .page-hero__inner {
  box-sizing: border-box;
  width: min(100%, var(--page-width));
  max-width: none;
  margin-inline: auto;
  padding-block: 5.5rem;
  padding-inline: 0;
}

@media (max-width: 50rem) {
  body .wp-block-cover.page-hero > .wp-block-cover__inner-container {
    padding-inline: 1.5rem;
  }

  body .wp-block-cover.page-hero .page-hero__inner {
    padding-block: 4rem;
  }
}


/* 0.7.2: Families age-and-stage linked card grid. */
.family-stage-section > h2 {
  margin-top: 0.45rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  font-size: clamp(2.5rem, 5vw, 4.4rem);
  line-height: 1.04;
}

.family-stage-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.family-stage-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #d7e0e8;
  border-radius: 0.75rem;
  background: #fff;
  box-shadow: 0 0.25rem 0.75rem rgb(17 43 65 / 4%);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.family-stage-card__image,
.family-stage-card__image img {
  display: block;
  width: 100%;
}

.family-stage-card__image {
  margin: 0;
}

.family-stage-card__image img {
  aspect-ratio: 1.8 / 1;
  object-fit: cover;
}

.family-stage-card__body {
  padding: 1.35rem 1.5rem 1.55rem;
}

.family-stage-card__body h3 {
  margin: 0 0 0.8rem;
  font-size: 1.25rem;
  line-height: 1.25;
}

.family-stage-card__body h3 a {
  color: inherit;
  text-decoration: none;
}

.family-stage-card__body h3 a::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  content: "";
}

.family-stage-card__body p {
  margin: 0;
  color: var(--muted);
}

.family-stage-card:has(.family-stage-card__body h3 a):hover {
  transform: translateY(-0.2rem);
  box-shadow: 0 1rem 2rem rgb(17 43 65 / 11%);
}

.family-stage-card:has(.family-stage-card__body h3 a:focus-visible) {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .family-stage-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .family-stage-grid {
    grid-template-columns: 1fr;
  }
}


/* 0.7.3: Families closing sections. */
.families-participation {
  margin: 0;
  padding: 0;
  background: var(--accent-dark, #234e78);
}

.families-participation__columns {
  align-items: stretch;
  gap: 0;
  margin: 0;
}

.families-participation__media,
.families-participation__copy {
  margin: 0;
}

.families-participation__media .wp-block-image,
.families-participation__media figure {
  height: 100%;
  margin: 0;
}

.families-participation__media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: clamp(28rem, 43vw, 42rem);
  object-fit: cover;
}

.families-participation__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3rem, 7vw, 6.5rem);
  background: #244f7a;
  color: #fff;
}

.families-participation__copy .eyebrow,
.families-participation__copy h2 {
  color: #fff;
}

.families-participation__copy h2 {
  max-width: 11ch;
  margin: 0.55rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(3rem, 5.5vw, 5.4rem);
  font-weight: 750;
  letter-spacing: -0.04em;
  line-height: 1.04;
}

.families-simple-promise-wrap {
  background: #fff;
}

.families-simple-promise {
  padding: clamp(3rem, 6vw, 5rem);
  border-radius: 0.8rem;
  background: #346899;
  color: #fff;
}

.families-simple-promise .eyebrow,
.families-simple-promise h2,
.families-simple-promise p,
.families-simple-promise a {
  color: #fff;
}

.families-simple-promise h2 {
  max-width: 22ch;
  margin: 0.65rem 0 2rem;
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  line-height: 1.05;
}

.families-simple-promise p {
  max-width: 42rem;
}

.families-simple-promise p:last-child {
  margin-top: 1.2rem;
}

.families-simple-promise a {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

@media (max-width: 781px) {
  .families-participation__columns {
    display: block;
  }

  .families-participation__media img {
    min-height: 22rem;
  }

  .families-participation__copy h2 {
    max-width: none;
  }
}


/* 0.7.4: Resizable Families participation split and left-aligned promise copy. */
.wp-block-media-text.families-participation {
  min-height: clamp(28rem, 43vw, 42rem);
  margin: 0;
  background: #244f7a;
}

.wp-block-media-text.families-participation .wp-block-media-text__media {
  min-height: inherit;
  align-self: stretch;
  background-size: cover;
}

.wp-block-media-text.families-participation .wp-block-media-text__media img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
}

.wp-block-media-text.families-participation .wp-block-media-text__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  padding: clamp(3rem, 7vw, 6.5rem);
  background: #244f7a;
  color: #fff;
}

.wp-block-media-text.families-participation .eyebrow,
.wp-block-media-text.families-participation h2 {
  color: #fff;
}

.wp-block-media-text.families-participation h2 {
  max-width: 11ch;
  margin: 0.55rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(3rem, 5.5vw, 5.4rem);
  font-weight: 750;
  letter-spacing: -0.04em;
  line-height: 1.04;
}

.families-simple-promise {
  padding-inline: clamp(2.25rem, 4.5vw, 4.5rem);
}

.families-simple-promise > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

@media (max-width: 600px) {
  .wp-block-media-text.families-participation {
    grid-template-columns: 100% !important;
  }

  .wp-block-media-text.families-participation .wp-block-media-text__media {
    min-height: 22rem;
  }

  .wp-block-media-text.families-participation h2 {
    max-width: none;
  }
}


/* 0.7.5: Keep the Families participation split within the normal page width. */
.wp-block-media-text.families-participation {
  width: min(calc(100% - 2rem), var(--page-width));
  max-width: var(--page-width);
  min-height: clamp(26rem, 36vw, 34rem);
  margin-inline: auto;
}

@media (max-width: 600px) {
  .wp-block-media-text.families-participation {
    width: 100%;
  }
}


/* 0.7.6: Definitively constrain the Families participation panel. */
body .entry-content > .wp-block-media-text.families-participation,
body .wp-site-blocks .wp-block-media-text.families-participation,
.wp-block-media-text.families-participation {
  box-sizing: border-box;
  width: calc(100% - 2rem) !important;
  max-width: 72rem !important;
  min-height: 0 !important;
  height: clamp(25rem, 32vw, 31rem);
  margin: clamp(3rem, 6vw, 5rem) auto !important;
}

.wp-block-media-text.families-participation .wp-block-media-text__media {
  min-height: 0 !important;
  height: 100% !important;
}

.wp-block-media-text.families-participation .wp-block-media-text__media img {
  min-height: 0 !important;
  height: 100% !important;
}

@media (max-width: 600px) {
  body .entry-content > .wp-block-media-text.families-participation,
  body .wp-site-blocks .wp-block-media-text.families-participation,
  .wp-block-media-text.families-participation {
    width: 100% !important;
    height: auto;
    margin-block: 2.5rem !important;
  }

  .wp-block-media-text.families-participation .wp-block-media-text__media {
    min-height: 22rem !important;
  }
}


/* 0.7.7: Stable Families participation section—fixed 55/45 ordinary columns. */
.families-participation-section {
  padding-block: clamp(3rem, 6vw, 5rem);
}

.families-participation-section .families-participation__columns {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  max-width: 72rem;
  min-height: clamp(26rem, 34vw, 32rem);
  margin: 0 auto;
  overflow: hidden;
  background: #244f7a;
}

.families-participation-section .families-participation__media {
  flex: 0 0 55% !important;
  width: 55%;
  margin: 0;
}

.families-participation-section .families-participation__copy {
  flex: 0 0 45% !important;
  width: 45%;
  margin: 0;
}

.families-participation-section .families-participation__media figure,
.families-participation-section .families-participation__media .wp-block-image {
  height: 100%;
  margin: 0;
}

.families-participation-section .families-participation__media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: clamp(26rem, 34vw, 32rem);
  object-fit: cover;
}

.families-participation-section .families-participation__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.5rem, 5vw, 4.75rem);
  background: #244f7a;
  color: #fff;
}

.families-participation-section .families-participation__copy .eyebrow,
.families-participation-section .families-participation__copy h2 {
  color: #fff;
}

.families-participation-section .families-participation__copy h2 {
  max-width: 12ch;
  margin: 0.55rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 4.8vw, 4.8rem);
  font-weight: 750;
  letter-spacing: -0.04em;
  line-height: 1.04;
}

@media (max-width: 781px) {
  .families-participation-section .families-participation__columns {
    display: block;
    min-height: 0;
  }

  .families-participation-section .families-participation__media,
  .families-participation-section .families-participation__copy {
    width: 100%;
  }

  .families-participation-section .families-participation__media img {
    min-height: 22rem;
    max-height: 30rem;
  }

  .families-participation-section .families-participation__copy h2 {
    max-width: none;
  }
}

/* Staff directory --------------------------------------------------------- */
.staff-directory__introduction {
  padding-bottom: 0;
}

.staff-directory {
  display: grid;
  gap: clamp(3rem, 6vw, 5rem);
}

.staff-group__header {
  max-width: 48rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.staff-group__header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 750;
  letter-spacing: -0.025em;
  color: #244f7a;
}

.staff-group__header p {
  margin: 0.65rem 0 0;
}

.staff-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.staff-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(36, 79, 122, 0.16);
  border-radius: 0.4rem;
  background: #fff;
  box-shadow: 0 0.75rem 2rem rgba(24, 48, 72, 0.08);
}

.staff-card__portrait {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #e9eef3;
}

.staff-card__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 180ms ease;
}

.staff-card--linked {
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.staff-card--linked:hover,
.staff-card--linked:focus-within {
  transform: translateY(-2px);
  border-color: rgba(36, 79, 122, 0.32);
  box-shadow: 0 1rem 2.4rem rgba(24, 48, 72, 0.14);
}

.staff-card--linked:hover .staff-card__portrait img,
.staff-card--linked:focus-within .staff-card__portrait img {
  transform: scale(1.025);
}

.staff-card__link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.staff-card__link:focus-visible {
  outline: 3px solid #244f7a;
  outline-offset: -3px;
}

.staff-card__portrait-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(145deg, #e9eef3, #d7e0e8);
}

.staff-card__body {
  padding: 1.35rem 1.4rem 1.5rem;
}

.staff-card__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  font-weight: 750;
  letter-spacing: -0.015em;
}

.staff-card__name,
.staff-card__more {
  color: #244f7a;
}

.staff-card__title {
  margin: 0.35rem 0 0;
  font-weight: 700;
}

.staff-card__summary {
  margin: 0.9rem 0 0;
}

.staff-card__contact,
.staff-card__more {
  margin: 0.9rem 0 0;
  font-size: 0.95rem;
}

.staff-card__more {
  font-weight: 700;
}

.staff-card__contact {
  position: relative;
  z-index: 2;
}

.staff-card__contact p {
  margin: 0;
}

.staff-card__contact p + p {
  margin-top: 0.3rem;
}

.staff-card__email {
  overflow-wrap: anywhere;
}

.staff-directory__notice {
  padding: 2rem;
  border: 1px solid rgba(36, 79, 122, 0.2);
  background: #f4f7fa;
}

.staff-profile__layout {
  display: grid;
  grid-template-columns: minmax(14rem, 22rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.staff-profile__portrait {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 0.4rem;
}

.staff-profile__contact {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(36, 79, 122, 0.18);
}

.staff-profile__contact p {
  margin: 0.35rem 0;
}

.staff-profile__back {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(36, 79, 122, 0.18);
}

@media (max-width: 900px) {
  .staff-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .staff-grid,
  .staff-profile__layout {
    grid-template-columns: 1fr;
  }

  .staff-profile__aside {
    max-width: 24rem;
  }
}

/* 0.8.6: Consistent rounded treatment for major CUMC content panels. */
.cumc-panel,
.families-participation__columns,
.wp-block-media-text.families-participation,
.families-simple-promise {
  border-radius: 18px;
  overflow: hidden;
}

/* Giving page ------------------------------------------------------------- */
.giving-page {
  --giving-navy: #173f67;
  --giving-blue: #244f7a;
  --giving-pale: #eef4f8;
  --giving-gold: #d9aa4e;
  --giving-ink: #17212b;
  background: #fff;
  color: var(--giving-ink);
}

.giving-page .section {
  padding: clamp(3.5rem, 7vw, 7rem) clamp(1.25rem, 5vw, 4rem);
}

.giving-narrow,
.giving-hero__inner,
.giving-card-grid,
.giving-story__layout,
.giving-pledge__panel {
  width: min(100%, 74rem);
  margin-inline: auto;
}

.giving-narrow {
  width: min(100%, 60rem);
}

.giving-eyebrow {
  margin: 0 0 0.8rem;
  color: var(--giving-blue);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.giving-hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(30rem, 68vh, 43rem);
  display: grid;
  align-items: center;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(12, 40, 66, 0.96) 0%, rgba(23, 63, 103, 0.88) 54%, rgba(23, 63, 103, 0.42) 100%),
    url("../images/stained-glass.png") center 42% / cover no-repeat;
}

.giving-hero__inner {
  position: relative;
  z-index: 1;
}

.giving-hero .giving-eyebrow {
  color: #f1c66d;
}

.giving-hero h1 {
  max-width: 10ch;
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(4rem, 10vw, 8rem);
  font-weight: 750;
  letter-spacing: -0.05em;
  line-height: 0.95;
}

.giving-hero__lead {
  max-width: 43rem;
  margin: 1.5rem 0 2rem;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  line-height: 1.65;
}

.giving-open {
  border: 2px solid #fff;
  background: #fff;
  color: var(--giving-navy);
}

/* Keep the shortcode-rendered Giving button with the hero copy. */
.giving-hero__inner .giving-open {
  display: block;
  width: fit-content;
  margin: 1.5rem auto 0;
}

.giving-open:hover,
.giving-open:focus-visible {
  background: transparent;
  color: #fff;
}

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

.giving-introduction h2,
.giving-story h2,
.giving-pledge h2,
.giving-resources h2 {
  margin: 0;
  color: var(--giving-navy);
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 4rem);
  font-weight: 750;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.giving-video {
  margin-top: clamp(2rem, 5vw, 3.5rem);
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 1.5rem 4rem rgba(18, 47, 75, 0.18);
}

.giving-actions {
  background: var(--giving-pale);
}

.giving-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
}

.giving-card {
  display: flex;
  min-height: 24rem;
  flex-direction: column;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border: 1px solid rgba(36, 79, 122, 0.16);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 1rem 2.75rem rgba(24, 48, 72, 0.07);
}

.giving-card--featured {
  background: var(--giving-navy);
  color: #fff;
}

.giving-card__number {
  margin: 0 0 auto;
  color: rgba(36, 79, 122, 0.5);
  font-weight: 800;
  letter-spacing: 0.12em;
}

.giving-card--featured .giving-card__number {
  color: rgba(255, 255, 255, 0.58);
}

.giving-card h2 {
  margin: 3rem 0 0.8rem;
  color: var(--giving-navy);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  font-weight: 750;
  letter-spacing: -0.02em;
}

.giving-card--featured h2 {
  color: #fff;
}

.giving-card p:not(.giving-card__number) {
  margin: 0 0 1.5rem;
  line-height: 1.7;
}

.giving-text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  width: fit-content;
  margin-top: auto;
  padding: 0;
  border: 0;
  border-bottom: 2px solid currentColor;
  background: transparent;
  color: var(--giving-blue);
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.giving-card--featured .giving-text-link {
  color: #fff;
}

.giving-story__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(3rem, 8vw, 7rem);
  align-items: start;
}

.giving-story__heading {
  position: sticky;
  top: 8rem;
}

.giving-story__copy {
  font-size: 1.08rem;
  line-height: 1.85;
}

.giving-story__copy > p:first-child {
  margin-top: 0;
}

.giving-story blockquote {
  margin: 2.25rem 0;
  padding: 1.75rem 2rem;
  border-left: 5px solid var(--giving-gold);
  background: var(--giving-pale);
  color: var(--giving-navy);
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.45;
}

.giving-story blockquote p {
  margin: 0;
}

.giving-story blockquote cite {
  display: block;
  margin-top: 0.8rem;
  font-family: inherit;
  font-size: 0.72em;
  font-style: normal;
}

.giving-pledge {
  background: var(--giving-navy);
  color: #fff;
}

.giving-pledge__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.giving-pledge .giving-eyebrow {
  color: #f1c66d;
}

.giving-pledge h2 {
  color: #fff;
}

.giving-pledge__panel p:not(.giving-eyebrow) {
  max-width: 50rem;
  line-height: 1.75;
}

.giving-pledge .button--secondary {
  border-color: #fff;
  color: #fff;
  white-space: nowrap;
}

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

.giving-resource-list {
  margin-top: 2.5rem;
  border-top: 1px solid rgba(36, 79, 122, 0.2);
}

.giving-resource-list a {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid rgba(36, 79, 122, 0.2);
  color: var(--giving-navy);
  font-weight: 750;
  text-align: left;
  text-decoration: none;
}

.giving-resource-list a:hover,
.giving-resource-list a:focus-visible {
  color: #000;
}

.giving-contact {
  margin: 2rem 0 0;
}

.giving-contact a {
  font-weight: 800;
}

body.giving-modal-open {
  overflow: hidden;
}

.giving-modal[hidden] {
  display: none;
}

.giving-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  padding: clamp(0.75rem, 3vw, 2rem);
}

.giving-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 18, 30, 0.78);
  backdrop-filter: blur(5px);
}

.giving-modal__dialog {
  position: relative;
  width: min(100%, 58rem);
  max-height: calc(100vh - clamp(1.5rem, 6vw, 4rem));
  overflow: auto;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.35);
  outline: none;
}

.giving-modal__header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem clamp(1.25rem, 4vw, 2.5rem);
  border-bottom: 1px solid rgba(36, 79, 122, 0.16);
  background: #fff;
}

.giving-modal__header h2 {
  margin: 0;
  color: var(--giving-navy, #173f67);
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.75rem);
  font-weight: 750;
  letter-spacing: -0.025em;
}

.giving-modal__close {
  flex: 0 0 auto;
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(36, 79, 122, 0.25);
  border-radius: 50%;
  background: #fff;
  color: #173f67;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

.giving-modal__close:hover,
.giving-modal__close:focus-visible {
  background: #173f67;
  color: #fff;
}

.giving-modal__content {
  min-height: 28rem;
  padding: clamp(1rem, 3vw, 2rem);
}

.giving-modal__loading {
  display: flex;
  min-height: 18rem;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  color: #244f7a;
  font-weight: 750;
}

.giving-spinner {
  width: 1.7rem;
  height: 1.7rem;
  border: 3px solid rgba(36, 79, 122, 0.2);
  border-top-color: #244f7a;
  border-radius: 50%;
  animation: giving-spin 0.8s linear infinite;
}

.giving-modal__error {
  max-width: 32rem;
  padding: 1rem 1.2rem;
  border-left: 4px solid #9f2f2f;
  background: #fff0f0;
  color: #6f2020;
}

@keyframes giving-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 850px) {
  .giving-card-grid,
  .giving-story__layout,
  .giving-pledge__panel {
    grid-template-columns: 1fr;
  }

  .giving-card {
    min-height: 20rem;
  }

  .giving-story__heading {
    position: static;
  }

  .giving-pledge .button--secondary {
    white-space: normal;
  }
}

@media (max-width: 620px) {
  .giving-hero {
    min-height: 32rem;
    background-position: 58% center;
  }

  .giving-modal {
    padding: 0;
  }

  .giving-modal__dialog {
    width: 100%;
    max-height: 100vh;
    min-height: 100vh;
    border-radius: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .giving-spinner {
    animation: none;
  }
}

/* ======================================================================
   SERMON ARCHIVE PAGE
   Automatic presentation for the /sermons/ page supplied by CUMC Sermons.
   ====================================================================== */
.page-hero--sermons{padding-block:0;background:linear-gradient(120deg,#173b5d,#2f5f91 68%,#d9a441);color:#fff}.page-hero--sermons .page-hero__inner{padding-block:clamp(2.75rem,4vw,3.5rem)}.page-hero--sermons h1{max-width:12ch;margin:.2rem 0 1rem;font-family: var(--font-display);font-size:clamp(3rem,7vw,5.7rem);font-weight:500}.page-hero--sermons p:last-child{max-width:42rem;margin:0;font-size:1.18rem}.cumc-sermons-page .cumc-sermon-browser{position:relative}

/* ======================================================================
   32. CUMC MEGA MENU
   First-level child pages become wide, visual cards on desktop. WordPress
   menu management remains unchanged; mobile uses explicit expand buttons.
   ====================================================================== */
@media (min-width: 50.01rem) {
  .site-header__inner {
    position: static;
  }

  .primary-navigation__menu > .menu-item-has-children {
    position: static;
  }

  .primary-navigation .sub-menu {
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-.5rem);
    grid-auto-flow: column;
    grid-auto-columns: 14.25rem;
    grid-template-columns: none;
    justify-content: start;
    width: max-content;
    max-width: min(calc(100vw - 2rem), var(--page-width));
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 1rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
  }

  .primary-navigation .sub-menu::before {
    inset: -1rem 0 auto;
    height: 1rem;
  }

  .primary-navigation .menu-item-has-children.is-submenu-hover > .sub-menu,
  .primary-navigation .menu-item-has-children:focus-within > .sub-menu,
  .primary-navigation .menu-item-has-children.is-submenu-open > .sub-menu {
    display: grid;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }

  .primary-navigation .sub-menu li {
    display: flex;
    min-width: 0;
    min-height: 15rem;
    border-right: 1px solid var(--border);
  }

  .primary-navigation .sub-menu li:last-child {
    border-right: 0;
  }

  .primary-navigation .sub-menu a {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1.35rem;
    min-width: 0;
    padding: 2rem 1.5rem 1.65rem;
    border-radius: 0;
    white-space: normal;
  }

  .primary-navigation .sub-menu a:hover,
  .primary-navigation .sub-menu a:focus {
    background: var(--surface-soft);
  }

  .mega-menu-card__icon {
    display: block;
    width: 3.25rem;
    height: 3.25rem;
    color: var(--accent);
  }

  .mega-menu-card__icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mega-menu-card__copy,
  .mega-menu-card__title {
    display: block;
  }

  .mega-menu-card__title {
    color: var(--text);
    font-size: 1.12rem;
    font-weight: 750;
    line-height: 1.18;
  }

  .submenu-toggle {
    display: none;
  }
}

@media (max-width: 50rem) {
  .primary-navigation__menu {
    width: 100%;
  }

  .primary-navigation__menu > li {
    position: relative;
    width: 100%;
  }

  .primary-navigation__menu > li > a {
    display: block;
    padding: .65rem 2.75rem .65rem .5rem;
  }

  .primary-navigation .menu-item-has-children > a::after {
    content: none;
  }

  .submenu-toggle {
    position: absolute;
    top: .35rem;
    right: .25rem;
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: transparent;
  }

  .submenu-toggle::before {
    content: "+";
    color: var(--accent-dark);
    font-size: 1.45rem;
    line-height: 1;
  }

  .menu-item-has-children.is-submenu-open > .submenu-toggle::before {
    content: "−";
  }

  .primary-navigation .sub-menu {
    display: none;
    margin-left: .5rem;
  }

  .primary-navigation .menu-item-has-children.is-submenu-open > .sub-menu {
    display: grid;
  }

  .primary-navigation .sub-menu a {
    display: grid;
    grid-template-columns: 2.2rem 1fr;
    align-items: center;
    gap: .7rem;
  }

  .mega-menu-card__icon {
    display: block;
    width: 2rem;
    height: 2rem;
    color: var(--accent);
  }

  .mega-menu-card__icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mega-menu-card__title {
    display: block;
  }
}

/* CUMC accordion section ----------------------------------------------- */
.cumc-accordion-section > h2 {
  margin-bottom: clamp(1.35rem, 2.5vw, 2.25rem);
}

/* Anchor-linked accordion rows should clear the sticky site header when opened. */
.cumc-accordion .wp-block-details,
.cumc-accordion [id] {
  scroll-margin-top: 8rem;
}

.cumc-accordion {
  border-top: 1px solid rgba(20, 45, 75, 0.22);
}

.cumc-accordion .wp-block-details {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid rgba(20, 45, 75, 0.22);
}

.cumc-accordion .wp-block-details summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 5.25rem;
  padding: 1.25rem 3.5rem 1.25rem 0;
  color: var(--wp--preset--color--accent-dark, #17365f);
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  font-weight: 650;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}

.cumc-accordion .wp-block-details summary::-webkit-details-marker {
  display: none;
}

.cumc-accordion .wp-block-details summary::after {
  content: "";
  position: absolute;
  right: 0.45rem;
  top: 50%;
  width: 0.72rem;
  height: 0.72rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-65%) rotate(45deg);
  transition: transform 160ms ease;
}

.cumc-accordion .wp-block-details[open] summary::after {
  transform: translateY(-30%) rotate(225deg);
}

.cumc-accordion .wp-block-details summary:hover,
.cumc-accordion .wp-block-details summary:focus-visible {
  color: var(--wp--preset--color--accent, #2f6497);
}

.cumc-accordion .wp-block-details summary:focus-visible {
  outline: 3px solid rgba(47, 100, 151, 0.28);
  outline-offset: 4px;
}

.cumc-accordion .wp-block-details > :not(summary) {
  max-width: 62rem;
  margin-top: 0;
  margin-bottom: 1.75rem;
}

.cumc-accordion .wp-block-details > :not(summary):last-child {
  margin-bottom: 1.75rem;
}

@media (max-width: 600px) {
  .cumc-accordion .wp-block-details summary {
    min-height: 4.5rem;
    padding-right: 2.75rem;
  }
}

/* ================================================================
   34. FILTERABLE NEWS / EVENTS DIRECTORY
   Presentation for the [cumc_post_directory] shortcode from CUMC Core.
   ================================================================ */
.cumc-post-directory {
  width: min(72rem, calc(100% - 2rem));
  margin: 2rem auto 4rem;
}

.cumc-post-filters {
  display: grid;
  grid-template-columns: minmax(9rem, .8fr) minmax(9rem, .8fr) minmax(9rem, .8fr) minmax(13rem, 1.4fr) auto;
  align-items: end;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  margin: 0 0 2rem;
  background: #fff;
  border: 1px solid rgba(20, 45, 70, .14);
  border-radius: 1rem;
  box-shadow: 0 .35rem 1.2rem rgba(20, 45, 70, .07);
}

.cumc-post-filter {
  display: grid;
  gap: .35rem;
  min-width: 0;
}

.cumc-post-filter label {
  font-size: .9rem;
  font-weight: 700;
}

.cumc-post-filter select,
.cumc-post-filter input[type="search"] {
  width: 100%;
  min-height: 2.75rem;
  padding: .55rem .75rem;
  border: 1px solid rgba(20, 45, 70, .28);
  border-radius: .55rem;
  background: #fff;
  color: inherit;
  font: inherit;
}

.cumc-post-filter select {
  padding-right: 2rem;
}

.cumc-post-filter__actions {
  display: flex;
  align-items: center;
  gap: .85rem;
  white-space: nowrap;
}

.cumc-post-filter__clear {
  font-weight: 700;
}

/* One chronological event/news item per row for fast scanning. */
.cumc-post-directory__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.cumc-post-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  min-width: 0;
  background: #fff;
  border: 1px solid rgba(20, 45, 70, .12);
  border-radius: 1rem;
  box-shadow: 0 .35rem 1.2rem rgba(20, 45, 70, .07);
}

.cumc-post-card:has(.cumc-post-card__image) {
  grid-template-columns: minmax(10rem, 15rem) minmax(0, 1fr);
}

.cumc-post-card__image {
  display: block;
  min-height: 10rem;
  overflow: hidden;
  background: rgba(20, 45, 70, .04);
}

.cumc-post-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cumc-post-card__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "meta action"
    "title action"
    "excerpt action";
  column-gap: 2rem;
  align-items: center;
  padding: 1.35rem 1.5rem;
}

.cumc-post-card__meta {
  grid-area: meta;
  align-self: end;
  margin: 0 0 .35rem;
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .01em;
  opacity: .72;
}

.cumc-post-card__title {
  grid-area: title;
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  line-height: 1.15;
}

.cumc-post-card__title a {
  color: inherit;
  text-decoration: none;
}

.cumc-post-card__title a:hover,
.cumc-post-card__title a:focus-visible {
  text-decoration: underline;
  text-underline-offset: .15em;
}

.cumc-post-card__excerpt {
  grid-area: excerpt;
  align-self: start;
  max-width: 52rem;
  margin: .55rem 0 0;
  line-height: 1.5;
}

.cumc-post-card__actions {
  grid-area: action;
  margin: 0;
  padding: 0;
  align-self: center;
}

.cumc-post-card__button,
.cumc-event-action,
.cumc-event-read-more {
  display: inline-flex;
  width: auto;
  text-decoration: none;
  white-space: nowrap;
}

.cumc-post-directory__pagination {
  margin-top: 2rem;
}

.cumc-post-directory__pagination .page-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: 0;
  list-style: none;
}

.cumc-post-directory__pagination a,
.cumc-post-directory__pagination span {
  display: inline-flex;
  min-width: 2.5rem;
  min-height: 2.5rem;
  align-items: center;
  justify-content: center;
  padding: .4rem .75rem;
  border: 1px solid rgba(20, 45, 70, .2);
  border-radius: .5rem;
}

.cumc-post-directory__empty {
  padding: 1.5rem;
  text-align: center;
  background: rgba(20, 45, 70, .05);
  border-radius: .75rem;
}

@media (max-width: 1050px) {
  .cumc-post-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cumc-post-filter--search {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .cumc-post-filters {
    grid-template-columns: 1fr;
  }

  .cumc-post-filter--search {
    grid-column: auto;
  }

  .cumc-post-filter__actions {
    flex-wrap: wrap;
  }

  .cumc-post-card:has(.cumc-post-card__image) {
    grid-template-columns: 1fr;
  }

  .cumc-post-card__image {
    aspect-ratio: 16 / 9;
    min-height: 0;
  }

  .cumc-post-card__body {
    grid-template-columns: 1fr;
    grid-template-areas:
      "meta"
      "title"
      "excerpt"
      "action";
    row-gap: .25rem;
  }

  .cumc-post-card__actions {
    margin-top: 1rem;
  }
}

/* 0.9.17 — The designed Event card is the complete directory result. */
.cumc-post-card--designed-event {
  display: block;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.cumc-post-card__event-content > :first-child {
  margin-top: 0;
}

.cumc-post-card__event-content > :last-child {
  margin-bottom: 0;
}

/* The Event post's own card fills the directory row rather than inheriting
   the narrower content width used on a single Event page. */
.cumc-post-card__event-content .event-card,
.cumc-post-card__event-content .wp-block-columns.event-card {
  width: 100%;
  max-width: none;
  margin: 0;
}

/* Event-specific CTAs and the optional Read More link are both legitimate
   actions inside a directory card. */
.cumc-post-card__event-content .cumc-event-action,
.cumc-post-card__event-content .cumc-event-read-more {
  margin-top: .75rem;
}


/* 0.9.18 — Tighten designed Event cards when reused in the directory.
   Event posts commonly wrap the editable card in a top-level Group block.
   On a normal single Event page that wrapper may provide intentional page
   breathing room, but in the directory it creates an oversized gap between
   consecutive cards. Keep the single page untouched and neutralize only the
   directory copy of that outer wrapper. */
.cumc-post-card__event-content > .wp-block-group {
  margin-block: 0 !important;
  padding-block: 0 !important;
  min-height: 0 !important;
}

.cumc-post-card__event-content > .wp-block-group > :first-child {
  margin-top: 0 !important;
}

.cumc-post-card__event-content > .wp-block-group > :last-child {
  margin-bottom: 0 !important;
}

.cumc-post-directory__grid {
  gap: 1.25rem;
}


/* 0.9.19 — Structured Event details above designed directory cards. */
.cumc-event-directory-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .8rem;
  margin: 0 0 .65rem;
  padding: 0 .15rem;
  color: var(--wp--preset--color--navy, #173b63);
  font-size: .95rem;
  line-height: 1.35;
  font-weight: 700;
}

.cumc-event-directory-meta__item {
  display: inline-flex;
  align-items: center;
}

.cumc-event-directory-meta__item + .cumc-event-directory-meta__item::before {
  content: "•";
  margin-right: .8rem;
  opacity: .45;
}

.cumc-event-directory-meta__location {
  font-weight: 600;
}

/* 0.9.21 — Keep month-specific recurrence exceptions readable. */
.cumc-event-directory-meta--has-exceptions .cumc-event-directory-meta__schedule {
  flex-basis: 100%;
}

.cumc-event-directory-meta--has-exceptions .cumc-event-directory-meta__schedule + .cumc-event-directory-meta__item::before {
  content: none;
  margin-right: 0;
}

@media (max-width: 600px) {
  .cumc-event-directory-meta {
    gap: .25rem .55rem;
    margin-bottom: .5rem;
    font-size: .9rem;
  }

  .cumc-event-directory-meta__item + .cumc-event-directory-meta__item::before {
    margin-right: .55rem;
  }
}


/* 0.9.20 — Event name above directory metadata and designed card. */
.cumc-event-directory-title {
  margin: 0 0 .25rem;
  padding: 0 .15rem;
  color: var(--wp--preset--color--navy, #173b63);
  font-size: clamp(1.2rem, 1.5vw, 1.45rem);
  line-height: 1.2;
  font-weight: 700;
}

.cumc-event-directory-title a {
  color: inherit;
  text-decoration: none;
}

.cumc-event-directory-title a:hover,
.cumc-event-directory-title a:focus-visible {
  text-decoration: underline;
  text-underline-offset: .16em;
}

@media (max-width: 600px) {
  .cumc-event-directory-title {
    margin-bottom: .2rem;
    font-size: 1.15rem;
  }
}

/* 0.9.22 — Reusable CUMC event registration modal. */
html.cumc-registration-is-open,
html.cumc-registration-is-open body {
  overflow: hidden;
}

.cumc-registration-modal[hidden] {
  display: none;
}

.cumc-registration-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.cumc-registration-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 24, 40, .62);
}

.cumc-registration-modal__dialog {
  position: relative;
  width: min(100%, 36rem);
  max-height: calc(100vh - 2rem);
  overflow: auto;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 1.25rem 4rem rgba(10, 24, 40, .28);
}

.cumc-registration-modal__close {
  position: absolute;
  top: .75rem;
  right: .85rem;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--wp--preset--color--navy, #173b63);
  font: inherit;
  font-size: 1.85rem;
  line-height: 1;
  cursor: pointer;
}

.cumc-registration-modal__close:hover,
.cumc-registration-modal__close:focus-visible {
  background: rgba(23, 59, 99, .08);
}

.cumc-registration-modal__eyebrow {
  margin: 0 0 .3rem;
  color: var(--wp--preset--color--navy, #173b63);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.cumc-registration-modal__header h2 {
  margin: 0;
  padding-right: 2rem;
  color: var(--wp--preset--color--navy, #173b63);
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.15;
}

.cumc-registration-modal__date {
  margin: .4rem 0 1.4rem;
  font-weight: 700;
}

.cumc-registration-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.cumc-registration-field {
  margin: 0 0 1rem;
}

.cumc-registration-field label {
  display: block;
  margin-bottom: .3rem;
  font-weight: 700;
}

.cumc-registration-field input {
  box-sizing: border-box;
  width: 100%;
  min-height: 2.8rem;
  padding: .6rem .75rem;
  border: 1px solid rgba(23, 59, 99, .3);
  border-radius: .45rem;
  background: #fff;
  color: inherit;
  font: inherit;
}

.cumc-registration-field input:focus {
  outline: 3px solid rgba(23, 59, 99, .18);
  outline-offset: 1px;
  border-color: var(--wp--preset--color--navy, #173b63);
}

.cumc-registration-form__hint {
  margin: -.25rem 0 1rem;
  font-size: .92rem;
}

.cumc-registration-form__message {
  min-height: 1.5rem;
  margin: 0 0 .75rem;
  font-weight: 700;
}

.cumc-registration-form__message.is-error {
  color: #9a2c2c;
}

.cumc-registration-form__message.is-success {
  color: #28613a;
}

.cumc-registration-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
}

.cumc-registration-cancel {
  border: 0;
  background: transparent;
  color: var(--wp--preset--color--navy, #173b63);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .16em;
  cursor: pointer;
}

.cumc-registration-open.is-registered {
  opacity: .85;
}

.cumc-registration-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

@media (max-width: 600px) {
  .cumc-registration-modal {
    align-items: start;
    padding: .65rem;
  }

  .cumc-registration-modal__dialog {
    max-height: calc(100vh - 1.3rem);
    padding: 1.35rem 1.1rem;
  }

  .cumc-registration-form__row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* 0.9.24 — Position the automatic Register button inside designed Event cards.
   The button paragraph is appended after the editable .event-card by Core.
   Making the event-content wrapper the positioning context lets that automatic
   action sit over the card's lower-right corner without changing editor content. */
.cumc-post-card--designed-event .cumc-post-card__event-content {
  position: relative;
}

.cumc-post-card--designed-event .cumc-registration-auto-action {
  position: absolute;
  right: clamp(1rem, 2vw, 1.5rem);
  bottom: clamp(1rem, 2vw, 1.5rem);
  z-index: 2;
  margin: 0;
}

/* Give the card's text side extra breathing room only when an automatic
   registration action is actually present. Without this condition, every
   designed Event card reserved nearly 5rem of empty space at the bottom. */
.cumc-post-card--designed-event .cumc-post-card__event-content:has(.cumc-registration-auto-action) .event-card__body {
  padding-bottom: 4.75rem;
}

@media (max-width: 700px) {
  .cumc-post-card--designed-event .cumc-registration-auto-action {
    right: 1rem;
    bottom: 1rem;
  }

  .cumc-post-card--designed-event .cumc-post-card__event-content:has(.cumc-registration-auto-action) .event-card__body {
    padding-bottom: 4.5rem;
  }
}


/* 0.9.25 — Use CUMC navy for registration buttons instead of the default black. */
.cumc-registration-open,
.cumc-registration-form .wp-element-button {
  background: var(--wp--preset--color--navy, #173b63);
  color: #fff;
}

.cumc-registration-open:hover,
.cumc-registration-open:focus-visible,
.cumc-registration-form .wp-element-button:hover,
.cumc-registration-form .wp-element-button:focus-visible {
  background: #244f7a;
  color: #fff;
}


/* 0.9.26 — Fluent Forms inside the reusable CUMC modal. */
.cumc-registration-form-panel[hidden] {
  display: none !important;
}

.cumc-registration-form .frm-fluent-form .ff-el-group {
  margin-bottom: 1rem;
}

.cumc-registration-form .frm-fluent-form label {
  color: inherit;
  font-weight: 700;
}

.cumc-registration-form .frm-fluent-form input[type="text"],
.cumc-registration-form .frm-fluent-form input[type="email"],
.cumc-registration-form .frm-fluent-form input[type="tel"],
.cumc-registration-form .frm-fluent-form input[type="number"],
.cumc-registration-form .frm-fluent-form textarea,
.cumc-registration-form .frm-fluent-form select {
  box-sizing: border-box;
  width: 100%;
  min-height: 2.8rem;
  padding: .6rem .75rem;
  border: 1px solid rgba(23, 59, 99, .3);
  border-radius: .45rem;
  background: #fff;
  color: inherit;
  font: inherit;
}

.cumc-registration-form .frm-fluent-form input:focus,
.cumc-registration-form .frm-fluent-form textarea:focus,
.cumc-registration-form .frm-fluent-form select:focus {
  outline: 3px solid rgba(23, 59, 99, .18);
  outline-offset: 1px;
  border-color: var(--wp--preset--color--navy, #173b63);
}

.cumc-registration-form .frm-fluent-form .ff-btn-submit,
.cumc-registration-form .frm-fluent-form button[type="submit"] {
  border: 0;
  border-radius: .2rem;
  padding: .72rem 1.25rem;
  background: var(--wp--preset--color--navy, #173b63);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.cumc-registration-form .frm-fluent-form .ff-btn-submit:hover,
.cumc-registration-form .frm-fluent-form .ff-btn-submit:focus-visible,
.cumc-registration-form .frm-fluent-form button[type="submit"]:hover,
.cumc-registration-form .frm-fluent-form button[type="submit"]:focus-visible {
  background: #244f7a;
  color: #fff;
}

.cumc-registration-modal__footer-action {
  margin: .9rem 0 0;
}


/* ======================================================================
   0.9.30 — IMPORTED LEGACY POST HYBRID LAYOUT
   Historical posts get one of two presentations without changing native/new
   CUMC posts: compact thumbnail-and-copy cards for short announcements, and a
   centered reading layout with rendered-height expansion for long material.
   ====================================================================== */
.cumc-post-card--inline {
  display: block;
  overflow: hidden;
}

.cumc-post-card--inline .cumc-post-card__body {
  display: block;
  padding: clamp(1.2rem, 2.5vw, 1.75rem);
}

.cumc-post-card--inline .cumc-post-card__meta {
  margin: 0 0 .35rem;
}

.cumc-post-card--inline .cumc-post-card__title {
  margin: 0 0 1rem;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
}

/* Everything below is deliberately limited to imported historical posts. */
.cumc-post-card--imported .cumc-post-card__imported-shell {
  display: block;
}

.cumc-post-card--imported .cumc-post-card__imported-main,
.cumc-post-card--imported .cumc-post-card__featured-image,
.cumc-post-card--imported .cumc-post-card__content-wrap {
  width: 100%;
  max-width: 52rem;
  margin-inline: auto;
}

.cumc-post-card--imported .cumc-post-card__featured-image {
  margin-bottom: 1.15rem;
}

.cumc-post-card--imported .cumc-post-card__content img,
.cumc-post-card--imported .cumc-post-card__featured-image img {
  display: block;
  width: auto;
  max-width: min(100%, 44rem);
  height: auto;
  margin-inline: auto;
}

.cumc-post-card--imported .cumc-post-card__content > :first-child {
  margin-top: 0;
}

.cumc-post-card--imported .cumc-post-card__content > :last-child {
  margin-bottom: 0;
}

.cumc-post-card--imported .cumc-post-card__content p {
  margin-block: 0 1rem;
}

.cumc-post-card--imported .cumc-post-card__content figure,
.cumc-post-card--imported .cumc-post-card__content .wp-block-image,
.cumc-post-card--imported .cumc-post-card__content .gallery,
.cumc-post-card--imported .cumc-post-card__content .wp-block-gallery {
  max-width: 100%;
}

/* Historical galleries get a responsive modern grid. */
.cumc-post-card--imported .cumc-post-card__content .gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  margin: 1.35rem 0;
}

.cumc-post-card--imported .cumc-post-card__content .gallery-item {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}

.cumc-post-card--imported .cumc-post-card__content .gallery-item img,
.cumc-post-card--imported .cumc-post-card__content .wp-block-gallery img {
  width: 100%;
  max-width: 100%;
}

.cumc-post-card--imported .cumc-post-card__content iframe,
.cumc-post-card--imported .cumc-post-card__content video,
.cumc-post-card--imported .cumc-post-card__content embed,
.cumc-post-card--imported .cumc-post-card__content object {
  max-width: 100%;
}


/* 0.9.30 surgical refinement: imported posts always render their featured
   image so the compact classifier can reproduce the production-style
   thumbnail-and-copy rhythm. If the body already contains imagery, suppress
   that extra featured image in full reading mode to avoid duplication. */
.cumc-post-card--imported.cumc-post-card--content-has-image:not(.cumc-post-card--compact) .cumc-post-card__featured-image {
  display: none;
}

/* Compact mode is applied only after JavaScript measures a genuinely short
   imported post that has a featured image. */
@media (min-width: 760px) {
  .cumc-post-card--imported.cumc-post-card--compact .cumc-post-card__body {
    padding: 1rem 1.2rem;
  }

  .cumc-post-card--imported.cumc-post-card--compact .cumc-post-card__imported-shell {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 1.55rem;
    align-items: start;
  }

  .cumc-post-card--imported.cumc-post-card--compact .cumc-post-card__featured-image,
  .cumc-post-card--imported.cumc-post-card--compact .cumc-post-card__imported-main,
  .cumc-post-card--imported.cumc-post-card--compact .cumc-post-card__content-wrap {
    max-width: none;
    margin: 0;
  }

  .cumc-post-card--imported.cumc-post-card--compact .cumc-post-card__featured-image {
    margin: .1rem 0 0;
  }

  .cumc-post-card--imported.cumc-post-card--compact .cumc-post-card__featured-image img {
    width: 100%;
    max-width: 15rem;
    max-height: 13rem;
    object-fit: contain;
    object-position: center top;
    margin: 0;
  }

  .cumc-post-card--imported.cumc-post-card--compact .cumc-post-card__meta {
    margin-bottom: .25rem;
    font-size: .9rem;
  }

  .cumc-post-card--imported.cumc-post-card--compact .cumc-post-card__title {
    margin-bottom: .55rem;
    font-size: clamp(1.35rem, 2vw, 1.7rem);
  }

  .cumc-post-card--imported.cumc-post-card--compact .cumc-post-card__content {
    font-size: .98rem;
    line-height: 1.52;
  }

  .cumc-post-card--imported.cumc-post-card--compact .cumc-post-card__content p {
    margin-bottom: .7rem;
  }
}

/* Long historical material remains a reading column and collapses only when
   its actual rendered body is taller than the threshold in CUMC Core. */
.cumc-post-card--imported .cumc-post-card__content-wrap {
  position: relative;
}

.cumc-post-card--imported .cumc-post-card__content-wrap.is-collapsed {
  max-height: 60rem;
  overflow: hidden;
}

.cumc-post-card--imported .cumc-post-card__content-wrap.is-collapsed::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 8rem;
  pointer-events: none;
  background: linear-gradient(to bottom, rgb(255 255 255 / 0%), #fff 88%);
}

.cumc-post-card--imported .cumc-post-card__expand {
  display: flex;
  width: max-content;
  margin: 1.1rem auto 0;
  cursor: pointer;
}

.cumc-post-card--imported .cumc-post-card__expand[hidden] {
  display: none;
}

@media (max-width: 759px) {
  .cumc-post-card--imported .cumc-post-card__body {
    padding: 1.1rem;
  }

  .cumc-post-card--imported .cumc-post-card__featured-image img {
    max-width: min(100%, 28rem);
  }

  .cumc-post-card--imported .cumc-post-card__content .gallery {
    grid-template-columns: 1fr;
  }

  .cumc-post-card--imported .cumc-post-card__content-wrap.is-collapsed {
    max-height: 52rem;
  }
}

@media (min-width: 760px) and (max-width: 980px) {
  .cumc-post-card--imported .cumc-post-card__content .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ======================================================================
   33. CUMC MEGA MENU — COMPACT SIX-ACROSS + SECOND-LEVEL CARDS
   0.9.31
   Keeps first-level mega-menu cards compact enough for six across on a
   standard desktop. A first-level card may itself have children; those
   second-level destinations appear as a smaller, softly tinted card panel.
   ====================================================================== */
@media (min-width: 50.01rem) {
  /* Six first-level cards fit inside the normal 72rem site width. */
  .primary-navigation__menu > .menu-item-has-children > .sub-menu {
    grid-auto-columns: 11.75rem;
    max-width: min(calc(100vw - 2rem), var(--page-width));
    overflow: visible;
  }

  .primary-navigation__menu > .menu-item-has-children > .sub-menu > li {
    position: relative;
    min-height: 11.25rem;
    background: #fff;
  }

  .primary-navigation__menu > .menu-item-has-children > .sub-menu > li > a {
    gap: .95rem;
    padding: 1.35rem 1.1rem 1.15rem;
  }

  .primary-navigation__menu > .menu-item-has-children > .sub-menu > li > a .mega-menu-card__icon {
    width: 2.65rem;
    height: 2.65rem;
  }

  .primary-navigation__menu > .menu-item-has-children > .sub-menu > li > a .mega-menu-card__title {
    font-size: 1.02rem;
    line-height: 1.16;
  }

  /* A card that owns another level gets a small visual cue. */
  .primary-navigation__menu > .menu-item-has-children > .sub-menu > .menu-item-has-children > a::after {
    content: "›";
    position: absolute;
    right: .8rem;
    bottom: .65rem;
    margin: 0;
    color: var(--accent);
    font-size: 1.3rem;
    line-height: 1;
  }

  /* Second-level submenu cards. Deliberately smaller and slightly tinted so
     their hierarchy is obvious without looking like a separate navigation. */
  .primary-navigation__menu > .menu-item-has-children > .sub-menu > li > .sub-menu {
    top: calc(100% + .45rem);
    left: 0;
    z-index: 80;
    display: none;
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(9.5rem, 1fr));
    gap: .45rem;
    width: max-content;
    min-width: 30rem;
    max-width: min(46rem, calc(100vw - 2rem));
    padding: .55rem;
    transform: translateY(-.25rem);
    border: 1px solid var(--border);
    border-radius: .75rem;
    background: var(--surface-soft);
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
  }

  .primary-navigation__menu > .menu-item-has-children > .sub-menu > li > .sub-menu::before {
    inset: -.5rem 0 auto;
    height: .5rem;
  }

  .primary-navigation__menu > .menu-item-has-children > .sub-menu > li.is-submenu-hover > .sub-menu,
  .primary-navigation__menu > .menu-item-has-children > .sub-menu > li:focus-within > .sub-menu,
  .primary-navigation__menu > .menu-item-has-children > .sub-menu > li.is-submenu-open > .sub-menu {
    display: grid;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  .primary-navigation__menu > .menu-item-has-children > .sub-menu > li > .sub-menu > li {
    display: block;
    min-height: 0;
    border: 0;
    border-radius: .45rem;
    background: #e8f0f7;
  }

  .primary-navigation__menu > .menu-item-has-children > .sub-menu > li > .sub-menu > li > a {
    display: block;
    min-height: 0;
    padding: .72rem .8rem;
    border-radius: .45rem;
    color: var(--text);
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.2;
  }

  .primary-navigation__menu > .menu-item-has-children > .sub-menu > li > .sub-menu > li > a:hover,
  .primary-navigation__menu > .menu-item-has-children > .sub-menu > li > .sub-menu > li > a:focus {
    background: #dce9f5;
    color: var(--accent-dark);
  }

  /* Nested toggles are unnecessary with pointer/focus interaction on desktop. */
  .submenu-toggle--nested {
    display: none;
  }
}

@media (max-width: 50rem) {
  /* On phones/tablets, second-level children are explicit collapsible lists. */
  .primary-navigation .sub-menu > .menu-item-has-children {
    position: relative;
  }

  .primary-navigation .sub-menu > .menu-item-has-children > a {
    padding-right: 2.75rem;
  }

  .primary-navigation .sub-menu > .menu-item-has-children > .sub-menu {
    display: none;
    margin: .2rem 0 .35rem 2.25rem;
    padding: .25rem 0 .25rem .7rem;
    border-left: 2px solid var(--accent-light);
    background: transparent;
  }

  .primary-navigation .sub-menu > .menu-item-has-children.is-submenu-open > .sub-menu {
    display: grid;
  }

  .primary-navigation .sub-menu > .menu-item-has-children > .submenu-toggle--nested {
    top: .25rem;
    right: .2rem;
    display: grid;
    width: 2rem;
    height: 2rem;
  }

  .primary-navigation .sub-menu .sub-menu a {
    display: block;
    padding: .45rem .55rem;
    font-size: .88rem;
  }
}

/* ======================================================================
   35. SITE-WIDE ALERT BAR
   Weather closures, outages, urgent schedule changes, and other temporary
   announcements. Staff control this under Appearance -> Customize ->
   CUMC Alert Bar.
   ====================================================================== */
.cumc-alert-bar {
  position: relative;
  z-index: 900;
  overflow: hidden;
  border-bottom: 2px solid #6d0f16;
  background: #8f1720;
  color: #fff;
}

.cumc-alert-bar__viewport {
  overflow: hidden;
  width: 100%;
}

.cumc-alert-bar__track {
  display: block;
  width: 100%;
}

.cumc-alert-bar__message {
  display: block;
  width: max-content;
  min-width: 100%;
  padding: .72rem 3rem;
  text-align: center;
  color: #fff;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: .01em;
  white-space: nowrap;
  animation: cumc-alert-scroll 18s linear infinite;
  will-change: transform;
}

.cumc-alert-bar:hover .cumc-alert-bar__message,
.cumc-alert-bar:focus-within .cumc-alert-bar__message {
  animation-play-state: paused;
}

@keyframes cumc-alert-scroll {
  from { transform: translateX(100vw); }
  to { transform: translateX(-100%); }
}

@media (max-width: 50rem) {
  .cumc-alert-bar__message {
    width: auto;
    min-width: 0;
    padding: .7rem 1rem;
    white-space: normal;
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cumc-alert-bar__message {
    width: auto;
    min-width: 0;
    white-space: normal;
    animation: none;
  }
}


/* ======================================================================
   0.9.37 — IMPORTED / CLASSIC PAGE ADAPTER
   Gives production-era pages a clean CUMC presentation without changing
   current Gutenberg pages or requiring the old production theme.
   ====================================================================== */

/* Legacy pages use the same readable 72rem site grid as current pages. */
.cumc-page-content .cumc-legacy-page {
  width: min(calc(100% - 2rem), var(--page-width));
  margin-inline: auto;
  padding-block: clamp(2rem, 4vw, 4rem);
}

.cumc-page-content .cumc-legacy-page .entry-content {
  width: 100%;
  max-width: none;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.65;
}

.cumc-legacy-page .entry-content > :first-child { margin-top: 0; }
.cumc-legacy-page .entry-content > :last-child { margin-bottom: 0; }

/* Restore useful rhythm to classic-editor HTML. */
.cumc-legacy-page .entry-content p,
.cumc-legacy-page .entry-content ul,
.cumc-legacy-page .entry-content ol,
.cumc-legacy-page .entry-content blockquote,
.cumc-legacy-page .entry-content table,
.cumc-legacy-page .entry-content figure {
  margin-top: 0;
  margin-bottom: 1.2rem;
}

.cumc-legacy-page .entry-content h1,
.cumc-legacy-page .entry-content h2,
.cumc-legacy-page .entry-content h3,
.cumc-legacy-page .entry-content h4 {
  color: var(--accent-dark);
  font-family: var(--font-display);
  font-weight: 750;
  letter-spacing: -.025em;
}

.cumc-legacy-page .entry-content h1 {
  margin: 0 0 1.5rem;
  font-size: clamp(2.25rem, 5vw, 4rem);
}

.cumc-legacy-page .entry-content h2 {
  margin: 2.4rem 0 1rem;
  font-size: clamp(1.75rem, 3.5vw, 2.7rem);
}

.cumc-legacy-page .entry-content h3 {
  margin: 2rem 0 .75rem;
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
}

.cumc-legacy-page .entry-content h4 {
  margin: 1.6rem 0 .6rem;
  font-size: 1.15rem;
}

.cumc-legacy-page .entry-content ul,
.cumc-legacy-page .entry-content ol {
  padding-left: 1.45rem;
}

.cumc-legacy-page .entry-content li + li {
  margin-top: .35rem;
}

.cumc-legacy-page .entry-content a {
  overflow-wrap: anywhere;
  font-weight: 650;
}

.cumc-legacy-page .entry-content hr {
  margin: 2.5rem 0;
  border: 0;
  border-top: 1px solid var(--border);
}

/* Old production images and captions become responsive, polished CUMC media. */
.cumc-legacy-page .entry-content img {
  max-width: 100% !important;
  height: auto !important;
}

.cumc-legacy-page .entry-content figure,
.cumc-legacy-page .entry-content .wp-caption {
  max-width: 100% !important;
}

.cumc-legacy-page .entry-content figure img,
.cumc-legacy-page .entry-content .wp-caption img {
  border-radius: .65rem;
}

.cumc-legacy-page .entry-content .wp-caption-text,
.cumc-legacy-page .entry-content figcaption {
  margin-top: .55rem;
  color: var(--muted);
  font-size: .9rem;
}

/* Classic WordPress float classes still occur in production-era pages. */
.cumc-legacy-page .entry-content .alignleft {
  float: left;
  max-width: min(48%, 30rem);
  margin: .25rem 1.5rem 1rem 0;
}

.cumc-legacy-page .entry-content .alignright {
  float: right;
  max-width: min(48%, 30rem);
  margin: .25rem 0 1rem 1.5rem;
}

.cumc-legacy-page .entry-content .aligncenter {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

/* Legacy SiteOrigin rows/cells should behave like ordinary content instead
   of inheriting dimensions from the production theme that no longer exists. */
.cumc-legacy-page .panel-grid,
.cumc-legacy-page .siteorigin-panels-stretch,
.cumc-legacy-page .panel-row-style {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

.cumc-legacy-page .panel-grid-cell,
.cumc-legacy-page .so-panel,
.cumc-legacy-page .widget,
.cumc-legacy-page .siteorigin-widget-tinymce,
.cumc-legacy-page .textwidget {
  min-width: 0;
  max-width: 100%;
}

.cumc-legacy-page .panel-grid-cell {
  padding: 0 !important;
}

.cumc-legacy-page .panel-grid-cell + .panel-grid-cell {
  margin-top: 1.5rem;
}

/* Remove dead production-widget shells.  These are safe because they are
   limited to legacy pages and only match genuinely empty elements. */
.cumc-legacy-page :where(
  .panel-grid:empty,
  .panel-grid-cell:empty,
  .so-panel:empty,
  .widget:empty,
  .sow-image-container:empty,
  .siteorigin-widget-tinymce:empty,
  .textwidget:empty
) {
  display: none !important;
}

/* Embedded media and old fixed-width objects must not burst the layout. */
.cumc-legacy-page .entry-content iframe,
.cumc-legacy-page .entry-content video,
.cumc-legacy-page .entry-content embed,
.cumc-legacy-page .entry-content object {
  max-width: 100% !important;
}

.cumc-legacy-page .entry-content iframe {
  border: 0;
}

/* Make legacy tables usable rather than tiny or wider than the viewport. */
.cumc-legacy-page .entry-content table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

.cumc-legacy-page .entry-content th,
.cumc-legacy-page .entry-content td {
  padding: .7rem .8rem;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.cumc-legacy-page .entry-content th {
  background: var(--surface-soft);
  color: var(--accent-dark);
}

/* Common production-era button/widget links get the current CUMC button look. */
.cumc-legacy-page :where(.ow-button-base, .sow-submit-wrapper, .so-widget-sow-button) a,
.cumc-legacy-page a[class*="button"] {
  display: inline-block;
  padding: .7rem 1rem;
  border: 1px solid var(--accent-dark);
  border-radius: .4rem;
  background: var(--accent-dark);
  color: #fff;
  font-weight: 750;
  line-height: 1.2;
  text-decoration: none;
}

.cumc-legacy-page :where(.ow-button-base, .sow-submit-wrapper, .so-widget-sow-button) a:hover,
.cumc-legacy-page :where(.ow-button-base, .sow-submit-wrapper, .so-widget-sow-button) a:focus,
.cumc-legacy-page a[class*="button"]:hover,
.cumc-legacy-page a[class*="button"]:focus {
  background: var(--accent);
  color: #fff;
}

/* Clear floated classic images before the page ends. */
.cumc-legacy-page .entry-content::after {
  content: "";
  display: table;
  clear: both;
}

@media (min-width: 50.01rem) {
  /* If a SiteOrigin row genuinely contains multiple cells, preserve the idea
     of columns while letting modern CSS handle widths responsively. */
  .cumc-legacy-page .panel-grid:has(> .panel-grid-cell + .panel-grid-cell) {
    display: flex !important;
    align-items: flex-start;
    gap: 2rem;
  }

  .cumc-legacy-page .panel-grid:has(> .panel-grid-cell + .panel-grid-cell) > .panel-grid-cell {
    flex: 1 1 0 !important;
    width: auto !important;
    margin-top: 0;
  }
}

@media (max-width: 50rem) {
  .cumc-page-content .cumc-legacy-page {
    padding-block: 1.5rem 3rem;
  }

  .cumc-legacy-page .entry-content .alignleft,
  .cumc-legacy-page .entry-content .alignright {
    float: none;
    max-width: 100%;
    margin: 1rem auto 1.5rem;
  }

  .cumc-legacy-page .panel-grid {
    display: block !important;
  }
}

/* ======================================================================
   0.9.39 — FOOTER PRAYER REQUEST MODAL
   Makes the full footer CUMC page-header navy and launches Fluent Form 11
   from a warm-gold Prayer Request button beneath the social icons.
   ====================================================================== */

.site-footer {
  background: #244f7a;
}

.site-footer__prayer-action {
  margin: 1.15rem 0 0 !important;
}

.site-footer__prayer-button,
.site-footer .site-footer__prayer-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.85rem;
  padding: .72rem 1.05rem;
  border: 2px solid #f0d394 !important;
  border-radius: .55rem;
  background: var(--gold, #d9a441) !important;
  color: #173f67 !important;
  font: inherit;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 .2rem .55rem rgb(0 0 0 / 18%);
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.site-footer__prayer-button:hover,
.site-footer__prayer-button:focus-visible,
.site-footer .site-footer__prayer-button:hover,
.site-footer .site-footer__prayer-button:focus-visible {
  background: #f0d394 !important;
  color: #173f67 !important;
  transform: translateY(-1px);
  box-shadow: 0 .35rem .8rem rgb(0 0 0 / 22%);
}

.site-footer__prayer-button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* ======================================================================
   33. CALENDAR WIDE-LAYOUT EXCEPTION
   The CCB calendar benefits from nearly the full viewport width, especially
   in Month view. Give it a modest site-like gutter without constraining it
   to the normal 72rem content width.
   ====================================================================== */

.cumc-calendar-page .cumc-page-article {
  padding-inline: clamp(1rem, 2vw, 2rem);
}

@media (max-width: 600px) {
  .cumc-calendar-page .cumc-page-article {
    padding-inline: .5rem;
  }
}



/* -------------------------------------------------------------------------
   0.9.45: Serve landing page refresh.
   Creates a more intentional, puzzle-inspired mosaic for the Serve overview.
   ---------------------------------------------------------------------- */
.serve-intro {
  padding-bottom: clamp(1.25rem, 2.8vw, 2.5rem);
  text-align: center;
}

.serve-intro > * {
  max-width: 52rem;
  margin-inline: auto;
}

.serve-intro__lead {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.7;
}

.serve-puzzle-section {
  padding-top: 0;
}

.serve-puzzle {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.9fr);
  grid-template-areas:
    "community global"
    "ministries cumc";
  gap: clamp(1rem, 1.8vw, 1.35rem);
  max-width: 1120px;
  margin-inline: auto;
  align-items: stretch;
}

.serve-puzzle__piece {
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 320px;
  overflow: hidden;
  background: #163c63;
  border-radius: 1.75rem;
  border: 8px solid #ffffff;
  box-shadow: 0 18px 45px rgba(17, 24, 39, 0.16);
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

.serve-puzzle__piece--community {
  grid-area: community;
  min-height: 380px;
  margin-bottom: 1.25rem;
  clip-path: polygon(0 0, 100% 0, 100% 40%, 94% 40%, 94% 60%, 100% 60%, 100% 100%, 0 100%, 0 0);
}

.serve-puzzle__piece--global {
  grid-area: global;
  min-height: 300px;
  margin-top: 2rem;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 60% 100%, 60% 94%, 40% 94%, 40% 100%, 0 100%, 0 0);
}

.serve-puzzle__piece--ministries {
  grid-area: ministries;
  min-height: 300px;
  margin-top: -1.15rem;
  clip-path: polygon(0 0, 60% 0, 60% 6%, 40% 6%, 40% 0, 0 0, 0 100%, 100% 100%, 100% 0);
}

.serve-puzzle__piece--cumc {
  grid-area: cumc;
  min-height: 380px;
  clip-path: polygon(0 0, 0 40%, 6% 40%, 6% 60%, 0 60%, 0 100%, 100% 100%, 100% 0);
}

.serve-puzzle__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0 !important;
  z-index: 0;
}

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

.serve-puzzle__piece::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(18, 57, 96, 0.18) 0%, rgba(18, 57, 96, 0.55) 56%, rgba(12, 39, 66, 0.72) 100%);
  pointer-events: none;
}

.serve-puzzle__overlay {
  position: relative;
  z-index: 2;
  min-height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: .5rem;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  box-sizing: border-box;
}

.serve-puzzle__piece h2,
.serve-puzzle__piece p {
  color: #ffffff;
  margin-top: 0;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.30);
}

.serve-puzzle__piece h2 {
  margin-bottom: 0;
  font-size: clamp(1.65rem, 2.8vw, 2.55rem);
  line-height: 1.08;
  max-width: 12ch;
}

.serve-puzzle__summary {
  margin-bottom: 0;
  font-size: clamp(0.98rem, 1.35vw, 1.08rem);
  line-height: 1.55;
  max-width: 32ch;
}

.serve-puzzle__link {
  color: inherit;
  text-decoration: none;
}

.serve-puzzle__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
}

.serve-puzzle__piece:hover,
.serve-puzzle__piece:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 24px 55px rgba(17, 24, 39, 0.22);
  filter: saturate(1.05);
}

.serve-puzzle__link:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 6px;
  border-radius: .3rem;
}

.serve-find-place {
  text-align: center;
}

.serve-find-place > * {
  max-width: 52rem;
  margin-inline: auto;
}

.serve-find-place .wp-block-buttons {
  justify-content: center;
}

@media (max-width: 900px) {
  .serve-puzzle {
    grid-template-columns: 1fr;
    grid-template-areas:
      "community"
      "global"
      "ministries"
      "cumc";
  }

  .serve-puzzle__piece,
  .serve-puzzle__piece--community,
  .serve-puzzle__piece--global,
  .serve-puzzle__piece--ministries,
  .serve-puzzle__piece--cumc {
    min-height: 285px;
    margin: 0;
    clip-path: none;
    border-radius: 1.25rem;
  }
}


/* -------------------------------------------------------------------------
   0.9.46: Serve jigsaw polish and durable placeholder imagery.
   The fallback image is CSS-relative so it survives versioned theme folders.
   ---------------------------------------------------------------------- */
.serve-puzzle {
  gap: 0;
  max-width: 1120px;
  filter: drop-shadow(0 18px 34px rgba(17, 24, 39, .16));
}

.serve-puzzle__piece {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0 !important;
  background-color: #163c63;
  background-image: url('../images/stained-glass.png');
  background-size: cover;
  background-position: center;
}

/* Hide stale/broken theme-placeholder text while allowing a valid Media Library
   replacement image to appear normally over the CSS fallback. */
.serve-puzzle__image {
  overflow: hidden;
}
.serve-puzzle__image img {
  position: relative;
  z-index: 1;
  color: transparent;
  font-size: 0;
  text-indent: -9999px;
}

.serve-puzzle__piece--community {
  min-height: 380px;
  clip-path: polygon(
    0 0, 100% 0,
    100% 38%, 94% 38%, 94% 46%, 90% 46%, 90% 54%, 94% 54%, 94% 62%, 100% 62%,
    100% 100%, 62% 100%, 62% 94%, 54% 94%, 54% 90%, 46% 90%, 46% 94%, 38% 94%, 38% 100%,
    0 100%
  );
}

.serve-puzzle__piece--global {
  min-height: 380px;
  clip-path: polygon(
    0 0, 100% 0, 100% 100%,
    62% 100%, 62% 94%, 54% 94%, 54% 90%, 46% 90%, 46% 94%, 38% 94%, 38% 100%,
    0 100%,
    0 62%, 6% 62%, 6% 54%, 10% 54%, 10% 46%, 6% 46%, 6% 38%, 0 38%
  );
}

.serve-puzzle__piece--ministries {
  min-height: 380px;
  clip-path: polygon(
    0 0,
    38% 0, 38% 6%, 46% 6%, 46% 10%, 54% 10%, 54% 6%, 62% 6%, 62% 0,
    100% 0,
    100% 38%, 94% 38%, 94% 46%, 90% 46%, 90% 54%, 94% 54%, 94% 62%, 100% 62%,
    100% 100%, 0 100%
  );
}

.serve-puzzle__piece--cumc {
  min-height: 380px;
  clip-path: polygon(
    0 0,
    38% 0, 38% 6%, 46% 6%, 46% 10%, 54% 10%, 54% 6%, 62% 6%, 62% 0,
    100% 0, 100% 100%, 0 100%,
    0 62%, 6% 62%, 6% 54%, 10% 54%, 10% 46%, 6% 46%, 6% 38%, 0 38%
  );
}

.serve-puzzle__piece::before {
  background: linear-gradient(180deg, rgba(10, 37, 62, .06) 0%, rgba(10, 37, 62, .26) 42%, rgba(8, 31, 53, .78) 100%);
}

.serve-puzzle__overlay {
  justify-content: flex-end;
  align-items: flex-start;
  text-align: left;
  padding: clamp(1.6rem, 3vw, 2.3rem);
}

.serve-puzzle__piece h2,
.serve-puzzle__piece .has-text-align-center,
.serve-puzzle__summary {
  text-align: left !important;
}

.serve-puzzle__piece h2 {
  max-width: 13ch;
  font-size: clamp(1.85rem, 3vw, 2.65rem);
}

.serve-puzzle__summary {
  max-width: 34ch;
}

.serve-puzzle__piece:hover,
.serve-puzzle__piece:focus-within {
  transform: scale(1.012);
  z-index: 3;
  box-shadow: 0 18px 42px rgba(17, 24, 39, .20);
}

@media (max-width: 900px) {
  .serve-puzzle {
    gap: 1rem;
    filter: none;
  }
  .serve-puzzle__piece,
  .serve-puzzle__piece--community,
  .serve-puzzle__piece--global,
  .serve-puzzle__piece--ministries,
  .serve-puzzle__piece--cumc {
    clip-path: none;
    border-radius: 1.25rem;
    min-height: 290px;
    box-shadow: 0 14px 30px rgba(17, 24, 39, .14);
  }
}

/* -------------------------------------------------------------------------
   0.9.47: Serve large-piece mosaic.
   One replaceable Gutenberg Image block sits below an SVG jigsaw grid.
   Navigation choices are translucent/blurred overlays, not baked into art.
   ---------------------------------------------------------------------- */
.serve-mosaic-section {
  padding-top: 0;
}

.serve-mosaic {
  position: relative;
  isolation: isolate;
  width: min(100%, 1180px);
  aspect-ratio: 16 / 9;
  min-height: 560px;
  margin-inline: auto;
  overflow: hidden;
  border-radius: 1.25rem;
  background: #163c63;
  box-shadow: 0 20px 48px rgba(17, 24, 39, .18);
}

.serve-mosaic__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  margin: 0 !important;
}

.serve-mosaic__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* A single overlay draws nine large jigsaw/mosaic regions. Because the grid
   is separate from the image, staff can replace the Image block at any time. */
.serve-mosaic::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 675' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23f8f1df' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='1192' height='667' rx='18'/%3E%3Cpath d='M400 4 V160 C400 180 382 184 365 184 C337 184 329 207 329 225 C329 245 343 266 369 266 C388 266 400 273 400 294 V671'/%3E%3Cpath d='M800 4 V118 C800 139 812 146 831 146 C857 146 871 166 871 185 C871 204 858 225 832 225 C813 225 800 232 800 253 V671'/%3E%3Cpath d='M4 225 H250 C271 225 278 213 278 194 C278 169 298 155 317 155 C336 155 357 168 357 194 C357 213 364 225 385 225 H815 C836 225 843 237 843 256 C843 282 864 295 883 295 C902 295 922 282 922 256 C922 237 929 225 950 225 H1196'/%3E%3Cpath d='M4 450 H170 C191 450 198 438 198 419 C198 393 219 380 238 380 C257 380 277 393 277 419 C277 438 284 450 305 450 H596 C617 450 624 462 624 481 C624 507 645 520 664 520 C683 520 703 507 703 481 C703 462 710 450 731 450 H1196'/%3E%3C/g%3E%3C/svg%3E");
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5));
}

.serve-mosaic::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(9, 31, 52, .06), rgba(9, 31, 52, .18));
}

.serve-mosaic__choice {
  position: absolute;
  z-index: 2;
  width: min(35%, 390px);
  padding: clamp(1rem, 2vw, 1.5rem);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 1rem;
  color: #fff;
  background: rgba(7, 32, 55, .68);
  -webkit-backdrop-filter: blur(9px) saturate(.9);
  backdrop-filter: blur(9px) saturate(.9);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.serve-mosaic__choice--community { left: 3.2%; top: 8%; }
.serve-mosaic__choice--global { right: 3.2%; top: 9%; }
.serve-mosaic__choice--ministries { left: 3.2%; bottom: 7%; }
.serve-mosaic__choice--cumc { right: 3.2%; bottom: 7%; }

.serve-mosaic__choice h2,
.serve-mosaic__choice p {
  color: #fff;
  margin-top: 0;
  text-shadow: 0 2px 9px rgba(0, 0, 0, .38);
}

.serve-mosaic__choice h2 {
  margin-bottom: .45rem;
  font-size: clamp(1.45rem, 2.35vw, 2.25rem);
  line-height: 1.08;
}

.serve-mosaic__summary {
  margin-bottom: 0;
  font-size: clamp(.92rem, 1.25vw, 1.08rem);
  line-height: 1.45;
}

.serve-mosaic__link {
  color: inherit;
  text-decoration: none;
}

.serve-mosaic__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.serve-mosaic__choice:hover,
.serve-mosaic__choice:focus-within {
  transform: translateY(-3px);
  background: rgba(7, 32, 55, .78);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .25);
}

.serve-mosaic__link:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 5px;
  border-radius: .25rem;
}

@media (max-width: 900px) {
  .serve-mosaic {
    aspect-ratio: auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: .85rem;
    padding: 1rem;
    overflow: visible;
    background: #163c63;
  }

  .serve-mosaic__image {
    position: relative;
    inset: auto;
    height: clamp(260px, 55vw, 440px);
    border-radius: .9rem;
    overflow: hidden;
  }

  .serve-mosaic::before,
  .serve-mosaic::after {
    display: none;
  }

  .serve-mosaic__choice,
  .serve-mosaic__choice--community,
  .serve-mosaic__choice--global,
  .serve-mosaic__choice--ministries,
  .serve-mosaic__choice--cumc {
    position: relative;
    inset: auto;
    width: auto;
    background: rgba(7, 32, 55, .96);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}


/* -------------------------------------------------------------------------
   0.9.48: Serve mosaic text visibility hardening.
   Some Gutenberg/front-end combinations were allowing the image/grid stack
   to paint above the navigation groups. Keep the choices in an explicit top
   stacking layer and make their text state unambiguous in editor + front end.
   ---------------------------------------------------------------------- */
.serve-mosaic > .serve-mosaic__choice {
  z-index: 20 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #fff !important;
  background: rgba(7, 32, 55, .80) !important;
}
.serve-mosaic > .serve-mosaic__choice h2,
.serve-mosaic > .serve-mosaic__choice h2 a,
.serve-mosaic > .serve-mosaic__choice p,
.serve-mosaic > .serve-mosaic__choice .serve-mosaic__link,
.serve-mosaic > .serve-mosaic__choice .serve-mosaic__summary {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #fff !important;
}
.serve-mosaic > .serve-mosaic__choice h2 a {
  position: relative;
  z-index: 22;
}
.serve-mosaic > .serve-mosaic__choice .serve-mosaic__summary {
  position: relative;
  z-index: 21;
}


/* Serve pie navigation --------------------------------------------------- */
.serve-pie-hero {
  padding-top: clamp(.5rem, 1vw, 1rem);
}

.serve-pie-layout {
  display: grid;
  grid-template-columns: minmax(18rem, 32rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.serve-pie-layout > .wp-block-column {
  margin-top: 0 !important;
  margin-left: 0 !important;
}

.serve-pie-nav {
  width: min(100%, 32rem);
  margin-inline: auto;
}

.serve-pie-nav svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 18px 30px rgba(10, 32, 58, .12));
}

.serve-pie-nav__piece {
  text-decoration: none;
}

.serve-pie-nav__fill {
  stroke: #ffffff;
  stroke-width: 2.8;
  transition: filter .2s ease, opacity .2s ease, transform .2s ease;
  transform-box: fill-box;
  transform-origin: center;
}

.serve-pie-nav__piece--community .serve-pie-nav__fill { fill: #3a72b6; }
.serve-pie-nav__piece--global .serve-pie-nav__fill { fill: #d0a631; }
.serve-pie-nav__piece--cumc .serve-pie-nav__fill { fill: #c64555; }
.serve-pie-nav__piece--ministries .serve-pie-nav__fill { fill: #5e8f61; }
.serve-pie-nav__piece--more .serve-pie-nav__fill { fill: #dbe0e7; }

.serve-pie-nav__piece:hover .serve-pie-nav__fill,
.serve-pie-nav__piece:focus-visible .serve-pie-nav__fill {
  filter: brightness(1.07);
  transform: scale(1.02);
}

.serve-pie-nav__piece:focus-visible {
  outline: none;
}

.serve-pie-nav__piece:focus-visible .serve-pie-nav__fill {
  stroke: #183c62;
  stroke-width: 4.2;
}

.serve-pie-nav__label {
  font-family: var(--wp--preset--font-family--body, system-ui, sans-serif);
  font-size: 10.2px;
  font-weight: 700;
  letter-spacing: -.02em;
  text-anchor: middle;
  dominant-baseline: middle;
  fill: #ffffff;
  pointer-events: none;
}

.serve-pie-nav__icon {
  fill: none;
  stroke: #ffffff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.serve-pie-nav__piece--more .serve-pie-nav__label,
.serve-pie-nav__piece--more .serve-pie-nav__icon {
  fill: #53606f;
  stroke: #53606f;
}

.serve-pie-nav__rim {
  fill: none;
  stroke: #ffffff;
  stroke-width: 2.8;
  pointer-events: none;
}

.serve-pie-copy {
  max-width: 38rem;
}

.serve-pie-copy > * {
  margin-left: 0;
  margin-right: 0;
}

.serve-pie-copy .eyebrow {
  margin-bottom: .65rem;
}

.serve-pie-copy h1 {
  font-size: clamp(2.8rem, 5.3vw, 5rem);
  line-height: .95;
  margin-bottom: 1rem;
}

.serve-pie-copy .serve-intro__lead {
  max-width: none;
  margin-inline: 0;
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
}

.serve-pie-copy .wp-block-buttons {
  margin-top: 1.5rem;
}

.serve-pie__tagline {
  margin-top: 1rem;
  font-size: clamp(1.2rem, 2.2vw, 1.9rem);
  font-style: italic;
  color: #7485a8;
}

@media (max-width: 960px) {
  .serve-pie-layout {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }

  .serve-pie-copy {
    max-width: 42rem;
    margin-inline: auto;
    text-align: center;
  }

  .serve-pie-copy > * {
    margin-left: auto;
    margin-right: auto;
  }

  .serve-pie-copy .wp-block-buttons {
    justify-content: center;
  }
}

@media (max-width: 560px) {
  .serve-pie-nav {
    width: min(100%, 23rem);
  }

  .serve-pie-nav__label {
    font-size: 8.2px;
  }

  .serve-pie-copy h1 {
    font-size: clamp(2.25rem, 10vw, 3.2rem);
  }
}


/* Serve pie centering tweak ---------------------------------------------- */
.serve-pie-hero {
  padding-inline: clamp(1rem, 3vw, 2rem);
}

.serve-pie-layout {
  max-width: 74rem;
  margin-inline: auto !important;
  justify-content: center;
}

.serve-pie-layout > .wp-block-column:first-child {
  display: flex;
  justify-content: center;
}

.serve-pie-layout > .wp-block-column:last-child {
  min-width: 0;
}


/* Serve pie true-centering fix ------------------------------------------- */
.entry-content .serve-pie-hero.alignwide {
  width: min(calc(100% - 2rem), var(--page-width));
  max-width: var(--page-width);
  margin-left: auto !important;
  margin-right: auto !important;
  transform: none !important;
}

.serve-pie-layout {
  width: min(100%, 74rem);
  margin-inline: auto !important;
}

/* ======================================================================
   34. VISIT MAP PAIR HEIGHT LOCK
   Keep the parking approach image and Google map visually paired. Some
   Gutenberg image settings can emit an inline auto-height on the image;
   explicitly fill the shared panel so the map cannot appear taller.
   ====================================================================== */

@media (min-width: 782px) {
  .visit-map-pair .visit-parking-map,
  .visit-map-pair .visit-map-embed {
    height: clamp(20rem, 30vw, 27rem);
  }

  .visit-map-pair .visit-parking-map img,
  .visit-map-pair .visit-map-embed iframe {
    height: 100% !important;
    min-height: 0;
  }

  .visit-map-pair .visit-parking-map img {
    object-fit: cover;
  }
}


/* Compact Staff / Our Team header --------------------------------------- */
.page-hero--staff {
  padding-block: 0;
  background: linear-gradient(120deg,#173b5d,#2f5f91 68%,#d9a441);
  color: #fff;
}
.page-hero--staff .page-hero__inner {
  padding-block: clamp(1.6rem, 2.4vw, 2.2rem);
}
.page-hero--staff .eyebrow {
  margin-bottom: .35rem;
}
.page-hero--staff h1 {
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 4.25rem);
  font-weight: 500;
  line-height: .98;
}

/* ======================================================================
   34. HOMEPAGE WORSHIP STATUS
   Two compact, live-aware lines replace the old single recent-sermon button.
   ====================================================================== */
.worship-status {
  display: grid;
  gap: .38rem;
  min-width: min(31rem, 100%);
}

.worship-status__line {
  width: 100%;
  padding: .62rem .9rem;
  border: 1px solid rgb(255 255 255 / 72%);
  border-radius: .35rem;
  background: rgb(10 43 73 / 28%);
  color: #fff;
  font: inherit;
  font-weight: 750;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  backdrop-filter: blur(1px);
}

.worship-status__line--recent {
  background: rgb(10 43 73 / 16%);
  font-weight: 650;
}

.worship-status__line--message:not([data-external-url]) {
  cursor: default;
}

.worship-status__line:hover,
.worship-status__line:focus-visible {
  color: #fff;
  background: rgb(10 43 73 / 45%);
  text-decoration: none;
}

.worship-status__line--message:not([data-external-url]):hover,
.worship-status__line--message:not([data-external-url]):focus-visible {
  background: rgb(10 43 73 / 28%);
}

@media (max-width: 42rem) {
  .worship-status {
    width: 100%;
    min-width: 0;
  }
}


/* 0.9.62 — CUMC header branding: match the wording of the historic mark
   while using the site's theme typography. */
.site-brand__text {
  display: block;
  min-width: 0;
}

.site-brand__name {
  color: var(--navy, #204b75);
  font-family: var(--font-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  font-size: 1.34rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .05em;
  white-space: nowrap;
}

.site-brand__full {
  display: block;
  margin-top: .18rem;
  color: var(--muted);
  font-family: var(--font-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  font-size: .76rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
  white-space: nowrap;
}

@media (max-width: 64rem) {
  .site-brand__name { font-size: 1.16rem; letter-spacing: .045em; }
  .site-brand__full { font-size: .68rem; }
}

@media (max-width: 50rem) {
  .site-brand__name { font-size: 1rem; letter-spacing: .04em; white-space: nowrap; }
  /* Keep the denomination line visible; the previous rule hid the tagline on mobile. */
  .site-brand__full { display: block; font-size: .61rem; }
}