#main-cover-page .container {
    opacity:1;
}

#main-cover-page .loading-indicator{
    display:none;
}

#main-cover-page.videobg{
    background:#383838;
}
/* --- D11 / Bootstrap 5 reconciliation (placed in local.css, which loads after custom.css) --- */
/* Bootstrap 5's reboot underlines links by default (via Barrio + the fullcalendar CDN reset);
   the old Bootstrap 3 theme did not, so the top bar / nav / menus were clean. Restore that. */
.bar a,
.bar nav a,
.bar .menu a,
.bar .menu-horizontal a,
.bar .menu-horizontal li a,
#block-mainnavigation a,
.menu-vertical a {
  text-decoration: none !important;
}
.bar a:hover,
.bar .menu-horizontal a:hover,
#block-mainnavigation a:hover {
  text-decoration: none !important;
}
/* Body content links: no underline at rest, underline on hover (matches the pre-upgrade look). */
.region-content p a,
.region-content li a,
article .field--name-body a {
  text-decoration: none;
}
.region-content p a:hover,
article .field--name-body a:hover {
  text-decoration: underline;
}

/* --- D11 layout reconciliation (BS3 -> BS5 differences) --- */

/* Announcement / views-reference cards: the isotope masonry container (.masonry .masonry__container)
   is not present in this markup, so isotope never lays the cards out and they stack full-width.
   Lay them out as a responsive grid to match the pre-upgrade 3-column look. */
.paragraph--type--paragraph-views-reference .view-content.row {
  display: flex;
  flex-wrap: wrap;
}
.paragraph--type--paragraph-views-reference .view-content.row > .masonry__item {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0 15px;
  margin-bottom: 30px;
}
@media (min-width: 768px) {
  .paragraph--type--paragraph-views-reference .view-content.row > .masonry__item {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
}

/* Footer social icons: Bootstrap 5's .list-inline needs .list-inline-item on each <li>; this
   markup lacks it, so the icons stack vertically. Force them horizontal. */
footer .social-list.list-inline,
.social-list.list-inline {
  padding-left: 0;
  list-style: none;
}
footer .social-list.list-inline > li,
.social-list.list-inline > li {
  display: inline-block;
  margin-right: 12px;
  margin-bottom: 0;
}

/* --- D11 styling polish (BS3 -> BS5) --- */

/* Announcements: the section rendered full-bleed on D11 (no .container). Center it. */
.view-announcement-cards {
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}
/* The announcement card is an inner .col-md-4 nested in an inline span; on BS5 that column
   collapses to content width (~126px) because it has no flex .row parent. The outer view row is
   already 33% wide, so make the inner card simply fill it. */
.view-announcement-cards .field-content {
  display: block;
}
.view-announcement-cards .masonry__item .col-md-4,
.view-announcement-cards .masonry__item .col-sm-6,
.view-announcement-cards .masonry__item article.feature-1 {
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
  padding-left: 0;
  padding-right: 0;
}
/* Keep the card body's .boxed padding (do NOT zero it) - just let it fill the column. */
.view-announcement-cards .masonry__item .feature__body {
  width: 100%;
  max-width: 100%;
}

/* All buttons: keep labels on one line (BS5 white-space let them wrap: hero CTAs,
   the XEM BAI GIANG sermon button, the footer CONTACT US button). */
.btn {
  white-space: nowrap;
}

/* Top bar: keep the main menu and the DIRECTIONS button on ONE row. On BS5 the region is a
   wrapping flex .row, so the Directions block dropped to a second line. */
@media (min-width: 992px) {
  .bar .region-navigation-collapsible {
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
  }
  .bar #block-mainnavigation,
  .bar #block-customblocktrybuiderbuynowbutton {
    display: inline-block;
    width: auto;
    flex: 0 0 auto;
  }
}

/* Footer CONTACT US button: legible outline on the dark footer (was low-contrast gray). */
footer .btn,
footer a.btn,
footer .region a.btn {
  border-color: rgba(255, 255, 255, 0.5) !important;
  color: #fff !important;
}
footer .btn:hover,
footer a.btn:hover {
  border-color: #fff !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

/* Footer must span full viewport width. On BS5 the footer's full_block section was constrained
   to the container (1320px), leaving white gutters. Break it out full-width and keep the content
   centered in a container. */
footer .block-content-full_block,
footer section.block-block-content {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
footer .block-content-full_block > .text-formatted,
footer section.block-block-content > .text-formatted {
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

/* Image slider / gallery ("sliders block") should be contained, not span the full viewport. */
.paragraph--type--paragraph-sliders-block {
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

/* Announcements heading: center it to match the other section headings (Mission, etc.). */
.paragraph--type--paragraph-views-reference:has(.view-announcement-cards) .text-formatted {
  text-align: center;
}

/* (Removed 2026-10-21: padding workarounds for the announcements and sermon-bar sections. The
   views-reference paragraph template renders a <section> again, as on live, so the theme's own
   section spacing applies.) */

/* Hide Stack's paragraph/block CONFIG fields that leak into the rendered output on D11
   (e.g. the "Container: On" label above the gallery). These control layout, not content. */
.field--name-field-paragraph-container,
.field--name-field-paragraph-extra-class,
.field--name-field-paragraph-data-overlay,
.field--name-field-paragraph-id,
.field--name-field-paragraph-background-image,
.field--name-field-content-vertical-center,
.field--name-field-data-gradient-bg,
.field--name-field-block-container,
.field--name-field-block-data-overlay,
.field--name-field-block-id,
.field--name-field-block-extra-class {
  display: none !important;
}

/* Gallery / slider controls: dark translucent circles with a white chevron read clearly on both
   bright and dark images (white circles blended into bright photos = poor contrast). */
.slider .flickity-prev-next-button,
.paragraph--type--paragraph-sliders-block .flickity-prev-next-button {
  width: 48px;
  height: 48px;
  background: rgba(0, 0, 0, 0.55) !important;
  opacity: 1 !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
.slider .flickity-prev-next-button:hover,
.paragraph--type--paragraph-sliders-block .flickity-prev-next-button:hover {
  background: rgba(0, 0, 0, 0.78) !important;
}
.slider .flickity-prev-next-button .flickity-button-icon,
.paragraph--type--paragraph-sliders-block .flickity-prev-next-button .flickity-button-icon {
  fill: #fff;
}
/* Dots: bigger, higher contrast, with room below the gallery. */
.paragraph--type--paragraph-sliders-block {
  margin-bottom: 55px;
}
.slider .flickity-page-dots,
.paragraph--type--paragraph-sliders-block .flickity-page-dots {
  bottom: -34px;
}
.slider .flickity-page-dots .dot,
.paragraph--type--paragraph-sliders-block .flickity-page-dots .dot {
  width: 12px;
  height: 12px;
  margin: 0 6px;
  background: #333;
  opacity: 0.35;
}
.slider .flickity-page-dots .dot.is-selected,
.paragraph--type--paragraph-sliders-block .flickity-page-dots .dot.is-selected {
  opacity: 1;
}

/* Announcement pager: center it with breathing room. */
.view-announcement-cards .pager,
.view-announcement-cards .pagination,
.view-announcement-cards nav[role="navigation"] {
  margin-top: 35px;
  padding-top: 10px;
  justify-content: center;
  display: flex;
}

/* Local-task (View / Edit / Export / Delete / Revisions) tabs.
   Keep them position:fixed (reserves no layout space, so they add no whitespace)
   but present them as an intentional, compact admin panel docked top-left instead
   of raw tabs floating over the hero: solid background, sharp corners, shrunk to
   fit their contents. Sits just below the Drupal admin toolbar. */
.user-logged-in nav.tabs {
  position: fixed;
  top: 90px;
  left: 15px;
  z-index: 1000;
  width: fit-content;
  max-width: calc(100vw - 30px);
  margin: 0;
  padding: 5px 6px;
  background: #ffffff;
  border: 1px solid #d0d5da;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  border-radius: 0;
}

/* Tidy the BS5 nav-tabs inside the panel: hug the tabs on one row, no doubled
   bottom rule, sharp corners. */
.user-logged-in nav.tabs ul.nav-tabs {
  display: inline-flex;
  flex-wrap: nowrap;
  width: auto;
  border-bottom: 0;
  margin: 0;
  gap: 2px;
}

/* The old theme gives each <li> its own padding (13px 26px) on top of the
   link padding, bloating the strip. Zero it so tabs hug their labels. */
.user-logged-in nav.tabs ul.nav-tabs > li {
  margin: 0;
  padding: 0;
}

.user-logged-in nav.tabs .nav-link {
  border-radius: 0;
  padding: 6px 12px;
}

/* The secondary local-task tabs container (ul.tabs-content) keeps a 26px bottom
   margin even when it is empty (height 0), so it pushes the page content down and
   opens a white gap under the header on interior pages for logged-in editors.
   Zero its spacing so it never reserves layout space. */
.user-logged-in .tabs-content {
  margin: 0;
  padding: 0;
}

/* --- Phase 2 rehearsal 2026-10-21: parity fixes found by comparing with live --- */
/* Switchable image blocks (e.g. "What It Means To Praise God" on Worship Ministry).
   Bootstrap 3 floated the text column right (.switchable ... col-:last-child {float:right}),
   next to the absolutely positioned image. Bootstrap 5 rows are flex, so floats do nothing
   and the text sat underneath the image, invisible. Push it to the other side instead. */
@media (min-width: 768px) {
  .imageblock.switchable > .container > .row {
    justify-content: flex-end;
  }
  .imageblock.switchable.switchable--switch > .container > .row {
    justify-content: flex-start;
  }
}
/* Bootstrap 3's .hide utility (display:none) is gone in Bootstrap 5. Body content uses it,
   e.g. the theme's demo "TRIGGER MODAL" button inside the Events calendar block. */
.hide {
  display: none !important;
}
/* Footer link lists: live has no underline (Bootstrap 5 reboot adds one). */
.footer-1 a:not(.btn) {
  text-decoration: none;
}
/* Event calendar: FullCalendar day headers and day numbers are links; the Bootstrap 5 reboot
   underlines them. Live shows them plain. */
#calendar a.fc-col-header-cell-cushion,
#calendar a.fc-daygrid-day-number,
#calendar a.fc-event {
  text-decoration: none;
}
/* Announcement cards: the charcoal colour scheme (now loading after this file, as on live)
   underlines `span a`; the views field wrapper is a span here. Live shows plain links. */
.view-content .feature__body a {
  text-decoration: none;
}

/* --- Visual parity fixes 2026-10-21 --- */
/* Header width (and every other .container): live runs Bootstrap 3, whose container stops at
   1170px with 15px gutters. Bootstrap 5 grows to 1320px (1400px+) with 1.5rem gutters, so the
   logo and menu sat about 80px nearer the edges. Restore the Bootstrap 3 widths and gutters.
   No template or content uses the Bootstrap 5 .g-* gutter classes, so a plain override is safe. */
.container,
.container-fluid,
.row {
  --bs-gutter-x: 30px;
}
.container {
  max-width: none;
}
@media (min-width: 768px) {
  .container {
    max-width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    max-width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1170px;
  }
}
/* Light strip around the navbar on interior pages: theme.css gives `.bar + .bar` a 13px top
   margin unless the first bar is a Bootstrap 3 `visible-*` bar. The mobile bar is now
   `d-block d-md-none`, so the desktop bar got the margin, which showed as white above and
   below the dark navbar. */
.nav-container > .bar.d-md-none + .bar {
  margin-top: 0;
}
/* Navbar regions are Bootstrap 5 rows here (plain divs on live), so the menu block and the
   Directions block each got gutter padding and the row a negative margin, which pushed the
   menu about 30px left of live. Lay them out like the live markup. */
#menu1 .region-navigation-collapsible.row {
  margin-left: 0;
  margin-right: 0;
}
#menu1 .region-navigation-collapsible.row > * {
  padding-left: 0;
  padding-right: 0;
}
/* Login and subscribe buttons: custom.css makes them #4a90e2 (as on live), but the Stack 11
   charcoal scheme, which loads later, repaints `button#edit-submit` charcoal blue. Keep live's. */
body button#edit-submit,
body button#edit-subscribe {
  background: #4a90e2;
  border-color: #4a90e2;
}
/* Log in button icon: the Bootstrap 3 base theme on live adds glyphicon-log-in. Bootstrap 5 has
   no glyphicons, so draw the same sign-in arrow with an inline SVG in the text colour. */
.user-login-form button#edit-submit::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.4em;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3.5a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 0-1 0v2A1.5 1.5 0 0 0 6.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-8A1.5 1.5 0 0 0 5 3.5v2a.5.5 0 0 0 1 0z'/%3E%3Cpath d='M11.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H1.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3.5a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 0-1 0v2A1.5 1.5 0 0 0 6.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-8A1.5 1.5 0 0 0 5 3.5v2a.5.5 0 0 0 1 0z'/%3E%3Cpath d='M11.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H1.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708z'/%3E%3C/svg%3E") center / contain no-repeat;
}