/* ==========================================================================
   One Click Accessibility (Pojo) fixes — bengurion theme
   Everything font-related is gated behind body[class*="pojo-a11y-resize-font-"],
   so with no step selected (and after Reset) the design is untouched.
   Theme sources mirrored: assets/css/style.css, assets/css/responsive.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section 1: scale curves.
   --a11y-scale         general text
   --a11y-scale-form    form controls / cookie banner (start small, bigger first jump)
   --a11y-scale-toolbar accessibility menu items (deliberately a bit smaller)
   -------------------------------------------------------------------------- */
: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 baseline 16px). Unscoped on purpose.
   -------------------------------------------------------------------------- */
html body[class*="pojo-a11y-resize-font-"] { font-size: calc(16px * var(--a11y-scale)) !important; }

/* Accessibility menu items: own, gentler curve (plugin default is 12.8px -> 25.6px). */
html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a span {
    font-size: calc(12.8px * var(--a11y-scale-toolbar)) !important;
}

/* --------------------------------------------------------------------------
   Section 3: kill % compounding inside every content root.
   .main-bg = template-home, .mobile-menu = sticky mobile bar,
   .thank-you-wrapper = template-thank-you. Toolbar (#pojo-a11y-toolbar) is a
   sibling of these and is never matched.
   -------------------------------------------------------------------------- */
html body[class*="pojo-a11y-resize-font-"] :is(.main-bg, .mobile-menu, .thank-you-wrapper) :is(p, li, span, label, blockquote, legend, code, pre, dd, dt, strong, b, em, a) {
    font-size: inherit !important;
}

/* --------------------------------------------------------------------------
   Section 4: form controls + validation/response messages (--a11y-scale-form).
   Input and submit share one height so they always line up.
   -------------------------------------------------------------------------- */
html body[class*="pojo-a11y-resize-font-"] .main-bg .form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]) {
    font-size: calc(16px * var(--a11y-scale-form)) !important;
    height: calc(44px * var(--a11y-scale-form)) !important;
    line-height: 1.5 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
html body[class*="pojo-a11y-resize-font-"] .main-bg .form input::placeholder {
    font-size: calc(16px * var(--a11y-scale-form)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .main-bg .form .submit-btn input {
    font-size: calc(24px * var(--a11y-scale-form)) !important;
    height: calc(44px * var(--a11y-scale-form)) !important;
    line-height: calc(44px * var(--a11y-scale-form)) !important;
    padding: 0 !important;
}
/* Consent checkbox label (base 14px, <=767px 12px, <=680px line-height 17px) */
html body[class*="pojo-a11y-resize-font-"] .main-bg .form .checkbox label {
    font-size: calc(14px * var(--a11y-scale-form)) !important;
}
/* Validation tip: always one line (readability floor max(14px, 16px)). */
html body[class*="pojo-a11y-resize-font-"] .main-bg .form .wpcf7-not-valid-tip {
    font-size: calc(16px * var(--a11y-scale-form)) !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
}
html body[class*="pojo-a11y-resize-font-"] .main-bg .form .wpcf7-response-output {
    font-size: calc(16px * var(--a11y-scale-form)) !important;
    line-height: 1.4 !important;
}
/* responsive.css (min-width:1200px) and (max-width:1600px) narrows the form column
   to ~214px: cap the tip so the longest message ("אנא הזן כתובת דוא"ל.") stays one line. */
@media (min-width: 1200px) and (max-width: 1600px) {
    html body[class*="pojo-a11y-resize-font-"] .main-bg .form .wpcf7-not-valid-tip {
        font-size: min(calc(16px * var(--a11y-scale-form)), 26px) !important;
    }
}
@media (max-width: 767px) {
    html body[class*="pojo-a11y-resize-font-"] .main-bg .form .checkbox label {
        font-size: calc(12px * var(--a11y-scale-form)) !important;
    }
}
@media (max-width: 680px) {
    html body[class*="pojo-a11y-resize-font-"] .main-bg .form .checkbox label {
        line-height: max(calc(17px * var(--a11y-scale-form)), 1.3em) !important;
    }
}

/* --------------------------------------------------------------------------
   Section 4c: cookie banner (#cc-banner-root) + its modal (mounted on <body>).
   -------------------------------------------------------------------------- */
html body[class*="pojo-a11y-resize-font-"] :is(.cc-root, .cc-modal-wrap) :is(p, li, span, label, a, td, th, summary, div) {
    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-modal-wrap {
    font-size: calc(16px * 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.2 !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,
html body[class*="pojo-a11y-resize-font-"] .cc-modal-wrap .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-modal-wrap .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-modal-wrap .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-modal-wrap .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-modal-wrap .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-modal-wrap .cc-cookies-list th,
html body[class*="pojo-a11y-resize-font-"] .cc-modal-wrap .cc-cookies-list td {
    font-size: calc(12px * var(--a11y-scale)) !important;
}

/* --------------------------------------------------------------------------
   Section 5: every theme font-size, gated and x var(--a11y-scale).
   px line-heights scale too, with a floor so wrapped lines never overlap.
   Media blocks follow the theme's own order (style.css -> responsive.css).
   -------------------------------------------------------------------------- */

/* ---- base ---- */
html body[class*="pojo-a11y-resize-font-"] .main-bg .center-text .main-heading {
    font-size: calc(62px * var(--a11y-scale)) !important;
    line-height: max(calc(44px * var(--a11y-scale)), 1.05em) !important;
    margin-top: 0 !important;
    margin-bottom: 15px !important;
}
html body[class*="pojo-a11y-resize-font-"] .main-bg .content .sub-heading {
    font-size: calc(27px * var(--a11y-scale)) !important;
    line-height: max(calc(34px * var(--a11y-scale)), 1.15em) !important;
}
html body[class*="pojo-a11y-resize-font-"] .main-bg .content .desc {
    font-size: calc(19px * var(--a11y-scale)) !important;
    line-height: max(calc(26px * var(--a11y-scale)), 1.3em) !important;
}
html body[class*="pojo-a11y-resize-font-"] .main-bg .content .price-text {
    font-size: calc(29px * var(--a11y-scale)) !important;
    line-height: max(calc(27px * var(--a11y-scale)), 1.15em) !important;
}
html body[class*="pojo-a11y-resize-font-"] .main-bg .pricing-detail .price {
    font-size: calc(36px * var(--a11y-scale)) !important;
    line-height: max(calc(36px * var(--a11y-scale)), 1.15em) !important;
}
html body[class*="pojo-a11y-resize-font-"] .main-bg .icon-list .item > .title {
    font-size: calc(18px * var(--a11y-scale)) !important;
    line-height: max(calc(24px * var(--a11y-scale)), 1.25em) !important;
}
html body[class*="pojo-a11y-resize-font-"] .main-bg .form h2 {
    font-size: calc(23px * var(--a11y-scale)) !important;
    line-height: max(calc(26px * var(--a11y-scale)), 1.2em) !important;
}
html body[class*="pojo-a11y-resize-font-"] .main-bg .lower-notice p {
    font-size: calc(13px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .main-bg .slider-wrap-sec .image-notice {
    font-size: calc(18px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .main-bg #thank-you-message h4 {
    font-size: calc((1.275rem + .3vw) * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .thank-you-wrapper .content-wrapper > h1,
html body[class*="pojo-a11y-resize-font-"] .thank-you-wrapper .content-wrapper > h2 {
    font-size: calc(68px * var(--a11y-scale)) !important;
    line-height: max(calc(42px * var(--a11y-scale)), 1.05em) !important;
}
html body[class*="pojo-a11y-resize-font-"] .thank-you-wrapper .content-wrapper > p {
    font-size: calc(20px * var(--a11y-scale)) !important;
    line-height: max(calc(26px * var(--a11y-scale)), 1.3em) !important;
}
/* Desktop icon row is 4-up flex-nowrap: enlarged titles would overflow it, so switch to
   the same 2x2 grid the theme uses on mobile. */
html body[class*="pojo-a11y-resize-font-"] .main-bg .icon-list {
    flex-wrap: wrap !important;
    gap: 20px !important;
}
html body[class*="pojo-a11y-resize-font-"] .main-bg .icon-list > .item {
    flex: 0 0 calc(50% - 10px);
    width: calc(50% - 10px);
    min-width: 0;
    overflow-wrap: break-word;
}

/* The white/navy split of .main-bg is a % gradient (61% etc. from Additional CSS), so the
   navy lands in the wrong place whenever the content height differs from what the % assumes:
   it covered the dark icon titles at 640-1440px by default, and slides the white form heading
   onto white when fonts are enlarged. Anchor the navy panel to the form instead (always):
   it starts 30px above the form heading (the original design gap) and runs to the bottom of
   .main-bg. Skipped in high/negative/light modes, which paint their own backgrounds. */
html body:not(.pojo-a11y-high-contrast):not(.pojo-a11y-negative-contrast):not(.pojo-a11y-light-background) .container-fluid.main-bg {
    background-image: none !important;
    position: relative;
    z-index: 0;
    overflow: hidden;
    overflow: clip;
}
html body:not(.pojo-a11y-high-contrast):not(.pojo-a11y-negative-contrast):not(.pojo-a11y-light-background) .main-bg #contactform > h2 {
    position: relative;
}
html body:not(.pojo-a11y-high-contrast):not(.pojo-a11y-negative-contrast):not(.pojo-a11y-light-background) .main-bg #contactform > h2::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -30px;
    bottom: -5000px;
    left: -100vw;
    right: -100vw;
    background: var(--second-background-color);
}
/* "* הדמיות להמחשה" is white text that must stay on the teal block */
@media (min-width: 768px) {
    html body[class*="pojo-a11y-resize-font-"] .main-bg .slider-wrap-sec .image-notice {
        font-size: min(calc(18px * var(--a11y-scale)), 24px) !important;
    }
}

/* template-page.php (accessibility statement / privacy policy): body > .container > h1.content
   + .container > .content. Stop the <p> compounding and widen the 560px column with the text. */
html body[class*="pojo-a11y-resize-font-"].page-template-template-page .container > .content {
    max-width: calc(560px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"].page-template-template-page .container > .content :is(p, li, span, label, blockquote, legend, code, pre, dd, dt, strong, b, em, a, h2, h3, h4, h5, h6) {
    font-size: inherit !important;
}
html body[class*="pojo-a11y-resize-font-"].page-template-template-page .container > h1.content {
    font-size: calc((1.375rem + 1.5vw) * var(--a11y-scale)) !important;
    line-height: 1.2 !important;
}

@media (min-width: 1200px) {
    html body[class*="pojo-a11y-resize-font-"].page-template-template-page .container > h1.content {
        font-size: calc(2.5rem * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .main-bg #thank-you-message h4 {
        font-size: calc(1.5rem * var(--a11y-scale)) !important;
    }
}

/* ---- responsive.css (max-width: 767px) ---- */
@media (max-width: 767px) {
    html body[class*="pojo-a11y-resize-font-"] .mobile-menu .detail-mob a,
    html body[class*="pojo-a11y-resize-font-"] .mobile-menu .phone-mob a {
        font-size: calc(16px * var(--a11y-scale)) !important;
        line-height: 1.3 !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .main-bg .lower-notice p {
        font-size: calc(12px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .main-bg .slider-wrap-sec .image-notice {
        font-size: calc(12px * var(--a11y-scale)) !important;
        line-height: 1.25 !important;
        white-space: normal !important;
        max-width: 90px;
    }
}

/* ---- responsive.css (max-width: 680px) ---- */
@media (max-width: 680px) {
    html body[class*="pojo-a11y-resize-font-"] .main-bg .center-text .main-heading {
        font-size: calc(43px * var(--a11y-scale)) !important;
        line-height: max(calc(35px * var(--a11y-scale)), 1.05em) !important;
        margin-top: 0 !important;
        margin-bottom: 10px !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .main-bg .content .sub-heading {
        font-size: calc(29px * var(--a11y-scale)) !important;
        line-height: max(calc(34px * var(--a11y-scale)), 1.15em) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .main-bg .content .desc {
        font-size: calc(20px * var(--a11y-scale)) !important;
        line-height: max(calc(26px * var(--a11y-scale)), 1.3em) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .main-bg .content .price-text,
    html body[class*="pojo-a11y-resize-font-"] .main-bg .content .price-text > strong {
        font-size: calc(34px * var(--a11y-scale)) !important;
        line-height: max(calc(42px * var(--a11y-scale)), 1.15em) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .main-bg .pricing-detail .price {
        font-size: calc(36px * var(--a11y-scale)) !important;
        line-height: max(calc(36px * var(--a11y-scale)), 1.15em) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .main-bg .icon-list .item > .title {
        font-size: calc(20px * var(--a11y-scale)) !important;
        line-height: max(calc(24px * var(--a11y-scale)), 1.25em) !important;
    }
}

/* ==========================================================================
   Accessibility toolbar (menu) tweaks
   ========================================================================== */
/* No underline on the menu items */
#pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a,
#pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a * {
    text-decoration: none !important;
}
/* Site has no body.rtl class, so the plugin's RTL icon spacing never applies: icon gap on the left */
#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;
}

/* ==========================================================================
   Contrast modes
   ========================================================================== */
/* High contrast: page background black */
body.pojo-a11y-high-contrast {
    background: #000 !important;
    background-color: #000 !important;
}
/* out-specifies the theme's .container-fluid.main-bg.main-bg.new gradient */
html body.pojo-a11y-high-contrast .container-fluid.main-bg.main-bg {
    background-image: none !important;
}

/* Placeholders readable on the black fields */
body.pojo-a11y-high-contrast input::placeholder,
body.pojo-a11y-high-contrast textarea::placeholder,
body.pojo-a11y-negative-contrast input::placeholder,
body.pojo-a11y-negative-contrast textarea::placeholder {
    color: #fff !important;
    opacity: 1 !important;
}

/* Images: the plugin paints img backgrounds grey (high) / black (negative) / white (light).
   Give dark/transparent artwork a backdrop it stays visible on. */
/* (:not(#pojo-a11y-toolbar) matches the plugin's own id-level specificity) */
body.pojo-a11y-high-contrast :not(#pojo-a11y-toolbar) .logo-left-side img,
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .logo-left-side img {
    background: #fff !important;
    background-color: #fff !important;
}
body.pojo-a11y-high-contrast :not(#pojo-a11y-toolbar) .icon-list .icon-wrapper img,
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .icon-list .icon-wrapper img {
    background: #fff !important;
    background-color: #fff !important;
    border-radius: 6px;
}
/* PRESALE badge: its wrapper div gets painted too, leaving a square behind the round badge */
body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background, .pojo-a11y-grayscale) .slider-wrap-sec:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .slider-logo,
body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background, .pojo-a11y-grayscale) .slider-wrap-sec:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .slider-logo img,
body.pojo-a11y-high-contrast .mobile-menu a:not(#pojo-a11y-toolbar) img,
body.pojo-a11y-negative-contrast .mobile-menu a:not(#pojo-a11y-toolbar) img {
    background: transparent !important;
    background-color: transparent !important;
}
/* White arrow / phone icons would vanish on the light-mode white buttons */
body.pojo-a11y-light-background .mobile-menu a:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) img {
    background: #000 !important;
    background-color: #000 !important;
    border-radius: 2px;
}

/* Mobile sticky buttons: theme border is #000, invisible on the black contrast background */
body.pojo-a11y-high-contrast .mobile-menu .row:not(#pojo-a11y-toolbar) > .detail-mob,
body.pojo-a11y-high-contrast .mobile-menu .row:not(#pojo-a11y-toolbar) > .phone-mob,
body.pojo-a11y-negative-contrast .mobile-menu .row:not(#pojo-a11y-toolbar) > .detail-mob,
body.pojo-a11y-negative-contrast .mobile-menu .row:not(#pojo-a11y-toolbar) > .phone-mob {
    border: 2px solid #fff !important;
}
body.pojo-a11y-light-background .mobile-menu .row:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) > .detail-mob,
body.pojo-a11y-light-background .mobile-menu .row:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) > .phone-mob {
    border: 2px solid #000 !important;
}

/* Cookie settings button (#cc-floater, child of <body>): keep it and its icon visible */
html body.pojo-a11y-high-contrast #cc-floater,
html body.pojo-a11y-negative-contrast #cc-floater {
    background: #000 !important;
    color: #fff !important;
    border: 2px solid #fff !important;
}
html body.pojo-a11y-light-background #cc-floater {
    background: #fff !important;
    color: #000 !important;
    border: 2px solid #000 !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) #cc-floater svg,
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) #cc-floater svg * {
    background: transparent !important;
}

/* Validation tip is pulled 12px up over the field; the plugin paints spans black in these
   modes, which hid the field's bottom border. */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .form .wpcf7-form-control-wrap:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .wpcf7-not-valid-tip {
    background: transparent !important;
    background-color: transparent !important;
}

/* Main heading: theme line-height is a fixed 44px (35px mobile); when the heading wraps
   (e.g. the 470px column at 1200-1600px) the two lines overlap. */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .main-bg .center-text .main-heading {
    line-height: max(44px, 1.05em) !important;
}
@media (max-width: 680px) {
    html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .main-bg .center-text .main-heading {
        line-height: max(35px, 1.05em) !important;
    }
}

/* Consent checkbox, whenever any accessibility option is on: take it out of absolute
   positioning and make it the first flex item of the label, so it always sits at the
   start (right) of the text with a real gap and can never overlap the first letter. */
html body:is([class*="pojo-a11y-resize-font-"], .pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background, .pojo-a11y-grayscale, .pojo-a11y-readable-font, .pojo-a11y-links-underline) .main-bg .form .checkbox label {
    padding-right: 0 !important;
    align-items: flex-start !important;
}
html body:is([class*="pojo-a11y-resize-font-"], .pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background, .pojo-a11y-grayscale, .pojo-a11y-readable-font, .pojo-a11y-links-underline) .main-bg .form .wpcf7-form-control.wpcf7-checkbox input[type="checkbox"] {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    flex: 0 0 16px;
    font-size: inherit !important;
    margin: max(0px, calc(0.72em - 8px)) 0 0 10px !important;
}
html body:is([class*="pojo-a11y-resize-font-"], .pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background, .pojo-a11y-grayscale, .pojo-a11y-readable-font, .pojo-a11y-links-underline) .main-bg .form .checkbox .wpcf7-list-item-label {
    padding-right: 0 !important;
    flex: 1 1 auto;
    min-width: 0;
}

/* Default (no accessibility option): main heading line-height is a fixed 44px (35px <=680px)
   for a 62px (43px) font, so when it wraps (470px column at 1200-1600px, phones < ~370px)
   the two lines overlap. Use a real line-height and pull the box back by the same amount
   with negative margins: a one-line heading stays pixel-identical, a wrapped one no longer
   overlaps. Original margins: top 0; bottom 15px (Additional CSS .main-heading) / 10px
   (responsive.css <=680px .center-text > .main-heading). */
.main-bg .center-text .main-heading {
    line-height: 1.05em !important;
    margin-top: calc((44px - 1.05em) / 2) !important;
    margin-bottom: calc(15px + (44px - 1.05em) / 2) !important;
}
@media (max-width: 680px) {
    .main-bg .center-text .main-heading {
        margin-top: calc((35px - 1.05em) / 2) !important;
        margin-bottom: calc(10px + (35px - 1.05em) / 2) !important;
    }
}

/* Default: the "|" between the footer links is a bare text node that inherited the dark
   body colour on the navy panel (links/paragraphs around it are already white). */
.main-bg .lower-notice .desclimar-note {
    color: #fff;
}

/* Default (no accessibility option): the theme's checked state is a #333 ::before square
   drawn over the native box, which hides the tick. Draw a white tick inside it. */
.main-bg .form .wpcf7-form-control.wpcf7-checkbox input[type="checkbox"]:checked::before {
    content: '\2714';
    box-sizing: border-box;
    top: 0;
    right: 0;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    color: #fff;
    font: bold 12px/16px Arial, sans-serif;
    text-align: center;
}

/* High contrast sets -moz-appearance:none on every input (Firefox): the checkbox lost its
   native box/tick and took the theme's 50px radius -> an empty circle. Restore the native
   checkbox so it matches negative contrast. */
html body.pojo-a11y-high-contrast .main-bg .form .wpcf7-form-control.wpcf7-checkbox input[type="checkbox"] {
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    appearance: auto !important;
    border-radius: 3px !important;
}

/* Consent checkbox: show a real tick inside the box in every contrast / gray mode.
   (Chrome/Safari draw the theme's ::before over the native box.) */
body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background, .pojo-a11y-grayscale) .wpcf7-form-control.wpcf7-checkbox input[type="checkbox"]::before {
    content: '' !important;
    box-sizing: border-box !important;
    width: 16px !important;
    height: 16px !important;
    top: 0 !important;
    right: 0 !important;
    border: 1px solid #fff !important;
    border-radius: 3px;
    background: #000 !important;
    color: #fff !important;
    font: bold 12px/14px Arial, sans-serif !important;
    text-align: center;
}
body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background, .pojo-a11y-grayscale) .wpcf7-form-control.wpcf7-checkbox input[type="checkbox"]:checked::before {
    content: '\2714' !important;
}
body.pojo-a11y-light-background .wpcf7-form-control.wpcf7-checkbox input[type="checkbox"]::before {
    border-color: #000 !important;
    background: #fff !important;
    color: #000 !important;
}
body.pojo-a11y-grayscale .wpcf7-form-control.wpcf7-checkbox input[type="checkbox"]::before {
    background: #333 !important;
}

/* ==========================================================================
   Site-wide a11y / cookie-banner snippet (as supplied)
   ========================================================================== */
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;
}

body #cc-floater {
    bottom: unset !important;
    top: 12.5vw !important;
    left: 0.2vw !important;
    right: unset !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: calc(184px - 9vw) !important; /* ends at 184px, 12px above the teal block under the image */
        left: 2px !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;
    }
    /* also beats responsive.css (max-width:680px) #pojo-a11y-toolbar.pojo-a11y-toolbar-left { top:520px } */
    body #pojo-a11y-toolbar,
    body #pojo-a11y-toolbar.pojo-a11y-toolbar-left {
        top: calc(176px - 18.8vw) !important; /* toggle (~9.8vw tall) + 8px gap + cookie button */
    }

    .cc-banner {
        padding: 16px !important;
    }
    /* Cookie banner centred on mobile (site uses cc-pos-left; cc-pos-right covered too) */
    .cc-pos-right,
    body .cc-root.cc-pos-left,
    body .cc-root.cc-pos-right {
        left: 50% !important;
        right: unset !important;
        bottom: 10px !important;
        width: 95%;
        transform: translateX(-50%);
    }
    body .cc-root.cc-pos-left,
    body .cc-root.cc-pos-right {
        max-width: 420px;
    }
    .cc-btn {
        padding: 7px 9px !important;
    }
    /* reCAPTCHA badge above the sticky mobile buttons (bar is 72px; up to ~115px enlarged) */
    .grecaptcha-badge {
        bottom: 84px !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .grecaptcha-badge {
        bottom: 128px !important;
    }
}