/* WP2Static UI Polyfill — sticky header + utility */
header.fusion-header-wrapper, #masthead, header.site-header, header#header, .header-main {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000;
    transition: box-shadow .2s ease, padding .2s ease;
}
header.wp2s-scrolled {
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
    background: rgba(255,255,255,.98) !important;
    backdrop-filter: blur(6px);
}
/* Hide Avada slider loading spinner — Avada JS removes it normally,
   but we strip that JS, so it would stay forever. Hide it always. */
.fusion-slider-loading, .fusion-slider-loading-progress, .fusion-slider-loading-progress-bar,
.fusion-loader, .fusion-page-loading, .fusion-preloader,
#preloader, #fusion-preloader, .preloader-wrap, .preloader { display: none !important; }
/* Ensure slider slides themselves stay visible if loader was hiding them */
.fusion-slider, .fusion-slider-sc, .flexslider, .fusion-flexslider { opacity: 1 !important; visibility: visible !important; }

/* Desktop menu must NEVER be hidden by our polyfill — guard against accidental display:none */
@media (min-width: 800px) {
    .fusion-main-menu, nav.fusion-main-menu, .fusion-main-menu > ul,
    .fusion-menu, ul.fusion-menu { display: block !important; }
    .fusion-main-menu > ul, .fusion-menu { display: flex !important; }
}

/* Make sure toggle/accordion content can be shown */
.fusion-toggle-content, .elementor-tab-content, .elementor-accordion-content,
.panel-collapse, .accordion-content, .collapse { display: none; }
.fusion-toggle-content.fusion-toggle-content-open,
.elementor-tab-content.active, .elementor-accordion-content.active,
.panel-collapse.in, .panel-collapse.show, .collapse.in, .collapse.show,
.accordion-content.active { display: block !important; }
.fusion-toggle-heading, .elementor-tab-title, .elementor-accordion-title,
.panel-heading[role="tab"], .accordion-toggle, [data-toggle="collapse"] {
    cursor: pointer; user-select: none;
}
/* v1.3.9: Pages where sidebar is removed (contact-us etc.) — make content full-width */
body.wp2s-no-sidebar #content,
body.wp2s-no-sidebar section#content,
body.wp2s-no-sidebar .fusion-content-widget-area-wrapper,
body.wp2s-no-sidebar .has-sidebar #content {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    float: none !important;
}
body.wp2s-no-sidebar #sidebar,
body.wp2s-no-sidebar aside#sidebar,
body.wp2s-no-sidebar .fusion-sidebar { display: none !important; }
body.wp2s-no-sidebar .has-sidebar #main .fusion-row { display: block !important; }

/* Avada search overlay — hidden permanently when our inline search is used (v1.3.8). */
.fusion-overlay-search { display: none !important; }

/* Modal styling */
.modal { display: none; position: fixed; inset: 0; z-index: 10000;
    background: rgba(0,0,0,.5); align-items: center; justify-content: center; }
.modal.in, .modal.show, .modal.active { display: flex !important; }
.modal-dialog { background: #fff; max-width: 600px; max-height: 80vh; overflow-y: auto;
    border-radius: 8px; padding: 20px; box-shadow: 0 10px 40px rgba(0,0,0,.2); }
.modal .close, .modal-close { cursor: pointer; font-size: 24px; background: none;
    border: none; position: absolute; top: 10px; right: 16px; color: #666; }
/* Mobile menu */
@media (max-width: 800px) {
    .fusion-mobile-menu, .mobile-menu, .menu-mobile { display: none; }
    .fusion-mobile-menu.wp2s-open, .mobile-menu.wp2s-open, .menu-mobile.wp2s-open {
        display: block !important; position: absolute; top: 100%; left: 0; right: 0;
        background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.1); padding: 20px; z-index: 999;
    }
}

/* Move the theme's #back_to_top button to the left edge -- the theme default (right:25px)
   put it in the same bottom-right corner as the floating Donate/WhatsApp buttons, so it was
   getting hidden behind them. */
#back_to_top, #back_to_top.off, #back_to_top.on {
    right: auto !important;
    left: 25px !important;
}

/* Back-to-top button had no fill -- just a faint light-gray outline circle with a light-gray
   arrow, easy to miss against most backgrounds. Give it a solid accent-color fill (matching
   the theme's existing teal accent used elsewhere for hovers/highlights) with a white arrow,
   and a slightly deeper teal on hover. */
#back_to_top > span {
    background-color: #1abc9c !important;
    border-color: #1abc9c !important;
}
#back_to_top > span i,
#back_to_top > span span {
    color: #ffffff !important;
}
#back_to_top:hover > span {
    background-color: #17a689 !important;
    border-color: #17a689 !important;
}

/* Home page "PRESENT ACTIVITIES" / newsletter section (element 362b60d): the theme's
   background-overlay rule for this section never set background-size or background-repeat,
   so the browser fell back to the CSS defaults (auto-size, repeat) and tiled the photo
   horizontally -- that's what produced the duplicated/cut-off children at the left and
   right edges. Force it to behave like every other full-bleed background section on the site. */
.elementor-element-362b60d > .elementor-background-overlay {
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

/* Footer credit link ("Website Developed by EchoPx.com"): the theme's global "a, p a"
   rule sets all links to a near-black #303030, which is invisible against the footer's
   near-black background. Nothing in the footer scope overrides it, so only the link text
   was disappearing while the plain text around it (using the lighter body color) stayed
   visible. Match it to the surrounding footer text color instead. */
.footer_bottom_holder .textwidget a {
    color: #818181 !important;
}
.footer_bottom_holder .textwidget a:hover {
    color: #fff !important;
}

/* Volunteers page "SEE WHAT THEY SAY" testimonial section (element 855e9f1).
   Two issues here:
   1) Text visibility: my earlier fix used a ::before overlay + position/z-index on
      .elementor-container to darken the photo behind the text. That z-index restacking
      interfered with the theme's own carousel/animation JS on this element and ended up
      hiding the testimonial text entirely instead of just improving contrast. Replaced with
      a darkening layer baked directly into the background-image itself (a gradient stacked
      on top of the photo) -- this only affects the background layer, never touches or
      restacks any content element, so it can't hide anything.
   2) Full width: this section combines Bridge's legacy "parallax_section_holder" full-width
      break-out (normally computed by JS at runtime) with Elementor's own full-width class --
      that JS isn't initializing in this static export, so the section stayed boxed inside
      its parent .content_inner instead of spanning the viewport (the gray bars on both
      sides). Forced it to break out of its container with a pure-CSS 100vw technique instead
      of depending on JS, which also makes the background photo itself render at full size. */
.elementor-element-855e9f1.parallax_section_holder {
    background-image: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url("/assets/images/volunteers-parallax-image.webp") !important;
    background-size: cover, cover;
    background-position: center center, center center;
    background-repeat: no-repeat, no-repeat;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    left: auto !important;
    right: auto !important;
}

/* Root cause of the still-missing testimonial text on become-a-volunteer.php: the theme's
   own FlexSlider init (bound via Elementor's "frontend/element_ready/bridge_testimonials.default"
   hook, see assets/themes/bridge/js/default.min.js -> initTestimonials()) doesn't reliably fire
   in this static export. When it partially fires, FlexSlider's own library code
   (jquery.flexslider-min.js) zeroes every slide's opacity as its very first init step and
   only restores the current slide's opacity at the *end* of init -- if that init stalls or
   errors out in this environment (no REST/AJAX backend, missing DOM bits FlexSlider expects),
   every slide is left permanently at opacity:0, which is exactly the "no text at all" bug
   reported. This wipes out any inline style wp2static-ui.js sets, since inline styles lose to
   a later inline-style write from other JS. Fix: drive slide visibility through this class
   instead, forced with !important so no inline-style write (ours or the vendor script's) can
   override it -- wp2static-ui.js now toggles this class on the active slide. */
.testimonials_carousel .slides > li {
    display: none !important;
    opacity: 0 !important;
}
.testimonials_carousel .slides:not(:has(li.wp2s-active-slide)) > li:first-child {
    display: block !important;
    opacity: 1 !important;
}
.testimonials_carousel .slides > li.wp2s-active-slide {
    display: block !important;
    opacity: 1 !important;
}