/* POT facelift. Content stays in Avada, Gravity Forms and WP Grid Builder. */
:root {
    --pot-radius: 8px;
    --pot-radius-small: 5px;
    --pot-gold-ink: #756331;
    --pot-orange-ink: #b84c12;
    --pot-focus: #005a9c;
    --pot-line: #e6e1d6;
}

/* A visible, two-tone keyboard indicator on light and dark surfaces. */
body :is(a, button, input, select, textarea, [tabindex]):not(.wpgb-button):focus-visible {
    outline: 3px solid var(--pot-focus) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 2px #fff !important;
}
/* Grid filters: selection uses the filled button; keyboard focus gets a brand-colour ring.
   WP Grid Builder's default :focus also draws a browser-blue outline after mouse clicks. */
body .wpgb-button:focus-visible,
body .wpgb-facet .wpgb-button:focus:focus-visible {
    outline: 2px solid var(--pot-gold-ink);
    outline-offset: 3px;
    box-shadow: 0 0 0 2px #fff;
}
body .wpgb-facet .wpgb-button:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}
.fusion-tb-header { position: relative; z-index: 100; }
.fusion-tb-header :is(a, button) { scroll-margin-top: 180px; }
.fusion-tb-header .awb-menu__m-toggle { min-width: 44px; min-height: 44px; }
.fusion-tb-header .awb-menu__main-a { min-height: 40px; }
/* The top-bar search overlay has no separate height setting in Avada's Menu element. */
.pot-header-topbar .awb-menu__search-overlay { --form_input_height: 32px; }
.fusion-tb-header .awb-menu__main-a:hover,
.fusion-tb-header .awb-menu__main-li.current-menu-item > .awb-menu__main-a { color: var(--pot-gold-ink); }

/* Compact provider embeds retain real review scores and links. */
.pot-review-column > .fusion-column-wrapper { align-items: center; justify-content: center; }
.pot-review-widget { display: block; width: 200px; max-width: none; height: 120px; zoom: .9; border: 0; border-radius: var(--pot-radius-small); }
.pot-review-header { border-bottom: 1px solid var(--pot-line); }

/* Components without an Avada radius setting. Native buttons/images/cards use database settings. */
body .gform_button,
body .wpgb-facet button,
body .wpgb-facet .wpgb-button,
body .fusion-menu-item-button .menu-text { border-radius: var(--pot-radius-small); }
.fusion-modal .modal-content,
body .fusion-accordian .fusion-panel,
body:not(.home) #main > .fusion-row, .home #main:not(.width-100) > .fusion-row { border-radius: var(--pot-radius); }
.fusion-accordian .panel-title a { border-radius: var(--pot-radius-small); }
/* Legacy slider text panels are assembled by the existing child theme, not a builder container. */
.slide-content .heading { border-radius: var(--pot-radius) var(--pot-radius) 0 0; }
.slide-content .buttons { border-radius: 0 0 var(--pot-radius) var(--pot-radius); }
.slide-content > :last-child { border-bottom-left-radius: var(--pot-radius); border-bottom-right-radius: var(--pot-radius); }
.slide-content > :only-child { border-radius: var(--pot-radius); }
.slide-content > :last-child:not(.buttons) { padding-bottom: 30px !important; }
.pot-service-panel .fusion-button { white-space: normal; text-align: left; }

/* Contrast for text/controls; the brand's decorative gold remains available. */
#main .fusion-text a:not(.fusion-button),
.fusion-tb-footer .fusion-text a,
.fusion-breadcrumbs a { color: var(--pot-gold-ink); text-decoration: underline; text-underline-offset: .16em; }
/* Native inputs remain focusable and operable with Space. */
body .gform_wrapper input[type=checkbox],
body .gform_wrapper input[type=radio] {
    display: inline-block !important; appearance: auto; -webkit-appearance: auto;
    position: static; opacity: 1; clip: auto; width: 20px !important; height: 20px !important;
    min-width: 20px; vertical-align: middle; margin: 3px 9px 3px 0 !important; accent-color: var(--pot-gold-ink);
}
body .gform_wrapper .gfield_checkbox li label,
body .gform_wrapper .gfield_checkbox input + label { background-image: none !important; padding: 4px 0 !important; }
body .gform_wrapper :is(input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=hidden]), select, textarea) {
    border-radius: var(--pot-radius-small); border-color: #81796a; color: #26241e; min-height: 44px;
}
body .gform_wrapper input::placeholder, body .gform_wrapper textarea::placeholder { color: #625d52; opacity: 1; }
body .gform_wrapper .gform_button { min-height: 44px; white-space: normal; }

/* News remains the existing, editable WP Grid Builder grid. */
.pot-news .fusion-title { margin-bottom: 24px !important; }
.pot-news .fusion-title h1 { color: #302c23 !important; font-size: clamp(2rem, 4vw, 3rem) !important; line-height: 1.15 !important; }
body .wp-grid-builder.wpgb-grid-1 .wpgb-area-top-2 { border: 0 !important; margin-bottom: 32px !important; justify-content: flex-start !important; }
body .wp-grid-builder.wpgb-grid-1 .wpgb-button-facet ul { gap: 8px; }
body .wp-grid-builder.wpgb-grid-1 .wpgb-button { min-height: 44px; padding: 9px 18px; border: 1px solid var(--pot-line) !important; background: #f6f4ef; color: #454035; font-size: 16px; }
body .wp-grid-builder.wpgb-grid-1 .wpgb-button[aria-pressed="true"] { background: var(--pot-gold-ink) !important; color: #fff !important; border-color: var(--pot-gold-ink) !important; border-radius: var(--pot-radius-small) !important; }
body .wp-grid-builder.wpgb-grid-1 .wpgb-button:hover { border-color: var(--pot-gold-ink) !important; }
body .wp-grid-builder.wpgb-grid-1 .wpgb-card-media svg[data-ratio] { padding-top: 62.5% !important; }
body .wp-grid-builder.wpgb-grid-1 .wpgb-block-1 a:hover { color: var(--pot-gold-ink); text-decoration: underline; text-underline-offset: .14em; }
body .wp-grid-builder.wpgb-grid-1 .wpgb-load-more { min-height: 44px; padding: 12px 24px; background: var(--pot-gold-ink); color: #fff; font-family: inherit; font-size: 16px; }

@media (max-width: 600px) {
    body .wp-grid-builder.wpgb-grid-1 .wpgb-button-facet ul li { width: auto !important; }
    .pot-news { --awb-padding-top: 28px; --awb-padding-bottom: 32px; }
    body .wp-grid-builder.wpgb-grid-1 .wpgb-card-body { padding: 20px 20px 0; }
    body .wp-grid-builder.wpgb-grid-1 .wpgb-card-footer { padding: 0 20px 20px; }
    body .wp-grid-builder.wpgb-grid-1 .wpgb-block-1 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Contrast where builder elements explicitly select the decorative gold token. */
body :is(#Bel-mij-terug, #Verhuisofferte-bel-mij-terug) .fusion-title :is(h2,h3,h4) { color: #241f11 !important; }
.slide-content .heading:last-child { border-radius: var(--pot-radius); padding-bottom: 30px; }
.slide-content .caption:last-child { border-radius: 0 0 var(--pot-radius) var(--pot-radius); padding-bottom: 30px !important; }
@media (max-width: 600px) {
    body .wp-grid-builder.wpgb-grid-1 .wpgb-button-facet .wpgb-inline-list {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
    }
    body .wp-grid-builder.wpgb-grid-1 .wpgb-button-facet .wpgb-inline-list li { margin: 0; min-width: 0; width: 100% !important; }
    body .wp-grid-builder.wpgb-grid-1 .wpgb-button { padding: 10px 8px; justify-content: center; }
    body .wp-grid-builder.wpgb-grid-1 .wpgb-button-label { white-space: normal; font-size: 15px; }
}
@media (max-width: 600px) {
    .tfs-slider .slide-content .fusion-title h1 { font-size: 30px !important; }
    .tfs-slider .slide-content .caption h2 { font-size: 21px !important; }
}
@media (max-width: 600px) {
    /* Preserve usable reading width at 320px, including the theme's outer gutter. */
    body #main { --hundredp_padding-hundred_percent_negative_margin: -16px; padding-left: 16px !important; padding-right: 16px !important; }
    /* Persistent promotional links must not cover mobile content or controls. */
    .awb-off-canvas-wrap.pot-passive-panel {
        position: static; width: auto; height: auto; margin: 16px;
        justify-content: center; z-index: auto;
    }
    .pot-passive-panel .awb-off-canvas { width: auto; max-width: 100%; margin: 0; }
}
@media (max-width: 600px) {
    body .wp-grid-builder.wpgb-grid-1 .wpgb-button-facet .wpgb-button { height: 100%; }
    body .wp-grid-builder.wpgb-grid-1 .wpgb-button-label { padding: 0; word-break: normal; overflow-wrap: normal; }
}
/* Footer disclosures: retain native Avada controls and editor-managed headings. */
.fusion-tb-footer .fusion-column-wrapper:has(> .awb-menu.collapse-enabled) {
    position: relative;
}
.fusion-tb-footer .fusion-column-wrapper:has(> .awb-menu.collapse-enabled) > .fusion-title {
    display: flex;
    min-height: 44px;
    padding-right: 56px;
    margin-bottom: 0 !important;
    align-items: center;
}
.fusion-tb-footer .awb-menu.collapse-enabled {
    position: static;
    margin-top: 0;
}
.fusion-tb-footer .awb-menu.collapse-enabled .awb-menu__m-toggle {
    position: absolute;
    top: 0;
    right: 0;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    padding: 14px;
    border-radius: var(--pot-radius-small);
    color: var(--pot-gold-ink);
    background: #f3f0e8;
}
.fusion-tb-footer .awb-menu.collapse-enabled .awb-menu__m-toggle:hover {
    background: #e9e3d5;
}
.fusion-tb-footer .awb-menu.collapse-enabled .awb-menu__m-toggle:focus-visible {
    outline: 3px solid var(--pot-focus);
    outline-offset: 3px;
}
.fusion-tb-footer .awb-menu.collapse-enabled .awb-menu__m-collapse-icon-open,
.fusion-tb-footer .awb-menu.collapse-enabled .awb-menu__m-collapse-icon-close {
    transition: opacity 150ms ease;
    transform: none;
}
.fusion-tb-footer .awb-menu.collapse-enabled .awb-menu__main-ul {
    border-radius: var(--pot-radius) !important;
    transition: opacity 150ms ease;
}
.fusion-tb-footer .awb-menu.collapse-enabled.expanded .awb-menu__main-ul {
    margin-top: 10px;
}
.fusion-tb-footer .awb-menu.collapse-enabled .awb-menu__main-a {
    min-height: 44px;
    padding: 10px 14px !important;
}
.fusion-tb-footer .awb-menu.collapse-enabled .awb-menu__main-a:focus-visible {
    outline-offset: -3px !important;
    box-shadow: none !important;
}
/* Keep the persistent careers CTA clear of tablet footer disclosure controls. */
@media (min-width: 601px) and (max-width: 1024px) {
    .awb-off-canvas-wrap.pot-passive-panel {
        position: static;
        width: auto;
        height: auto;
        margin: 16px;
        justify-content: center;
        z-index: auto;
    }
    .pot-passive-panel .awb-off-canvas { width: auto; max-width: 100%; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .fusion-tb-footer .awb-menu.collapse-enabled .awb-menu__main-ul,
    .fusion-tb-footer .awb-menu.collapse-enabled .awb-menu__m-collapse-icon-open,
    .fusion-tb-footer .awb-menu.collapse-enabled .awb-menu__m-collapse-icon-close {
        transition: none;
    }
}

/* Compact review links: retain the original gold stars and quiet inline typography. */
.pot-ratings { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; max-width: 100%; vertical-align: middle; }
.pot-ratings .pot-rating { display: inline-flex; align-items: center; gap: 8px; min-height: 24px; font-size: 15px; line-height: 20px; color: #4a4a4a; text-decoration: none; white-space: nowrap; }
.pot-ratings .pot-rating strong { font-weight: 700; color: #26241e; font-variant-numeric: tabular-nums; }
.pot-rating__audience { color: #6b665c; }
.pot-rating__audience { position: relative; }
.pot-rating__audience::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -.16em;
    height: 1px; background: currentColor; pointer-events: none;
    transform: scaleX(0); transform-origin: left center;
    transition: transform 180ms ease-out;
}
.pot-ratings .pot-rating:is(:hover, :focus-visible) .pot-rating__audience::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
    .pot-rating__audience::after { transition: none; }
}
.pot-rating__stars {
    --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.9 7.1.6-5.4 4.7 1.6 7L12 17.5 5.8 21.2l1.6-7L2 9.5l7.1-.6z'/%3E%3C/svg%3E");
    width: 90px; height: 16px;
    margin-left: -2px; /* the first star's glyph starts ~2px into its tile; keep it flush with the logo */
    background: linear-gradient(90deg, #f0b444 var(--fill), #e3e0d8 0);
    -webkit-mask: var(--star) 0 0 / 18px 16px repeat-x;
    mask: var(--star) 0 0 / 18px 16px repeat-x;
}

.pot-ratings--both .pot-rating__stars { width: 75px; height: 14px; -webkit-mask-size: 15px 14px; mask-size: 15px 14px; }
@media (max-width: 600px) {
    .pot-ratings { flex-direction: column; align-items: flex-start; gap: 2px; }
    .pot-ratings .pot-rating { font-size: 14px; min-height: 26px; }
    .pot-rating__stars { width: 75px; height: 14px; -webkit-mask-size: 15px 14px; mask-size: 15px 14px; }
}
/* Particulier/Zakelijk links in the top bar: underline the current section (same gold as the menu's active colour, also on subpages). */
.pot-segment-menu :is(.current-menu-item, .current-menu-ancestor, .current-page-ancestor) > .awb-menu__main-a .menu-text { color: #756331; text-decoration: underline; text-underline-offset: .3em; }

/* Footer contact list (Checklist element, class pot-footer-contact): footer line height, 16px icon column, 10px gap,
   dark links like the other footer links. The element sets these as inline custom properties, hence !important. */
.pot-footer-contact { --awb-line-height: 22.5px !important; --awb-icon-width: 16px !important; --awb-icon-height: 22.5px !important; --awb-icon-margin: 10px !important; --awb-content-margin: 26px !important; }
.pot-footer-contact .fusion-li-icon { font-size: 16px; }
.pot-footer-contact a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: 24px; }
.pot-footer-contact a:is(:hover, :focus-visible) { color: #756331; text-decoration: underline; text-underline-offset: .2em; }

/* Give the existing footer contact links their own touch area. */
@media (max-width: 1024px) {
    .pot-footer-contact a { min-height: 44px; }
    .pot-footer-contact .icon-wrapper { min-height: 44px; }
}

/* Keep homepage content within the shared site width, leaving the hero full width. */
.home #main .pot-home-content {
    max-width: var(--site_width);
    margin-left: auto;
    margin-right: auto;
}
