/*
Theme Name: Avada Child
Description: Child theme for Avada theme
Author: ThemeFusion
Author URI: https://theme-fusion.com
Template: Avada
Version: 1.0.0
Text Domain:  Avada
*/

.fusion-button:hover,
.fusion-button-default:hover,
.button-default:hover {
    filter: brightness(0.90) !important;
}

.fusion-button.button-white {
    background-color: var(--awb-color1) !important;
    background-image: none !important;
    border-color: var(--awb-color2) !important;
    color: var(--awb-color2) !important;
}

.fusion-button.button-white .fusion-button-text,
.fusion-button.button-white i {
    color: var(--awb-color2) !important;
}

.new-home-alert {
    width: 115px !important;
}

.fusion-image-element:has(.hero-care-icon) {
    height: 0 !important;
}

.fusion-layout-column:has(.hero-care-icon) {
    position: static !important;
}

.hero-care-icon {
    width: 180px;
    height: 180px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 2;
    position: absolute;
    left: 0;
    bottom: 10px;
}

.fusion-layout-column.special-offer-full-bleed {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}

.special-offer-full-bleed .fusion-column-wrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.fusion-related-posts-title-link {
    color: var(--post_titles_extras_typography-color) !important;
}

#top {
    z-index: 100;
}

/* The header's CALL/ENQUIRE button pair sits in a fixed-width column that,
   at roughly 1024–1198px, is a hair narrower than the two buttons plus their
   gap need — so they wrap onto two lines instead of staying side by side.
   Keep them on one line and stop them from being squeezed (which just made
   the CALL button's own text wrap instead). */
.fusion-tb-header .fusion-column-wrapper.fusion-flex-justify-content-flex-end.fusion-content-layout-row {
    flex-wrap: nowrap !important;
}

.fusion-tb-header .fusion-column-wrapper.fusion-flex-justify-content-flex-end.fusion-content-layout-row > * {
    flex-shrink: 0 !important;
}

/* Show the CALL/ENQUIRE CTAs at the bottom of the mobile flyout menu too
   (added as real Main Menu items — "Call 01423 276 479" and "Enquire" —
   tagged with the mobile-cta-item CSS class in Appearance > Menus), hidden
   in the normal desktop/row nav where the separate CTA Menu buttons already
   cover the same actions. .awb-menu.collapse-enabled is Avada's own marker
   class for "the nav is currently in collapsed/flyout mode". */
.awb-menu:not(.collapse-enabled) .mobile-cta-item {
    display: none !important;
}

.awb-menu.collapse-enabled .mobile-cta-item {
    padding: 8px 24px !important;
    height: auto !important;
}

.awb-menu.collapse-enabled .menu-item-6628.mobile-cta-item {
    margin-top: 16px;
    border-top: 1px solid rgba(1, 37, 78, 0.15);
    padding-top: 24px !important;
}

.awb-menu.collapse-enabled .mobile-cta-item .awb-menu__main-a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 48px !important;
    border-radius: 25px !important;
    font-weight: 600 !important;
    padding: 0 24px !important;
}

.awb-menu.collapse-enabled .menu-item-6628.mobile-cta-item .awb-menu__main-a {
    background-color: rgb(39, 102, 187) !important;
    color: #fff !important;
}

.awb-menu.collapse-enabled .menu-item-6629.mobile-cta-item .awb-menu__main-a {
    background-color: #fff !important;
    color: rgb(1, 37, 78) !important;
    border: 1px solid rgb(1, 37, 78) !important;
}

/* Dim + blur the page behind the mobile flyout menu while it's open, so the
   page content isn't plainly visible through/below the (content-sized, not
   full-height) menu panel. Purely decorative (pointer-events: none) so it
   never blocks taps on the actual header/toggle button or menu links.

   Attached to body::after (via :has()), not nav::before: the nav lives
   INSIDE #top (the header bar), so a backdrop attached to the nav itself
   is confined to #top's own stacking context — no z-index on the backdrop
   can ever escape above #top's own painted content from in there, which is
   exactly why the first version blurred the header too. Attaching to
   body::after puts the backdrop and #top in the same (root) stacking
   context, so the z-index comparison below actually works. */
body:has(nav.awb-menu.collapse-enabled.expanded)::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(1, 20, 45, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 2147483646;
    pointer-events: none;
}

/* Keep the header itself (logo, close button) crisp and above the backdrop
   — #top is the header's own container, already opaque white. */
body:has(nav.awb-menu.collapse-enabled.expanded) #top {
    z-index: 2147483647 !important;
}

/* A bit more breathing room below the last mobile-cta-item (Enquire), which
   otherwise sat right at the bottom edge of the flyout panel with barely
   any margin. */
.awb-menu.collapse-enabled .menu-item-6629.mobile-cta-item {
    padding-bottom: 24px !important;
}
/**
 * ---------------------------------------------------------------------
 * Stop Avada carousels resizing on every slide change.
 *
 * Every Avada carousel (Post Cards, Portfolio, Related Posts, Image
 * Carousels, Product Sliders) is initialised with Swiper's autoHeight:
 * true hardcoded in fusion-builder's own awb-carousel.js - not a
 * builder-exposed setting. Swiper then sets an inline height on
 * .swiper-wrapper matching whichever slides are currently visible,
 * causing the box to visibly jump when slide heights differ (e.g. a
 * 'Stay updated with our news' Post Cards carousel where post titles
 * vary in length).
 *
 * Forcing height back to auto restores normal flexbox sizing instead -
 * .swiper-wrapper is display:flex by default, so it settles at the
 * height of the tallest slide across the whole set and stays there.
 * ---------------------------------------------------------------------
 */

.fusion-post-cards.awb-swiper .swiper-wrapper {
	height: auto !important;
}