/*
Theme Name: Enfold Child
Description: A <a href='http://codex.wordpress.org/Child_Themes'>Child Theme</a> for the Enfold Wordpress Theme. If you plan to do a lot of file modifications we recommend to use this Theme instead of the original Theme. Updating will be much easier then.
Version: 1.0
Author: Kriesi
Author URI: http://www.kriesi.at
Template: enfold
*/


.page-id-29 .slide-meta { display: none !important; }

/* Breadcrumbs stay in normal flow: the previous 25px relative offset moved
   wrapped trails outside the title bar without reserving any space. */
#top .title_container .breadcrumb {
    position: relative;
    inset: auto;
    margin: 0;
    padding-block: 0.875rem;
    display: flow-root;
}

#top .title_container .breadcrumb-trail {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem;
}

/* Enfold floats links inside its structured-data spans. That removes their
   text baseline from the flex item and lifts Home above the adjacent text. */
#top .title_container .breadcrumb-trail a {
    float: none;
    display: inline;
}

#top .title_container .breadcrumb-trail .trail-end {
    min-width: 0;
    overflow-wrap: break-word;
}

#top .title_container {
    padding-bottom: 0;
}

/* Title container background color */
.title_container { background-color: #b5dcf2!important; }

/* ===============================
   BODY & BE - COLOR FOUNDATION
   Accent blue remains available for decorative use. Functional blue is
   darker so text and controls meet WCAG contrast requirements.
   =============================== */
:root {
    --bb-color-accent: #33a0da;
    --bb-color-interactive: #2375a0;
    --bb-color-interactive-hover: #1d6b93;
    --bb-color-text: #333333;
    --bb-color-text-secondary: #5f6b73;
    --bb-color-white: #ffffff;
    --bb-color-surface-soft: #edf7fc;
    --bb-color-border-soft: #cfe6f2;
    --bb-color-focus: #0b5f87;
    --bb-color-focus-inverse: #ffffff;
    --bb-shadow-subtle: 0 6px 18px rgba(29, 107, 147, 0.10);
    --bb-shadow-card: 0 8px 22px rgba(29, 107, 147, 0.10);
    --bb-shadow-raised: 0 12px 26px rgba(29, 107, 147, 0.16);
    --bb-motion-fast: 180ms;
    --bb-motion-normal: 220ms;
    --bb-ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
    --bb-type-body: clamp(1.0625rem, 1.045rem + 0.08vw, 1.125rem);
    --bb-type-small: 0.875rem;
    --bb-type-component-title: 1rem;
    --bb-type-h1: clamp(1.875rem, 1.618rem + 1.146vw, 2.625rem);
    --bb-type-h2: clamp(1.625rem, 1.496rem + 0.573vw, 2rem);
    --bb-type-h3: clamp(1.25rem, 1.164rem + 0.382vw, 1.5rem);
    --bb-type-hero: clamp(2.25rem, 1.993rem + 1.146vw, 3rem);
    --bb-leading-body: 1.65;
    --bb-leading-heading: 1.22;
}

/* ===============================
   BODY & BE - HEADER NAVIGATION
   Only top-level desktop links receive the editorial color roles; submenu
   surfaces and mobile-menu behavior remain controlled by Enfold.
   =============================== */
#top #header .av-main-nav > li.menu-item-top-level > a {
    color: var(--bb-color-text);
    font-weight: 500;
}

/* Pre-launch polish: Enfold's 0.95 background opacity reveals the page
   behind the opaque logo. A solid white header keeps the whole brand area
   consistent while scrolling, without filters or replacement-image hacks. */
#top #header .header_bg {
    opacity: 1;
    background-color: var(--bb-color-white);
}

/* The desktop links collide with the logo at 1024px. Use Enfold's existing
   burger and menu at this intermediate width; no navigation items are lost. */
@media only screen and (min-width: 990px) and (max-width: 1100px) {
    #top #header .av-main-nav > .menu-item {
        display: none;
    }

    #top #header .av-main-nav > .av-burger-menu-main {
        display: block;
    }
}

#top #header .av-main-nav > li.menu-item-top-level:hover > a,
#top #header .av-main-nav > li.current-menu-item > a,
#top #header .av-main-nav > li.current-menu-ancestor > a,
#top #header .av-main-nav > li.current-page-ancestor > a {
    color: var(--bb-color-interactive);
}

#top #header .av-main-nav > li.menu-item-top-level > ul a {
    color: var(--bb-color-text-secondary);
}

#top #header .av-main-nav > li.menu-item-top-level > ul li:hover > a,
#top #header .av-main-nav > li.menu-item-top-level > ul li.current-menu-item > a {
    color: var(--bb-color-interactive);
}

/* ===============================
   BODY & BE - KEYBOARD FOCUS
   Enfold removes outlines globally. These frontend component scopes restore
   a non-layout-shifting fallback; supporting browsers limit it to keyboard
   focus through :focus-visible.
   =============================== */
#top #header a[href]:focus,
#top #av-burger-menu-ul a[href]:focus,
#top #main .entry-content-wrapper a[href]:focus,
#top #footer a[href]:focus,
#top #socket a[href]:focus,
#top #scroll-top-link:focus,
#top .avia_ajax_form .button:focus,
#top .avia_ajax_form input.text_input:focus,
#top .avia_ajax_form textarea.text_area:focus,
#top .avia_ajax_form select:focus {
    outline: 3px solid var(--bb-color-focus);
    outline-offset: 3px;
}

/* Exclude outline from existing `transition: all` declarations so keyboard
   focus reaches its full 3px width immediately. Existing hover properties
   retain their transition duration and easing. */
#top #wrap_all .avia-button,
#top #wrap_all .more-link,
#top .avia_ajax_form .button,
#top .avia_ajax_form input.text_input,
#top .avia_ajax_form textarea.text_area,
#top .avia_ajax_form select {
    transition-property: background-color, color, border-color, box-shadow, transform !important;
}

/* Header- en overlaycontainers knippen een buitenliggende ring af. */
#top #header a[href]:focus,
#top #av-burger-menu-ul a[href]:focus {
    outline-offset: -5px;
}

#top #header .av-main-nav > li > ul a[href]:focus {
    outline-offset: -3px;
}

/* Donkere en inverse surfaces gebruiken een witte ring. */
#top #main .bb-main-btn a.avia-button:focus,
#top #main .bb-info-box a[href]:focus,
#top #footer a[href]:focus,
#top #socket a[href]:focus,
#top #scroll-top-link:focus {
    outline-color: var(--bb-color-focus-inverse);
}

/* Formulierfocus versterkt de bestaande rand zonder maatvoering te wijzigen. */
#top .avia_ajax_form input.text_input:focus,
#top .avia_ajax_form textarea.text_area:focus,
#top .avia_ajax_form select:focus {
    border-color: var(--bb-color-focus);
    outline-offset: 2px;
}

/* De kaart zelf toont focus wanneer de randvullende afbeelding focus heeft.
   Zonder :has()-ondersteuning blijft de standaard linkring intact. */
@supports selector(.slide-entry:has(.slide-image:focus)) {
    #top.home .bb-news-card .slide-entry:has(.slide-image:focus) {
        outline: 3px solid var(--bb-color-focus);
        outline-offset: 3px;
    }

    #top.home .bb-news-card .slide-image:focus {
        outline: none;
    }
}

@supports selector(:focus-visible) {
    #top #header a[href]:focus:not(:focus-visible),
    #top #av-burger-menu-ul a[href]:focus:not(:focus-visible),
    #top #main .entry-content-wrapper a[href]:focus:not(:focus-visible),
    #top #footer a[href]:focus:not(:focus-visible),
    #top #socket a[href]:focus:not(:focus-visible),
    #top #scroll-top-link:focus:not(:focus-visible),
    #top .avia_ajax_form .button:focus:not(:focus-visible),
    #top .avia_ajax_form input.text_input:focus:not(:focus-visible),
    #top .avia_ajax_form textarea.text_area:focus:not(:focus-visible),
    #top .avia_ajax_form select:focus:not(:focus-visible) {
        outline: none;
    }
}

@supports selector(.slide-entry:has(.slide-image:focus-visible)) {
    #top.home .bb-news-card .slide-entry:has(.slide-image:focus:not(:focus-visible)) {
        outline: none;
    }
}

/* ===============================
   BODY & BE - TYPOGRAPHIC FOUNDATION
   Role-based sizing keeps Avia headings consistent. The font-size
   declarations need !important to beat later generated per-element CSS.
   =============================== */
#top #wrap_all .main_color .av-special-heading-h1 .av-special-heading-tag,
#top #wrap_all .main_color .entry-content-wrapper h1:not(.post-title) {
    font-size: var(--bb-type-h1) !important;
    line-height: var(--bb-leading-heading);
    letter-spacing: -0.04em;
    overflow-wrap: break-word;
    text-transform: none;
}

#top #wrap_all .main_color .av-special-heading-h2 .av-special-heading-tag,
#top #wrap_all .main_color .entry-content-wrapper h2:not(.post-title) {
    font-size: var(--bb-type-h2) !important;
    line-height: var(--bb-leading-heading);
    letter-spacing: normal;
    overflow-wrap: break-word;
    text-transform: none;
}

#top #wrap_all .main_color .av-special-heading-h3 .av-special-heading-tag,
#top #wrap_all .main_color .entry-content-wrapper h3:not(.post-title) {
    font-size: var(--bb-type-h3) !important;
    line-height: var(--bb-leading-heading);
    letter-spacing: normal;
    overflow-wrap: break-word;
    text-transform: none;
}

/* The homepage custom-color H3 is the sole display/hero heading in the DOM. */
#top.home #wrap_all .av-special-heading-h3.custom-color-heading .av-special-heading-tag {
    font-size: var(--bb-type-hero) !important;
    line-height: 1.16;
}

#top .title_container .breadcrumb {
    font-size: var(--bb-type-small);
    line-height: 1.4;
}

@media only screen and (min-width: 768px) and (max-width: 989px) {
    #top #wrap_all .av-layout-grid-container.main_color .av-equal-height-column-flextable .av-special-heading-h2 .av-special-heading-tag {
        font-size: var(--bb-type-h3) !important;
    }
}

/* ===============================
   BODY & BE - ROUND SERVICE ITEMS
   =============================== */

/* 1. Zet alle Enfold containers 'open' zodat onze rand en schaduw NIET meer worden afgeknipt! */
.bb-circle-item,
.bb-circle-item .avia-image-container,
.bb-circle-item .avia-image-container-inner {
    overflow: visible !important; 
    padding: 10px; /* Geeft wat ademruimte voor de schaduw en hover */
}

/* 2. De link-tag wordt onze basis. Hier zetten we de blauwe rand op. */
.bb-circle-item a.avia_image {
    display: block;
    width: 85%;
    margin: 0 auto;
    aspect-ratio: 1 / 1; /* Forceert een 100% perfecte cirkel */
    border-radius: 50% !important;
    border: 4px solid var(--bb-color-accent) !important; /* Echte rand, geen schaduw-hack meer nodig */
    box-shadow: var(--bb-shadow-subtle) !important;
    position: relative;
    
    /* BELANGRIJK: Hier wél hidden, zodat de donkere hover overlay netjes BINNEN de blauwe rand blijft */
    overflow: hidden !important; 
    transition: transform var(--bb-motion-normal) var(--bb-ease-standard);
}

/* 4. De afbeelding vult exact de ruimte binnen de blauwe rand */
.bb-circle-item img.avia_image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* 5. Schakel Enfold's JS positionering uit en forceer 100% dekking */
.bb-circle-item .image-overlay {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    transform: none !important; 
}

/* ===============================
   BODY & BE - ALGEMENE STYLING & LAYOUT
   =============================== */

/* --- 1. INFO BLOK (Locatie & Tijden) --- */
.bb-info-box {
    /* Generated Avia column CSS loads later, so !important is required here. */
    background-color: var(--bb-color-interactive) !important;
    box-shadow: var(--bb-shadow-subtle);
    border-radius: 8px; /* Lichte afronding voor een moderne feel */
}

/* Replace generated percentage padding with bounded inner space. The two
   semantic heading/paragraph groups must never flow into each other.
   !important beats the later generated Avia padding and column-count rules. */
#top .bb-info-box.flex_column {
    padding: clamp(1.5rem, 3vw, 2.5rem) !important;
}

#top .bb-info-box .avia_textblock.av_multi_colums {
    column-count: 2 !important;
    column-gap: 2rem;
}

#top .bb-info-box .avia_textblock h3 {
    break-inside: avoid;
    break-after: avoid;
    margin-top: 0;
}

#top .bb-info-box .avia_textblock h3 ~ h3 {
    break-before: column;
}

#top .bb-info-box .avia_textblock p {
    break-inside: avoid;
    margin-top: 0;
}

/* Builder spacer elements are decorative; padding now supplies their space. */
#top .bb-info-box .hr.hr-invisible {
    height: 0 !important;
    margin: 0;
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    #top .bb-info-box.flex_column {
        width: 100%;
        margin-left: 0;
    }
}

@media only screen and (max-width: 767px) {
    #top .bb-info-box .avia_textblock.av_multi_colums {
        column-count: 1 !important;
    }

    #top .bb-info-box .avia_textblock h3 ~ h3 {
        break-before: auto;
        margin-top: 1.75rem;
    }
}

/* Four service cells become too narrow for Dutch compound words on tablet.
   A two-column grid preserves reading order and the existing linked images. */
@media only screen and (min-width: 768px) and (max-width: 1199px) {
    #top.home .av-layout-grid-container:has(.bb-circle-item) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #top.home .av-layout-grid-container:has(.bb-circle-item) > .flex_cell {
        display: block;
        width: auto;
    }
}

/* --- 2. NIEUWS & BLOG KAARTEN --- */
.bb-news-card {
    background-color: transparent;
    padding: 0 !important;
    border-radius: 0;
    box-shadow: none;
    text-align: left !important; /* Tekst links uitlijnen leest veel beter */
    margin-bottom: 20px;
}

/* De componentclass op de slider is de stabiele koppeling naar de sectie. */
#top.home .avia-section:has(.bb-news-card) {
    background-color: var(--bb-color-surface-soft);
}

#top.home .bb-news-card .slide-entry {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background-color: var(--bb-color-white);
    border: 1px solid var(--bb-color-border-soft);
    border-radius: 8px;
    box-shadow: var(--bb-shadow-card);
    overflow: hidden;
    transition: transform var(--bb-motion-normal) var(--bb-ease-standard),
                box-shadow var(--bb-motion-normal) var(--bb-ease-standard);
}

#top.home .bb-news-card .slide-content {
    box-sizing: border-box;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 22px 22px 40px;
}

#top.home .bb-news-card .slide-image {
    box-sizing: border-box;
    display: block;
    width: 100%;
    aspect-ratio: 495 / 400;
    overflow: hidden;
    background-color: var(--bb-color-white);
    border-bottom: 1px solid var(--bb-color-border-soft);
}

#top.home .bb-news-card .slide-image img {
    display: block;
    width: 100%;
    height: 100% !important;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
}

/* Fix de titels in de nieuwskaarten */
body#top.home #wrap_all .main_color .entry-content-wrapper .bb-news-card h3.slide-entry-title:not(.post-title) {
    text-transform: none !important; /* Zet ALL CAPS uit */
    font-size: calc(var(--bb-type-component-title) + 0.125rem) !important;
    color: var(--bb-color-text) !important;
    line-height: var(--bb-leading-heading);
    letter-spacing: normal;
    margin-bottom: 12px !important;
    padding: 8px 0 0 !important;
    text-align: left;
}

.bb-news-card .slide-entry-excerpt {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: visible !important;
    color: var(--bb-color-text-secondary);
    font-size: var(--bb-type-body);
    line-height: var(--bb-leading-body);
    text-align: left;
}

/* Styling voor de 'Lees meer' knoppen in de kaarten */
.bb-news-card .avia-button {
    background-color: var(--bb-color-interactive) !important;
    color: var(--bb-color-white) !important;
    border: none !important;
    border-radius: 30px; /* Mooie ronde knop */
    padding: 12px 24px;
    font-weight: 600;
    transition: background-color var(--bb-motion-fast) var(--bb-ease-standard),
                transform var(--bb-motion-fast) var(--bb-ease-standard),
                box-shadow var(--bb-motion-fast) var(--bb-ease-standard);
}

.bb-news-card .avia-button:hover {
    background-color: var(--bb-color-interactive-hover) !important; /* Iets donkerder blauw bij hover */
}

/* Enfold rendert de zichtbare nieuwsactie als .more-link, niet als .avia-button. */
#top .bb-news-card .blog-categories.minor-meta a,
.bb-news-card .more-link {
    color: var(--bb-color-interactive);
}

#top.home #wrap_all .bb-news-card .blog-categories.minor-meta {
    color: var(--bb-color-interactive);
    font-size: var(--bb-type-small);
    line-height: 1.5;
    text-align: left;
    /* Enfold shifts this label down 15px, into the following title. */
    top: auto;
    margin-bottom: 0.625rem;
}

#top.home #wrap_all .bb-news-card .more-link {
    display: inline-flex;
    align-self: flex-start;
    width: auto !important;
    margin: 0 !important;
    padding: 8px 16px !important;
    color: var(--bb-color-white) !important;
    background-color: var(--bb-color-interactive) !important;
    border: 1px solid var(--bb-color-interactive) !important;
    border-radius: 50px;
    box-shadow: var(--bb-shadow-subtle);
    text-decoration: none;
    transition: background-color var(--bb-motion-fast) var(--bb-ease-standard),
                color var(--bb-motion-fast) var(--bb-ease-standard),
                border-color var(--bb-motion-fast) var(--bb-ease-standard),
                box-shadow var(--bb-motion-fast) var(--bb-ease-standard),
                transform var(--bb-motion-fast) var(--bb-ease-standard);
}

/* De CTA-wrapper is het flex-item dat de actie onderaan de kaart uitlijnt. */
#top.home #wrap_all .bb-news-card .read-more-link {
    margin-top: auto;
    padding: 24px 0 0;
}

#top .bb-news-card .blog-categories.minor-meta a:hover,
.bb-news-card .more-link:hover {
    color: var(--bb-color-interactive-hover);
}

.bb-news-card .more-link:hover {
    color: var(--bb-color-white) !important;
    background-color: var(--bb-color-interactive-hover) !important;
    border-color: var(--bb-color-interactive-hover) !important;
}

/* Verberg de Enfold lijntjes (separators) in de blog kaarten voor een cleanere look */
.bb-news-card .hr {
    display: none !important;
}

@media only screen and (min-width: 990px) {
    #top.home .bb-news-card .slide-entry-wrap {
        display: flex;
        align-items: stretch;
        gap: 24px;
    }

    #top.home .bb-news-card .slide-entry {
        flex: 1 1 0;
        width: auto !important;
        margin: 0 !important;
    }
}

@media only screen and (max-width: 989px) {
    #top.home .bb-news-card .slide-entry {
        width: 100% !important;
        margin: 0 0 24px !important;
    }

    #top.home .bb-news-card .slide-entry:last-child {
        margin-bottom: 0 !important;
    }
}

/* --- 3. TYPOGRAFIE (Een oplossing op maat) --- */
.bb-text-spacing p {
    font-size: var(--bb-type-body);
    line-height: var(--bb-leading-body) !important;
    color: #4a4a4a !important; /* Iets zachter dan 100% zwart */
    margin-bottom: 1.5em !important;
}

.bb-text-spacing h3, 
.bb-text-spacing h4 {
    margin-top: 1.5em !important;
    margin-bottom: 0.5em !important;
    color: #33a0da !important; /* Zorgt dat de tussenkopjes eruit springen */
}

/* ===============================
   BODY & BE - INFO BOX TYPOGRAFIE
   =============================== */

/* 1. Titels een moderne, strakke look geven */
#top #wrap_all .main_color .entry-content-wrapper .bb-info-box h1,
#top #wrap_all .main_color .entry-content-wrapper .bb-info-box h2,
#top #wrap_all .main_color .entry-content-wrapper .bb-info-box h3,
#top #wrap_all .main_color .entry-content-wrapper .bb-info-box h4,
#top #wrap_all .main_color .entry-content-wrapper .bb-info-box h5 {
    color: var(--bb-color-white) !important;
    text-transform: uppercase;       /* Hoofdletters voor een strakke look */
    letter-spacing: 0.08em;
    font-size: var(--bb-type-component-title) !important;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 20px !important;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25); /* Subtiel scheidingslijntje */
}

/* 2. Gewone tekst meer ademruimte geven */
.bb-info-box p {
    color: var(--bb-color-white) !important;
    line-height: var(--bb-leading-body) !important;
    font-size: 16px !important;
}

/* 3. Linkjes (zoals het telefoonnummer) interactief maken */
.bb-info-box a {
    color: var(--bb-color-white) !important;
    font-weight: bold;
    text-decoration: underline;
    text-decoration-color: var(--bb-color-white);
    text-underline-offset: 5px;      /* Schuift het lijntje iets verder onder de tekst */
    transition: text-decoration-color var(--bb-motion-fast) var(--bb-ease-standard);
}

.bb-info-box a:hover {
    color: var(--bb-color-white) !important;
    text-decoration-color: var(--bb-color-white);  /* Lijntje licht op bij hover */
}

/* ===============================
   BODY & BE - OPENINGSTIJDEN UITLIJNING
   =============================== */

/* Pak de dikgedrukte tekst in de info-box aan */
.bb-info-box p strong,
.bb-info-box p b {
    display: inline-block;  /* Maakt er een 'blokje' van op dezelfde regel */
    width: 110px;           /* Vaste breedte (110px is ruim genoeg voor 'Donderdag') */
    
    /* Optioneel: als je de tekst eigenlijk helemaal niet dikgedrukt wilt hebben, 
       zet je dit op 'normal'. Hij houdt dan wel de vaste breedte! */
    font-weight: 600; 
}

/* ===============================
   BODY & BE - KNOPPEN (BUTTONS)
   =============================== */

/* 1. Basis styling voor de hoofdknop en nieuws-knoppen */
.bb-main-btn .avia-button,
.bb-news-card .avia-button {
    background-color: var(--bb-color-interactive) !important;
    color: var(--bb-color-white) !important;
    border: none !important;
    border-radius: 50px !important; /* Maakt er een strakke pil-vorm van */
    padding: 14px 32px !important;  /* Iets breder voor een luxe uitstraling */
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
    
    /* Een 'glow' schaduw in de kleur van de knop voelt heel high-end */
    box-shadow: var(--bb-shadow-subtle) !important;
    transition: background-color var(--bb-motion-fast) var(--bb-ease-standard),
                color var(--bb-motion-fast) var(--bb-ease-standard),
                border-color var(--bb-motion-fast) var(--bb-ease-standard),
                box-shadow var(--bb-motion-fast) var(--bb-ease-standard),
                transform var(--bb-motion-fast) var(--bb-ease-standard) !important;
    display: inline-block;
}

/* 2. Subtiel en modern hover-effect */
.bb-main-btn .avia-button:hover,
.bb-news-card .avia-button:hover {
    background-color: var(--bb-color-interactive-hover) !important; /* Iets donkerder blauw bij hover */
    color: var(--bb-color-white) !important;
}

/* 3. (Optioneel) Styling voor een secundaire "Ghost" knop (transparant met blauwe rand) */
.bb-ghost-btn .avia-button {
    background-color: transparent !important;
    color: #33a0da !important;
    border: 2px solid #33a0da !important;
    box-shadow: none !important;
    border-radius: 50px !important;
    padding: 12px 30px !important; /* Gecorrigeerd voor de 2px border */
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.bb-ghost-btn .avia-button:hover {
    background-color: #33a0da !important;
    color: #ffffff !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 25px rgba(51, 160, 218, 0.35) !important;
}

/* ===============================
   BODY & BE - NATIVE AVIA FORMS
   Color-only overrides scoped to existing Enfold/Avia frontend forms.
   =============================== */
#top .avia_ajax_form input.text_input,
#top .avia_ajax_form .text_area {
    color: var(--bb-color-text);
}

#top .avia_ajax_form .text_input::placeholder,
#top .avia_ajax_form .text_area::placeholder {
    color: var(--bb-color-text-secondary);
    opacity: 1;
}

#top .avia_ajax_form .button {
    background-color: var(--bb-color-interactive);
    border-color: var(--bb-color-interactive);
    box-shadow: var(--bb-shadow-subtle);
    color: var(--bb-color-white);
    transition: background-color var(--bb-motion-fast) var(--bb-ease-standard),
                color var(--bb-motion-fast) var(--bb-ease-standard),
                border-color var(--bb-motion-fast) var(--bb-ease-standard),
                box-shadow var(--bb-motion-fast) var(--bb-ease-standard),
                transform var(--bb-motion-fast) var(--bb-ease-standard);
}

#top .avia_ajax_form .button:hover {
    background-color: var(--bb-color-interactive-hover);
    border-color: var(--bb-color-interactive-hover);
    color: var(--bb-color-white);
}

/* ===============================
   BODY & BE - GRAVITY FORMS CONTACT
   The Contact page uses one Gravity Forms form with question and appointment
   routes. Every override is scoped to the stable Avia and form classes.
   =============================== */
/* The enclosing Avia "huge" section adds 130px before the contact heading.
   Scale that space with the viewport so visitors reach the form sooner. */
#top .avia-section:has(.bb-contact-gf) > .container > .content {
    padding-block: clamp(3rem, 5vw, 5rem);
}

#top .bb-contact-gf .bb-contact-form_wrapper.gform-theme--framework {
    color: var(--bb-color-text);
    margin-top: 1.5rem;
}

#top .bb-contact-gf .bb-contact-form_wrapper .gform_fields {
    row-gap: 1.25rem;
}

#top .bb-contact-gf .bb-contact-form_wrapper fieldset {
    min-width: 0;
}

#top .bb-contact-gf .bb-contact-form_wrapper .gfield_label,
#top .bb-contact-gf .bb-contact-form_wrapper .gform-field-label {
    color: var(--bb-color-text);
    font-weight: 600;
}

#top .bb-contact-gf .bb-contact-form_wrapper .gfield_required,
#top .bb-contact-gf .bb-contact-form_wrapper .gfield_validation_message,
#top .bb-contact-gf .bb-contact-form_wrapper .validation_message {
    color: #b42318;
}

#top .bb-contact-gf .bb-contact-form_wrapper .gfield_required {
    margin-inline-start: 0.25rem;
}

#top .bb-contact-gf .bb-contact-form_wrapper .gfield_description,
#top .bb-contact-gf .bb-contact-form_wrapper .gform-field-label--type-sub {
    color: var(--bb-color-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.5;
}

#top .bb-contact-gf .bb-contact-form_wrapper input[type="text"],
#top .bb-contact-gf .bb-contact-form_wrapper input[type="email"],
#top .bb-contact-gf .bb-contact-form_wrapper input[type="tel"],
#top .bb-contact-gf .bb-contact-form_wrapper select,
#top .bb-contact-gf .bb-contact-form_wrapper textarea {
    background-color: var(--bb-color-white);
    border: 1px solid var(--bb-color-text-secondary);
    border-radius: 8px;
    color: var(--bb-color-text);
    font: inherit;
    transition: background-color var(--bb-motion-fast) var(--bb-ease-standard),
                border-color var(--bb-motion-fast) var(--bb-ease-standard),
                box-shadow var(--bb-motion-fast) var(--bb-ease-standard);
}

#top .bb-contact-gf .bb-contact-form_wrapper input[type="text"],
#top .bb-contact-gf .bb-contact-form_wrapper input[type="email"],
#top .bb-contact-gf .bb-contact-form_wrapper input[type="tel"],
#top .bb-contact-gf .bb-contact-form_wrapper select {
    block-size: 48px;
    height: 48px;
    min-height: 48px;
}

#top .bb-contact-gf .bb-contact-form_wrapper textarea {
    min-height: 10rem;
    resize: vertical;
}

#top .bb-contact-gf .bb-contact-form_wrapper input::placeholder,
#top .bb-contact-gf .bb-contact-form_wrapper textarea::placeholder {
    color: var(--bb-color-text-secondary);
    opacity: 1;
}

#top .bb-contact-gf .bb-contact-form_wrapper input[type="radio"],
#top .bb-contact-gf .bb-contact-form_wrapper input[type="checkbox"] {
    accent-color: var(--bb-color-interactive);
}

#top .bb-contact-gf .bb-contact-form_wrapper .gchoice {
    align-items: flex-start;
    display: flex;
    gap: 0.625rem;
}

#top .bb-contact-gf .bb-contact-form_wrapper .gchoice .gform-field-label {
    font-weight: 400;
    line-height: 1.45;
}

#top .bb-contact-gf .bb-contact-form_wrapper .gsection {
    border-color: var(--bb-color-border-soft);
    margin-top: 0.5rem;
    padding-top: 0.75rem;
}

#top .bb-contact-gf .bb-contact-form_wrapper .gsection_title {
    color: var(--bb-color-text);
    font-size: var(--bb-type-h3);
    line-height: var(--bb-leading-heading);
    text-transform: none;
}

#top .bb-contact-gf .bb-contact-form_wrapper .gform_button {
    background-color: var(--bb-color-interactive);
    border: 1px solid var(--bb-color-interactive);
    border-radius: 50px;
    box-shadow: var(--bb-shadow-subtle);
    color: var(--bb-color-white);
    font-size: 1rem;
    font-weight: 600;
    min-height: 48px;
    padding: 0.75rem 1.75rem;
    transition: background-color var(--bb-motion-fast) var(--bb-ease-standard),
                border-color var(--bb-motion-fast) var(--bb-ease-standard),
                box-shadow var(--bb-motion-fast) var(--bb-ease-standard),
                transform var(--bb-motion-fast) var(--bb-ease-standard);
}

#top .bb-contact-gf .bb-contact-form_wrapper .gform_button:hover {
    background-color: var(--bb-color-interactive-hover);
    border-color: var(--bb-color-interactive-hover);
    color: var(--bb-color-white);
}

#top .bb-contact-gf .bb-contact-form_wrapper .gform_button:disabled {
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.65;
    transform: none;
}

#top .bb-contact-gf .bb-contact-form_wrapper input[type="text"]:focus,
#top .bb-contact-gf .bb-contact-form_wrapper input[type="email"]:focus,
#top .bb-contact-gf .bb-contact-form_wrapper input[type="tel"]:focus,
#top .bb-contact-gf .bb-contact-form_wrapper select:focus,
#top .bb-contact-gf .bb-contact-form_wrapper textarea:focus,
#top .bb-contact-gf .bb-contact-form_wrapper input[type="radio"]:focus,
#top .bb-contact-gf .bb-contact-form_wrapper input[type="checkbox"]:focus,
#top .bb-contact-gf .bb-contact-form_wrapper .gform_button:focus {
    border-color: var(--bb-color-focus);
    outline: 3px solid var(--bb-color-focus);
    outline-offset: 3px;
}

@supports selector(:focus-visible) {
    #top .bb-contact-gf .bb-contact-form_wrapper input:focus:not(:focus-visible),
    #top .bb-contact-gf .bb-contact-form_wrapper select:focus:not(:focus-visible),
    #top .bb-contact-gf .bb-contact-form_wrapper textarea:focus:not(:focus-visible),
    #top .bb-contact-gf .bb-contact-form_wrapper .gform_button:focus:not(:focus-visible) {
        outline: none;
    }
}

#top .bb-contact-gf .bb-contact-form_wrapper .gform_validation_errors,
#top .bb-contact-gf .bb-contact-form_wrapper .gfield_validation_message,
#top .bb-contact-gf .bb-contact-form_wrapper .validation_message {
    background-color: #fff4f2;
    border-color: #b42318;
    border-radius: 8px;
}

#top .bb-contact-gf .bb-contact-form_wrapper .gform_validation_errors,
#top .bb-contact-gf .bb-contact-form_wrapper .gform_validation_errors h2 {
    color: #8f1d14;
}

#top .bb-contact-gf .gform_confirmation_wrapper {
    background-color: var(--bb-color-surface-soft);
    border: 1px solid var(--bb-color-border-soft);
    border-left: 4px solid var(--bb-color-interactive);
    border-radius: 8px;
    color: var(--bb-color-text);
    margin-top: 1.5rem;
    padding: 1.25rem;
}

/* ===============================
   BODY & BE - POINTER INTERACTIONS
   Lift and scale are reserved for devices with a precise hover pointer.
   Non-interactive information surfaces remain stationary.
   =============================== */
@media (hover: hover) and (pointer: fine) {
    .bb-circle-item a.avia_image:hover {
        transform: scale(1.02);
    }

    #top.home .bb-news-card .slide-entry:hover {
        box-shadow: var(--bb-shadow-raised);
        transform: translateY(-2px);
    }

    .bb-main-btn .avia-button:hover,
    .bb-news-card .avia-button:hover,
    #top.home #wrap_all .bb-news-card .more-link:hover,
    #top .avia_ajax_form .button:hover,
    #top .bb-contact-gf .bb-contact-form_wrapper .gform_button:hover {
        box-shadow: var(--bb-shadow-raised) !important;
        transform: translateY(-2px) !important;
    }
}

/* Respect reduced-motion preferences without changing color, contrast,
   focus visibility, component dimensions or Enfold functionality. */
@media (prefers-reduced-motion: reduce) {
    .bb-circle-item a.avia_image,
    #top.home .bb-news-card .slide-entry,
    .bb-main-btn .avia-button,
    .bb-news-card .avia-button,
    #top.home #wrap_all .bb-news-card .more-link,
    #top .avia_ajax_form .button,
    #top .bb-contact-gf .bb-contact-form_wrapper .gform_button {
        transition-duration: 0.01ms !important;
    }

    .bb-circle-item a.avia_image:hover,
    #top.home .bb-news-card .slide-entry:hover,
    .bb-main-btn .avia-button:hover,
    .bb-news-card .avia-button:hover,
    #top.home #wrap_all .bb-news-card .more-link:hover,
    #top .avia_ajax_form .button:hover,
    #top .bb-contact-gf .bb-contact-form_wrapper .gform_button:hover {
        transform: none !important;
    }
}

/* ===============================
   BODY & BE - RATES PAGE
   Native Avia content with a page-scoped editorial layout and rate table.
   =============================== */
#top .bb-rates-page .container,
#top .bb-rates-reimbursement .container,
#top .bb-rates-table-section .container,
#top .bb-rates-notes .container,
#top .bb-rates-cta .container {
    padding-block: clamp(3rem, 6vw, 5rem);
}

#top .bb-rates-reimbursement,
#top .bb-rates-cta {
    background-color: var(--bb-color-surface-soft);
}

#top .bb-rates-reimbursement .entry-content-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 6%;
}

#top .bb-rates-reimbursement .flex_column {
    float: none;
    margin-left: 0;
}

#top .bb-rates-reimbursement .av_two_third {
    order: 1;
    flex: 1 1 63%;
}

#top .bb-rates-reimbursement .bb-rates-help-card {
    order: 2;
    display: flex;
    flex: 0 1 31%;
    flex-direction: column;
    box-sizing: border-box;
    padding: clamp(1.5rem, 3vw, 2rem);
    background-color: var(--bb-color-white);
    border: 1px solid var(--bb-color-border-soft);
    border-radius: 8px;
    box-shadow: var(--bb-shadow-subtle);
}

#top .bb-rates-help-card .bb-rates-help-card-action {
    order: 3;
    align-self: flex-start;
    margin-top: 0.5rem;
    text-align: left;
}

#top .bb-rates-table {
    width: 100%;
    margin: 2rem 0 0;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--bb-color-border-soft);
    border-radius: 8px;
    background-color: var(--bb-color-white);
}

#top .bb-rates-table th,
#top .bb-rates-table td {
    padding: 0.875rem 1.125rem;
    border: 0;
    border-bottom: 1px solid var(--bb-color-border-soft);
    vertical-align: top;
    text-align: left;
}

#top .bb-rates-table th {
    color: var(--bb-color-white);
    background-color: var(--bb-color-interactive);
    font-weight: 600;
}

#top .bb-rates-table th:first-child {
    border-top-left-radius: 7px;
}

#top .bb-rates-table th:last-child {
    border-top-right-radius: 7px;
}

#top .bb-rates-table td {
    color: var(--bb-color-text);
    background-color: var(--bb-color-white);
}

#top .bb-rates-table tr:nth-child(even) td {
    background-color: var(--bb-color-surface-soft);
}

#top .bb-rates-table tr:last-child td {
    border-bottom: 0;
}

#top .bb-rates-table tr:last-child td:first-child {
    border-bottom-left-radius: 7px;
}

#top .bb-rates-table tr:last-child td:last-child {
    border-bottom-right-radius: 7px;
}

#top .bb-rates-table th:last-child,
#top .bb-rates-table td:last-child {
    width: 8rem;
    white-space: nowrap;
    text-align: right;
}

#top .bb-rates-notes ol {
    margin: 1.5rem 0 0;
    padding-left: 1.4em;
}

#top .bb-rates-notes li + li {
    margin-top: 0.75rem;
}

#top .bb-rates-cta {
    text-align: center;
}

#top .bb-rates-cta .avia-button-wrap {
    text-align: center;
}

@media only screen and (max-width: 767px) {
    #top .bb-rates-page .container,
    #top .bb-rates-reimbursement .container,
    #top .bb-rates-table-section .container,
    #top .bb-rates-notes .container,
    #top .bb-rates-cta .container {
        padding-block: 2.75rem;
    }

    #top .bb-rates-reimbursement .entry-content-wrapper {
        display: block;
    }

    #top .bb-rates-reimbursement .bb-rates-help-card {
        margin-top: 2rem;
    }

    #top .bb-rates-table {
        display: table;
        font-size: 0.9375rem;
    }

    #top .bb-rates-table tbody {
        display: table-row-group;
    }

    #top .bb-rates-table tr {
        display: table-row;
    }

    #top .bb-rates-table th,
    #top .bb-rates-table td {
        display: table-cell;
        padding: 0.75rem;
    }

    #top .bb-rates-table td::before {
        content: none;
        display: none;
    }

    #top .bb-rates-table th:last-child,
    #top .bb-rates-table td:last-child {
        width: 6.75rem;
    }

    #top .bb-rates-table th:last-child {
        white-space: normal;
    }
}

/* ========================================================================== 
   Sprint 10: native Body & Be footer
   ========================================================================== */
/* The recurring pre-footer silhouette is stored as a 1500 × 250 px Avia
   background. Repeating it at the row height preserves the figures' aspect
   ratio while allowing the band to continue on screens wider than the asset. */
#top .av-layout-grid-container >
.flex_cell.av-gridrow-cell.av_one_full.no_margin.avia-builder-el-no-sibling.content-align-top {
    background-color: #606062;
    background-repeat: repeat-x;
    background-size: auto 100%;
}

#top #footer {
    position: relative;
    isolation: isolate;
    height: auto;
    min-height: 0;
    padding: 0;
    overflow: clip;
    color: #dce5ea;
    background-color: #080b0e;
    background-image: linear-gradient(145deg, #050607 0%, #121920 52%, #06080a 100%);
    border-top: 4px solid var(--bb-color-accent);
}

#top #footer::before,
#top #footer::after {
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    width: min(92vw, 72rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background: repeating-radial-gradient(
        circle,
        transparent 0 3.4rem,
        rgba(51, 160, 218, 0.42) 3.52rem 3.62rem,
        transparent 3.74rem 6.8rem
    );
    content: "";
    opacity: 0.2;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.9);
}

#top #footer::after {
    display: none;
}

#top #footer .container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(2rem, 3vw, 3.25rem);
    padding-top: clamp(3rem, 5vw, 4.75rem);
    padding-bottom: clamp(5rem, 5vw, 6rem);
}

#top #footer .flex_column {
    float: none;
    width: auto;
    min-width: 0;
    margin: 0;
}

#top #footer .widget {
    padding: 0;
    margin: 0 0 1.25rem;
}

#top #footer .widget:last-child {
    margin-bottom: 0;
}

#top #footer #media_image-2 {
    width: 100%;
    max-width: 16rem;
    margin-top: 0.75rem;
}

#top #footer #media_image-2 a,
#top #footer #media_image-2 img {
    display: block;
    width: 100%;
}

#top #footer #media_image-2 img {
    height: auto;
}

/* Enfold injects a generic linked-image overlay that is visually noisy on
   this transparent footer logo. The homepage link and focus ring remain. */
#top #footer #media_image-2 .image-overlay {
    display: none !important;
}

#top #footer .widgettitle {
    margin: 0 0 1rem;
    color: var(--bb-color-white);
    font-size: var(--bb-type-component-title);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.04em;
    text-transform: none;
}

#top #footer p,
#top #footer li {
    color: #dce5ea;
    font-size: 1rem;
    line-height: 1.65;
}

#top #footer p {
    margin: 0 0 1rem;
}

#top #footer p:last-child {
    margin-bottom: 0;
}

#top #footer .menu {
    padding: 0;
    margin: 0;
    list-style: none;
}

#top #footer .menu-item {
    padding: 0;
    margin: 0 0 0.55rem;
    border: 0;
}

#top #footer .menu-item:last-child {
    margin-bottom: 0;
}

#top #footer a {
    color: var(--bb-color-white);
    text-decoration-line: underline;
    text-decoration-color: rgba(255, 255, 255, 0.55);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
    transition: none;
}

#top #footer a:hover {
    color: #b5dcf2;
    text-decoration-color: currentColor;
}

#top #socket {
    color: #c4ced4;
    background-color: #151b22;
    border-top: 0;
}

#top #socket .container {
    padding-block: 1rem;
}

#top #socket .copyright {
    float: none;
    width: 100%;
    color: #c4ced4;
    font-size: var(--bb-type-small);
    line-height: 1.5;
    text-align: center;
}

#top #socket a {
    color: var(--bb-color-white);
    text-decoration-line: underline;
    text-underline-offset: 0.18em;
    transition: none;
}

#top #socket a:hover {
    color: #b5dcf2;
}

@media only screen and (max-width: 989px) {
    #top #footer .container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 767px) {
    #top #footer .container {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
        padding-top: 3rem;
        padding-bottom: 3.5rem;
    }

    #top #footer #media_image-2 {
        width: 100%;
        max-width: 16rem;
    }
}

/* ===============================
   BODY & BE - BLOG & SYSTEM TYPOGRAPHY
   =============================== */
.html_elegant-blog #top .template-blog .post-entry .post-title {
    font-size: var(--bb-type-h2) !important;
    line-height: var(--bb-leading-heading);
    letter-spacing: normal;
    overflow-wrap: break-word;
    text-transform: none;
}

.html_elegant-blog #top.single-post .template-blog .post-entry .post-title {
    font-size: var(--bb-type-h1) !important;
}

#top .fullsize .template-blog .post .entry-content-wrapper p {
    font-size: var(--bb-type-body);
    line-height: var(--bb-leading-body);
}

/* Natural word spacing is especially important on narrow screens. Enfold's
   blog CSS loads after the child sheet: body#top adds enough specificity to
   override its justified wrapper without !important or inline changes. */
body#top .fullsize .template-blog .post .entry-content-wrapper {
    text-align: left;
}

.html_elegant-blog body#top .template-blog .post-entry .post-title {
    text-align: left;
    text-wrap: pretty;
}

/* Align the category eyebrow with the article title, as in the news cards. */
.html_elegant-blog body#top .template-blog .post-entry .blog-categories {
    text-align: left;
    margin-bottom: 0.75rem;
}

.html_elegant-blog #top .template-blog .post-meta-infos,
.html_elegant-blog #top .template-blog .blog-categories {
    font-size: var(--bb-type-small);
    line-height: 1.5;
}

.html_elegant-blog #top .template-blog .blog-categories {
    letter-spacing: 0.08em;
}

.html_elegant-blog #top .template-search .post-title {
    font-size: var(--bb-type-h3) !important;
    line-height: var(--bb-leading-heading);
    letter-spacing: normal;
    overflow-wrap: break-word;
    text-transform: none;
}

.html_elegant-blog #top .template-search .post-meta-infos {
    font-size: var(--bb-type-small);
    line-height: 1.5;
}

#top .sidebar .widgettitle {
    font-size: var(--bb-type-component-title);
    line-height: 1.35;
    overflow-wrap: break-word;
}

/* ===============================
   BODY & BE - EDITORIAL CONTENT
   Blog overview and single posts share one restrained hierarchy while their
   existing Enfold templates and Sprint 2 type scale stay intact.
   =============================== */
#top.blog .template-blog .blog-categories,
#top.single-post .template-blog .blog-categories {
    color: var(--bb-color-interactive);
}

#top.blog .template-blog .blog-categories a,
#top.single-post .template-blog .blog-categories a {
    color: var(--bb-color-interactive);
}

#top.blog .template-blog .post-title,
#top.blog .template-blog .post-title a,
#top.single-post .template-blog .post-title {
    color: var(--bb-color-text);
}

#top.blog .template-blog .post-title a:hover,
#top.blog .template-blog .entry-content a,
#top.single-post .template-blog .entry-content a {
    color: var(--bb-color-interactive);
}

#top.blog .template-blog .entry-content,
#top.single-post .template-blog .entry-content,
#top.blog .template-blog .post-meta-infos,
#top.single-post .template-blog .post-meta-infos {
    color: var(--bb-color-text-secondary);
}

/* De lange redactionele leefstijlkolom is de enige full-width
   equal-height Avia-kolom op deze pagina. De pagina- en componentscope
   voorkomt dat andere Avia-kolommen of decoratieve merksurfaces wijzigen. */
#top.page-id-21 #wrap_all .flex_column.av_one_full.flex_column_table_cell {
    color: var(--bb-color-text) !important;
    background-color: var(--bb-color-surface-soft) !important;
}

#top.page-id-21 #wrap_all .flex_column.av_one_full.flex_column_table_cell .av-special-heading-tag,
#top.page-id-21 #wrap_all .flex_column.av_one_full.flex_column_table_cell .avia_textblock,
#top.page-id-21 #wrap_all .flex_column.av_one_full.flex_column_table_cell .avia_textblock p {
    color: var(--bb-color-text) !important;
}

#top.page-id-21 #wrap_all .flex_column.av_one_full.flex_column_table_cell a {
    color: var(--bb-color-interactive) !important;
}

#top.page-id-21 #wrap_all .flex_column.av_one_full.flex_column_table_cell a:hover {
    color: var(--bb-color-interactive-hover) !important;
}

@media only screen and (max-width: 767px) {
    #top.blog #main .container.template-blog {
        width: calc(100% - 40px);
        max-width: none;
        margin-inline: 20px;
    }

    /* The published Fysio-check content no longer contains Divi elements, but
       its Avia three-fifth column still stores 120px inline side padding and
       this multicolumn fallback still matches. Retain the exception until the
       builder padding is corrected and the mobile layout is revalidated. */
    #top.page-id-392 #wrap_all .flex_column.av_three_fifth:has(.avia_textblock.av_multi_colums > .et_pb_column_1_4) {
        padding-inline: 5% !important;
    }

    #top.page-id-392 #wrap_all .avia_textblock.av_multi_colums {
        column-count: 1 !important;
        column-gap: 0;
    }

    #top.page-id-392 #wrap_all .avia_textblock.av_multi_colums > .et_pb_column_1_4 {
        display: block;
        width: 100% !important;
        break-inside: avoid;
    }
}

/* Fysio-check: the external app is inside a full-width Avia column with
   generated 30px padding on both sides. Give the embed the available width;
   its cross-origin interface and internal scrolling remain provider-owned. */
#top.page-id-392 .flex_column:has(.hhipLinkContainer) {
    padding-inline: 0 !important;
}

#top.page-id-392 .hhipLinkContainer {
    width: 100%;
    max-width: 990px;
    margin-inline: auto;
}

#top.page-id-392 .hhipLinkContainer iframe {
    display: block;
    box-sizing: border-box;
    border-radius: 8px;
    background-color: var(--bb-color-white);
}

@media only screen and (max-width: 767px) {
    /* A small outer gutter gives the provider's body selector room on 360px
       phones; this exception applies only to the section with this embed. */
    #top.page-id-392 .avia-section:has(.hhipLinkContainer) > .container {
        width: calc(100% - 24px);
        max-width: none;
    }
}