#ast-desktop-header {
    display: block;
}

#ast-mobile-header {
    display: none;
}

@media (max-width: 921px) {
    #ast-desktop-header {
        display: none;
    }

    #ast-mobile-header {
        display: block;
    }
}

/* Above-header links: astra-inline.css has a bare
   `a { color: var(--ast-global-color-1) }` which beats the white inherited
   from the wrapping span and turns the email orange. WordPress emits
   per-element "inner-link-style" rules that undo this; reproduce just that. */
.ast-above-header-wrap .ast-header-html a,
.ast-above-header-wrap .ast-header-html a:hover,
.ast-above-header-wrap .ast-header-html a:focus {
    color: inherit;
}

/* Header rows only. Astra lays these out with CSS Grid, driven by inline
   per-section styles WordPress emits from the customizer; without those the
   tracks collapse, so drive the header with flex instead. The FOOTER must be
   left on Astra's grid (.ast-builder-grid-row-3-cwide sets 1fr 3fr 1fr) --
   flexing it there stacks the widgets on top of each other. */
.site-header .ast-builder-grid-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
}

.site-header .site-header-section {
    display: flex;
    align-items: center;
    gap: 22px;
}

.ast-grid-right-section {
    margin-left: auto;
    justify-content: flex-end;
}

.ast-above-header-bar .ast-container,
.ast-primary-header-bar .ast-container {
    display: flex;
    align-items: center;
    width: 100%;
}

/* --- Sub-menu ------------------------------------------------------------
 * Astra opens sub-menus via JS that ships with the WordPress build; drive it
 * from CSS hover instead.
 */

.main-header-menu li {
    position: relative;
}

.main-header-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
    z-index: 1000;
}

.main-header-menu li:hover > .sub-menu,
.main-header-menu li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Astra renders this toggle for touch devices; hidden on desktop. */
.ast-menu-toggle {
    display: none;
    background: none;
    border: 0;
    cursor: pointer;
}

/* --- Mobile drawer -------------------------------------------------------
 * The open state is applied by WordPress inline script; reproduce just that.
 */

.menu-toggle {
    display: none;
    padding: 10px 12px;
    background: none;
    border: 0;
    font-size: 22px;
    cursor: pointer;
}

/* The wrapper's own visibility is handled by the breakpoint rules above;
   the drawer contents collapse until the toggle opens them. */
#ast-mobile-header .ast-mobile-header-content {
    display: none;
}

body.ast-mobile-menu-open #ast-mobile-header .ast-mobile-header-content {
    display: block;
}

.ast-mobile-menu {
    margin: 0;
    padding: 8px 0;
    list-style: none;
}

.ast-mobile-menu li {
    width: 100%;
}

.ast-mobile-menu a {
    display: block;
    padding: 13px 22px;
    text-decoration: none;
}

.ast-mobile-menu .sub-menu {
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    padding: 0;
}

.ast-mobile-menu .sub-menu.is-open {
    display: block;
}

.ast-mobile-menu .sub-menu a {
    padding-left: 38px;
}

@media (max-width: 921px) {
    .ast-header-menu-1,
    .ast-header-button-1 {
        display: none;
    }

    .menu-toggle {
        display: inline-block;
    }

    .ast-above-header-bar .ast-container,
    .ast-primary-header-bar .ast-container {
        flex-wrap: wrap;
    }

    .ast-mobile-menu .ast-menu-toggle {
        display: block;
        position: absolute;
        top: 4px;
        right: 10px;
        padding: 10px 14px;
    }
}

/* --- Footer -------------------------------------------------------------
 * Astra lays the footer out with CSS Grid: .ast-builder-grid-row is
 * display:grid and .ast-builder-grid-row-3-cwide sets 1fr 3fr 1fr. Do NOT
 * override that with flex -- doing so collapses the tracks and the widgets
 * stack on top of each other.
 *
 * Only the pieces WordPress emits per-site from the customizer are supplied
 * here: widget spacing, the logo cap and the blurb width.
 */

/* Stack the widgets inside the centre column with real spacing between them. */
/* Spacing between the footer widgets.
 *
 * astra-inline.css carries
 *     .footer-widget-area[data-section="section-fb-html-2"]{margin-top:-5%}
 * which (specificity 0-2-0) outranks a plain child rule and pulls the "Or Call
 * Us" line up onto the blurb. On the reference that negative pull is absorbed
 * by spacing WordPress emits around the widget; here it is not, so set the
 * spacing explicitly with matching specificity. */
.site-footer-primary-section-2 > * + * {
    margin-top: 48px;
}

/* Measured from the reference: ~74px between the blurb and "Or Call Us",
   ~69px between that and the social icons. */
.site-primary-footer-wrap .footer-widget-area[data-section="section-fb-html-2"] {
    margin-top: 48px;
}

.site-footer-primary-section-2 {
    text-align: center;
}

/* Logo renders small on the reference, ~96px. */
.site-primary-footer-wrap .textwidget img {
    max-width: 96px;
    height: auto;
}

/* Blurb wraps to two lines rather than running the full width. */
.site-primary-footer-wrap .textwidget p {
    max-width: 660px;
    margin-left: auto;
    margin-right: auto;
}

.footer-social-inner-wrap {
    display: flex;
    justify-content: center;
    gap: 14px;
}

/* Below-footer: copyright left, credit right. */
.site-below-footer-wrap .site-footer-section-2 {
    text-align: right;
}

.site-below-footer-wrap p {
    margin: 0;
}

@media (max-width: 767px) {
    .site-below-footer-wrap .site-footer-section-1,
    .site-below-footer-wrap .site-footer-section-2 {
        text-align: center;
    }
}

/* --- Image lightbox ------------------------------------------------------
 * Elementor's lightbox JS lives in a lazily-fetched chunk that only its
 * WordPress loader requests, so jaibhagatjee-lightbox.js binds the gallery
 * links itself. These rules style that overlay to match the reference, where
 * the image sits in a contained panel (~67vh tall) with the counter/tools bar
 * pinned to the top and the caption to the bottom of the viewport.
 */

.jbj-lightbox {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: none;
    align-items: center;
    justify-content: center;
}

.jbj-lightbox.is-open {
    display: flex;
}

body.jbj-lb-lock {
    overflow: hidden;
}

.jbj-lb-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .87);
}

/* Counter + tools, pinned top like the reference. */
.jbj-lb-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    color: hsla(0, 0%, 93.3%, .9);
    font-size: 15px;
    z-index: 10;
}

.jbj-lb-tools {
    display: flex;
    gap: 4px;
}

.jbj-lb-btn,
.jbj-lb-nav {
    background: none;
    border: 0;
    color: hsla(0, 0%, 93.3%, .9);
    font-size: 20px;
    line-height: 1;
    padding: 8px 10px;
    cursor: pointer;
    transition: color .3s;
}

.jbj-lb-btn:hover,
.jbj-lb-nav:hover {
    color: #fff;
}

.jbj-lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 25px;
    padding: 18px;
    z-index: 10;
}

.jbj-lb-prev { left: 10px; }
.jbj-lb-next { right: 10px; }

/* The panel: centred, image capped so the caption clears the bottom. */
.jbj-lb-figure {
    position: relative;
    margin: 0;
    z-index: 1;
    line-height: 0;
    max-width: 92vw;
}

.jbj-lb-img {
    display: block;
    max-width: 92vw;
    max-height: 67vh;
    width: auto;
    height: auto;
    object-fit: contain;
    cursor: zoom-in;
    border-radius: 2px;
    box-shadow: 0 0 30px rgba(0, 0, 0, .3), 0 0 8px -5px rgba(0, 0, 0, .3);
    transition: max-height .25s ease, max-width .25s ease;
}

.jbj-lb-img.is-zoomed {
    max-height: 92vh;
    max-width: 96vw;
    cursor: zoom-out;
}

/* Caption pinned near the bottom of the viewport, not under the image. */
.jbj-lb-caption {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 15px 20px;
    color: hsla(0, 0%, 93.3%, .9);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    z-index: 5;
}

@media (max-width: 767px) {
    .jbj-lb-nav { font-size: 20px; padding: 10px; }
    .jbj-lb-img { max-height: 60vh; }
}

/* --- Swiper --------------------------------------------------------------
 * Until our initialiser runs, every slide is laid out in normal flow and the
 * carousel renders as a tall stack. Clipping the track keeps the pre-init
 * frame the right height; Swiper takes over from there.
 */

.elementor-image-carousel-wrapper.swiper,
.elementor-image-carousel-wrapper .swiper-container {
    overflow: hidden;
    position: relative;
}

.elementor-image-carousel.swiper-wrapper {
    display: flex;
}

.elementor-image-carousel-wrapper .swiper-slide {
    flex-shrink: 0;
    height: auto;
}