:root {
  color-scheme: light;

  /* Font-size scale — mirrors Gutenberg's preset font sizes used by the live site. */
  --sp-fs-small:     1.125rem;
  --sp-fs-medium:    1.25rem;
  --sp-fs-large:     1.5rem;
  --sp-fs-x-large:   2rem;
  --sp-fs-xx-large:  2.5rem;
  --sp-fs-xxx-large: 3rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--wa-font-family-body, "League Spartan", sans-serif);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--sp-dark-grey, #2D2927);
  background: #fff;
}

a:where(:not(.wp-element-button)) { color: inherit; text-decoration: none; }

img { max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6 {
  color: var(--sp-dark-grey, #2D2927);
  font-family: var(--wa-font-family-heading, "League Spartan", sans-serif);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}
h1 { font-size: var(--sp-fs-xxx-large); }
h2 { font-size: var(--sp-fs-xx-large); }
h3 { font-size: var(--sp-fs-x-large); }
h4 { font-size: var(--sp-fs-large); }

/* Size utilities — applied directly on headings to override defaults per section. */
.sp-size-small      { font-size: var(--sp-fs-small)     !important; }
.sp-size-medium     { font-size: var(--sp-fs-medium)    !important; }
.sp-size-large      { font-size: var(--sp-fs-large)     !important; }
.sp-size-x-large    { font-size: var(--sp-fs-x-large)   !important; }
.sp-size-xx-large   { font-size: var(--sp-fs-xx-large)  !important; }
.sp-size-xxx-large  { font-size: var(--sp-fs-xxx-large) !important; }
.sp-weight-800      { font-weight: 800; }
.sp-weight-1000     { font-weight: 1000; }

/* ──────────────────────────────────────────────────────────────
   Site Header — pink sticky bar
   ────────────────────────────────────────────────────────────── */
/* wa-page renders the `navigation` slot as a desktop left sidebar
   above mobile-breakpoint. Sacred Place uses an in-header nav + a
   mobile drawer, so collapse the sidebar entirely. The navigation
   slot still becomes the mobile drawer when the hamburger toggles. */
wa-page { --menu-width: 0; }
wa-page::part(menu) { display: none; }

/* Header is rendered inside <wa-page>'s slot="header". wa-page's slot
   container has flex-wrap: wrap by default; we explicitly opt OUT on
   our bar so brand + actions stay on one row. */
.sp-header__bar {
  background: var(--sp-magenta);
  color: #fff;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 1rem;
  padding: 0.75rem 1.5rem;
  width: 100%;
  min-width: 0;
}
.sp-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: #fff;
  flex-shrink: 1;
  min-width: 0;
}
.sp-header__logo { width: 25px; height: auto; flex-shrink: 0; }
.sp-header__wordmark {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.15;
  white-space: normal;
}

/* Desktop nav — flat horizontal list with one <details> submenu. */
.sp-nav {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: nowrap;
}
.sp-nav__link {
  color: #fff;
  font-size: 1.15rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  text-decoration: none;
}
.sp-nav__link:hover { text-decoration: underline; }

/* Connect dropdown panel + items */
.sp-nav__dropdown::part(panel) {
  background: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  min-width: 200px;
}
.sp-nav__dropdown wa-dropdown-item::part(base) {
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--sp-dark-grey);
}
.sp-nav__dropdown wa-dropdown-item:hover::part(base) {
  background: var(--sp-light-grey);
}

.sp-header__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;       /* push actions to the right edge */
  flex-shrink: 0;          /* never shrink, brand can give way */
}
.sp-header__actions wa-button[data-toggle-nav]::part(base) {
  /* The wa-page hamburger trigger renders cleanly as an icon — strip
     the appearance="plain" default outline/box so it reads as an icon
     button on the pink bar. */
  background: transparent;
  border: 0;
  color: #fff;
  padding: 0.25rem;
}
.sp-header__actions wa-button[data-toggle-nav] wa-icon { color: #fff; font-size: 1.25rem; }

/* Mobile drawer nav — default WA light drawer surface for now. */
.sp-mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5rem 0;
}
.sp-mobile-nav__link {
  display: block;
  padding: 0.75rem 1rem;
  color: inherit;
  font-size: 1.15rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.sp-mobile-nav__link:hover { background: rgba(0, 0, 0, 0.04); }
.sp-mobile-nav__link--cta  { color: var(--sp-magenta); }

/* ──────────────────────────────────────────────────────────────
   Site Footer — pink bar
   ────────────────────────────────────────────────────────────── */
.sp-footer {
  /* wa-page applies display:flex to [slot="footer"]; force block so the
     columns, rule, and copy stack vertically as intended. */
  display: block;
  background: var(--sp-magenta);
  color: #fff;
  padding: 3rem 1.5rem 1.5rem;
}
.sp-footer a { color: #fff; }
.sp-footer a:hover { text-decoration: underline; }

.sp-footer__columns {
  display: grid;
  grid-template-columns: minmax(240px, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
  max-width: 1280px;
  margin: 0 auto;
}
@media (max-width: 720px) {
  .sp-footer__columns { grid-template-columns: 1fr; }
}
.sp-footer__brand { max-width: 360px; }
.sp-footer__brand p { font-size: 0.95rem; margin: 0 0 0.75rem; }
.sp-footer__logo {
  width: 180px;
  height: auto;
  display: block;
  margin-bottom: 1rem;
  /* WA native.css applies a default border-radius to <img>; the
     stacked-pin logo isn't a card, so clear it. */
  border-radius: 0;
}

.sp-footer__col { min-width: 0; }
.sp-footer__col p { font-size: 0.95rem; margin: 0 0 0.5rem; }
.sp-footer__heading {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 0.75rem;
  color: #fff;
}
.sp-footer__rule {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  margin: 2rem auto 1rem;
  max-width: 1280px;
}
.sp-footer__copy {
  max-width: 1280px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
}
.sp-footer__build {
  margin-left: 0.5rem;
  font-family: ui-monospace, "Geist Mono", monospace;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  opacity: 0.6;
}

/* ──────────────────────────────────────────────────────────────
   Sections
   ────────────────────────────────────────────────────────────── */
.sp-section { padding: 4rem 1.5rem; }
.sp-section--lg     { padding-block: 5rem; }
.sp-section--tight  { padding-block: 2rem; }
.sp-section--black      { background: #000;             color: #fff; }
.sp-section--dark-blue  { background: var(--sp-dark-blue); color: #fff; }
.sp-section--light-blue { background: var(--sp-light-blue); color: #fff; }
.sp-section--magenta    { background: var(--sp-magenta); color: #fff; }
.sp-section--green      { background: var(--sp-green); color: #fff; }
.sp-section--grey       { background: #D9DAE4; color: var(--sp-dark-grey); }
.sp-section--white      { background: #fff;             color: var(--sp-dark-grey); }
.sp-section--gradient-blue-pink {
  background: linear-gradient(180deg, var(--sp-dark-blue) 0%, var(--sp-magenta) 100%);
  color: #fff;
}
.sp-section--gradient-blue-deep {
  background: linear-gradient(135deg, var(--sp-light-blue) 0%, var(--sp-dark-blue) 100%);
  color: #fff;
}
.sp-section--black h2, .sp-section--black h3, .sp-section--black p,
.sp-section--dark-blue h2, .sp-section--dark-blue h3, .sp-section--dark-blue p,
.sp-section--light-blue h2, .sp-section--light-blue h3, .sp-section--light-blue p,
.sp-section--magenta h2, .sp-section--magenta h3, .sp-section--magenta p,
.sp-section--green h2, .sp-section--green h3, .sp-section--green p,
.sp-section--gradient-blue-pink h2, .sp-section--gradient-blue-pink h3, .sp-section--gradient-blue-pink p,
.sp-section--gradient-blue-deep h2, .sp-section--gradient-blue-deep h3, .sp-section--gradient-blue-deep p {
  color: inherit;
}
.sp-section__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.sp-center { text-align: center; }
.sp-prose { max-width: 720px; margin-inline: auto; }
.sp-prose p { margin: 0.85rem 0; line-height: 1.55; }
.sp-prose p:first-child { margin-top: 0; }
.sp-prose p:last-child  { margin-bottom: 0; }

/* Newsletter body — markdown-rendered content carries h2/h3/img/ul
   we want to space and size sensibly inside .sp-prose. */
.sp-news-body h2 {
  font-size: var(--sp-fs-large);
  font-weight: 800;
  color: var(--sp-dark-blue);
  margin: 2.25rem 0 0.75rem;
}
.sp-news-body h3 {
  font-size: var(--sp-fs-medium);
  font-weight: 800;
  color: var(--sp-dark-blue);
  margin: 1.75rem 0 0.5rem;
}
.sp-news-body img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.75rem;
  margin: 1.5rem 0;
}
.sp-news-body ul, .sp-news-body ol { padding-left: 1.5rem; margin: 0.75rem 0; }
.sp-news-body li { margin: 0.25rem 0; }
.sp-news-body blockquote {
  margin: 1.25rem 0;
  padding: 0.5rem 1.25rem;
  border-left: 4px solid var(--sp-magenta);
  font-style: italic;
  color: var(--sp-dark-grey);
}

/* ──────────────────────────────────────────────────────────────
   Page Hero — compact dark banner used at the top of subpages
   (kids, visit, connect, prayer, identity, etc.). Full-bleed,
   centered text, gradient or solid background applied inline or
   via a variant.
   ────────────────────────────────────────────────────────────── */
.sp-page-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 260px;
  padding: 3rem 1.5rem;
  color: #fff;
  background: linear-gradient(145deg, var(--sp-light-blue) 0%, var(--sp-dark-blue) 100%);
}
.sp-page-hero--green     { background: linear-gradient(145deg, var(--sp-green) 0%, #103B10 100%); }
.sp-page-hero--magenta   { background: linear-gradient(145deg, var(--sp-magenta) 0%, #4F0E2A 100%); }
.sp-page-hero--dark-red  { background: #4A0000; }
.sp-page-hero__title {
  margin: 0;
  font-weight: 900;
  font-size: var(--sp-fs-xxx-large);
  line-height: 1.05;
  color: #fff;
}
.sp-page-hero__eyebrow {
  margin: 0.75rem 0 0;
  font-weight: 700;
  font-size: var(--sp-fs-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
}

/* ──────────────────────────────────────────────────────────────
   Icon card — soft-tinted card with circle icon, heading, body
   (used in "What to expect" style grids on subpages).
   ────────────────────────────────────────────────────────────── */
.sp-icon-card {
  text-align: center;
  padding: 2rem 1.5rem;
  border-radius: 0.75rem;
  background: rgba(0, 114, 218, 0.12);
  border: 1px solid rgba(0, 114, 218, 0.18);
}
.sp-icon-card__circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 999px;
  margin: 0 auto 1rem;
}
.sp-icon-card__circle wa-icon { font-size: 2rem; }
.sp-icon-card__heading {
  margin: 0 0 0.5rem;
  font-weight: 800;
  font-size: var(--sp-fs-medium);
}
.sp-icon-card__text { margin: 0; line-height: 1.5; }

/* Ghost button — white-on-translucent. Used as a secondary CTA on
   coloured sections (e.g. "Learn More" on the magenta callout). */
.sp-button-light::part(base) {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.65);
}
.sp-button-light::part(base):hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: #fff;
}

/* Prose links — the global reset strips link styling so anchors in
   body copy don't pop. Re-add a clear link treatment inside .sp-prose
   blocks, flipping to white-on-dark inside coloured sections. */
.sp-prose a {
  color: var(--sp-light-blue);
  text-decoration: underline;
}
.sp-prose a:hover { text-decoration: none; }
.sp-section--dark-blue .sp-prose a,
.sp-section--light-blue .sp-prose a,
.sp-section--magenta .sp-prose a,
.sp-section--green .sp-prose a,
.sp-section--black .sp-prose a {
  color: #fff;
}

/* Glass-style FAQ accordions — used inside coloured/dark sections
   to give the wa-details a translucent card look that matches the
   rest of the page's depth treatments. */
.sp-section--dark-blue wa-details::part(base),
.sp-section--magenta wa-details::part(base),
.sp-section--green wa-details::part(base) {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0.75rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.sp-section--dark-blue wa-details::part(summary),
.sp-section--magenta wa-details::part(summary),
.sp-section--green wa-details::part(summary) {
  color: #fff;
  font-weight: 700;
}

/* ──────────────────────────────────────────────────────────────
   Hero carousel
   ────────────────────────────────────────────────────────────── */
/* Make sure <main> doesn't add any UA-default margin/padding so the
   full-bleed hero touches the header without a gap. */
main, #main-content { margin: 0; padding: 0; }

.home-hero {
  --slide-gap: 0;
  --aspect-ratio: 2.76 / 1;
  /* Kill Shoelace/Web Awesome's default rounded corners on the carousel,
     its scroll container, and its slides. The Pro carousel pulls radius
     from these tokens; clearing them is the cleanest override. */
  --sl-border-radius-medium: 0;
  --sl-border-radius-small:  0;
  --wa-border-radius-m:      0;
  --wa-border-radius-s:      0;
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border-radius: 0;
  overflow: hidden;
}
/* Force a single full-width slide column — by default wa-carousel reserves
   grid columns for navigation/pagination, which would otherwise show as
   black gutters on either side of the slide. Mirrors the live site's
   .is-hero overrides. */
.home-hero::part(base) {
  gap: 0;
  grid-template-areas: "slides" "pagination";
  grid-template-columns: 1fr;
  background: #000;
  border-radius: 0;
  padding: 0;
  margin: 0;
}
.home-hero::part(scroll-container) {
  border-radius: 0;
  padding: 0;
  margin: 0;
}
.home-hero wa-carousel-item {
  border-radius: 0;
  padding: 0;
  margin: 0;
}
.home-hero::part(navigation) {
  display: block;
  inset: 0;
  pointer-events: none;
  position: absolute;
}
.home-hero::part(navigation-button) {
  pointer-events: all;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.home-hero::part(navigation-button-previous) { left: 1rem; }
.home-hero::part(navigation-button-next)     { right: 1rem; }
@media (max-width: 768px) {
  .home-hero { --aspect-ratio: 1 / 1; }
}
.home-hero__slide {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 1.5rem;
  text-align: center;
  color: #fff;
}
.home-hero__slide--cyan-purple {
  background: linear-gradient(135deg, rgb(6, 147, 227) 0%, rgb(155, 81, 224) 100%);
}
.home-hero__slide--amber-orange {
  background: linear-gradient(135deg, rgba(252, 185, 0, 1) 0%, rgba(255, 105, 0, 1) 100%);
}
.home-hero__slide--spectrum {
  background: linear-gradient(
    135deg,
    rgba(74, 234, 220, 1) 0%,
    rgba(151, 120, 209, 1) 20%,
    rgba(207, 42, 186, 1) 40%,
    rgba(238, 44, 130, 1) 60%,
    rgba(251, 105, 98, 1) 80%,
    rgba(254, 248, 76, 1) 100%
  );
}
.home-hero__heading {
  margin: 0;
  font-size: var(--sp-fs-xxx-large);
  font-weight: 800;
  color: #fff;
}
.home-hero__heading--xl { font-weight: 1000; }
.home-hero__heading em  { font-style: italic; }
.home-hero__tagline {
  margin: 0.75rem 0 0;
  font-size: var(--sp-fs-x-large);
  font-weight: 700;
  color: #000;
}

/* ──────────────────────────────────────────────────────────────
   Static home hero — full-bleed photo banner, text left + icons right
   ────────────────────────────────────────────────────────────── */
.home-hero-static {
  background-image: url("https://sacredplace.b-cdn.net/rchc.webp");
  background-size: cover;
  background-position: center;
  min-height: 480px;
  padding: 4.5rem 1.5rem;
  color: #fff;
  position: relative;
  display: flex;
  align-items: center;
}
.home-hero-static::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.68) 0%,
    rgba(0, 0, 0, 0.42) 55%,
    rgba(0, 0, 0, 0.08) 100%
  );
  pointer-events: none;
}
.home-hero-static__inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.home-hero-static__text { max-width: 600px; }
.home-hero-static__heading {
  font-size: clamp(2.25rem, 4.5vw, 3.75rem);
  font-weight: 900;
  line-height: 1.05;
  color: #fff;
  margin: 0 0 1rem;
}
.home-hero-static__sub {
  font-size: var(--sp-fs-medium);
  font-weight: 600;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 1.75rem;
}
.home-hero-static__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.home-hero-static__values {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
}
.home-hero-static__value {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
}
.home-hero-static__value wa-icon { font-size: 1.75rem; flex-shrink: 0; }
.home-hero-static__value p {
  margin: 0;
  font-size: var(--sp-fs-small);
  font-weight: 700;
  color: #fff;
}

/* ──────────────────────────────────────────────────────────────
   Welcome icons row (heart / rainbow / family-pants)
   ────────────────────────────────────────────────────────────── */
.sp-welcome-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.25rem;
  padding-bottom: 1.5rem;
}
.sp-welcome-icons wa-icon { font-size: 75px; }

/* ──────────────────────────────────────────────────────────────
   Event filters + carousel
   ────────────────────────────────────────────────────────────── */
.sp-event-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}
.sp-event-filters wa-tag { cursor: pointer; transition: opacity 0.2s; }
.sp-event-filters wa-tag:not([variant="brand"]) { opacity: 0.65; }
.sp-event-filters wa-tag:hover { opacity: 1; }

.sp-events-carousel { --aspect-ratio: auto; }
.sp-events-carousel::part(scroll-container) { align-items: stretch; }
.sp-events-carousel wa-carousel-item { display: flex; }
.sp-events-carousel::part(navigation) { color: #fff; }

.sp-event-card-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  width: 100%;
  height: 100%;
}
/* Event carousel cards — <wa-card> with:
   - slot="media": square cover image
   - slot="header": series small-caps label + title
   - default slot: date row (clock circle + date stacked on time), hr, tags
   The wa-card handles its own border/shadow/padding via WA tokens. */
.sp-event-card {
  width: 100%;
  height: 100%;
  color: var(--sp-dark-grey);
  /* Cards always render left-aligned, even when nested under a
     centered section like .sp-center. */
  text-align: left;
  /* Base font-size for the card body so inner text inherits a
     sensible size if a more-specific selector ever misses. */
  font-size: 1rem;
}
.sp-event-card::part(body) {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.sp-event-card img[slot="media"] {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}
/* Header section gets a fixed min-height so date rows line up across
   cards in the carousel regardless of title length. Sized for series
   label + 2 lines of title. */
.sp-event-card__header {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-height: 5.5rem;
}
.sp-event-card__series {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sp-magenta) !important;
  margin: 0;
}
.sp-event-card__title {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--sp-dark-grey);
  margin: 0;
  /* Cap title at 2 lines; longer titles ellipsize so the date row
     stays at a consistent Y across cards. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sp-event-card__date-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.sp-event-card__clock {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--wa-color-brand-90);
  color: var(--sp-magenta);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sp-event-card__clock wa-icon { font-size: 1rem; }
.sp-event-card__date-stack {
  display: flex;
  flex-direction: column;
  /* Tight vertical rhythm between date and time. */
  line-height: 1.2;
}
.sp-event-card__date {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0;
}
.sp-event-card__time {
  font-size: 1rem;
  color: var(--wa-color-neutral-40, #666);
  margin: 0;
}
.sp-event-card__rule {
  border: 0;
  border-top: 1px solid var(--wa-color-neutral-90, #eee);
  margin: 0;
}
.sp-event-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* online_tags from the API can ship as either a WA `variant` string
   ("brand" | "danger" | "success" | "warning" | "info" | "neutral")
   or a custom hex `color`. Each variant class sets --tag-color to
   the matching Sacred Place palette value; a custom hex (inline
   style="--tag-color: #xxx") overrides via cascade. The pill paints
   a filled-outlined look: 15% tint of --tag-color for the fill,
   saturated --tag-color for the border + text. */
.sp-online-tag {
  display: inline-block;
  background: color-mix(in srgb, var(--tag-color, var(--sp-light-blue)) 15%, #fff);
  color: var(--tag-color, var(--sp-light-blue));
  border: 1px solid var(--tag-color, var(--sp-light-blue));
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.01em;
}
.sp-online-tag--brand   { --tag-color: var(--sp-magenta);    }
.sp-online-tag--danger  { --tag-color: var(--sp-light-blue); }
.sp-online-tag--info    { --tag-color: var(--sp-light-blue); }
.sp-online-tag--success { --tag-color: var(--sp-green);      }
.sp-online-tag--warning { --tag-color: var(--sp-gold);       }
.sp-online-tag--neutral { --tag-color: var(--sp-dark-grey);  }

/* Filter-chip variant of the pill — used on /events/ and the homepage
   carousel to filter by online_tag. Buttons need native styling reset
   and an opacity dim for inactive chips. */
.sp-events-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  justify-content: center;
}
button.sp-online-tag {
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.15s, transform 0.1s;
}
button.sp-online-tag:not(.is-active) { opacity: 0.55; }
button.sp-online-tag:hover { opacity: 1; }
button.sp-online-tag:active { transform: scale(0.97); }
/* ──────────────────────────────────────────────────────────────
   Card grids (3-up and 2-up, stack on narrow)
   ────────────────────────────────────────────────────────────── */
.sp-card-grid {
  display: grid;
  gap: 1.5rem;
  width: 100%;
}
.sp-card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.sp-card-grid--2 { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
@media (max-width: 800px) {
  .sp-card-grid--3, .sp-card-grid--2 { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────────────────────
   Glass cards — translucent panels with brand-tinted bg + border.
   These are plain divs (not <wa-card>) so they match the live look
   without inheriting wa-card's chrome.
   ────────────────────────────────────────────────────────────── */
.sp-glass {
  border-radius: 12px;
  border: 1px solid;
  padding: 1.5rem 1.75rem;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.4rem;
  height: 100%;
  min-height: 100%;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.sp-glass--magenta    { background: rgba(196, 55, 118, 0.55); border-color: rgba(196, 55, 118, 0.7); }
.sp-glass--green      { background: rgba(63, 154, 42, 0.55);  border-color: rgba(63, 154, 42, 0.7); }
.sp-glass--light-blue { background: rgba(0, 114, 218, 0.55);  border-color: rgba(0, 114, 218, 0.7); }
.sp-glass--neutral    { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.25); }

.sp-glass__heading {
  margin: 0.4rem 0;
  font-size: var(--sp-fs-large);
  font-weight: 800;
  color: #fff;
}
.sp-glass__label {
  margin: 0 0 0.5rem;
  font-size: var(--sp-fs-medium);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
}
.sp-glass__text {
  margin: 0;
  font-size: var(--sp-fs-small);
  font-weight: 700;
  color: #fff;
}
.sp-glass__cta { margin-top: 0.75rem; }

/* ──────────────────────────────────────────────────────────────
   "What's in our DNA?" — heading above, 3-column card grid
   ────────────────────────────────────────────────────────────── */
.sp-dna__heading {
  color: var(--sp-dark-grey);
  font-size: var(--sp-fs-x-large);
  font-weight: 800;
  margin: 0 0 2rem;
}
.sp-dna-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}
@media (max-width: 800px) {
  .sp-dna-3col { grid-template-columns: 1fr; gap: 2rem; }
}
.sp-dna-item {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.sp-dna__row {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 1.5rem;
  align-items: start;
}
.sp-dna__circle {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.sp-dna__circle wa-icon { font-size: 3rem; color: #fff; }
.sp-dna__circle--light-blue { background: var(--sp-light-blue); }
.sp-dna__circle--magenta    { background: var(--sp-magenta); }
.sp-dna__circle--green      { background: var(--sp-green); }
.sp-dna__row-heading {
  color: var(--sp-magenta);
  font-size: var(--sp-fs-large);
  font-weight: 700;
  margin: 0 0 0.5rem;
}
.sp-dna__row-text {
  font-size: var(--sp-fs-small);
  line-height: 1.3;
  margin: 0;
}

/* ──────────────────────────────────────────────────────────────
   Live event toast — shown 30 min before to 60 min after online events
   ────────────────────────────────────────────────────────────── */
.sp-live-toast {
  position: fixed;
  bottom: calc(56px + 1.5rem + 0.75rem);
  right: 1.5rem;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--sp-dark-grey);
  color: #fff;
  padding: 0.875rem 1rem;
  border-radius: 0.75rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.28);
  max-width: 300px;
  animation: sp-toast-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.sp-live-toast[hidden] { display: none; }
.sp-live-toast--out    { animation: sp-toast-out 0.35s ease forwards; }
@keyframes sp-toast-in {
  from { opacity: 0; transform: translateY(0.75rem); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes sp-toast-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(0.75rem); }
}

.sp-live-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sp-magenta);
  flex-shrink: 0;
  animation: sp-live-pulse 1.5s ease-in-out infinite;
}
@keyframes sp-live-pulse {
  0%, 100% { opacity: 1;   transform: scale(1);   }
  50%       { opacity: 0.4; transform: scale(1.55); }
}

.sp-live-toast__body {
  flex: 1;
  min-width: 0;
  line-height: 1.35;
}
.sp-live-toast__body strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 800;
}
.sp-live-toast__body span {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.65);
}

.sp-live-toast__link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--sp-gold);
  font-weight: 700;
  font-size: 0.85rem;
  white-space: nowrap;
  text-decoration: none;
  flex-shrink: 0;
}
.sp-live-toast__link:hover { text-decoration: underline; }

.sp-live-toast__dismiss {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
  font-size: 1rem;
}
.sp-live-toast__dismiss:hover { color: #fff; }

/* ──────────────────────────────────────────────────────────────
   Floating chat bubble
   ────────────────────────────────────────────────────────────── */
.sp-chat-bubble {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 998;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--sp-dark-blue);
  color: #fff;
  border: 5px solid #fff;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s;
}
.sp-chat-bubble:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}
.sp-chat-bubble:active { transform: scale(0.96); }

/* ──────────────────────────────────────────────────────────────
   Connect drawer — dark glass, chooser tiles
   ────────────────────────────────────────────────────────────── */
#sptic-connect-drawer { --width: 26rem; }
#sptic-connect-drawer::part(overlay)      { background: rgba(0, 0, 0, 0.6); }
#sptic-connect-drawer::part(dialog) {
  background: radial-gradient(circle at top right, #000 0%, var(--sp-dark-blue) 70%);
  color: rgba(255, 255, 255, 0.95);
}
#sptic-connect-drawer::part(header) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1.25rem 1.5rem;
}
#sptic-connect-drawer::part(title) {
  font-weight: 800;
  font-size: 1.15rem;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
#sptic-connect-drawer::part(close-button) { color: rgba(255, 255, 255, 0.6); }
#sptic-connect-drawer::part(body) { padding: 1.25rem 1.5rem; }

.sptic-drawer-chooser:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.sptic-drawer-intro {
  font-weight: 800;
  font-size: 1.65rem;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6), 0 0 24px rgba(0,114,218,0.4);
  margin: 0 0 0.25rem;
}
.sptic-drawer-intro span { color: var(--sp-magenta); }
.sptic-drawer-sub {
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.4;
  margin: 0 0 0.5rem;
}

.sptic-tile {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.1rem 1.25rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s;
  user-select: none;
}
.sptic-tile:hover {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.sptic-tile:active { transform: translateY(0) scale(0.99); }
.sptic-tile-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.65rem;
  color: #fff;
}
.sptic-tile-icon--pink { background: var(--sp-magenta); }
.sptic-tile-icon--blue { background: var(--sp-light-blue); }
.sptic-tile-text { flex: 1; min-width: 0; }
.sptic-tile-label {
  display: block;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.sptic-tile-sub {
  display: block;
  margin-top: 0.2rem;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.15;
  color: #fff;
}
.sptic-tile-arrow {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.3);
  font-size: 1.15rem;
  transition: color 0.2s, transform 0.2s;
}
.sptic-tile:hover .sptic-tile-arrow {
  color: rgba(255, 255, 255, 0.7);
  transform: translateX(3px);
}

/* ──────────────────────────────────────────────────────────────
   Connect drawer — form panels (PAV + Text Us)
   ────────────────────────────────────────────────────────────── */

/* Each form panel is hidden by default; .active reveals it while
   #sp-drawer-chooser is hidden (toggled by connect-drawer.js).
   !important is needed because wa-drawer's shadow DOM ::slotted styling
   otherwise wins out and the panels render even without .active. */
.sp-drawer-form           { display: none  !important; }
.sp-drawer-form.active    { display: block !important; }

.sp-drawer-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: 0;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  margin: 0 0 1rem;
}
.sp-drawer-back wa-icon { font-size: 0.9em; }
.sp-drawer-back:hover { opacity: 0.85; }

.sp-drawer-form h2 {
  font-size: 1.45rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 0.75rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* Glass form container — translucent panel for inputs. */
.sp-drawer-form__inner {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
  padding: 1.25rem 1.25rem 1rem;
}
.sp-drawer-form__inner form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Dark-theme WA form controls inside the drawer */
.sp-drawer-form__inner wa-input,
.sp-drawer-form__inner wa-textarea,
.sp-drawer-form__inner wa-select {
  --wa-input-color: #fff;
  --wa-input-label-color: rgba(255, 255, 255, 0.85);
  --wa-input-placeholder-color: rgba(255, 255, 255, 0.4);
}
.sp-drawer-form__inner wa-input::part(base),
.sp-drawer-form__inner wa-textarea::part(base),
.sp-drawer-form__inner wa-select::part(combobox) {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0.75rem;
  color: #fff;
}
.sp-drawer-form__inner wa-input:hover::part(base),
.sp-drawer-form__inner wa-textarea:hover::part(base),
.sp-drawer-form__inner wa-select:hover::part(combobox) {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
}
.sp-drawer-form__inner wa-input:focus-within::part(base),
.sp-drawer-form__inner wa-textarea:focus-within::part(base),
.sp-drawer-form__inner wa-select:focus-within::part(combobox) {
  border-color: var(--sp-magenta);
}
.sp-drawer-form__inner wa-input::part(form-control-label),
.sp-drawer-form__inner wa-textarea::part(form-control-label),
.sp-drawer-form__inner wa-select::part(form-control-label) {
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
}

/* wa-select listbox renders as a popup outside the drawer's dark context,
   so light-mode defaults apply unless we explicitly style it. */
.sp-drawer-form__inner wa-select::part(listbox) {
  background: #142444;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0.75rem;
  color: rgba(255, 255, 255, 0.9);
}
#sptic-connect-drawer wa-option {
  --wa-color-neutral-0: #142444;
  color: rgba(255, 255, 255, 0.9) !important;
}
#sptic-connect-drawer wa-option:state(hover),
#sptic-connect-drawer wa-option:state(current) {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}

/* Kids stepper */
.sp-kids-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.sp-kids-row__label {
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
}
.sp-stepper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.sp-stepper-value { flex: 0 0 5rem; }
.sp-stepper-value::part(base) { text-align: center; }

.sp-kids-names { display: none; }
.sp-kids-names.visible { display: block; }

/* Result callouts inside the drawer */
.sp-drawer-result { margin-top: 0.75rem; }
.sp-drawer-result wa-callout::part(base) {
  border-radius: 0.75rem;
  font-weight: 700;
}
.sp-drawer-result wa-callout[variant="success"]::part(base) {
  background: rgba(63, 154, 42, 0.15);
  border: 1px solid rgba(63, 154, 42, 0.35);
  color: rgba(255, 255, 255, 0.95);
}
.sp-drawer-result wa-callout[variant="danger"]::part(base) {
  background: rgba(220, 38, 38, 0.15);
  border: 1px solid rgba(220, 38, 38, 0.35);
  color: rgba(255, 255, 255, 0.95);
}

/* Submit buttons inside drawer forms — full-width pill */
.sp-drawer-form__inner wa-button[type="submit"]::part(base) {
  width: 100%;
}

/* ──────────────────────────────────────────────────────────────
   Give Now dialog — amount tile picker
   ────────────────────────────────────────────────────────────── */
#spwa-give-dialog::part(panel) { background: #fff; border-radius: 1rem; }
#spwa-give-dialog::part(title) { font-weight: 800; font-size: 1.25rem; }

.sp-give__label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--sp-dark-grey);
  margin: 0 0 0.5rem;
}
.sp-give__amounts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}
.sp-give__amt {
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  padding: 0.65rem 0.5rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #fff;
  color: var(--sp-dark-grey);
  cursor: pointer;
  text-align: center;
  transition: background 0.15s, border-color 0.15s;
}
.sp-give__amt:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.2);
}
.sp-give__amt.is-active {
  background: rgba(63, 154, 42, 0.15);
  border-color: var(--sp-green);
  color: #2d7a1e;
}
.sp-give__custom { margin-top: 0.5rem; }
.sp-give__submit { margin-top: 1rem; width: 100%; }

/* ──────────────────────────────────────────────────────────────
   Upcoming Gatherings section — eyebrow + header row
   ────────────────────────────────────────────────────────────── */
.sp-eyebrow {
  font-size: var(--sp-fs-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sp-magenta);
  margin: 0 0 0.4rem;
}
.sp-events-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.sp-events-all-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--sp-fs-small);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.sp-events-all-link:hover { color: #fff; text-decoration: underline; }
.sp-events-all-link wa-icon { font-size: 0.75em; }

/* ──────────────────────────────────────────────────────────────
   Welcome grid — intro column + 3 glass cards
   ────────────────────────────────────────────────────────────── */
/* Two-row subgrid: row 1 = icon (same height across all cards),
   row 2 = text content (same height across all cards).
   Keeps icons pinned to the same y-position regardless of text length. */
.sp-welcome-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.sp-welcome-cards > .sp-glass {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  align-items: center;
  justify-items: center;
  justify-content: unset;
}
.sp-welcome-cards__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  width: 100%;
}
@media (max-width: 640px) {
  .sp-welcome-cards { grid-template-columns: 1fr; }
  .sp-welcome-cards > .sp-glass { grid-row: span 1; grid-template-rows: unset; display: flex; flex-direction: column; }
}

/* ──────────────────────────────────────────────────────────────
   Glass card additions — link, left variant, icon circles, white variant
   ────────────────────────────────────────────────────────────── */
.sp-glass__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.5rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--sp-fs-small);
  font-weight: 700;
  text-decoration: none;
}
.sp-glass__link:hover { color: #fff; text-decoration: underline; }
.sp-glass__link wa-icon { font-size: 0.8em; }

.sp-glass--left {
  align-items: flex-start;
  text-align: left;
}
.sp-glass__icon-row {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
}
.sp-glass__icon-circle {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  color: #fff;
}
.sp-glass__icon-circle--magenta { background: var(--sp-magenta); }
.sp-glass__icon-circle--blue    { background: var(--sp-light-blue); }
.sp-glass__icon-circle--green   { background: var(--sp-green); }

/* White variant — for join-us cards on light section backgrounds */
.sp-glass--white {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.sp-glass__label--dark { color: var(--sp-dark-grey); }
.sp-glass__text--dark  { color: var(--sp-dark-grey); }

/* ──────────────────────────────────────────────────────────────
   Imported WP content: minimum CSS bridge
   Other pages still emit Gutenberg/wa-blocks markup until they're
   rebuilt page-by-page; these rules let them render acceptably.
   The homepage no longer uses any wp-block-* class.
   ────────────────────────────────────────────────────────────── */
.wp-block-spacer { display: block; }
.wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
.wp-block-columns.are-vertically-aligned-stretch { align-items: stretch; }
.wp-block-column { flex: 1 1 0; min-width: 220px; }
.has-text-align-center { text-align: center; }
.has-text-align-left   { text-align: left; }
.has-text-align-right  { text-align: right; }
.has-large-font-size   { font-size: var(--sp-fs-large); }
.has-x-large-font-size { font-size: var(--sp-fs-x-large); }
.has-medium-font-size  { font-size: var(--sp-fs-medium); }
.has-small-font-size   { font-size: var(--sp-fs-small); }
.wp-block-heading { font-family: var(--wa-font-family-heading); }
.has-sp-magenta-color    { color: var(--sp-magenta) !important; }
.has-sp-gold-color       { color: var(--sp-gold) !important; }
.has-sp-green-color      { color: var(--sp-green) !important; }
.has-sp-light-blue-color { color: var(--sp-light-blue) !important; }
.has-sp-dark-blue-color  { color: var(--sp-dark-blue) !important; }
.has-sp-magenta-background-color    { background-color: var(--sp-magenta); }
.has-sp-dark-blue-background-color  { background-color: var(--sp-dark-blue); }
.has-sp-light-blue-background-color { background-color: var(--sp-light-blue); }
.has-sp-green-background-color      { background-color: var(--sp-green); }
.has-sp-gold-background-color       { background-color: var(--sp-gold); }
.has-sp-antique-white-background-color { background-color: var(--sp-antique-white); }
.wab-section-inner { max-width: 1100px; margin: 0 auto; }
.wp-block-wa-blocks-section { padding: 3rem 1.5rem; }
.wp-block-wa-blocks-card { display: block; }
.wab-icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
}
.wp-block-image img { max-width: 100%; height: auto; display: block; }
.wp-block-image.is-resized img { width: auto; }
.wp-block-separator { border: 0; border-top: 1px solid currentColor; opacity: 0.25; margin: 2rem 0; }
.wp-element-button, .wp-block-button__link {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  background: var(--sp-magenta);
  color: #fff;
  border-radius: 4px;
  font-weight: 600;
}