/* =========================================================================
   Accessibility overrides for "One Click Accessibility" (pojo-a11y)
   -------------------------------------------------------------------------
   Part A (Sections 1–5): font resize. Every rule is gated behind
           body[class*="pojo-a11y-resize-font-"], so with no size chosen
           (and after Reset) this part changes nothing.
   Part B (Section 6):    contrast modes (grayscale / high contrast /
           negative contrast / light background). Every rule is gated
           behind the matching body.pojo-a11y-* class, except the cookie
           toggle "on" colour, which is fixed in every mode because the
           theme paints the on and off states identically.

   `:not(#a11y-x)` is used in Part B only to add ID-level specificity so we
   beat the plugin's `*:not(#pojo-a11y-toolbar)` selectors. #a11y-x does not
   exist in the markup.
   ========================================================================= */


/* -------------------------------------------------------------------------
   Section 1: STEP -> MULTIPLIERS
     --a11y-scale          text / headings                 +15% ... +60%
     --a11y-scale-form     inputs, submit, buttons, CF7
                           messages                        +30% ... +75%
     --a11y-scale-toolbar  accessibility menu items         +8%  ... +36%
                           (kept deliberately smaller than the page text)
     --a11y-scale-cookie   cookie banner + settings modal   +6%  ... +28%
                           (also kept smaller than the page text)
   The plugin's first click is 130; 120 is included in case it is ever used.
   ------------------------------------------------------------------------- */
:root { --a11y-scale: 1; --a11y-scale-form: 1; --a11y-scale-toolbar: 1; --a11y-scale-cookie: 1; }
body.pojo-a11y-resize-font-120 { --a11y-scale: 1.10; --a11y-scale-form: 1.20; --a11y-scale-toolbar: 1.05; --a11y-scale-cookie: 1.04; }
body.pojo-a11y-resize-font-130 { --a11y-scale: 1.15; --a11y-scale-form: 1.30; --a11y-scale-toolbar: 1.08; --a11y-scale-cookie: 1.06; }
body.pojo-a11y-resize-font-140 { --a11y-scale: 1.22; --a11y-scale-form: 1.40; --a11y-scale-toolbar: 1.12; --a11y-scale-cookie: 1.09; }
body.pojo-a11y-resize-font-150 { --a11y-scale: 1.28; --a11y-scale-form: 1.48; --a11y-scale-toolbar: 1.16; --a11y-scale-cookie: 1.12; }
body.pojo-a11y-resize-font-160 { --a11y-scale: 1.35; --a11y-scale-form: 1.55; --a11y-scale-toolbar: 1.20; --a11y-scale-cookie: 1.15; }
body.pojo-a11y-resize-font-170 { --a11y-scale: 1.42; --a11y-scale-form: 1.62; --a11y-scale-toolbar: 1.24; --a11y-scale-cookie: 1.18; }
body.pojo-a11y-resize-font-180 { --a11y-scale: 1.48; --a11y-scale-form: 1.68; --a11y-scale-toolbar: 1.28; --a11y-scale-cookie: 1.21; }
body.pojo-a11y-resize-font-190 { --a11y-scale: 1.54; --a11y-scale-form: 1.72; --a11y-scale-toolbar: 1.32; --a11y-scale-cookie: 1.24; }
body.pojo-a11y-resize-font-200 { --a11y-scale: 1.60; --a11y-scale-form: 1.75; --a11y-scale-toolbar: 1.36; --a11y-scale-cookie: 1.28; }


/* -------------------------------------------------------------------------
   Section 2: Base pin on <body> (measured baseline 16px at every width).
   ------------------------------------------------------------------------- */
html body[class*="pojo-a11y-resize-font-"] {
    font-size: calc(16px * var(--a11y-scale)) !important;
}


/* -------------------------------------------------------------------------
   Section 2b: Accessibility menu items. They grow on their own, smaller
   curve (12.8px -> 17.4px at max) instead of the plugin's 12.8 -> 25.6px.
   The icon <svg> is width="1em", so it follows its span.
   ------------------------------------------------------------------------- */
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: Stop the plugin's compounding percentages inside every content
   root: the Elementor page, and the theme-template wrappers used by
   404.php (.gold-card-banner, body > .container, .description-section).
   ------------------------------------------------------------------------- */
html body[class*="pojo-a11y-resize-font-"] .elementor p,
html body[class*="pojo-a11y-resize-font-"] .elementor li,
html body[class*="pojo-a11y-resize-font-"] .elementor span,
html body[class*="pojo-a11y-resize-font-"] .elementor label,
html body[class*="pojo-a11y-resize-font-"] .elementor blockquote,
html body[class*="pojo-a11y-resize-font-"] .elementor legend,
html body[class*="pojo-a11y-resize-font-"] .elementor code,
html body[class*="pojo-a11y-resize-font-"] .elementor pre,
html body[class*="pojo-a11y-resize-font-"] .elementor dd,
html body[class*="pojo-a11y-resize-font-"] .elementor dt,
html body[class*="pojo-a11y-resize-font-"] .gold-card-banner p,
html body[class*="pojo-a11y-resize-font-"] .gold-card-banner span,
html body[class*="pojo-a11y-resize-font-"] > .container p,
html body[class*="pojo-a11y-resize-font-"] > .container li,
html body[class*="pojo-a11y-resize-font-"] > .container span,
html body[class*="pojo-a11y-resize-font-"] .description-section p,
html body[class*="pojo-a11y-resize-font-"] .description-section li,
html body[class*="pojo-a11y-resize-font-"] .description-section span,
html body[class*="pojo-a11y-resize-font-"] .description-section label,
html body[class*="pojo-a11y-resize-font-"] .description-section blockquote,
html body[class*="pojo-a11y-resize-font-"] .description-section legend,
html body[class*="pojo-a11y-resize-font-"] .description-section code,
html body[class*="pojo-a11y-resize-font-"] .description-section pre,
html body[class*="pojo-a11y-resize-font-"] .description-section dd,
html body[class*="pojo-a11y-resize-font-"] .description-section dt {
    font-size: inherit !important;
}

/* 404.php headings: h1 follows Bootstrap (calc(1.375rem + 1.5vw), 2.5rem
   from 1200px), h3 has an inline 30px. */
html body[class*="pojo-a11y-resize-font-"] .gold-card-banner h1 {
    font-size: calc((22px + 1.5vw) * var(--a11y-scale)) !important;
}
@media (min-width: 1200px) {
    html body[class*="pojo-a11y-resize-font-"] .gold-card-banner h1 {
        font-size: calc(40px * var(--a11y-scale)) !important;
    }
}
html body[class*="pojo-a11y-resize-font-"] .description-section h3 {
    font-size: calc(30px * var(--a11y-scale)) !important;
}


/* -------------------------------------------------------------------------
   Section 4: FORM CONTROLS + CF7 messages (--a11y-scale-form).
   Values mirror style.css (base) and responsive.css (max-width:600px), in
   that source order. Heights that the theme fixes at 40px grow with the
   text so it is not clipped.
   ------------------------------------------------------------------------- */
html body[class*="pojo-a11y-resize-font-"] .field-col input,
html body[class*="pojo-a11y-resize-font-"] .field-col .wpcf7-select,
html body[class*="pojo-a11y-resize-font-"] .elementor input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
html body[class*="pojo-a11y-resize-font-"] .elementor select,
html body[class*="pojo-a11y-resize-font-"] .elementor textarea {
    font-size: calc(16px * var(--a11y-scale-form)) !important;
    line-height: 1.5 !important;
}
html body[class*="pojo-a11y-resize-font-"] .field-col input,
html body[class*="pojo-a11y-resize-font-"] .field-col .wpcf7-select {
    height: calc(40px * var(--a11y-scale-form)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .submit-btn input,
html body[class*="pojo-a11y-resize-font-"] .elementor .wpcf7-submit {
    font-size: calc(18px * var(--a11y-scale-form)) !important;
    line-height: 1.5 !important;
    height: calc(40px * var(--a11y-scale-form)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .wpcf7-response-output {
    font-size: calc(12px * var(--a11y-scale-form)) !important;
    line-height: 1.5 !important;
}
html body[class*="pojo-a11y-resize-font-"] .wpcf7-not-valid-tip {
    font-size: calc(12px * var(--a11y-scale-form)) !important;
    line-height: 1.5 !important;
}
/* Checkbox label: 0.77vw in the theme (about 7px at 900px), so it gets a 13px floor. */
html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox .wpcf7-list-item-label {
    font-size: calc(max(13px, 0.77vw) * var(--a11y-scale-form)) !important;
    line-height: 1.4 !important;
}
@media (max-width: 600px) {
    html body[class*="pojo-a11y-resize-font-"] .submit-btn input,
    html body[class*="pojo-a11y-resize-font-"] .elementor .wpcf7-submit {
        line-height: 1.4 !important;
        height: auto !important;
        min-height: calc(40px * var(--a11y-scale-form)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .field-col input,
    html body[class*="pojo-a11y-resize-font-"] .field-col .wpcf7-select {
        height: auto !important;
        min-height: calc(40px * var(--a11y-scale-form)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .wpcf7-not-valid-tip {
        font-size: calc(14px * var(--a11y-scale-form)) !important;
        line-height: 1.4 !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox .wpcf7-list-item-label {
        font-size: calc(13px * var(--a11y-scale-form)) !important;
    }
}

/* Form width: the form widget is 62% of the red panel (95% at <=1200px,
   90% on mobile), which is too narrow for the larger button text. When a
   size is chosen, it takes the full panel width, and the submit label may
   wrap instead of being cut off. The side padding keeps the text clear of
   the arrow icon. */
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-f5423a7,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-c52497a {
    --container-widget-width: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
}
html body[class*="pojo-a11y-resize-font-"] .submit-btn input,
html body[class*="pojo-a11y-resize-font-"] .elementor .wpcf7-submit {
    white-space: normal !important;
    height: auto !important;
    min-height: calc(40px * var(--a11y-scale-form)) !important;
    padding: 6px 28px !important;
}

/* Section 4b: CF7 success message injected by custom.js (h3 inside the form). */
html body[class*="pojo-a11y-resize-font-"] .cf7-success-message h3 {
    font-size: calc(24px * var(--a11y-scale-form)) !important;
}


/* -------------------------------------------------------------------------
   Section 4d: STAT ICONS (90 / 85 / 95 / research) under the hero.
   post-7.css lifts each icon with top:-47% / -45% / -40%. That percentage
   is of the column height, and the column grows with the text under the
   icon, so bigger text pushed the icons up into the hero. Here the offset
   is pinned to the px value each band has at default size, so the icons
   stay on the hero's bottom edge. Below 768px the icons are not lifted
   (top:0%), which we restore.
   ------------------------------------------------------------------------- */
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-0e0f248,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-ebbdbd1,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-28ca92c,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-e113ca8 {
    top: -69px !important;
}
@media (max-width: 1200px) {
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-0e0f248,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-ebbdbd1,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-28ca92c,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-e113ca8 {
        top: -66px !important;
    }
}
@media (max-width: 880px) {
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-0e0f248,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-ebbdbd1,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-28ca92c,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-e113ca8 {
        top: -60px !important;
    }
}
@media (max-width: 767px) {
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-0e0f248,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-ebbdbd1,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-28ca92c,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-e113ca8 {
        top: 0% !important;
    }
}


/* -------------------------------------------------------------------------
   Section 4c: COOKIE BANNER (#cc-banner-root) and its settings modal
   (.cc-modal-wrap). Both are direct children of <body>, outside .elementor.
   Uses its own smaller curve (--a11y-scale-cookie) so the popup grows
   less than the page text. Generic inherit first, then scaled pins. The pins use a more specific
   selector than the inherit rule, so the pins win.
   ------------------------------------------------------------------------- */
html body[class*="pojo-a11y-resize-font-"] .cc-root p,
html body[class*="pojo-a11y-resize-font-"] .cc-root li,
html body[class*="pojo-a11y-resize-font-"] .cc-root span,
html body[class*="pojo-a11y-resize-font-"] .cc-root label,
html body[class*="pojo-a11y-resize-font-"] .cc-root a,
html body[class*="pojo-a11y-resize-font-"] .cc-modal-wrap p,
html body[class*="pojo-a11y-resize-font-"] .cc-modal-wrap li,
html body[class*="pojo-a11y-resize-font-"] .cc-modal-wrap span,
html body[class*="pojo-a11y-resize-font-"] .cc-modal-wrap label,
html body[class*="pojo-a11y-resize-font-"] .cc-modal-wrap a {
    font-size: inherit !important;
}

html body[class*="pojo-a11y-resize-font-"] .cc-root {
    font-size: calc(14px * var(--a11y-scale-cookie)) !important;
    line-height: 1.5 !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-modal-wrap {
    font-size: calc(16px * var(--a11y-scale-cookie)) !important;
    line-height: 1.5 !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-title,
html body[class*="pojo-a11y-resize-font-"] .cc-root h2.cc-title {
    font-size: calc(16px * var(--a11y-scale-cookie)) !important;
    line-height: 1.3 !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-body,
html body[class*="pojo-a11y-resize-font-"] .cc-root p.cc-body {
    font-size: calc(14px * var(--a11y-scale-cookie)) !important;
    line-height: 1.5 !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-btn,
html body[class*="pojo-a11y-resize-font-"] .cc-root button.cc-btn {
    font-size: calc(14px * var(--a11y-scale-cookie)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-modal-wrap .cc-btn,
html body[class*="pojo-a11y-resize-font-"] .cc-modal-wrap button.cc-btn {
    font-size: calc(16px * var(--a11y-scale-cookie)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-lang-toggle,
html body[class*="pojo-a11y-resize-font-"] .cc-modal-wrap .cc-lang-toggle {
    font-size: calc(12px * var(--a11y-scale-cookie)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-modal-wrap .cc-modal-head h2 {
    font-size: calc(18px * var(--a11y-scale-cookie)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-modal-wrap .cc-modal-close {
    font-size: calc(24px * var(--a11y-scale-cookie)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-modal-wrap .cc-cat-desc {
    font-size: calc(13px * var(--a11y-scale-cookie)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-modal-wrap span.cc-required-badge {
    font-size: calc(11px * var(--a11y-scale-cookie)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-modal-wrap .cc-cookies-list,
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-cookie)) !important;
}


/* -------------------------------------------------------------------------
   Section 5: Per-element headings / buttons from post-7.css (the only
   Elementor page; post-10.css, the kit, has no font-size rules). Base
   first, then each @media block in source order. The px line-heights are
   scaled too, so lines do not overlap when the text grows.
   The header phone button (12a2ef6) uses Elementor's default 15px.
   ------------------------------------------------------------------------- */
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-12a2ef6 .elementor-button {
    font-size: calc(15px * var(--a11y-scale-form)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-2cb15ce .elementor-button {
    font-size: calc(20px * var(--a11y-scale-form)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-a2fca69 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-cc60b3c .elementor-heading-title {
    font-size: calc(36px * var(--a11y-scale)) !important;
    line-height: calc(45px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-670ade8 .elementor-heading-title {
    font-size: calc(27px * var(--a11y-scale)) !important;
    line-height: calc(40px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-8a72062 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-ca336b3 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-886df00 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-2eec0e3 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-14ff9d3 .elementor-heading-title {
    font-size: calc(20px * var(--a11y-scale)) !important;
    line-height: calc(35px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-62367cb .elementor-heading-title {
    font-size: calc(26px * var(--a11y-scale)) !important;
    line-height: calc(30px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-4855c3c .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-bc724eb .elementor-heading-title {
    font-size: calc(26px * var(--a11y-scale)) !important;
    line-height: calc(36px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-8e18628 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-7381285 .elementor-heading-title {
    font-size: calc(20px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-875687d .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-5938d00 .elementor-heading-title {
    font-size: calc(16px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-b28a396 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-6f746b2 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-29ecebb .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-5532ad3 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-5817ed8 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-a901dfd .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-defb11f .elementor-heading-title {
    font-size: calc(13px * var(--a11y-scale)) !important;
    line-height: calc(20px * var(--a11y-scale)) !important;
}
@media (max-width: 1200px) {
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-2cb15ce .elementor-button {
        font-size: calc(15px * var(--a11y-scale-form)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-a2fca69 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-cc60b3c .elementor-heading-title {
        font-size: calc(32px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-670ade8 .elementor-heading-title {
        font-size: calc(25px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-8a72062 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-ca336b3 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-886df00 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-2eec0e3 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-14ff9d3 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-8e18628 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-7381285 .elementor-heading-title {
        font-size: calc(18px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-62367cb .elementor-heading-title {
        font-size: calc(20px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-4855c3c .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-bc724eb .elementor-heading-title {
        font-size: calc(22px * var(--a11y-scale)) !important;
        line-height: calc(30px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-875687d .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-5938d00 .elementor-heading-title {
        font-size: calc(14px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-b28a396 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-6f746b2 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-29ecebb .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-5532ad3 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-5817ed8 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-a901dfd .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-defb11f .elementor-heading-title {
        font-size: calc(13px * var(--a11y-scale)) !important;
    }
}
@media (max-width: 1024px) {
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-8a72062 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-ca336b3 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-886df00 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-2eec0e3 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-14ff9d3 .elementor-heading-title {
        font-size: calc(16px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-4855c3c .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-bc724eb .elementor-heading-title {
        font-size: calc(18px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-b28a396 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-6f746b2 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-29ecebb .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-5532ad3 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-5817ed8 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-a901dfd .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-defb11f .elementor-heading-title {
        font-size: calc(12px * var(--a11y-scale)) !important;
        line-height: calc(20px * var(--a11y-scale)) !important;
    }
}
@media (max-width: 880px) {
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-a2fca69 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-cc60b3c .elementor-heading-title {
        font-size: calc(28px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-670ade8 .elementor-heading-title {
        font-size: calc(22px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-8a72062 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-ca336b3 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-886df00 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-2eec0e3 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-14ff9d3 .elementor-heading-title {
        font-size: calc(15px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-62367cb .elementor-heading-title {
        font-size: calc(18px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-4855c3c .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-bc724eb .elementor-heading-title {
        font-size: calc(16px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-8e18628 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-7381285 .elementor-heading-title {
        font-size: calc(14px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-875687d .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-5938d00 .elementor-heading-title {
        font-size: calc(11px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-b28a396 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-6f746b2 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-29ecebb .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-5532ad3 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-5817ed8 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-a901dfd .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-defb11f .elementor-heading-title {
        font-size: calc(12px * var(--a11y-scale)) !important;
        line-height: calc(18px * var(--a11y-scale)) !important;
    }
}
@media (max-width: 767px) {
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-2cb15ce .elementor-button {
        font-size: calc(0px * var(--a11y-scale-form)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-a2fca69 .elementor-heading-title {
        font-size: calc(25px * var(--a11y-scale)) !important;
        line-height: calc(30px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-cc60b3c .elementor-heading-title {
        font-size: calc(25px * var(--a11y-scale)) !important;
        line-height: calc(34px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-670ade8 .elementor-heading-title {
        font-size: calc(18px * var(--a11y-scale)) !important;
        line-height: calc(25px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-62367cb .elementor-heading-title {
        font-size: calc(17px * var(--a11y-scale)) !important;
        line-height: calc(25px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-4855c3c .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-bc724eb .elementor-heading-title {
        font-size: calc(20px * var(--a11y-scale)) !important;
        line-height: calc(25px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-b28a396 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-6f746b2 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-29ecebb .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-5532ad3 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-5817ed8 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-a901dfd .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-defb11f .elementor-heading-title {
        line-height: calc(20px * var(--a11y-scale)) !important;
    }
}


/* =========================================================================
   Section 6: CONTRAST MODES
   ========================================================================= */

/* 6a. Background images -----------------------------------------------------
   The plugin removes every background image: high contrast sets
   background-image:none, and negative/light set the `background` shorthand
   (which also resets position/size/repeat). The hero section is the only
   element on the site with a background image. We restore it with a tint
   so the plugin's text colours stay readable (dark tint for white/yellow
   text, light tint for black text). Grayscale keeps the image already. */
html body.pojo-a11y-high-contrast:not(#a11y-x) .elementor-7 .elementor-element.elementor-element-f17910d:not(.elementor-motion-effects-element-type-background),
html body.pojo-a11y-negative-contrast:not(#a11y-x) .elementor-7 .elementor-element.elementor-element-f17910d:not(.elementor-motion-effects-element-type-background) {
    background-color: #000 !important;
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://medlanding.webzsites.site/wp-content/uploads/sites/58/2026/02/top-chilov-new-page-bg.webp") !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}
html body.pojo-a11y-light-background:not(#a11y-x) .elementor-7 .elementor-element.elementor-element-f17910d:not(.elementor-motion-effects-element-type-background) {
    background-color: #fff !important;
    background-image: linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.35)), url("https://medlanding.webzsites.site/wp-content/uploads/sites/58/2026/02/top-chilov-new-page-bg.webp") !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}
/* The plugin also paints every wrapper and text element in the section
   solid black/white, which would cover the image. Make those transparent.
   The form panel (5039b86) keeps its solid plugin background, so the form
   still sits on a plain colour. Inputs and buttons are not listed here. */
html body.pojo-a11y-high-contrast:not(#a11y-x) .elementor-element-f17910d .e-con-inner,
html body.pojo-a11y-high-contrast:not(#a11y-x) .elementor-element-f17910d .elementor-element:not(.elementor-element-5039b86),
html body.pojo-a11y-high-contrast:not(#a11y-x) .elementor-element-f17910d .elementor-element:not(.elementor-element-5039b86) :is(div, p, h1, h2, h3, h4, h5, h6, span, b, strong, em, i, br),
html body.pojo-a11y-negative-contrast:not(#a11y-x) .elementor-element-f17910d .e-con-inner,
html body.pojo-a11y-negative-contrast:not(#a11y-x) .elementor-element-f17910d .elementor-element:not(.elementor-element-5039b86),
html body.pojo-a11y-negative-contrast:not(#a11y-x) .elementor-element-f17910d .elementor-element:not(.elementor-element-5039b86) :is(div, p, h1, h2, h3, h4, h5, h6, span, b, strong, em, i, br),
html body.pojo-a11y-light-background:not(#a11y-x) .elementor-element-f17910d .e-con-inner,
html body.pojo-a11y-light-background:not(#a11y-x) .elementor-element-f17910d .elementor-element:not(.elementor-element-5039b86),
html body.pojo-a11y-light-background:not(#a11y-x) .elementor-element-f17910d .elementor-element:not(.elementor-element-5039b86) :is(div, p, h1, h2, h3, h4, h5, h6, span, b, strong, em, i, br) {
    background-color: transparent !important;
    background-image: none !important;
}
html body.pojo-a11y-high-contrast:not(#a11y-x) .elementor-element-f17910d .elementor-element-5039b86,
html body.pojo-a11y-negative-contrast:not(#a11y-x) .elementor-element-f17910d .elementor-element-5039b86 {
    background-color: #000 !important;
}
html body.pojo-a11y-light-background:not(#a11y-x) .elementor-element-f17910d .elementor-element-5039b86 {
    background-color: #fff !important;
}
/* Inside the form panel, wrappers inherit the panel colour instead of the
   plugin's per-element fill. */
html body.pojo-a11y-high-contrast:not(#a11y-x) .elementor-element-5039b86 :is(div, p, span, h2, br):not(.wpcf7-spinner),
html body.pojo-a11y-negative-contrast:not(#a11y-x) .elementor-element-5039b86 :is(div, p, span, h2, br):not(.wpcf7-spinner),
html body.pojo-a11y-light-background:not(#a11y-x) .elementor-element-5039b86 :is(div, p, span, h2, br):not(.wpcf7-spinner) {
    background-color: transparent !important;
}


/* 6a-2. Images: no background box -------------------------------------------
   The plugin paints every <img> grey (#808080) in high contrast, black in
   negative contrast and white in light background, which shows as a
   square behind transparent PNGs (quote marks, stat icons, logos). Keep
   image backgrounds (and the Elementor image widget wrappers,
   which overlap the hero for the stat icons) transparent in every mode. `img:not(.a11y-x)` adds a
   class to beat the plugin's `*:not(#pojo-a11y-toolbar):not(...)` rule. */
html body.pojo-a11y-high-contrast:not(#a11y-x) img:not(.a11y-x),
html body.pojo-a11y-negative-contrast:not(#a11y-x) img:not(.a11y-x),
html body.pojo-a11y-light-background:not(#a11y-x) img:not(.a11y-x),
html body.pojo-a11y-grayscale:not(#a11y-x) img:not(.a11y-x),
html body.pojo-a11y-high-contrast:not(#a11y-x) .elementor .elementor-widget-image:not(.a11y-x),
html body.pojo-a11y-high-contrast:not(#a11y-x) .elementor .elementor-widget-image *:not(.a11y-x),
html body.pojo-a11y-negative-contrast:not(#a11y-x) .elementor .elementor-widget-image:not(.a11y-x),
html body.pojo-a11y-negative-contrast:not(#a11y-x) .elementor .elementor-widget-image *:not(.a11y-x),
html body.pojo-a11y-light-background:not(#a11y-x) .elementor .elementor-widget-image:not(.a11y-x),
html body.pojo-a11y-light-background:not(#a11y-x) .elementor .elementor-widget-image *:not(.a11y-x) {
    background: transparent !important;
    background-color: transparent !important;
}


/* 6a-3. CF7 success icon ------------------------------------------------------
   custom.js draws the success tick with stroke="#fff". On the white panel
   of light-background mode it disappears, so draw it in black there. (The
   other modes keep a dark panel, where white is visible.) */
html body.pojo-a11y-light-background:not(#a11y-x) .cf7-success-message svg circle,
html body.pojo-a11y-light-background:not(#a11y-x) .cf7-success-message svg path {
    stroke: #000 !important;
}


/* 6b. Form field borders ----------------------------------------------------
   The theme sets `border: none` on the CF7 fields. In light-background mode
   that leaves a white field on a white page, with no edge at all. */
html body.pojo-a11y-high-contrast:not(#a11y-x) .wpcf7 .wpcf7-form-control:not([type="hidden"]):not([type="checkbox"]):not(.wpcf7-checkbox),
html body.pojo-a11y-negative-contrast:not(#a11y-x) .wpcf7 .wpcf7-form-control:not([type="hidden"]):not([type="checkbox"]):not(.wpcf7-checkbox) {
    border: 2px solid #fff !important;
}
html body.pojo-a11y-light-background:not(#a11y-x) .wpcf7 .wpcf7-form-control:not([type="hidden"]):not([type="checkbox"]):not(.wpcf7-checkbox),
html body.pojo-a11y-grayscale:not(#a11y-x) .wpcf7 .wpcf7-form-control:not([type="hidden"]):not([type="checkbox"]):not(.wpcf7-checkbox) {
    border: 2px solid #000 !important;
}
/* Validation message: responsive.css pulls it up (margin-top:-11px at
   <=600px) so it overlaps the field by 1px, and the plugin gives it a solid
   black/white background, which hides the field's bottom border. Keep it
   transparent, and on mobile start it just below the border. */
html body.pojo-a11y-high-contrast:not(#a11y-x) .wpcf7 .wpcf7-not-valid-tip,
html body.pojo-a11y-negative-contrast:not(#a11y-x) .wpcf7 .wpcf7-not-valid-tip,
html body.pojo-a11y-light-background:not(#a11y-x) .wpcf7 .wpcf7-not-valid-tip,
html body.pojo-a11y-grayscale:not(#a11y-x) .wpcf7 .wpcf7-not-valid-tip {
    background: transparent !important;
}
@media (max-width: 600px) {
    html body.pojo-a11y-high-contrast:not(#a11y-x) .wpcf7 .wpcf7-not-valid-tip,
    html body.pojo-a11y-negative-contrast:not(#a11y-x) .wpcf7 .wpcf7-not-valid-tip,
    html body.pojo-a11y-light-background:not(#a11y-x) .wpcf7 .wpcf7-not-valid-tip,
    html body.pojo-a11y-grayscale:not(#a11y-x) .wpcf7 .wpcf7-not-valid-tip {
        margin-top: -9px !important;
    }
}


/* Submit arrow (double-arrow.png) is black; on the dark submit button of
   high/negative contrast it disappears, so invert it to white there. */
html body.pojo-a11y-high-contrast:not(#a11y-x) .submit-btn img,
html body.pojo-a11y-negative-contrast:not(#a11y-x) .submit-btn img {
    filter: invert(1) !important;
    -webkit-filter: invert(1) !important;
}


/* 6b-2. Button borders ------------------------------------------------------
   Every button gets a visible outline in every contrast mode: CF7 submit,
   Elementor buttons (header phone + icon), cookie banner/modal buttons,
   modal close, lang toggle, cookie floater, and the 404 "Return To Home"
   link-button. The accessibility toolbar is not touched.
   White on the dark modes, black on the light/grayscale modes. */
html body.pojo-a11y-high-contrast:not(#a11y-x) :is(.elementor .elementor-button, .wpcf7 .wpcf7-submit, .cc-btn, .cc-modal-close, .cc-lang-toggle, #cc-floater, .call-btn),
html body.pojo-a11y-negative-contrast:not(#a11y-x) :is(.elementor .elementor-button, .wpcf7 .wpcf7-submit, .cc-btn, .cc-modal-close, .cc-lang-toggle, #cc-floater, .call-btn) {
    border: 2px solid #fff !important;
}
html body.pojo-a11y-light-background:not(#a11y-x) :is(.elementor .elementor-button, .wpcf7 .wpcf7-submit, .cc-btn, .cc-modal-close, .cc-lang-toggle, #cc-floater, .call-btn),
html body.pojo-a11y-grayscale:not(#a11y-x) :is(.elementor .elementor-button, .wpcf7 .wpcf7-submit, .cc-btn, .cc-modal-close, .cc-lang-toggle, #cc-floater, .call-btn) {
    border: 2px solid #000 !important;
}


/* 6b-3. Mobile header phone icon (12a2ef6) ---------------------------------
   Round icon-only call button shown on mobile. It gets a 2px border in
   every contrast mode: white in the dark modes (black button on a black
   header), black in light-background, white + black outline in grayscale.
   `:not(#a11y-y)` matches the ID weight 6b-2 gets from #cc-floater.
   Its icon is white; light-background paints the button white, so the icon
   is drawn black there and white in the other modes. */
html body.pojo-a11y-high-contrast:not(#a11y-x) .elementor-7 .elementor-element.elementor-element-12a2ef6 .elementor-button:not(#a11y-y),
html body.pojo-a11y-negative-contrast:not(#a11y-x) .elementor-7 .elementor-element.elementor-element-12a2ef6 .elementor-button:not(#a11y-y) {
    border: 2px solid #fff !important;
}
html body.pojo-a11y-light-background:not(#a11y-x) .elementor-7 .elementor-element.elementor-element-12a2ef6 .elementor-button:not(#a11y-y) {
    border: 2px solid #000 !important;
}
/* Grayscale keeps the black button, so a black border would merge into it:
   white ring plus a thin black outline, visible on the button and the header. */
html body.pojo-a11y-grayscale:not(#a11y-x) .elementor-7 .elementor-element.elementor-element-12a2ef6 .elementor-button:not(#a11y-y) {
    border: 2px solid #fff !important;
    box-shadow: 0 0 0 1px #000 !important;
}
html body.pojo-a11y-high-contrast:not(#a11y-x) .elementor-7 .elementor-element.elementor-element-12a2ef6 .elementor-button,
html body.pojo-a11y-negative-contrast:not(#a11y-x) .elementor-7 .elementor-element.elementor-element-12a2ef6 .elementor-button,
html body.pojo-a11y-grayscale:not(#a11y-x) .elementor-7 .elementor-element.elementor-element-12a2ef6 .elementor-button {
    background-color: #000 !important;
}
html body.pojo-a11y-high-contrast:not(#a11y-x) .elementor-7 .elementor-element.elementor-element-12a2ef6 .elementor-button :is(svg, svg *),
html body.pojo-a11y-negative-contrast:not(#a11y-x) .elementor-7 .elementor-element.elementor-element-12a2ef6 .elementor-button :is(svg, svg *),
html body.pojo-a11y-grayscale:not(#a11y-x) .elementor-7 .elementor-element.elementor-element-12a2ef6 .elementor-button :is(svg, svg *) {
    fill: #fff !important;
    background: transparent !important;
}
html body.pojo-a11y-light-background:not(#a11y-x) .elementor-7 .elementor-element.elementor-element-12a2ef6 .elementor-button :is(svg, svg *) {
    fill: #000 !important;
    background: transparent !important;
}


/* 6c. CF7 checkbox (.wpcf7-checkbox) ---------------------------------------
   The theme draws the tick as a white ::before inside a white-bordered box.
   Light-background paints the box white, so the white tick disappears.
   For each mode we set a box colour and a tick colour that contrast with
   each other, and centre a square tick at 60% of the box height so it always
   stays inside. */
html body.pojo-a11y-high-contrast:not(#a11y-x) .wpcf7-checkbox input[type="checkbox"],
html body.pojo-a11y-negative-contrast:not(#a11y-x) .wpcf7-checkbox input[type="checkbox"],
html body.pojo-a11y-high-contrast:not(#a11y-x) .wpcf7-checkbox input[type="checkbox"]:checked,
html body.pojo-a11y-negative-contrast:not(#a11y-x) .wpcf7-checkbox input[type="checkbox"]:checked {
    background: #000 !important;
    border: 2px solid #fff !important;
}
html body.pojo-a11y-light-background:not(#a11y-x) .wpcf7-checkbox input[type="checkbox"],
html body.pojo-a11y-grayscale:not(#a11y-x) .wpcf7-checkbox input[type="checkbox"],
html body.pojo-a11y-light-background:not(#a11y-x) .wpcf7-checkbox input[type="checkbox"]:checked,
html body.pojo-a11y-grayscale:not(#a11y-x) .wpcf7-checkbox input[type="checkbox"]:checked {
    background: #fff !important;
    border: 2px solid #000 !important;
}
html body.pojo-a11y-high-contrast:not(#a11y-x) .wpcf7-checkbox input[type="checkbox"]:checked::before,
html body.pojo-a11y-negative-contrast:not(#a11y-x) .wpcf7-checkbox input[type="checkbox"]:checked::before,
html body.pojo-a11y-light-background:not(#a11y-x) .wpcf7-checkbox input[type="checkbox"]:checked::before,
html body.pojo-a11y-grayscale:not(#a11y-x) .wpcf7-checkbox input[type="checkbox"]:checked::before {
    width: auto !important;
    height: 60% !important;
    aspect-ratio: 1 / 1 !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 2px !important;
}
html body.pojo-a11y-high-contrast:not(#a11y-x) .wpcf7-checkbox input[type="checkbox"]:checked::before {
    background: #ffff00 !important;
}
html body.pojo-a11y-negative-contrast:not(#a11y-x) .wpcf7-checkbox input[type="checkbox"]:checked::before {
    background: #fff !important;
}
html body.pojo-a11y-light-background:not(#a11y-x) .wpcf7-checkbox input[type="checkbox"]:checked::before,
html body.pojo-a11y-grayscale:not(#a11y-x) .wpcf7-checkbox input[type="checkbox"]:checked::before {
    background: #000 !important;
}


/* 6d. Cookie settings toggles (.cc-toggle / .cc-slider) ---------------------
   style.css forces `.cc-slider { background:#ababff !important }` in every
   mode, so "on" and "off" look the same. Here "on" gets its own fill, and in
   each contrast mode the track gets a border and a knob colour that stand
   out against the track. */

/* Default + grayscale: off stays #ababff; on uses the brand red. */
html body:not(#a11y-x) .cc-toggle input:checked + .cc-slider {
    background: #95221c !important;
}

/* High contrast / negative: black track with a white outline; on = yellow track. */
html body.pojo-a11y-high-contrast:not(#a11y-x) .cc-toggle .cc-slider,
html body.pojo-a11y-negative-contrast:not(#a11y-x) .cc-toggle .cc-slider {
    background: #000 !important;
    border: 2px solid #fff !important;
}
html body.pojo-a11y-high-contrast:not(#a11y-x) .cc-toggle .cc-slider::before,
html body.pojo-a11y-negative-contrast:not(#a11y-x) .cc-toggle .cc-slider::before {
    background: #fff !important;
    top: 1px !important;
    left: 1px !important;
    right: 1px !important;
}
html body.pojo-a11y-high-contrast:not(#a11y-x) .cc-toggle input:checked + .cc-slider,
html body.pojo-a11y-negative-contrast:not(#a11y-x) .cc-toggle input:checked + .cc-slider {
    background: #ffff00 !important;
    border-color: #ffff00 !important;
}
html body.pojo-a11y-high-contrast:not(#a11y-x) .cc-toggle input:checked + .cc-slider::before,
html body.pojo-a11y-negative-contrast:not(#a11y-x) .cc-toggle input:checked + .cc-slider::before {
    background: #000 !important;
}

/* Light background: white track with a black outline and knob; on = black track, white knob. */
html body.pojo-a11y-light-background:not(#a11y-x) .cc-toggle .cc-slider {
    background: #fff !important;
    border: 2px solid #000 !important;
}
html body.pojo-a11y-light-background:not(#a11y-x) .cc-toggle .cc-slider::before {
    background: #000 !important;
    top: 1px !important;
    left: 1px !important;
    right: 1px !important;
}
html body.pojo-a11y-light-background:not(#a11y-x) .cc-toggle input:checked + .cc-slider {
    background: #000 !important;
}
html body.pojo-a11y-light-background:not(#a11y-x) .cc-toggle input:checked + .cc-slider::before {
    background: #fff !important;
}

/* Keyboard focus on the hidden checkbox shows on the track in every mode. */
html body:not(#a11y-x) .cc-toggle input:focus-visible + .cc-slider {
    outline: 2px solid currentColor !important;
    outline-offset: 2px !important;
}