/* Joliet church of Christ: changes on top of the copied Elementor theme CSS.
   Loaded last in <head> (src/layouts/WpLayout.astro). Each rule says why. */

/* Language switcher: same height as the Plan Your Visit button (52px) and square corners
   (Adam, Asana Nov 4, 2026). Staging: 55px tall, 4px corners. */
.jtrp .trp-shortcode-switcher__wrapper { --border-radius: 0px !important; height: 52px; }
.jtrp .trp-language-switcher.trp-shortcode-switcher { border-radius: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; }
.jtrp .trp-current-language-item__wrapper { min-height: 50px; box-sizing: border-box; }
.jtrp .trp-switcher-dropdown-list .trp-language-item { min-height: 44px; }

/* Verse pop-ups (public/js/scripture.js): ESV in English, Nueva Biblia de las Américas (NBLA) in Spanish. They replace the Bible
   Gateway tooltips (NASB). A reference reads like the text around it, with a dotted underline. */
button.bibleref {
  display: inline; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: inherit;
  font: inherit; letter-spacing: inherit; text-align: inherit; text-transform: inherit;
  text-decoration: underline dotted; text-decoration-thickness: 1.5px; text-underline-offset: 3px; cursor: pointer;
}
button.bibleref:hover, button.bibleref:focus, button.bibleref[aria-expanded="true"] { background: none; color: inherit; text-decoration-style: solid; }
.bibleref-nowrap { white-space: nowrap; }
.verse-pop {
  position: absolute; z-index: 10000; padding: 16px 18px; border-radius: 0; background: #FFFFFF; color: #333333;
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.06);
  font-family: Lusitana, serif; font-size: 16px; line-height: 1.55; text-align: left;
}
.verse-pop[hidden] { display: none; }
.vp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.vp-ref { font-weight: 700; color: #5A5B93; }
.vp-ver { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: #5A5B93; }
.vp-text { max-height: 50vh; overflow-y: auto; }
.vp-text sup { margin-right: 2px; font-size: 0.7em; font-weight: 700; color: #5A5B93; }
@media print { .verse-pop { display: none; } button.bibleref { text-decoration: none; } }
/* The Bible copyright notice (Crossway asks for it on every page that shows ESV text), at the foot of the footer. */
.elementor-location-footer .jc-bible-notice {
  width: 100%; max-width: 70ch; margin: 8px auto 24px; padding: 0 16px; color: #FFFFFF; font-size: 13px; line-height: 1.5; text-align: center;
}
.elementor-location-footer .jc-bible-notice a { color: inherit; text-decoration: underline; }

/* Church photos (src/lib/photos.ts, src/data/photos.json). Card photos copy Home's "What You'll Find Here":
   360px tall, full column width, cover crop, 80px curve on the lower-left corner, 24px down to the title. */
.jc-card-img { display: block; width: 100%; height: 360px; object-fit: cover; border-radius: 0 0 0 80px; }
.jc-photo-card .elementor-icon-box-wrapper { display: flex; flex-direction: column; align-items: stretch; }
.jc-photo-card .elementor-icon-box-icon { display: block !important; width: 100%; margin: 0 0 24px !important; }

/* Home hero: the group photo under a gradient, darker on the left where the white text sits. */
.jc-hero-photo::before {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.28) 100%) !important;
  opacity: 1 !important;
}
@media (max-width: 767px) { .jc-hero-photo::before { background: rgba(0, 0, 0, 0.58) !important; } }

/* Plan Your Visit, Where We're Located: address under the heading, then the building and the map side by side. */
.jc-location .jc-location-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; width: 100%; margin: 24px 0 32px; }
.jc-location .jc-location-row > .elementor-element { width: 100% !important; margin: 0 !important; }
.jc-location .jc-location-img { display: block; width: 100%; height: 400px; object-fit: cover; }
@media (max-width: 767px) {
  .jc-location .jc-location-row { grid-template-columns: 1fr; gap: 16px; margin: 16px 0 24px; }
  .jc-location .jc-location-img { height: 260px; }
  .elementor-618 .elementor-element.elementor-element-f0c304f iframe { height: 300px; }
}

/* Plan Your Visit, Our Service Times: each card centered (Adam, Nov 4, 2026). */
.jc-centered-cards .e-con.e-child { text-align: center; --align-items: center; align-items: center; }
.jc-centered-cards .e-con.e-child > .elementor-element { width: 100%; text-align: center; }
.jc-centered-cards .elementor-icon-wrapper { text-align: center; }

/* About, Our Evangelists. */
.jc-evangelists .jc-evangelists-text { width: 100%; max-width: 720px; margin: 16px auto 40px; text-align: center; }
.jc-people { display: flex; justify-content: center; gap: 48px; flex-wrap: wrap; width: 100%; }
.jc-person { margin: 0; width: 340px; max-width: 100%; text-align: center; }
.jc-person-img { display: block; width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; border-radius: 0 0 0 80px; }
.jc-person-name { margin-top: 16px; font-family: Lusitana, serif; font-size: 22px; font-weight: 700; color: var(--e-global-color-primary, #000); }
@media (max-width: 767px) { .jc-people { gap: 32px; } .jc-evangelists .jc-evangelists-text { margin-bottom: 32px; } }

/* Children & Teens, Faith Nurtured by Dedicated Teachers: one wide photo between the heading and the text. */
.jc-wide-photo { width: 100%; max-width: 1140px; margin: 32px auto; }
.jc-wide-img { display: block; width: 100%; height: 520px; object-fit: cover; border-radius: 0 0 0 120px; }
@media (max-width: 1024px) { .jc-wide-img { height: 420px; } }
@media (max-width: 767px) { .jc-wide-photo { margin: 24px auto; } .jc-wide-img { height: 280px; border-radius: 0 0 0 80px; } }

/* Children & Teens: photo carousel after Bible Classes Offered, on the purple of Setting Foundations. */
.jc-carousel-section { background: var(--e-global-color-96d4865, #5A5B93); padding: 80px 24px; }
.jc-carousel { position: relative; max-width: 1140px; margin: 0 auto; }
.jc-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 3); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; list-style: none; margin: 0; padding: 0; scrollbar-width: none; }
.jc-track::-webkit-scrollbar { display: none; }
.jc-track:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.jc-slide { scroll-snap-align: start; margin: 0; }
.jc-carousel-btn { position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; margin-top: -22px; padding: 0; border: 0; border-radius: 0; background: #fff; color: var(--e-global-color-96d4865, #5A5B93); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); }
.jc-carousel-btn svg { width: 22px; height: 22px; fill: currentColor; }
.jc-carousel-btn:hover, .jc-carousel-btn:focus-visible { background: var(--e-global-color-accent, #A5A6C4); color: #fff; }
.jc-prev { left: -22px; }
.jc-next { right: -22px; }
.jc-next svg { transform: scaleX(-1); }
.jc-carousel-btn[disabled] { opacity: 0.4; cursor: default; }
.jc-dots { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
.jc-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.45); }
.jc-dots span.is-active { background: #fff; }
@media (max-width: 1024px) { .jc-carousel-section { padding: 48px 24px; } .jc-track { grid-auto-columns: calc((100% - 24px) / 2); } .jc-prev { left: -12px; } .jc-next { right: -12px; } }
@media (max-width: 767px) { .jc-track { grid-auto-columns: 100%; } .jc-prev { left: 8px; } .jc-next { right: 8px; } }

/* The theme's icon-box rules size the icon box to the icon; photo cards fill the column instead. */
.jc-photo-card, .jc-photo-card > .elementor-widget-container { width: 100% !important; }
.jc-photo-card .elementor-icon-box-wrapper { width: 100%; }
.jc-photo-card .elementor-icon-box-icon, .jc-photo-card .elementor-icon-box-content { width: 100% !important; max-width: none !important; flex: 0 0 auto !important; }
.jc-photo-card img.jc-card-img, .jc-slide img.jc-card-img { width: 100% !important; max-width: none !important; height: 360px !important; object-fit: cover; border-radius: 0 0 0 80px !important; }
.jc-person-name { font-style: normal; }
.jc-person-img { max-width: none !important; }
.jc-wide-img, .jc-location-img { max-width: none !important; }
/* The theme styles every <button>; the carousel arrows keep their own look. */
.jc-carousel .jc-carousel-btn { width: 44px !important; height: 44px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: #fff !important; color: #5A5B93 !important; line-height: 1 !important; }
.jc-carousel .jc-carousel-btn:hover, .jc-carousel .jc-carousel-btn:focus-visible { background: #A5A6C4 !important; color: #fff !important; }
.jc-carousel .jc-carousel-btn svg { display: block; width: 22px; height: 22px; fill: currentColor; }
/* Our Service Times: the check mark centered too (the copied CSS aligns each icon left). */
.jc-centered-cards .elementor-widget-icon .elementor-icon-wrapper { text-align: center !important; }
.jc-centered-cards .elementor-widget-icon { align-self: center !important; }
/* Phones: the copied CSS puts some icon boxes in a row (icon beside the text); photo cards always stack. */
.jc-photo-card .elementor-icon-box-wrapper { display: flex !important; flex-direction: column !important; align-items: stretch !important; }
/* Photo cards read like Home's: centered text, and 24px from one card's text to the next photo when stacked. */
.jc-photo-card .elementor-icon-box-content, .jc-photo-card .elementor-icon-box-title, .jc-photo-card .elementor-icon-box-description { text-align: center !important; }
@media (max-width: 767px) { .jc-photo-card ~ .jc-photo-card { margin-top: 24px !important; } }
/* The theme draws a box around any hovered or focused <button>; a verse reference keeps reading like text.
   Keyboard users still get a clear outline. */
button.bibleref, button.bibleref:hover, button.bibleref:focus { border: 0 !important; outline: none; box-shadow: none !important; background: none !important; color: inherit !important; }
button.bibleref:focus-visible { outline: 2px solid #5A5B93; outline-offset: 2px; border-radius: 2px; }

/* Header menu on one line at every desktop width (1025px and up). With Sermons and Livestream as separate links
   (Adam, Nov 4, 2026) the menu wrapped onto a second row below about 1280px (staging already wrapped below 1200px).
   Between 1025 and 1365px the items sit closer and the logo is a little smaller; wider screens are unchanged. */
@media (min-width: 1025px) and (max-width: 1365px) {
  [data-elementor-type="header"] nav.elementor-nav-menu--main .elementor-item { padding-left: 9px !important; padding-right: 9px !important; }
  [data-elementor-type="header"] nav.elementor-nav-menu--main .elementor-item .sub-arrow { margin-left: 4px; }
}
@media (min-width: 1025px) and (max-width: 1199px) {
  [data-elementor-type="header"] nav.elementor-nav-menu--main .elementor-item { font-size: 15px !important; padding-left: 6px !important; padding-right: 6px !important; }
  [data-elementor-type="header"] .elementor-element[data-widget_type^="theme-site-logo"] { width: auto !important; max-width: none !important; flex: 0 0 auto !important; }
  [data-elementor-type="header"] .e-con-inner:has(> [data-widget_type^="theme-site-logo"]) { gap: 16px !important; --gap: 16px; padding-left: 16px !important; padding-right: 16px !important; }
}
/* From 1200 to 1319px the header row had no side padding, so the logo and the Plan Your Visit button touched the
   edges of the window (the 1320px row only gets a margin from 1320px up). Same 16px edge as the 1025-1199px rules;
   the gap between logo, menu and buttons gives up the room so the menu stays on one line. */
@media (min-width: 1200px) and (max-width: 1365px) {
  [data-elementor-type="header"] .e-con-inner:has(> [data-widget_type^="theme-site-logo"]) { padding-left: 16px !important; padding-right: 16px !important; gap: 2% !important; --gap: 2%; }
}
@media (min-width: 1025px) and (max-width: 1099px) {
  [data-elementor-type="header"] nav.elementor-nav-menu--main .elementor-item { font-size: 14px !important; padding-left: 5px !important; padding-right: 5px !important; }
  [data-elementor-type="header"] .e-con-inner:has(> [data-widget_type^="theme-site-logo"]) { gap: 12px !important; --gap: 12px; padding-left: 12px !important; padding-right: 12px !important; }
}

/* Site banner (src/lib/banner.ts, Pages CMS "Site banner"): a ribbon above the header on every page that stays at the
   top while scrolling. Three colors from the theme (purple #5A5B93, lavender #EFEFF7, dark #3F3F3F) and two layouts. */
.jc-banner {
  position: sticky; top: 0; z-index: 9990; display: flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 10px 56px; box-sizing: border-box; font-family: Lusitana, serif; font-size: 17px; line-height: 1.4;
  background: #5A5B93; color: #FFFFFF; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.35);
}
.jc-banner--lavender { background: #EFEFF7; color: #3F3F3F; box-shadow: inset 0 -1px 0 #D4D4D4; }
.jc-banner--dark { background: #3F3F3F; color: #FFFFFF; box-shadow: none; }
.jc-banner-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 16px; max-width: 1140px; text-align: center; }
.jc-banner-text { margin: 0; }
.jc-banner .jc-banner-link { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.jc-banner .jc-banner-link:hover, .jc-banner .jc-banner-link:focus { color: inherit; text-decoration-thickness: 2px; }
.jc-banner--lavender .jc-banner-link, .jc-banner--lavender .jc-banner-link:hover { color: #5A5B93; }
.jc-banner--button .jc-banner-link, .jc-banner--button .jc-banner-link:hover {
  display: inline-block; padding: 6px 18px; border: 2px solid currentColor; text-decoration: none; font-size: 15px; letter-spacing: 0.02em;
}
.jc-banner--button .jc-banner-link:hover, .jc-banner--button .jc-banner-link:focus { background: #FFFFFF; border-color: #FFFFFF; color: #5A5B93; }
.jc-banner--button.jc-banner--dark .jc-banner-link:hover, .jc-banner--button.jc-banner--dark .jc-banner-link:focus { color: #3F3F3F; }
.jc-banner--button.jc-banner--lavender .jc-banner-link { border-color: #5A5B93; }
.jc-banner--button.jc-banner--lavender .jc-banner-link:hover, .jc-banner--button.jc-banner--lavender .jc-banner-link:focus { background: #5A5B93; border-color: #5A5B93; color: #FFFFFF; }
.jc-banner .jc-banner-close {
  position: absolute; top: 50%; right: 12px; width: 40px; height: 40px; margin: -20px 0 0; padding: 8px; border: 0; border-radius: 0;
  background: none; color: inherit; line-height: 0; cursor: pointer;
}
.jc-banner .jc-banner-close:hover, .jc-banner .jc-banner-close:focus { background: rgba(0, 0, 0, 0.12); color: inherit; }
.jc-banner .jc-banner-close svg { width: 22px; height: 22px; fill: currentColor; }
.jc-banner-link:focus-visible, .jc-banner .jc-banner-close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (max-width: 767px) {
  .jc-banner { padding: 10px 52px 10px 16px; font-size: 15px; }
  .jc-banner-inner { gap: 6px 12px; }
  .jc-banner .jc-banner-close { right: 6px; }
}
@media print { .jc-banner { display: none; } }

/* Your Next Steps (homepage): number badges in the Plan Your Visit button's colour (#A5A6C4, the
   site's accent) with white numbers, instead of pale grey (#DBDBDB) that disappeared on the photo
   background. Adam, Nov 6, 2026: the darker #5A5B93 drew the eye away from the button. */
.elementor-644 .elementor-element-e97e4e6 .elementor-icon svg path{fill:var(--e-global-color-accent,#A5A6C4)}
.elementor-644 .elementor-element-e97e4e6 .elementor-icon svg path.secondary-color{fill:#FFFFFF!important}

/* Lavender text on light backgrounds (page numbers, breadcrumbs, skip link) was 2.06-2.37:1, under WCAG 2.2's 4.5:1;
   it is #5A5B93 (5.4-6.3:1). Adam approved Nov 6, 2026. The buttons keep white letters (Adam, Nov 6: PR #14). */
.jet-filters-pagination__link { color: #5A5B93 !important; }
.jet-filters-pagination__current .jet-filters-pagination__link { color: #1F2040 !important; }
button .button-text, .skip-link, [class*="breadcrumb"] a, .elementor-widget-breadcrumbs a { color: #5A5B93 !important; }

/* Keyboard focus: the theme removed the outline on form fields and the default ring is white on several backgrounds
   (WCAG 2.2 2.4.7). A dark navy ring with a white halo reads on white, lavender and purple. Only shows for keyboard use.
   Adam approved Nov 6, 2026. */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #1F2040 !important; outline-offset: 2px !important; box-shadow: 0 0 0 6px #FFFFFF !important;
}

/* Accordion +/- squares: all lavender (the open one was #DBDBDB). The symbol is white, like the white letters on the
   lavender buttons (Adam, Nov 9, 2026; it was dark navy from Nov 6). White on #A5A6C4 is 2.37:1. */
.e-n-accordion-item-title-icon svg rect { fill: #A5A6C4 !important; }
.e-n-accordion-item-title-icon svg path { fill: #FFFFFF !important; }

/* Phone tap targets of 44px (footer social icons 24px, menu rows 32px, sermon page numbers 41px before). Icons and text
   keep their size. Adam approved Nov 6, 2026. */
@media (max-width: 767px) {
  .elementor-social-icon { width: 44px !important; height: 44px !important; display: inline-flex !important; align-items: center; justify-content: center; }
  .elementor-nav-menu--dropdown .elementor-item, .elementor-nav-menu--dropdown .elementor-sub-item { min-height: 44px; display: flex !important; align-items: center; }
  .jet-filters-pagination__item { min-width: 44px; min-height: 44px; box-sizing: border-box; }
}

/* Phone menu. The three-bars icon in the header did nothing: on WordPress it opened a JetPopup loaded by AJAX and the port
   kept only an empty shell. The menu is built from src/data/navigation.json (src/lib/wp.ts) and opened by public/js/mobile-menu.js.
   Shown up to 1024px, where the desktop menu is hidden. */
.jc-menu-open { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font-size: inherit; cursor: pointer; }
.jc-menu-open:hover, .jc-menu-open:focus { background: none; color: inherit; }
.jc-menu-open svg { width: 1em; height: 1em; fill: currentColor; }
.jc-menu[hidden] { display: none; }
.jc-menu { position: fixed; inset: 0; z-index: 100000; display: flex; justify-content: flex-end; }
.jc-menu__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); }
.jc-menu__panel { position: relative; display: flex; flex-direction: column; gap: 24px; width: min(100%, 420px); height: 100%; overflow-y: auto; box-sizing: border-box; padding: 24px; background: #5A5B93; color: #FFFFFF; }
.jc-menu__close { align-self: flex-end; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 0; background: none; color: #FFFFFF; cursor: pointer; }
.jc-menu__close:hover, .jc-menu__close:focus, .jc-menu__toggle:hover, .jc-menu__toggle:focus { background: none; color: #FFFFFF; }
.jc-menu__list, .jc-menu__sub { margin: 0; padding: 0; list-style: none; }
.jc-menu__list > li { border-bottom: 1px solid rgba(255, 255, 255, 0.25); }
.jc-menu__link, .jc-menu__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px; box-sizing: border-box; padding: 8px 0; border: 0; border-radius: 0; background: none; color: #FFFFFF; font: inherit; font-size: 20px; line-height: 1.3; text-align: left; text-decoration: none; cursor: pointer; }
.jc-menu__sub { padding: 0 0 8px 16px; }
.jc-menu__sub .jc-menu__link { font-size: 18px; min-height: 48px; }
.jc-menu__link[aria-current="page"] { font-weight: 700; text-decoration: underline; text-underline-offset: 6px; }
.jc-menu__chev { flex: none; transition: transform 0.2s; }
.jc-menu__toggle[aria-expanded="true"] .jc-menu__chev { transform: rotate(180deg); }
.jc-menu__cta { display: flex; justify-content: center; margin: 0; }
.jc-menu__lang { align-self: flex-start; display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px; border: 1px solid #FFFFFF; color: #FFFFFF; font-size: 18px; text-decoration: none; }
html.jc-menu-lock, html.jc-menu-lock body { overflow: hidden; }
@media (min-width: 1025px) { .jc-menu { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .jc-menu__chev { transition: none; } }
/* The theme colours every button and link; inside the phone menu they stay white on the purple panel. */
.jc-menu button.jc-menu__toggle, .jc-menu button.jc-menu__close, button.jc-menu-open { background: transparent !important; color: #FFFFFF !important; border: 0 !important; box-shadow: none; }
.jc-menu button.jc-menu__toggle:hover, .jc-menu button.jc-menu__close:hover, .jc-menu button.jc-menu__toggle:focus, .jc-menu button.jc-menu__close:focus, button.jc-menu-open:hover, button.jc-menu-open:focus { background: transparent !important; color: #FFFFFF !important; }
.jc-menu a.jc-menu__link, .jc-menu a.jc-menu__lang { color: #FFFFFF !important; }
.jc-menu a.jc-menu__link:hover, .jc-menu a.jc-menu__lang:hover { color: #FFFFFF !important; text-decoration: underline; }
.jc-menu .jc-menu__close svg { width: 20px; height: 20px; }
.jc-menu button.jc-menu__toggle { padding: 8px 0 !important; font-family: inherit !important; font-size: 20px !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: normal !important; line-height: 1.3 !important; }
.jc-menu .jc-menu__close svg path, .jc-menu .jc-menu__chev path { fill: none !important; stroke: #FFFFFF !important; stroke-width: 2px; }
.jc-menu button.jc-menu__close { padding: 0 !important; width: 44px !important; height: 44px !important; }

/* Sermons page: the cards sat 56px apart (28px above and below each) and felt short. Now 28px apart, and 20px taller
   (more room inside the card). Only the sermons list; the Home sermon slider is unchanged. Adam, Nov 6, 2026. */
body.post-type-archive-sermons .jet-listing-grid--482 .jet-listing-grid__item { padding-top: 14px !important; padding-bottom: 14px !important; }
body.post-type-archive-sermons .jet-listing-grid--482 .elementor-element-39034ea > .e-con-inner { padding-top: 36px; padding-bottom: 36px; }

/* About page: the closing "Stop searching..." section ran straight into Our Evangelists above it
   (both #EFEFF7). Adam, Nov 6, 2026: every section gets its own background. Our Evangelists goes to the site's deep
   purple with white text (like What Makes Us Different? at the top of the page), between the white
   Our Beliefs and the closing section, which keeps the lavender with the homepage's beige corner shape. */
.elementor-568 .elementor-element.elementor-element-63a178b:not(.elementor-motion-effects-element-type-background){background-color:var(--e-global-color-96d4865,#5A5B93)}
.elementor-568 .elementor-element-63a178b .elementor-heading-title,.elementor-568 .elementor-element-63a178b .elementor-widget-text-editor,.elementor-568 .elementor-element-63a178b .elementor-widget-text-editor *,.elementor-568 .elementor-element-63a178b h1,.elementor-568 .elementor-element-63a178b h2,.elementor-568 .elementor-element-63a178b h3,.elementor-568 .elementor-element-63a178b h4,.elementor-568 .elementor-element-63a178b h5,.elementor-568 .elementor-element-63a178b h6,.elementor-568 .elementor-element-63a178b p,.elementor-568 .elementor-element-63a178b a,.elementor-568 .elementor-element-63a178b .jc-person-name{color:#FFFFFF}
.elementor-568 .elementor-element.elementor-element-953165a{--overlay-opacity:1}
.elementor-568 .elementor-element.elementor-element-953165a::before{background-image:url("/uploads/2025/01/Rectangle-14.png");--background-overlay:'';background-repeat:no-repeat}

/* Home "Short Clips from our Sermons" (src/lib/shorts.ts, public/js/shorts-player.js): the church's newest YouTube Shorts.
   Lavender (#EFEFF7) between the white "Hear Messages From God's Word" and the purple section after it, so each section
   has its own background (Adam's rule). Portrait clips (9:16) with the cards' 80px lower-left curve; the play button sits in
   the middle of each clip. */
.elementor-644 .elementor-element.elementor-element-290d2e9.jc-shorts { background-color: #EFEFF7; --padding-left: 24px; --padding-right: 24px; }
.jc-shorts .elementor-heading-title { font-family: Lusitana, serif; font-size: 48px; font-weight: 700; line-height: 1.2; color: #000; text-align: center; }
.jc-shorts-body { width: 100%; max-width: 1140px; margin: 40px auto 0; }
.jc-shorts .jc-track { grid-auto-columns: calc((100% - 72px) / 4); }
.jc-short { display: flex; flex-direction: column; }
.jc-short-link { position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 0 0 0 80px; background: #5A5B93; }
.jc-shorts img.jc-short-img { display: block; width: 100% !important; max-width: none !important; height: 100% !important; object-fit: cover; border-radius: 0 !important; transition: transform .3s ease; }
/* The play button is frosted glass (Adam, Nov 6, 2026): a see-through tint of the button colour with the clip blurred behind it,
   a thin light edge and a white arrow. Browsers without the blur get a slightly stronger tint so the arrow still reads. */
.jc-play { position: absolute; top: 50%; left: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: rgba(165, 166, 196, .62); color: #fff; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 24px rgba(0, 0, 0, .28); transition: background-color .2s ease, transform .2s ease; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .jc-play { background: rgba(165, 166, 196, .38); -webkit-backdrop-filter: blur(12px) saturate(150%); backdrop-filter: blur(12px) saturate(150%); }
}
.jc-play svg { width: 34px; height: 34px; margin-left: 4px; fill: currentColor; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); }
.jc-short-link:hover .jc-play, .jc-short-link:focus-visible .jc-play { background: rgba(90, 91, 147, .6); transform: scale(1.08); }
.jc-short-link:hover img.jc-short-img { transform: scale(1.03); }
.jc-short-link:focus-visible { outline: 3px solid #5A5B93; outline-offset: 3px; }
.jc-short-title { margin: 16px 0 0; font-family: Lusitana, serif; font-size: 20px; font-weight: 700; line-height: 1.35; color: #000; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.jc-shorts .jc-carousel-btn { top: calc(50% - 40px); }
.jc-shorts .jc-track:focus-visible { outline-color: #5A5B93; }
.jc-shorts .jc-dots span { background: rgba(90, 91, 147, .3); }
.jc-shorts .jc-dots span.is-active { background: #5A5B93; }
.jc-shorts-more { margin: 32px 0 0; text-align: center; }
.jc-shorts-more-btn { display: inline-block; padding: 12px 32px; background: #A5A6C4; color: #fff !important; font-family: Lusitana, serif; font-size: 16px; font-weight: 700; line-height: 1.5; text-decoration: none; transition: background-color .2s ease; }
.jc-shorts-more-btn:hover, .jc-shorts-more-btn:focus-visible { background: #5A5B93; }
.jc-short-dialog { width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; background: #000; overflow: visible; }
.jc-short-dialog::backdrop { background: rgba(0, 0, 0, .8); }
.jc-short-frame { aspect-ratio: 9 / 16; max-height: calc(100dvh - 32px); margin: 0 auto; }
.jc-short-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.jc-short-dialog .jc-short-close { position: absolute; top: -12px; right: -12px; z-index: 1; width: 44px !important; height: 44px !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: #fff !important; color: #5A5B93 !important; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0, 0, 0, .3); cursor: pointer; }
.jc-short-dialog .jc-short-close:hover, .jc-short-dialog .jc-short-close:focus-visible { background: #A5A6C4 !important; color: #fff !important; }
.jc-short-dialog .jc-short-close svg { width: 22px; height: 22px; fill: currentColor; }
html.jc-short-open { overflow: hidden; }
@media (max-width: 1024px) {
  .jc-shorts .elementor-heading-title { font-size: 40px; }
  .jc-shorts .jc-track { grid-auto-columns: calc((100% - 48px) / 3); }
}
@media (max-width: 767px) {
  .elementor-644 .elementor-element.elementor-element-290d2e9.jc-shorts { --padding-top: 48px; --padding-bottom: 48px; }
  .jc-shorts .elementor-heading-title { font-size: 34px; }
  .jc-shorts-body { margin-top: 24px; }
  /* About one and a half clips across, so it's clear there are more to swipe to. */
  .jc-shorts .jc-track { grid-auto-columns: 68%; gap: 16px; }
  .jc-short-link { border-radius: 0 0 0 60px; }
  .jc-short-title { font-size: 18px; }
  .jc-short-dialog .jc-short-close { top: 8px; right: 8px; }
}
@media (prefers-reduced-motion: reduce) { .jc-play, .jc-shorts img.jc-short-img { transition: none; } }

/* Sermons page (Adam, Nov 6, 2026): the search and Filters row is the same width as the sermon
   cards (85% of the column, as the list is; both are full width on phones), and on tablet and
   desktop each card's Watch button sits on the right, beside the title and date. */
@media (min-width:768px){
  .elementor-105 .elementor-element.elementor-element-8fd1037{--width:85%;align-self:center}
  .elementor-482 .elementor-element.elementor-element-1c8e775{--width:100%;--display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;align-items:center}
  .elementor-482 .elementor-element.elementor-element-1c8e775 > .elementor-element-aedd314{grid-column:1;grid-row:1}
  .elementor-482 .elementor-element.elementor-element-1c8e775 > .elementor-element-aa397a3{grid-column:1;grid-row:2}
  .elementor-482 .elementor-element.elementor-element-1c8e775 > .elementor-element-1166b26{grid-column:2;grid-row:1 / span 2;align-self:center}
}
/* With the Watch button beside the text the card has two rows instead of three; more room above and below keeps it the
   ~190px height asked for (it was 176px). */
@media (min-width:768px){
  body.post-type-archive-sermons .jet-listing-grid--482 .elementor-element-39034ea > .e-con-inner { padding-top: 58px; padding-bottom: 58px; }
}
/* The Plan Your Visit form's Submit hovers to a pale fill; its text stays dark navy there (the theme's lavender was 2.07:1). */
.elementor-element-4ce0077 .elementor-button:hover .elementor-button-text, .elementor-element-4ce0077 .elementor-button:focus .elementor-button-text { color: #1F2040 !important; }

/* Livestream page (/livestream/, /es/livestream/; src/lib/pages.ts renderLivestream, public/js/livestream.js).
   Built from the site's own pieces: Lusitana headings, lavender #EFEFF7 / white / deep purple #5A5B93 sections
   (no two neighbours alike), square #A5A6C4 buttons, white cards like Plan Your Visit's form. */
.jc-live { font-family: Lusitana, serif; color: #3F3F3F; }
.jc-live section { padding: 80px 24px; }
.jc-live [hidden] { display: none !important; }
.jc-live-wrap { max-width: 1140px; margin: 0 auto; }
.jc-live-h1 { margin: 0 0 12px; font-size: 48px; line-height: 1.15; color: #000; text-align: center; }
.jc-live-h2 { margin: 0 0 16px; font-size: 34px; line-height: 1.2; color: #000; }
.jc-live p { margin: 0 0 12px; font-size: 17px; line-height: 1.6; }
.jc-live-lede { text-align: center; max-width: 60ch; margin: 0 auto 40px !important; font-size: 19px !important; }
.jc-live-hero { background: #EFEFF7; }
.jc-live-status { max-width: 860px; margin: 0 auto; padding: 40px; background: #FFFFFF; text-align: center; }
.jc-live-badge { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 8px !important; font-size: 15px !important; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #5A5B93; }
/* The dot shows only while live, as a red dot like YouTube's LIVE badge (Adam, Nov 6, 2026: no dot on Next livestream). */
.jc-live-dot { display: none; width: 12px; height: 12px; border-radius: 50%; background: #D93025; }
.jc-live-status[data-state="live"] .jc-live-dot { display: inline-block; }
.jc-live-status[data-state="live"] .jc-live-badge { color: #B3261E; }
.jc-live-status[data-state="live"] .jc-live-dot { background: #D93025; animation: jc-live-pulse 1.6s ease-in-out infinite; }
@keyframes jc-live-pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .jc-live-status[data-state="live"] .jc-live-dot { animation: none; } }
.jc-live-when { font-size: 28px !important; line-height: 1.3 !important; color: #000; }
.jc-live-count { color: #4A4A4A; }
.jc-live-count:empty, .jc-live-when:empty { display: none; }
.jc-live-player { margin: 24px 0 8px; }
.jc-live-actions { margin: 24px 0 0 !important; }
.jc-live-btn { display: inline-block; padding: 15px 28px; border-radius: 0; background: #A5A6C4; color: #FFFFFF !important; font-family: Lusitana, serif; font-size: 16px; font-weight: 700; text-decoration: none; }
.jc-live-btn:hover, .jc-live-btn:focus-visible { background: #5A5B93; }
.jc-live-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.jc-live .jc-live-video { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; margin: 0; padding: 0 !important; border: 0 !important; border-radius: 0; background: #000 !important; overflow: hidden; cursor: pointer; }
.jc-live .jc-live-video img { width: 100% !important; max-width: none; height: 100% !important; object-fit: cover; display: block; }
.jc-live-play { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: rgba(90, 91, 147, 0.92); color: #fff; display: flex; align-items: center; justify-content: center; }
.jc-live-video:hover .jc-live-play, .jc-live-video:focus-visible .jc-live-play { background: #A5A6C4; }
.jc-live-iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.jc-live-last { background: #FFFFFF; }
.jc-live-last .jc-live-wrap { max-width: 860px; }
.jc-live-last .jc-live-h2, .jc-live-meta { text-align: center; }
.jc-live-meta { color: #4A4A4A; margin-bottom: 24px !important; }
.jc-live-note { margin-top: 20px !important; text-align: center; }
.jc-live-note a { color: #5A5B93; text-decoration: underline; }
.jc-live-visit { background: #EFEFF7; }
.jc-live-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: stretch; }
.jc-live-card { display: flex; flex-direction: column; background: #FFFFFF; box-shadow: 0 18px 40px -24px rgba(63, 63, 63, 0.35); }
/* No photos (Adam, Nov 6, 2026). A line icon in a lavender circle tops each card; the site's 80px corner curve
   (Home's photo cards, About's closing shape) sits on the card's lower-left corner. */
.jc-live-card { border-radius: 0 0 0 80px; }
.jc-live-card-body { display: flex; flex-direction: column; align-items: center; flex: 1; padding: 48px 44px 52px; text-align: center; }
.jc-live-card-icon { display: flex; align-items: center; justify-content: center; width: 68px; height: 68px; margin-bottom: 22px; border-radius: 50%; background: #EFEFF7; color: #5A5B93; }
.jc-live-card-body p { max-width: 42ch; }
.jc-live-card-title { margin: 0 0 14px; font-size: 30px; line-height: 1.2; color: #000; text-wrap: balance; }
.jc-live-addr { font-weight: 700; color: #5A5B93; }
/* Buttons sit at the foot of each card, so the two line up whatever the text length. */
.jc-live-card .jc-live-btn-row { margin: auto 0 0 !important; padding-top: 20px; }
@media (max-width: 767px) {
  .jc-live section { padding: 56px 16px; }
  .jc-live-h1 { font-size: 36px; }
  .jc-live-h2 { font-size: 28px; }
  .jc-live-lede { margin-bottom: 28px !important; font-size: 17px !important; }
  .jc-live-status { padding: 28px 20px; }
  .jc-live-when { font-size: 23px !important; }
  .jc-live-cards { grid-template-columns: 1fr; gap: 28px; }
  .jc-live-card { border-radius: 0 0 0 60px; }
  .jc-live-card-body { padding: 36px 22px 40px; }
  .jc-live-card-title { font-size: 26px; }
  .jc-live-btn { display: block; text-align: center; }
}

/* Workbooks page (/workbooks/, /es/workbooks/; src/lib/pages.ts renderWorkbooks). Reuses the Livestream page's pieces
   (.jc-live sections, headings, cards); lavender hero, white list, lavender / white / lavender info sections. */
.jc-wb-center { text-align: center; }
.jc-wb-list { background: #FFFFFF; }
.jc-wb-count { text-align: center; color: #4A4A4A; margin-bottom: 40px !important; }
.jc-wb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.jc-wb-card { display: flex; flex-direction: column; padding: 32px 28px 28px; background: #FFFFFF; border-top: 4px solid #A5A6C4; box-shadow: 0 18px 40px -24px rgba(63, 63, 63, 0.35), 0 0 0 1px #E4E4EE; }
.jc-wb-card-title { margin: 0 0 8px; font-size: 24px; line-height: 1.25; color: #000; text-wrap: balance; }
.jc-wb .jc-wb-meta { margin-bottom: 14px; font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #5A5B93; }
.jc-wb .jc-wb-desc p { font-size: 16px; }
.jc-wb-btns { display: flex; flex-direction: column; gap: 10px; margin: auto 0 0 !important; padding-top: 14px; }
.jc-wb-btn { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 11px 16px; background: #A5A6C4; color: #FFFFFF !important; font-family: Lusitana, serif; font-size: 16px; font-weight: 700; text-decoration: none; text-align: center; }
.jc-wb-btn:hover, .jc-wb-btn:focus-visible { background: #5A5B93; }
.jc-wb-btn--ghost { background: #FFFFFF; color: #5A5B93 !important; box-shadow: inset 0 0 0 2px #A5A6C4; }
.jc-wb-btn--ghost:hover, .jc-wb-btn--ghost:focus-visible { background: #EFEFF7; }
.jc-wb-btn-text { display: flex; flex-direction: column; align-items: flex-start; text-align: left; white-space: nowrap; }
.jc-wb-size { font-size: 13px; font-weight: 400; opacity: 0.9; }
.jc-wb-short { display: none; }
.jc-wb-info { background: #EFEFF7; }
.jc-wb-tips { background: #FFFFFF; }
.jc-wb-about { background: #EFEFF7; }
.jc-wb-text { max-width: 820px; }
.jc-wb ul.jc-wb-plain, .jc-wb ul.jc-wb-rules { margin: 0 0 16px; padding-left: 1.3em; font-size: 17px; line-height: 1.6; }
.jc-wb ul.jc-wb-rules li { margin-bottom: 12px; }
.jc-wb ul.jc-wb-rules strong { color: #000; }
.jc-wb-text a, .jc-wb-card-body a, .jc-wb-back a { color: #5A5B93; text-decoration: underline; }
.jc-wb-note { font-style: italic; }
.jc-wb-card-body { align-items: flex-start; text-align: left; }
.jc-wb-card-body p { max-width: none; }
.jc-wb-sign { font-style: italic; color: #5A5B93; }
.jc-wb .jc-wb-back { max-width: 1140px; margin: 32px auto 0 !important; text-align: center; }
.jc-wb [id] { scroll-margin-top: 110px; }
@media (max-width: 1024px) { .jc-wb-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) {
  .jc-wb-grid { grid-template-columns: 1fr; gap: 18px; }
  .jc-wb-card { padding: 20px 18px 18px; }
  .jc-wb-card-title { font-size: 22px; margin-bottom: 4px; }
  .jc-wb .jc-wb-meta { margin-bottom: 8px; font-size: 13px; }
  /* Phones: the two download buttons sit side by side with short labels ("Workbook", "Cover"). */
  .jc-wb-btns { flex-direction: row; gap: 10px; padding-top: 10px; }
  .jc-wb-btn { flex: 1 1 0; min-width: 0; padding: 10px 10px; gap: 8px; }
  .jc-wb-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .jc-wb-short { display: inline; }
  /* Phones: each description shows its first three lines with Read more (public/js/workbooks.js; Adam, Nov 6, 2026). */
  .jc-wb-clamp .jc-wb-desc:not(.is-open) { position: relative; max-height: 4.8em; overflow: hidden; font-size: 16px; line-height: 1.6; }
  .jc-wb-clamp .jc-wb-desc:not(.is-open)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.6em; background: linear-gradient(rgba(255, 255, 255, 0), #FFFFFF); }
  .jc-wb-clamp .jc-wb-desc p { line-height: 1.6; }
  .jc-wb .jc-wb-more { align-self: flex-start; margin: 2px 0 0; padding: 4px 0 !important; border: 0 !important; background: none !important; color: #5A5B93 !important; font-family: Lusitana, serif; font-size: 16px; font-weight: 700; text-decoration: underline; cursor: pointer; }
  .jc-wb .jc-wb-more:focus-visible { outline: 2px solid #5A5B93; outline-offset: 2px; }
}

/* Event pages (/vbs/, /special-series/), Adam, Nov 6, 2026: the top like the other inside pages (About), the intro as
   words on white, the speaker on purple, and the church building beside the map (the Plan Your Visit styles above). */
.jc-ev-hero { background: #EFEFF7; padding: 80px 24px; text-align: center; }
.jc-ev-hero-inner { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.jc-ev-hero .jc-ev-title { margin: 0 0 4px; font-family: Lusitana, sans-serif; font-size: 56px; line-height: 1.2; font-weight: 700; color: #000; }
.jc-ev-hero .jc-ev-meta { margin: 0; font-family: Lusitana, sans-serif; font-size: 18px; line-height: 1.5; color: #3F3F3F; }
.jc-ev-hero .jc-ev-when { color: #5A5B93; font-weight: 700; }
.jc-ev-hero .jc-ev-buttons { margin-top: 16px; }
.jc-ev-intro { background: #fff; padding: 96px 24px; }
.jc-ev-intro-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.jc-ev-intro .jc-ev-intro-title { margin: 0; font-family: Lusitana, sans-serif; font-size: 48px; line-height: 1.2; font-weight: 700; color: #000; }
.jc-ev-intro .jc-ev-rule { display: block; width: 72px; height: 3px; margin: 28px auto; background: #5A5B93; border-radius: 2px; }
.jc-ev-intro .jc-ev-intro-text { font-family: Lusitana, sans-serif; font-size: 19px; line-height: 1.75; color: #3F3F3F; }
.jc-ev-intro .jc-ev-intro-text p { margin: 0 0 16px; }
.jc-ev-intro .jc-ev-intro-text p:last-child { margin-bottom: 0; }
.jc-ev-location .jc-location-row iframe { height: 400px !important; }
.jc-ev-location .jc-location-row .elementor-widget-container { border-radius: 0 !important; overflow: hidden; }
@media (max-width: 1024px) { .jc-ev-hero { padding: 48px 24px; } .jc-ev-intro { padding: 72px 24px; } }
@media (max-width: 767px) {
  .jc-ev-hero .jc-ev-title { font-size: 38px; }
  .jc-ev-hero .jc-ev-meta { font-size: 16px; }
  .jc-ev-intro { padding: 56px 24px; }
  .jc-ev-intro .jc-ev-intro-title { font-size: 34px; }
  .jc-ev-intro .jc-ev-rule { margin: 20px auto; }
  .jc-ev-intro .jc-ev-intro-text { font-size: 17px; }
  .jc-ev-location .jc-location-row iframe { height: 300px !important; }
}

/* UX/UI pass (Nov 9, 2026), checked against the ui-ux-pro-max guidelines (WCAG 2.2, Apple and Material touch sizes). */
/* A. The ESV copyright notice sat below the black footer in white text on the white page, so nobody could read it. It now
   sits on the footer's black. */
.elementor-location-footer .jc-bible-notice {
  max-width: none; margin: 0; padding: 8px max(16px, calc((100% - 70ch) / 2)) 24px; background: #000000;
}
/* B. Phone tap targets: links people tap on a phone get a 44px-tall touch area (Apple 44pt, Material 48dp; WCAG 2.2 needs
   at least 24px), without changing how they look on a computer. */
@media (max-width: 767px) {
  /* Footer menu (two columns of links): 32px tall, now 44px. */
  .elementor-location-footer .elementor-nav-menu a.elementor-item { padding-top: 10px !important; padding-bottom: 10px !important; }
  /* Footer phone, email, Privacy Policy, Terms and "Project Go": 18px tall and 3px apart, now a 44px row each. */
  .elementor-location-footer .elementor-widget-text-editor p a { display: inline-block; padding: 12px 0; text-decoration: underline; }
  /* Language button in the header: 33px tall, now 44px. */
  header .trp-language-item__current { min-height: 44px; display: flex; align-items: center; box-sizing: border-box; }
}
/* Sermon page breadcrumb (Home › Sermons): a 44px touch area without moving the text. */
.elementor-widget-breadcrumbs a { display: inline-block; padding: 12px 0; margin: -12px 0; }
/* Home and Plan Your Visit sermon slider dots: 8px dots 14px apart. A 24px touch area each, so the dots sit a little apart. */
.jet-listing-grid .swiper-pagination-bullet { position: relative; margin: 0 8px !important; }
.jet-listing-grid .swiper-pagination-bullet::after { content: ""; position: absolute; inset: -8px; }
/* C. Children & Teens photo slideshow: a pause/play button beside the dots (public/js/carousel.js). */
.jc-dots-row { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; }
.jc-dots-row .jc-dots { margin-top: 0; }
.jc-carousel-section .jc-pause { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0 !important; border: 2px solid rgba(255, 255, 255, 0.6) !important; border-radius: 50% !important; background: transparent !important; color: #FFFFFF !important; cursor: pointer; }
.jc-carousel-section .jc-pause:hover, .jc-carousel-section .jc-pause:focus-visible { background: rgba(255, 255, 255, 0.15) !important; border-color: #FFFFFF !important; }
.jc-carousel-section .jc-pause svg { width: 16px; height: 16px; fill: currentColor; }
/* D. Visitors who ask their device for less motion: no smooth sliding in the photo slideshow. */
@media (prefers-reduced-motion: reduce) { .jc-track { scroll-behavior: auto; } }

/* Buttons on hover (Adam, Nov 9, 2026: the black hover on the header's Plan Your Visit button "looks awful").
   Every lavender button now turns white with the site's purple text and a lavender edge on hover or keyboard focus,
   instead of black (most buttons), white with black text (some) or pale lavender (the Plan Your Visit form). Reads on
   the purple header, the lavender and the white sections. The outlined "Schedule a Bible Study" button on the home
   page keeps its own hover. */
body .elementor-widget:not(.elementor-element-d45b07f) .elementor-button:hover,
body .elementor-widget:not(.elementor-element-d45b07f) .elementor-button:focus-visible {
  background-color: #FFFFFF !important; border-color: #A5A6C4 !important; color: #5A5B93 !important;
}
body .elementor-widget:not(.elementor-element-d45b07f) .elementor-button:hover .elementor-button-text,
body .elementor-widget:not(.elementor-element-d45b07f) .elementor-button:focus-visible .elementor-button-text {
  color: #5A5B93 !important;
}

/* Carousel dots (Adam, Nov 9, 2026: too far apart). Every carousel now uses the common 8px dot with 8px between dots
   (Swiper's own default: 8px bullets with a 4px margin on each side), on desktop, tablet and phone. The sermon
   carousels on Home and Plan Your Visit had 16px between dots; Short Clips and the Children & Teens photos already
   used 8px. The carousels' arrows and swipe stay the larger way to move between slides. */
.jet-engine-swiper-pagination-wrapper { gap: 8px !important; }
.jet-engine-swiper-pagination-wrapper .swiper-pagination-bullet { margin: 0 !important; }