/* =========================================================================
   Accessibility (One Click Accessibility / Pojo) fixes — Westly theme
   Everything font-related is gated behind body[class*="pojo-a11y-resize-font-"]
   so the default render is untouched. Content roots on this theme:
   .lp-sec, .mobile-butotn, .modal  (no Elementor). #cc-banner-root and
   #pojo-a11y-toolbar are body children outside those roots.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Section 1: scale curves. Forms/banner start smallest and need a bigger
   first jump. Toolbar items use a gentler curve (kept a bit smaller than
   the page text on request).
   ------------------------------------------------------------------------- */
:root { --a11y-scale: 1; --a11y-scale-form: 1; --a11y-scale-toolbar: 1; }
body.pojo-a11y-resize-font-130 { --a11y-scale:1.15; --a11y-scale-form:1.30; --a11y-scale-toolbar:1.08; }
body.pojo-a11y-resize-font-140 { --a11y-scale:1.22; --a11y-scale-form:1.40; --a11y-scale-toolbar:1.12; }
body.pojo-a11y-resize-font-150 { --a11y-scale:1.28; --a11y-scale-form:1.48; --a11y-scale-toolbar:1.16; }
body.pojo-a11y-resize-font-160 { --a11y-scale:1.35; --a11y-scale-form:1.55; --a11y-scale-toolbar:1.20; }
body.pojo-a11y-resize-font-170 { --a11y-scale:1.42; --a11y-scale-form:1.62; --a11y-scale-toolbar:1.24; }
body.pojo-a11y-resize-font-180 { --a11y-scale:1.48; --a11y-scale-form:1.68; --a11y-scale-toolbar:1.28; }
body.pojo-a11y-resize-font-190 { --a11y-scale:1.54; --a11y-scale-form:1.72; --a11y-scale-toolbar:1.32; }
body.pojo-a11y-resize-font-200 { --a11y-scale:1.60; --a11y-scale-form:1.75; --a11y-scale-toolbar:1.36; }

/* -------------------------------------------------------------------------
   Section 2: base pin on <body> (measured: 25px/30px, 20px/25px <=767px).
   Unscoped on purpose; the toolbar sets its own 16px so it is unaffected.
   ------------------------------------------------------------------------- */
html body[class*="pojo-a11y-resize-font-"] {
    font-size: calc(25px * var(--a11y-scale)) !important;
    line-height: calc(30px * var(--a11y-scale)) !important;
}
@media (max-width: 767px) {
    html body[class*="pojo-a11y-resize-font-"] {
        font-size: calc(20px * var(--a11y-scale)) !important;
        line-height: calc(25px * var(--a11y-scale)) !important;
    }
}

/* Toolbar item labels: gentler curve (12.8px -> ~17.4px at max) */
html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar .pojo-a11y-toolbar-item .pojo-a11y-toolbar-text,
html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar .pojo-a11y-toolbar-item .pojo-a11y-toolbar-icon {
    font-size: calc(12.8px * var(--a11y-scale-toolbar)) !important;
    line-height: 1.2 !important;
}

/* -------------------------------------------------------------------------
   Section 3: kill % compounding inside every content root.
   (0,2,3) — every explicit rule below is restated with the root class so it
   reaches (0,3,x) and wins. Form controls are handled in Section 4.
   ------------------------------------------------------------------------- */
html body[class*="pojo-a11y-resize-font-"] :is(.lp-sec, .mobile-butotn, .modal) :is(p, li, span, label, blockquote, legend, code, pre, dd, dt) {
    font-size: inherit !important;
}

/* -------------------------------------------------------------------------
   Section 4: form controls + validation/response messages (form curve).
   Inputs and submit share one explicit height so they always match.
   ------------------------------------------------------------------------- */
html body[class*="pojo-a11y-resize-font-"] .lp-sec .field-col input,
html body[class*="pojo-a11y-resize-font-"] .lp-sec .submit-btn input {
    height: calc(max(3.5vh, 1.8vw) * var(--a11y-scale-form) + 1.4vh + 4px) !important;
    line-height: 1.2 !important;
}
html body[class*="pojo-a11y-resize-font-"] .lp-sec .field-col input {
    font-size: calc(0.9vw * var(--a11y-scale-form)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .lp-sec .submit-btn input {
    font-size: calc(1.5vw * var(--a11y-scale-form)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .lp-sec .wpcf7-checkbox .wpcf7-list-item-label {
    font-size: calc(0.7vw * var(--a11y-scale-form)) !important;
    line-height: max(calc(1.8vh * var(--a11y-scale-form)), 1.3em) !important;
}
html body[class*="pojo-a11y-resize-font-"] .lp-sec .form-bottom-text {
    font-size: calc(0.7vw * var(--a11y-scale-form)) !important;
    line-height: max(calc(1.5vh * var(--a11y-scale-form)), 1.3em) !important;
}
/* validation tip: always one line (column is single when scaled, see below) */
html body[class*="pojo-a11y-resize-font-"] .lp-sec .wpcf7-not-valid-tip {
    font-size: min(calc(max(14px, 0.9vw) * var(--a11y-scale-form)), calc((26vw - 16px) / 10)) !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
}
html body[class*="pojo-a11y-resize-font-"] .lp-sec .wpcf7 form .wpcf7-response-output {
    font-size: calc(25px * var(--a11y-scale-form)) !important;
    line-height: 1.3 !important;
}
html body[class*="pojo-a11y-resize-font-"] .lp-sec .wpcf7 form.invalid .wpcf7-response-output {
    font-size: calc(max(14px, 12px) * var(--a11y-scale-form)) !important;
}
/* desktop: the form is only 26vw wide — stack the two columns when scaled so
   fields, submit and one-line tips have room */
@media (min-width: 768px) {
    html body[class*="pojo-a11y-resize-font-"] .lp-sec .lp-form .row > .col-md-6 {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}
@media (max-width: 767px) {
    html body[class*="pojo-a11y-resize-font-"] .lp-sec .field-col input,
    html body[class*="pojo-a11y-resize-font-"] .lp-sec .submit-btn input {
        height: calc(26px * var(--a11y-scale-form) + 18px) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .lp-sec .field-col input {
        font-size: calc(16px * var(--a11y-scale-form)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .lp-sec .submit-btn input {
        font-size: calc(22px * var(--a11y-scale-form)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .lp-sec .wpcf7-checkbox .wpcf7-list-item-label {
        font-size: calc(12px * var(--a11y-scale-form)) !important;
        line-height: calc(17px * var(--a11y-scale-form)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .lp-sec .form-bottom-text {
        font-size: calc(12px * var(--a11y-scale-form)) !important;
        line-height: calc(17px * var(--a11y-scale-form)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .lp-sec .wpcf7-not-valid-tip {
        font-size: min(calc(14px * var(--a11y-scale-form)), calc((100vw - 56px) / 10)) !important;
        line-height: 1.3 !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .lp-sec .wpcf7 form .wpcf7-response-output {
        font-size: calc(20px * var(--a11y-scale-form)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .lp-sec .wpcf7 form.invalid .wpcf7-response-output {
        font-size: calc(14px * var(--a11y-scale-form)) !important;
    }
}

/* -------------------------------------------------------------------------
   Section 4b: elements with an intentional size of their own
   ------------------------------------------------------------------------- */
/* map tab: anchor the rotation to the panel edge so a longer label can't
   drift onto the text panel */
html body[class*="pojo-a11y-resize-font-"] .lp-sec .map-btn {
    font-size: calc(25px * var(--a11y-scale)) !important;
    line-height: calc(30px * var(--a11y-scale)) !important;
}
@media (min-width: 768px) {
    html body[class*="pojo-a11y-resize-font-"] .lp-sec .content-wrapper .map-btn {
        font-size: calc(1.83vw * var(--a11y-scale)) !important;
        line-height: calc(2.196vw * var(--a11y-scale)) !important;
    }
}
@media (max-width: 767px) {
    html body[class*="pojo-a11y-resize-font-"] .lp-sec .map-btn {
        font-size: calc(20px * var(--a11y-scale)) !important;
        line-height: calc(25px * var(--a11y-scale)) !important;
        left: 0 !important;
        transform-origin: 0 0 !important;
        transform: rotate(90deg) translateY(-100%) !important;
        white-space: nowrap !important;
    }
    /* leave room above the fixed mobile button bar */
    html body[class*="pojo-a11y-resize-font-"] .lp-sec .content-wrapper {
        padding-bottom: calc(90px * var(--a11y-scale)) !important;
    }
}
html body[class*="pojo-a11y-resize-font-"] .mobile-butotn a {
    font-size: calc(18px * var(--a11y-scale)) !important;
    line-height: 1.2 !important;
}
/* modals (bootstrap sizes) */
html body[class*="pojo-a11y-resize-font-"] .modal .modal-title {
    font-size: calc(1.25rem * var(--a11y-scale)) !important;
    line-height: 1.3 !important;
}
html body[class*="pojo-a11y-resize-font-"] .modal .modal-body :is(h1, h2, h3, h4, h5, h6) {
    font-size: calc((1.275rem + 0.3vw) * var(--a11y-scale)) !important;
    line-height: 1.2 !important;
}
@media (min-width: 1200px) {
    html body[class*="pojo-a11y-resize-font-"] .modal .modal-body :is(h1, h2, h3, h4, h5, h6) {
        font-size: calc(1.5rem * var(--a11y-scale)) !important;
    }
}

/* -------------------------------------------------------------------------
   Section 4c: cookie banner (#cc-banner-root is outside the content roots).
   Generic inherit first, then explicit pins — every pin is calc(px * scale).
   ------------------------------------------------------------------------- */
html body[class*="pojo-a11y-resize-font-"] .cc-root :is(p, li, span, label, a) { font-size: inherit !important; }
html body[class*="pojo-a11y-resize-font-"] .cc-root { font-size: calc(14px * var(--a11y-scale)) !important; line-height: 1.5 !important; }
html body[class*="pojo-a11y-resize-font-"] .cc-title,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-title { font-size: calc(18px * var(--a11y-scale-form)) !important; line-height: 1.3 !important; }
html body[class*="pojo-a11y-resize-font-"] .cc-body,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-body { font-size: calc(14px * var(--a11y-scale-form)) !important; line-height: 1.5 !important; }
html body[class*="pojo-a11y-resize-font-"] .cc-btn,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-btn { font-size: calc(15px * var(--a11y-scale-form)) !important; line-height: 1.4 !important; }
html body[class*="pojo-a11y-resize-font-"] .cc-lang-toggle,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-lang-toggle { font-size: calc(12px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] .cc-modal-head h2,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-modal-head h2 { font-size: calc(18px * var(--a11y-scale)) !important; line-height: 1.3 !important; }
html body[class*="pojo-a11y-resize-font-"] .cc-modal-close,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-modal-close { font-size: calc(24px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] .cc-cat-desc,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-cat-desc { font-size: calc(13px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] .cc-required-badge,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-required-badge { font-size: calc(11px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] .cc-cookies-list,
html body[class*="pojo-a11y-resize-font-"] .cc-cookies-list th,
html body[class*="pojo-a11y-resize-font-"] .cc-cookies-list td,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-cookies-list th,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-cookies-list td { font-size: calc(12px * var(--a11y-scale)) !important; }
/* a taller banner must never run off-screen */
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-banner {
    max-height: calc(100vh - 30px);
    overflow-y: auto;
}

/* -------------------------------------------------------------------------
   Section 4d: tip positioning — not needed here. The theme keeps
   .wpcf7-not-valid-tip position:relative (in flow, no fixed px top), so it
   tracks the wrapping consent label at every step.
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   Section 5: every theme font-size rule, gated and × scale.
   Base (vw) + max-width:767px (px), line-heights scaled with the same factor
   and floored at 1.2em so wrapped lines never overlap.
   ------------------------------------------------------------------------- */
html body[class*="pojo-a11y-resize-font-"] .lp-sec .main-title {
    font-size: calc(1.4vw * var(--a11y-scale)) !important;
    line-height: max(calc(4vh * var(--a11y-scale)), 1.2em) !important;
}
html body[class*="pojo-a11y-resize-font-"] .lp-sec .content-wrapper .content {
    font-size: calc(0.95vw * var(--a11y-scale)) !important;
    line-height: max(calc(2.6vh * var(--a11y-scale)), 1.4em) !important;
}
html body[class*="pojo-a11y-resize-font-"] .lp-sec .unit-title,
html body[class*="pojo-a11y-resize-font-"] .lp-sec .payment-terms {
    font-size: calc(1.2vw * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .lp-sec .unit-title {
    line-height: max(calc(3vh * var(--a11y-scale)), 1.2em) !important;
}
html body[class*="pojo-a11y-resize-font-"] .lp-sec .payment-terms {
    line-height: max(calc(4vh * var(--a11y-scale)), 1.2em) !important;
}
html body[class*="pojo-a11y-resize-font-"] .lp-sec .unit-price-wrapper {
    font-size: calc(1.4vw * var(--a11y-scale)) !important;
    line-height: max(calc(3.2vh * var(--a11y-scale)), 1.2em) !important;
}
html body[class*="pojo-a11y-resize-font-"] .lp-sec .icon-list .item > .text {
    font-size: calc(0.7vw * var(--a11y-scale)) !important;
    line-height: max(calc(2vh * var(--a11y-scale)), 1.3em) !important;
}
html body[class*="pojo-a11y-resize-font-"] .lp-sec .form-title {
    font-size: calc(1vw * var(--a11y-scale)) !important;
    line-height: max(calc(1.8vh * var(--a11y-scale)), 1.2em) !important;
}
html body[class*="pojo-a11y-resize-font-"] .lp-sec .desclimar-links > * {
    font-size: calc(max(13px, 0.952vw) * var(--a11y-scale)) !important;
    line-height: calc(max(20px, 1.464vw) * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .lp-sec .notice-text {
    font-size: calc(max(12px, 0.878vw) * var(--a11y-scale)) !important;
    line-height: calc(max(16px, 1.171vw) * var(--a11y-scale)) !important;
}
@media (max-width: 767px) {
    html body[class*="pojo-a11y-resize-font-"] .lp-sec .main-title {
        font-size: calc(24px * var(--a11y-scale)) !important;
        line-height: calc(32px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .lp-sec .content-wrapper .content {
        font-size: calc(16px * var(--a11y-scale)) !important;
        line-height: calc(24px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .lp-sec .unit-title,
    html body[class*="pojo-a11y-resize-font-"] .lp-sec .payment-terms {
        font-size: calc(17px * var(--a11y-scale)) !important;
        line-height: calc(22px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .lp-sec .unit-price-wrapper {
        font-size: calc(18px * var(--a11y-scale)) !important;
        line-height: calc(24px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .lp-sec .icon-list .item > .text {
        font-size: calc(16px * var(--a11y-scale)) !important;
        line-height: calc(24px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .lp-sec .form-title {
        font-size: calc(16px * var(--a11y-scale)) !important;
        line-height: calc(24px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .lp-sec .notice-text {
        font-size: calc(12px * var(--a11y-scale)) !important;
        line-height: calc(16px * var(--a11y-scale)) !important;
    }
}

/* =========================================================================
   Layout fix (requested, NOT gated): remove the white strip under the
   slider when the text panel is taller than the viewport. The panel alone
   sets the section height (min 100vh); the slider is pinned to fill it, so
   the photos' natural height can never add an extra scroll.
   When the panel fits in 100vh the render is identical to before.
   ========================================================================= */
@media (min-width: 768px) {
    .lp-sec {
        min-height: 100vh;
    }
    .lp-sec > .banner-slider {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: hidden;
    }
    .lp-sec > .content-wrapper {
        position: relative;
        top: auto;
        left: auto;
        margin-right: auto;
        margin-left: 0;
    }
    .lp-sec > .banner-slider .slick-list,
    .lp-sec > .banner-slider .slick-track {
        height: 100%;
    }
    .lp-sec > .banner-slider .slick-track .slick-slide > img {
        height: 100%;
    }
    /* disclaimer: start just past the panel edge so it never sits on the
       dark panel (was right:-10vw, which overlapped when the text is wider) */
    .lp-sec .content-wrapper .notice-text {
        right: auto;
        left: 100%;
        width: max-content;
        margin-left: 1vw;
    }
    /* disclaimer links + notice: vw like the rest of the panel so they keep
       their proportion on wide screens (= the design px at 1366px, never
       smaller than the design px) */
    .lp-sec .desclimar-links > * {
        font-size: max(13px, 0.952vw);
        line-height: max(20px, 1.464vw);
    }
    .lp-sec .content-wrapper .notice-text {
        font-size: max(12px, 0.878vw);
        line-height: max(16px, 1.171vw);
    }
    /* slider logo: always 10vw (the 186px image used to cap it on wide screens) */
    .lp-sec .content-wrapper .slider-content .slider-logo {
        width: 10vw;
    }
    /* map tab: all sizes in vw (= the design at 1366px). Rotation is anchored
       to the panel edge so it sits flush at every width without the per-
       breakpoint right offsets; bottom keeps the same visual position. */
    .lp-sec .content-wrapper .map-btn {
        right: 0;
        bottom: calc(18vh - 2.38vw);
        transform-origin: 100% 100%;
        transform: rotate(90deg);
        font-size: 1.83vw;
        line-height: 2.196vw;
        gap: 0 0.732vw;
        border-radius: 0.732vw 0.732vw 0 0;
        white-space: nowrap;
    }
    .lp-sec .content-wrapper .map-btn img {
        width: 1.171vw;
        height: auto;
    }
    /* consent checkbox: square (theme mixes 1vw wide with 2.5vh tall) */
    .lp-sec .wpcf7-checkbox input[type="checkbox"] {
        width: max(20px, 1vw);
        height: max(20px, 1vw);
    }
    .lp-sec .wpcf7-checkbox input[type="checkbox"]:checked::before {
        width: 62.5%;
        height: 62.5%;
    }
}

/* mobile bottom bar: labels on one line in the default state (below ~360px
   the font eases down just enough to fit; 375px+ stays at the design 18px) */
@media (max-width: 767px) {
    body:not([class*="pojo-a11y-resize-font-"]) .mobile-butotn a {
        white-space: nowrap;
        font-size: min(18px, calc((50vw - 69px) * 0.155));
    }
}

/* =========================================================================
   Contrast / colour modes
   ========================================================================= */
/* high contrast: black page */
body.pojo-a11y-high-contrast {
    background: #000 !important;
    background-color: #000 !important;
    color: #fff !important;
}

/* slider arrows: no box/border behind them in any mode */
body.pojo-a11y-high-contrast .banner-slider .slick-arrow,
body.pojo-a11y-high-contrast .banner-slider .slick-arrow img,
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .banner-slider .slick-arrow,
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .banner-slider .slick-arrow img,
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .banner-slider .slick-arrow,
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .banner-slider .slick-arrow img {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    outline: 0;
}

/* Text panel over the slider: translucent (like the normal design) instead
   of the plugin's solid fill, so the photo stays visible. Everything inside
   the panel goes transparent; form controls keep their solid fill.
   (.lp-sec is a direct child of body, so it carries the :not() itself) */
body.pojo-a11y-high-contrast .lp-sec:not(#pojo-a11y-toolbar) .content-wrapper,
body.pojo-a11y-negative-contrast .lp-sec:not(#pojo-a11y-toolbar) .content-wrapper {
    background: rgba(0, 0, 0, 0.8) !important;
    background-color: rgba(0, 0, 0, 0.8) !important;
}
body.pojo-a11y-light-background .lp-sec:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .content-wrapper {
    background: rgba(255, 255, 255, 0.85) !important;
    background-color: rgba(255, 255, 255, 0.85) !important;
}
body.pojo-a11y-high-contrast .lp-sec:not(#pojo-a11y-toolbar) .content-wrapper :not(input, button, select, textarea, img, .notice-text),
body.pojo-a11y-negative-contrast .lp-sec:not(#pojo-a11y-toolbar) .content-wrapper :not(input, button, select, textarea, img, .notice-text),
body.pojo-a11y-light-background .lp-sec:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .content-wrapper :not(input, button, select, textarea, img, .notice-text),
body.pojo-a11y-high-contrast .lp-sec:not(#pojo-a11y-toolbar) > .slider-content,
body.pojo-a11y-high-contrast .lp-sec:not(#pojo-a11y-toolbar) > .slider-content .slider-logo,
body.pojo-a11y-negative-contrast .lp-sec:not(#pojo-a11y-toolbar) > .slider-content,
body.pojo-a11y-negative-contrast .lp-sec:not(#pojo-a11y-toolbar) > .slider-content .slider-logo,
body.pojo-a11y-light-background .lp-sec:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) > .slider-content,
body.pojo-a11y-light-background .lp-sec:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) > .slider-content .slider-logo {
    background: transparent !important;
    background-color: transparent !important;
}
/* panel images (logos, icons) sit directly on the translucent panel */
body.pojo-a11y-high-contrast .lp-sec:not(#pojo-a11y-toolbar) .content-wrapper img,
body.pojo-a11y-high-contrast .lp-sec:not(#pojo-a11y-toolbar) .slider-content img,
body.pojo-a11y-negative-contrast .lp-sec:not(#pojo-a11y-toolbar) .content-wrapper img,
body.pojo-a11y-light-background .lp-sec:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .content-wrapper img {
    background: transparent !important;
    background-color: transparent !important;
}

/* white logos: black background behind them in light mode (header + form) */
body.pojo-a11y-light-background .lp-sec:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) :is(.main-logo, .slider-logo, .form-logo) img,
body.pojo-a11y-light-background .lp-sec:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .content-wrapper img.form-logo {
    background: #000 !important;
    background-color: #000 !important;
}

/* submit arrow icon: light box so the dark arrow shows on any button colour */
body.pojo-a11y-high-contrast .lp-sec:not(#pojo-a11y-toolbar) .content-wrapper .submit-btn img,
body.pojo-a11y-negative-contrast .lp-sec:not(#pojo-a11y-toolbar) .content-wrapper .submit-btn img,
body.pojo-a11y-light-background .lp-sec:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .content-wrapper .submit-btn img {
    background: #fff !important;
    background-color: #fff !important;
    border-radius: 3px;
}

/* map tab arrow is a black PNG; the tab turns dark in these modes -> make it white */
body.pojo-a11y-high-contrast .lp-sec:not(#pojo-a11y-toolbar) .content-wrapper .map-btn img,
body.pojo-a11y-negative-contrast .lp-sec:not(#pojo-a11y-toolbar) .content-wrapper .map-btn img {
    -webkit-filter: invert(1) !important;
    filter: invert(1) !important;
    background: transparent !important; /* invert() would flip a bg too */
}

/* light mode: the map tab turns white on the photo -> black outline
   (beats bootstrap .border-0 which is !important) */
body.pojo-a11y-light-background .lp-sec:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .content-wrapper .map-btn {
    border: 1px solid #000 !important;
}

/* light mode: the form logo's black tile touches the checkbox -> gap */
body.pojo-a11y-light-background .lp-sec:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .checkbox-group > div.form-logo {
    margin-left: max(10px, 0.7vw) !important;
}

/* light mode: the gold line icons are faint on the white panel -> dark tile
   behind each icon (w-100 dropped so the tile hugs the icon, same height) */
body.pojo-a11y-light-background .lp-sec:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .content-wrapper .icon-list .item > img {
    width: auto !important;
    max-width: 100%;
    background: #000 !important;
    background-color: #000 !important;
    padding: max(6px, 0.4vw);
    border-radius: 8px;
}

/* mobile bottom bar: keep a visible border on both buttons in every mode
   (the dark button's #000 border vanishes on the black contrast page) */
body.pojo-a11y-high-contrast .mobile-butotn:not(#pojo-a11y-toolbar) a,
body.pojo-a11y-negative-contrast .mobile-butotn:not(#pojo-a11y-toolbar) a {
    border: 1px solid #fff !important;
}
body.pojo-a11y-light-background .mobile-butotn:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) a {
    border: 1px solid #000 !important;
}
body.pojo-a11y-grayscale .mobile-butotn a.mobile-contact {
    border-color: #fff !important;
}

/* map popup (lightbox2): the plugin paints .lb-nav — a layer ON TOP of the
   image — solid, hiding the map, and its background shorthand wipes the
   close button's X icon. Keep the popup layers clear and restore the icon. */
body.pojo-a11y-high-contrast #lightbox.lightbox,
body.pojo-a11y-high-contrast #lightbox.lightbox :is(.lb-outerContainer, .lb-container, .lb-image, .lb-nav, .lb-dataContainer, .lb-data, .lb-closeContainer),
body.pojo-a11y-negative-contrast #lightbox.lightbox,
body.pojo-a11y-negative-contrast #lightbox.lightbox :is(.lb-outerContainer, .lb-container, .lb-image, .lb-nav, .lb-dataContainer, .lb-data, .lb-closeContainer),
body.pojo-a11y-light-background #lightbox.lightbox,
body.pojo-a11y-light-background #lightbox.lightbox :is(.lb-outerContainer, .lb-container, .lb-image, .lb-nav, .lb-dataContainer, .lb-data, .lb-closeContainer) {
    background: transparent !important;
    background-color: transparent !important;
}
body.pojo-a11y-high-contrast #lightbox.lightbox .lb-data .lb-close,
body.pojo-a11y-negative-contrast #lightbox.lightbox .lb-data .lb-close,
body.pojo-a11y-light-background #lightbox.lightbox .lb-data .lb-close {
    background: #fff url(../images/close.png) center center / 16px no-repeat !important;
    border: 1px solid #000 !important;
    opacity: 1 !important;
}

/* consent checkbox: box and check mark visible in every mode */
body.pojo-a11y-high-contrast .wpcf7-checkbox input[type="checkbox"],
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .wpcf7-checkbox input[type="checkbox"],
body.pojo-a11y-grayscale .wpcf7-checkbox input[type="checkbox"] {
    border-color: #fff !important;
}
body.pojo-a11y-high-contrast .wpcf7-checkbox input[type="checkbox"]:checked::before,
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .wpcf7-checkbox input[type="checkbox"]:checked::before,
body.pojo-a11y-grayscale .wpcf7-checkbox input[type="checkbox"]:checked::before {
    background-color: #fff !important;
}
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .wpcf7-checkbox input[type="checkbox"] {
    border: 1px solid #000 !important;
    background: #fff !important;
}
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .wpcf7-checkbox input[type="checkbox"]:checked::before {
    background-color: #000 !important;
}

/* =========================================================================
   Supplied rules (toolbar, cookie floater, grayscale, light mode, sliders)
   ========================================================================= */
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) input,
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) textarea,
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) select {
    border: 1px solid #000 !important;
}
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) input::placeholder,
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) textarea::placeholder {
    color: #000;
}

/* Remove the problematic body filter only during grayscale mode */
body.pojo-a11y-grayscale {
    -webkit-filter: none !important;
    filter: none !important;
    overflow-x: hidden !important;
}
/* Reapply grayscale to the document root */
html:has(body.pojo-a11y-grayscale) {
    -webkit-filter: grayscale(100%) !important;
    filter: grayscale(100%) !important;
}
/* Change toolbar positioning only during grayscale mode */
body.pojo-a11y-grayscale #pojo-a11y-toolbar {
    position: fixed !important;
    z-index: 99999 !important;
}

.cc-slider, body.pojo-a11y-high-contrast .cc-slider, body.pojo-a11y-grayscale .cc-slider,
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .cc-slider,
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .cc-slider {
    background: #ababff !important;
}
body.pojo-a11y-grayscale .wpcf7-not-valid-tip {
    color: #fff;
}
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .cc-btn {
    border: 1px solid #000 !important;
}
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .cc-slider {
    background: gray !important;
}
body.pojo-a11y-high-contrast .cc-slider {
    background: gray !important;
}
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .cc-slider {
    background: gray !important;
}
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .black-bg img {
    background: #000 !important;
}
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .transparent-bg {
    background: transparent !important;
}
body.pojo-a11y-high-contrast .transparent-bg {
    background: transparent !important;
}
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .transparent-bg {
    background: transparent !important;
}
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .transparent-bg img {
    background: transparent !important;
}
body.pojo-a11y-high-contrast .transparent-bg img {
    background: transparent !important;
}
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .transparent-bg img {
    background: transparent !important;
}
body.pojo-a11y-high-contrast .wpcf7-checkbox input[type="checkbox"]:checked::before {
    color: #fff;
}
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .wpcf7-checkbox input[type="checkbox"]:checked::before {
    color: #fff;
}

/* cookie floater — placed directly under the accessibility toggle (right edge) */
body #cc-floater {
    bottom: unset !important;
    top: 12.5vw !important;
    left: unset !important;
    right: 0.1vw !important;
    width: 2.5vw !important;
    height: 2.5vw !important;
    line-height: 2.5vw;
    text-align: center !important;
    z-index: 999 !important;
}
body #cc-floater svg {
    width: 1.5vw !important;
    height: 1.5vw !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
body #pojo-a11y-toolbar {
    z-index: 9999 !important;
    top: 9vw !important;
}
body #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle a {
    font-size: 1.5vw !important;
    padding: 0.6vw !important;
}
body #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle svg {
    width: 1.5vw !important;
}
@media (max-width: 767px) {
    body #cc-floater {
        bottom: unset !important;
        top: 60vw !important;
        left: unset !important;
        right: 1.15vw !important;
        width: 7.5vw !important;
        height: 7.5vw !important;
        line-height: 7.5vw;
        padding: 4.5vw !important;
    }
    body #cc-floater svg {
        width: 5vw !important;
        height: 5vw !important;
    }
    body #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle a {
        font-size: 5.5vw !important;
        padding: 2vw !important;
    }
    body #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle svg {
        width: 5.8vw !important;
    }
    body #pojo-a11y-toolbar {
        top: 48vw !important;
    }
    /* cookie banner centred on mobile */
    .cc-banner {
        padding: 16px !important;
    }
    .cc-pos-right {
        left: 50% !important;
        right: unset !important;
        bottom: 10px !important;
        width: 95%;
        transform: translateX(-50%);
    }
    .cc-btn {
        padding: 7px 9px !important;
    }
}

/* toolbar item icons: spacing on the left of the icon (RTL), none on the right
   (the plugin only flips this under body.rtl, which this site doesn't output) */
#pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a svg {
    padding-right: 0 !important;
    padding-left: 6px !important;
}