@charset "UTF-8";
/* ==========================================================================
   accessibility.css - One Click Accessibility (Pojo) font-resize repair
   --------------------------------------------------------------------------
   Why this file exists
   --------------------
   The plugin only adds a body class and emits two !important rules per step:

     body.pojo-a11y-resize-font-NN, p, li, label, input, select, textarea,
     legend, code, pre, dd, dt, span, blockquote       { font-size: NN%      }
     body.pojo-a11y-resize-font-NN h1..h6, h1..h6 span { font-size: NN*1.33% }

   On this site that produces, measured live:
     - vw headings that never move (a % cannot resolve against a vw value)
     - percentages that COMPOUND through CF7's <p><span class="...-wrap">
       nesting: consent checkbox 16px -> 100.4px at step 130 -> 2048px at 200
     - mobile px values destroyed when only the vw value is overridden
     - h_ span stacking: heading span 17.28px -> 226.42px at step 200
     - elements the plugin's selector list cannot reach at all, frozen forever
       (a, div, button: .elementor-icon-list-item > a, .wpcf7-response-output,
        .pv-link, .privacy-content a, .global-btn, #cc-floater)

   Every rule below is gated behind body[class*="pojo-a11y-resize-font-"]
   (or behind a pojo contrast-mode class in Section 7b), so with nothing
   selected - and again after Reset - this file contributes ZERO computed
   difference on every page at every viewport.

   Selector shape used throughout:
     html body[class*="pojo-a11y-resize-font-"] ...        -> (0,1,n)
   which out-specifies the plugin's  body.pojo-a11y-resize-font-NN ...  (0,1,n-1)
   and any handwritten DB override, without needing a specificity arms race.

     :not(:where(#pojo-a11y-toolbar *))  costs ZERO specificity (:where() is 0)
   and is what keeps every generic rule out of the accessibility toolbar, which
   is a SIBLING of .elementor - see Section 6.

   Source of truth (extracted live, per page):
     elementor/css/post-3.css   kit, every page      0 font-size rules
     elementor/css/post-6.css   home only           20 font-size rules
                                                    (11 base vw, 9 @max-767 px)
     theme assets/css/style.css every page           1 (.global-btn 24px)
     page-level custom CSS      home                37 font-size rules
                                                    (base / 768-1080 / max-767)
   Breakpoints that carry font sizes:
     BASE (>=1081)   |   768-1080   |   <=767
   Media blocks are emitted in the site's own source order, because the
   (min-width:1025px) and (max-width:1440px) block is declared upstream BEFORE
   (min-width:768px) and (max-width:1080px) and the two overlap from 1025 to
   1080, where the later block must keep winning.
   ========================================================================== */


/* ==========================================================================
   SECTION 1 - STEP -> MULTIPLIERS (three curves)
   --------------------------------------------------------------------------
   --a11y-scale        body text, headings, lists, static copy   +15% ... +60%
   --a11y-scale-form   inputs, submit, checkbox label + box,
                       validation tip, response output           +30% ... +75%
                       (form controls start from the smallest sizes on the
                        page - 0.7vw / 9px - so they need a bigger first jump
                        to read as "bigger" at all)
   --a11y-scale-tb     the accessibility toolbar's own menu items  +8% ... +35%
                       deliberately the SHALLOWEST curve, per request: the
                       toolbar text should grow noticeably less than page copy
   ========================================================================== */
:root {
    --a11y-scale: 1;
    --a11y-scale-form: 1;
    --a11y-scale-tb: 1;
}
body.pojo-a11y-resize-font-130 { --a11y-scale: 1.15; --a11y-scale-form: 1.30; --a11y-scale-tb: 1.08; }
body.pojo-a11y-resize-font-140 { --a11y-scale: 1.22; --a11y-scale-form: 1.40; --a11y-scale-tb: 1.12; }
body.pojo-a11y-resize-font-150 { --a11y-scale: 1.28; --a11y-scale-form: 1.48; --a11y-scale-tb: 1.16; }
body.pojo-a11y-resize-font-160 { --a11y-scale: 1.35; --a11y-scale-form: 1.55; --a11y-scale-tb: 1.20; }
body.pojo-a11y-resize-font-170 { --a11y-scale: 1.42; --a11y-scale-form: 1.62; --a11y-scale-tb: 1.24; }
body.pojo-a11y-resize-font-180 { --a11y-scale: 1.48; --a11y-scale-form: 1.68; --a11y-scale-tb: 1.28; }
body.pojo-a11y-resize-font-190 { --a11y-scale: 1.54; --a11y-scale-form: 1.72; --a11y-scale-tb: 1.32; }
body.pojo-a11y-resize-font-200 { --a11y-scale: 1.60; --a11y-scale-form: 1.75; --a11y-scale-tb: 1.35; }


/* ==========================================================================
   SECTION 2 - BASE PIN
   --------------------------------------------------------------------------
   Measured live: <body> computes to 16px / line-height 24px (unitless 1.5) at
   375, 900 and 1440 - so 16px is the real baseline, not a guess.
   calc(), never a flat px: the toolbar popup and every em / % descendant hangs
   off this value, and a flat px would freeze them.
   Deliberately NOT scoped to a content root - this is the one rule that has to
   reach the whole document, including the templates that have no wrapper.
   ========================================================================== */
html body[class*="pojo-a11y-resize-font-"] {
    font-size: calc(16px * var(--a11y-scale)) !important;
}


/* ==========================================================================
   SECTION 3 - KILL THE COMPOUNDING PERCENTAGES
   --------------------------------------------------------------------------
   The plugin's NN% is relative to the PARENT, so every level of nesting
   multiplies it. Setting these to `inherit` collapses the whole chain to one
   single application of the body pin from Section 2.

   Scoped by EXCLUSION rather than by content root, because this site has four
   different content roots across its templates:
       .elementor                  home - Elementor canvas
       .description-section        page.php, 404.php
       body > p / > blockquote     single.php AND the category archive render
                                   the_content() with NO wrapper at all
       .home-banner / .container   search.php
   Enumerating them is exactly what leaves a page broken when a new template
   lands; :not(:where(#pojo-a11y-toolbar *)) covers all of them at once and
   still keeps Section 6's toolbar untouched. :where() contributes 0
   specificity, so these selectors stay at (0,1,3) - one notch above the
   plugin's (0,1,2), and comfortably BELOW the explicit pins in Sections 4-5
   that must win.

   input / select / textarea are deliberately NOT here - Section 4 owns them.

   SPECIFICITY TRAP, measured the hard way: the plugin does NOT write a bare
   `p` and `li`. Its real selectors are

       body.pojo-a11y-resize-font-NN p:not(.pojo-a11y-toolbar-title)    (0,2,2)
       body.pojo-a11y-resize-font-NN li:not(.pojo-a11y-toolbar-item)    (0,2,2)

   and `:not(.class)` DOES contribute a class, unlike `:not(:where(...))`.
   A (0,1,3) rule therefore loses to the plugin on those two elements while
   winning on all the others - which showed up as `<p>` still compounding
   (16px -> 51.2px on /sample-page/ at step 200) while `blockquote` next to it
   was already correct. Mirroring the plugin's own :not() puts p and li at
   (0,2,3), one notch clear again. Only these two need it: every other element
   in the plugin's list is bare, so (0,1,3) is already enough, and raising them
   too would flatten the (0,2,2) form pins in Section 4.
   ========================================================================== */
html body[class*="pojo-a11y-resize-font-"] p:not(.pojo-a11y-toolbar-title):not(:where(#pojo-a11y-toolbar *)),
html body[class*="pojo-a11y-resize-font-"] li:not(.pojo-a11y-toolbar-item):not(:where(#pojo-a11y-toolbar *)),
html body[class*="pojo-a11y-resize-font-"] span:not(:where(#pojo-a11y-toolbar *)),
html body[class*="pojo-a11y-resize-font-"] label:not(:where(#pojo-a11y-toolbar *)),
html body[class*="pojo-a11y-resize-font-"] blockquote:not(:where(#pojo-a11y-toolbar *)),
html body[class*="pojo-a11y-resize-font-"] legend:not(:where(#pojo-a11y-toolbar *)),
html body[class*="pojo-a11y-resize-font-"] code:not(:where(#pojo-a11y-toolbar *)),
html body[class*="pojo-a11y-resize-font-"] pre:not(:where(#pojo-a11y-toolbar *)),
html body[class*="pojo-a11y-resize-font-"] dd:not(:where(#pojo-a11y-toolbar *)),
html body[class*="pojo-a11y-resize-font-"] dt:not(:where(#pojo-a11y-toolbar *)) {
    font-size: inherit !important;
}

/* 3b - the `h_ span` stacking bug.
   The plugin emits `h2 span { font-size: 172.9% }` ON TOP of a heading it has
   already scaled, so a heading span compounds twice. Measured on the home page
   at 1440: h2 17.28px / span 17.28px at rest -> h2 85.12px / span 226.42px at
   step 200. The plugin's `body.pojo... h2 span` is (0,1,3) - a TIE with
   Section 3 above, which would leave the outcome to source order alone.
   (0,1,4) here settles it deterministically. */
html body[class*="pojo-a11y-resize-font-"] h1 span:not(:where(#pojo-a11y-toolbar *)),
html body[class*="pojo-a11y-resize-font-"] h2 span:not(:where(#pojo-a11y-toolbar *)),
html body[class*="pojo-a11y-resize-font-"] h3 span:not(:where(#pojo-a11y-toolbar *)),
html body[class*="pojo-a11y-resize-font-"] h4 span:not(:where(#pojo-a11y-toolbar *)),
html body[class*="pojo-a11y-resize-font-"] h5 span:not(:where(#pojo-a11y-toolbar *)),
html body[class*="pojo-a11y-resize-font-"] h6 span:not(:where(#pojo-a11y-toolbar *)) {
    font-size: inherit !important;
}

/* 3c - headings with no font-size of their own in the theme or in Elementor.
   These exist on every theme-template page (sample-page, hello-world, the
   category archive, 404, search: plain the_content() / template output). The
   plugin replaces them with NN*1.33% of the parent, which at step 200 turns
   the 404 banner heading into 85px.

   Their real design values do NOT come from the UA stylesheet - this theme
   loads Bootstrap 5 twice (assets/css/bootstrap.rtl.min.css plus the CDN copy
   in header.php), and Bootstrap sizes every heading, with a fluid value below
   1200px and a fixed rem value above it. Measured on the 404 page at 375px:
   h1 = 27.625px, which is exactly calc(1.375rem + 1.5vw). Reproducing those
   values x var(--a11y-scale) keeps the design and scales it; the earlier
   UA-ratio guess (2em / 1.5em / ...) would have pushed h1 to 36.8px at step 1
   instead of 31.8px.

   rem is correct HERE, unlike in Section 4: the design itself is written in
   rem, and rem resolves against <html>, which nothing in this file touches -
   so these values track Bootstrap exactly rather than drifting with the body
   pin. Kept at (0,1,3) so every explicit heading pin (Section 3d, Section 5)
   outranks it. */
html body[class*="pojo-a11y-resize-font-"] h1:not(:where(#pojo-a11y-toolbar *)) { font-size: calc((1.375rem + 1.5vw) * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] h2:not(:where(#pojo-a11y-toolbar *)) { font-size: calc((1.325rem + 0.9vw) * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] h3:not(:where(#pojo-a11y-toolbar *)) { font-size: calc((1.3rem + 0.6vw) * var(--a11y-scale))   !important; }
html body[class*="pojo-a11y-resize-font-"] h4:not(:where(#pojo-a11y-toolbar *)) { font-size: calc((1.275rem + 0.3vw) * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] h5:not(:where(#pojo-a11y-toolbar *)) { font-size: calc(1.25rem * var(--a11y-scale))            !important; }
html body[class*="pojo-a11y-resize-font-"] h6:not(:where(#pojo-a11y-toolbar *)) { font-size: calc(1rem * var(--a11y-scale))               !important; }
@media (min-width: 1200px) {
    html body[class*="pojo-a11y-resize-font-"] h1:not(:where(#pojo-a11y-toolbar *)) { font-size: calc(2.5rem * var(--a11y-scale))  !important; }
    html body[class*="pojo-a11y-resize-font-"] h2:not(:where(#pojo-a11y-toolbar *)) { font-size: calc(2rem * var(--a11y-scale))    !important; }
    html body[class*="pojo-a11y-resize-font-"] h3:not(:where(#pojo-a11y-toolbar *)) { font-size: calc(1.75rem * var(--a11y-scale)) !important; }
    html body[class*="pojo-a11y-resize-font-"] h4:not(:where(#pojo-a11y-toolbar *)) { font-size: calc(1.5rem * var(--a11y-scale))  !important; }
}

/* 3d - 404.php prints its heading with an inline style="font-size:30px".
   Author !important beats a non-important inline style, so 3c would otherwise
   SHRINK it (30px -> 21.5px at step 130). Pin it to its real design value. */
html body[class*="pojo-a11y-resize-font-"].error404 .description-section h3 {
    font-size: calc(30px * var(--a11y-scale)) !important;
}


/* ==========================================================================
   SECTION 4 - FORM CONTROLS + response / validation messages
   --------------------------------------------------------------------------
   All on --a11y-scale-form. px and vw only:
     - never em  - CF7 wraps every control in <p><span class="...-wrap">, so em
                   compounds in exactly the way we are here to fix
     - never rem - rem ignores the vw design and shrinks below the intended
                   size on wide screens
   Unitless line-height is FORCED on every message, because the site writes
   them in vh (1.5vh / 1.8vh) and vh does not grow with the font.

   READABILITY FLOOR - .wpcf7-response-output is 0.9vw with NO tablet or mobile
   override on the neutral state, so it renders at 3.375px at 375px and 8.1px
   at 900px. max(14px, ...) inside the gate makes it legible at every step
   without touching the default render.
   ========================================================================== */

/* --- BASE (>=1081px) ---------------------------------------------------- */
html body[class*="pojo-a11y-resize-font-"] input:not(:where(#pojo-a11y-toolbar *)),
html body[class*="pojo-a11y-resize-font-"] select:not(:where(#pojo-a11y-toolbar *)),
html body[class*="pojo-a11y-resize-font-"] textarea:not(:where(#pojo-a11y-toolbar *)) {
    font-size: calc(16px * var(--a11y-scale-form)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .field-col label .wpcf7-form-control-wrap,
html body[class*="pojo-a11y-resize-font-"] .field-col input,
html body[class*="pojo-a11y-resize-font-"] .wpcf7-select,
html body[class*="pojo-a11y-resize-font-"] select.wpcf7-form-control {
    font-size: calc(1vw * var(--a11y-scale-form)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .field-col label input {
    font-size: calc(22px * var(--a11y-scale-form)) !important;
    line-height: 1.36 !important;
}
html body[class*="pojo-a11y-resize-font-"] .submit-btn input,
html body[class*="pojo-a11y-resize-font-"] .wpcf7-submit,
html body[class*="pojo-a11y-resize-font-"] input[type="submit"]:not(:where(#pojo-a11y-toolbar *)) {
    font-size: calc(1.3vw * var(--a11y-scale-form)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .submit-btn input::before {
    font-size: calc(22px * var(--a11y-scale-form)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox .wpcf7-list-item-label,
html body[class*="pojo-a11y-resize-font-"] .wpcf7-list-item-label,
html body[class*="pojo-a11y-resize-font-"] .custom-check-label,
html body[class*="pojo-a11y-resize-font-"] .privacy-checkbox p {
    font-size: calc(0.7vw * var(--a11y-scale-form)) !important;
    line-height: 1.3 !important;
}
html body[class*="pojo-a11y-resize-font-"] .wpcf7-not-valid-tip {
    font-size: calc(max(14px, 0.7vw) * var(--a11y-scale-form)) !important;
    line-height: 1.4 !important;
}
html body[class*="pojo-a11y-resize-font-"] .wpcf7-response-output {
    font-size: calc(max(14px, 0.9vw) * var(--a11y-scale-form)) !important;
    line-height: 1.4 !important;
}
/* Buttons the plugin's selector list cannot reach at all. */
html body[class*="pojo-a11y-resize-font-"] .global-btn,
html body[class*="pojo-a11y-resize-font-"] .submit-col .global-btn {
    font-size: calc(24px * var(--a11y-scale-form)) !important;
}

/* --- @media (min-width:768px) and (max-width:1080px) -------------------- */
@media (min-width: 768px) and (max-width: 1080px) {
    html body[class*="pojo-a11y-resize-font-"] .field-col label .wpcf7-form-control-wrap,
    html body[class*="pojo-a11y-resize-font-"] .field-col input,
    html body[class*="pojo-a11y-resize-font-"] .wpcf7-select,
    html body[class*="pojo-a11y-resize-font-"] select.wpcf7-form-control {
        font-size: calc(1.5vw * var(--a11y-scale-form)) !important;
        line-height: 1.6 !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .submit-btn input,
    html body[class*="pojo-a11y-resize-font-"] .wpcf7-submit,
    html body[class*="pojo-a11y-resize-font-"] input[type="submit"]:not(:where(#pojo-a11y-toolbar *)) {
        font-size: calc(1.5vw * var(--a11y-scale-form)) !important;
        line-height: 1.4 !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox .wpcf7-list-item-label,
    html body[class*="pojo-a11y-resize-font-"] .wpcf7-list-item-label {
        font-size: calc(1vw * var(--a11y-scale-form)) !important;
        line-height: 1.4 !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .wpcf7-not-valid-tip {
        font-size: calc(max(14px, 1vw) * var(--a11y-scale-form)) !important;
        line-height: 1.3 !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .wpcf7-response-output {
        font-size: calc(max(14px, 1vw) * var(--a11y-scale-form)) !important;
        line-height: 1.3 !important;
    }
}

/* --- @media (max-width:767px) ------------------------------------------- */
@media (max-width: 767px) {
    html body[class*="pojo-a11y-resize-font-"] .field-col label .wpcf7-form-control-wrap,
    html body[class*="pojo-a11y-resize-font-"] .field-col input,
    html body[class*="pojo-a11y-resize-font-"] .wpcf7-select,
    html body[class*="pojo-a11y-resize-font-"] select.wpcf7-form-control {
        font-size: calc(16px * var(--a11y-scale-form)) !important;
        line-height: 1.5 !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .submit-btn input,
    html body[class*="pojo-a11y-resize-font-"] .wpcf7-submit,
    html body[class*="pojo-a11y-resize-font-"] input[type="submit"]:not(:where(#pojo-a11y-toolbar *)) {
        font-size: calc(22px * var(--a11y-scale-form)) !important;
        line-height: 1.18 !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .submit-btn input::before {
        font-size: calc(22px * var(--a11y-scale-form)) !important;
    }
    /* 9px is the site's own design value here - scaled, never floored, so the
       default render stays identical. 9px at rest is a pre-existing legibility
       problem; it is reported, not silently changed. */
    html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox .wpcf7-list-item-label,
    html body[class*="pojo-a11y-resize-font-"] .wpcf7-list-item-label {
        font-size: calc(9px * var(--a11y-scale-form)) !important;
        line-height: 1.4 !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .form-order form p,
    html body[class*="pojo-a11y-resize-font-"] .form-order form .wpcf7-list-item-label {
        font-size: calc(13px * var(--a11y-scale-form)) !important;
        line-height: 1.38 !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .wpcf7-not-valid-tip {
        font-size: calc(14px * var(--a11y-scale-form)) !important;
        line-height: 1.43 !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .wpcf7-response-output,
    html body[class*="pojo-a11y-resize-font-"] .wpcf7 form.sent .wpcf7-response-output,
    html body[class*="pojo-a11y-resize-font-"] .wpcf7 form.failed .wpcf7-response-output,
    html body[class*="pojo-a11y-resize-font-"] .wpcf7 form.aborted .wpcf7-response-output,
    html body[class*="pojo-a11y-resize-font-"] .wpcf7 form.invalid .wpcf7-response-output {
        font-size: calc(14px * var(--a11y-scale-form)) !important;
        line-height: 1.43 !important;
    }
}


/* ==========================================================================
   SECTION 4b - ELEMENTS CARRYING AN INTENTIONAL SIZE OF THEIR OWN
   --------------------------------------------------------------------------
   Section 3 would flatten all of these to the body size. They are restated at
   their real design value x scale.

   Note the :where() traps: upstream these are written as
       .privacy-wrapper .privacy-content :where(p, li, a, div)   -> (0,2,0)
       .form-order form :where(p, .wpcf7-list-item-label)        -> (0,1,1)
   :where() is worth ZERO, so Section 3 at (0,1,3) + !important beats them
   both. They are restated EXPLICITLY here at (0,3,4) so the intent survives.

   `a` and `div` also matter for a second reason: neither is in the plugin's
   selector list, so with the plugin alone they FREEZE while their siblings
   grow - measured: .privacy-content p 12px -> 64px at step 200 while
   .privacy-content a stayed at 12px. Pinning both keeps the block internally
   consistent.
   ========================================================================== */
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content h2 {
    font-size: calc(1.4vw * var(--a11y-scale)) !important;
    line-height: 1.35 !important;
}
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content h3 {
    font-size: calc(1.1vw * var(--a11y-scale)) !important;
    line-height: 1.4 !important;
}
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content p,
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content li,
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content a,
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content div,
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content span {
    font-size: calc(max(13px, 0.8vw) * var(--a11y-scale)) !important;
    line-height: 1.6 !important;
}
html body[class*="pojo-a11y-resize-font-"] .pv-links > span,
html body[class*="pojo-a11y-resize-font-"] .pv-link {
    font-size: calc(max(13px, 0.8vw) * var(--a11y-scale)) !important;
    line-height: 1.2 !important;
}
html body[class*="pojo-a11y-resize-font-"] .simple-text p:not(.pojo-a11y-toolbar-title) {
    font-size: calc(max(12px, 0.8vw) * var(--a11y-scale)) !important;
    line-height: 1.4 !important;
}
html body[class*="pojo-a11y-resize-font-"] .success-title {
    font-size: calc(1.5vw * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .success-subtitle {
    font-size: calc(max(14px, 1vw) * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .contact-form .form-heading {
    font-size: calc(30px * var(--a11y-scale)) !important;
    line-height: 1.1 !important;
}
html body[class*="pojo-a11y-resize-font-"] .field-col label > span:first-child {
    font-size: calc(25px * var(--a11y-scale)) !important;
    line-height: 1.2 !important;
}
html body[class*="pojo-a11y-resize-font-"] .bottom-small-text {
    font-size: calc(max(12px, 0.8vw) * var(--a11y-scale)) !important;
}
@media (min-width: 768px) and (max-width: 1080px) {
    html body[class*="pojo-a11y-resize-font-"] .simple-text p:not(.pojo-a11y-toolbar-title) {
        font-size: calc(max(12px, 1vw) * var(--a11y-scale)) !important;
        line-height: 1.4 !important;
    }
}
@media (max-width: 767px) {
    html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content h2 {
        font-size: calc(18px * var(--a11y-scale)) !important;
        line-height: 1.25 !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content h3 {
        font-size: calc(16px * var(--a11y-scale)) !important;
        line-height: 1.38 !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content p,
    html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content li,
    html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content a,
    html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content div,
    html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content span {
        font-size: calc(12px * var(--a11y-scale)) !important;
        line-height: 1.67 !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .pv-links > span,
    html body[class*="pojo-a11y-resize-font-"] .pv-link {
        font-size: calc(14px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .simple-text p:not(.pojo-a11y-toolbar-title) {
        font-size: calc(10px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .success-title {
        font-size: calc(20px * var(--a11y-scale)) !important;
    }
}


/* ==========================================================================
   SECTION 4c - CONSENT / COOKIE BANNER  (.cc-* , #cc-floater)
   --------------------------------------------------------------------------
   Status on this site, verified live: the banner root is NOT in the DOM once
   consent has been stored - only BUTTON#cc-floater is, and it is a <button>,
   which the plugin's selector list cannot reach at all. The banner itself is
   injected by the external monitor script and sits OUTSIDE .elementor, and the
   theme stylesheet that styles it sizes .cc-btn from `inherit`, so when it
   DOES appear it shows both failure shapes at once: .cc-title / .cc-body run
   away off the plugin's p / h_ rules while .cc-root and .cc-btn stay frozen.

   Handled defensively here so the banner cannot explode for a first-time
   visitor. Generic inherit rule FIRST, then explicit pins - and note the
   specificity ordering that makes that work:
       html body[attr] .cc-root .cc-body   = (0,3,2)   <- pin, wins
       html body[attr] .cc-root p          = (0,2,3)   <- generic
   the class column is compared first, so (0,3,2) beats (0,2,3).

   Every pin is calc(<px> * var(--a11y-scale...)) - a flat px would stop the
   runaway but freeze the banner, so clicking "increase" would do nothing.
   .cc-title and .cc-btn use the FORM curve with bumped baselines (16 -> 18,
   14 -> 15) so the very first click is a visible jump.
   ========================================================================== */
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-root div,
html body[class*="pojo-a11y-resize-font-"] #cc-banner-root p,
html body[class*="pojo-a11y-resize-font-"] #cc-banner-root li,
html body[class*="pojo-a11y-resize-font-"] #cc-banner-root span,
html body[class*="pojo-a11y-resize-font-"] #cc-banner-root label,
html body[class*="pojo-a11y-resize-font-"] #cc-banner-root a {
    font-size: inherit !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-root,
html body[class*="pojo-a11y-resize-font-"] #cc-banner-root,
html body[class*="pojo-a11y-resize-font-"] .cc-banner {
    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,
html body[class*="pojo-a11y-resize-font-"] .cc-btn.cc-btn-text,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-btn.cc-btn-text {
    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,
html body[class*="pojo-a11y-resize-font-"] .cc-modal-close,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-modal-close,
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(13px * 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-cat-desc,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-cat-desc,
html body[class*="pojo-a11y-resize-font-"] .cc-cookies-list th,
html body[class*="pojo-a11y-resize-font-"] .cc-root .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 td {
    font-size: calc(13px * var(--a11y-scale)) !important;
    line-height: 1.5 !important;
}


/* ==========================================================================
   SECTION 4d - VALIDATION TIP POSITIONING
   --------------------------------------------------------------------------
   NOT NEEDED ON THIS SITE - and that is a measured result, not an assumption.

   Every .wpcf7-not-valid-tip here is `position: relative` (page CSS, base) and
   stays in flow at all three breakpoints; the only positioned thing nearby is
   .wpcf7-form-control-wrap { position: relative !important }, which is the
   containing block, not the tip. Measured with a forced invalid state on the
   consent row and on the name / phone / email rows, at 360 / 375 / 1440 and at
   steps none / 130 / 160 / 200: overlap stayed negative (clearance) and spill
   stayed <= 0 at every combination, because an in-flow tip pushes its row
   taller instead of being drawn over the label.

   If a future revision takes the tip out of flow with a FIXED px `top`, the
   fix belongs here - restore the auto-tracking anchor inside the same media
   block the theme used for its fixed offset, e.g.

       @media (max-width: 768px) {
           html body[class*="pojo-a11y-resize-font-"]
           .privacy-checkbox.first .wpcf7-not-valid-tip {
               top: auto !important; bottom: 0 !important; margin-top: 0 !important;
           }
       }

   Never `position: static` - the tip lives inside .wpcf7-form-control-wrap,
   which on the consent row is only as wide as the checkbox itself.
   ========================================================================== */


/* ==========================================================================
   SECTION 5 - PER-ELEMENT ELEMENTOR RULES  (home page, .elementor-6)
   --------------------------------------------------------------------------
   Every font-size rule in post-6.css, re-emitted x var(--a11y-scale), at BASE
   and again inside @media(max-width:767px) wherever the source has a mobile
   value. Emitting BOTH is the whole point: overriding only the vw value
   silently destroys the mobile px size.

   Two elements have a base vw value and NO mobile override on purpose -
   .elementor-element-365d026 (3.3vw) and .elementor-element-808683c (2vw) are
   elementor-hidden-mobile, and their mobile twins are ccf5843 / a2376bd and
   58c768b. Their base rules are still emitted so nothing depends on that.

   Selectors are (0,3,3), so they outrank Section 3's (0,1,3) generic rules and
   Section 3c's UA-ratio fallback.
   ========================================================================== */

/* --- BASE (vw) ---------------------------------------------------------- */
html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-ccf5843 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-a2376bd .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-365d026 .elementor-heading-title {
    font-size: calc(3.3vw * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-58c768b .elementor-divider__text,
html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-808683c .elementor-divider__text {
    font-size: calc(2vw * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-a18dcb8 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-b96bb09 .elementor-heading-title {
    font-size: calc(1.1vw * var(--a11y-scale)) !important;
    line-height: 1.2em !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-7c0bba2 .elementor-heading-title {
    font-size: calc(1.5vw * var(--a11y-scale)) !important;
    line-height: 1.2em !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-94fc270 .elementor-heading-title {
    font-size: calc(1.2vw * var(--a11y-scale)) !important;
    line-height: 1.2em !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-3d1b236 .elementor-heading-title {
    font-size: calc(1.7vw * var(--a11y-scale)) !important;
    line-height: 1.2em !important;
}
/* Icon-list: the <a> is not in the plugin's selector list, so with the plugin
   alone the link froze at 14.4px while its own .elementor-icon-list-text span
   grew to 28.8px. Both halves are pinned to the same value. */
html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-6d7bada .elementor-icon-list-item > .elementor-icon-list-text,
html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-6d7bada .elementor-icon-list-item > a,
html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-6d7bada .elementor-icon-list-item > a .elementor-icon-list-text {
    font-size: calc(1vw * var(--a11y-scale)) !important;
}

/* --- @media (max-width:767px) (px) ------------------------------------- */
@media (max-width: 767px) {
    html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-ccf5843 .elementor-heading-title {
        font-size: calc(32px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-a2376bd .elementor-heading-title {
        font-size: calc(55px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-58c768b .elementor-divider__text {
        font-size: calc(34px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-a18dcb8 .elementor-heading-title {
        font-size: calc(20px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-b96bb09 .elementor-heading-title {
        font-size: calc(22px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-7c0bba2 .elementor-heading-title {
        font-size: calc(28px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-94fc270 .elementor-heading-title {
        font-size: calc(14px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-3d1b236 .elementor-heading-title {
        font-size: calc(27px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-6d7bada .elementor-icon-list-item > .elementor-icon-list-text,
    html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-6d7bada .elementor-icon-list-item > a,
    html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-6d7bada .elementor-icon-list-item > a .elementor-icon-list-text {
        font-size: calc(12px * var(--a11y-scale)) !important;
    }
}


/* ==========================================================================
   SECTION 5b - MOBILE HERO: THREE OVERLAY BLOCKS ON FIXED px OFFSETS
   --------------------------------------------------------------------------
   Same class of bug as Section 7c, but for a whole layout instead of a
   gutter. Inside @media(max-width:767px) the three hero text blocks are
   position:absolute, each anchored by a FIXED px `top`:

       .elementor-element-ccf5843  top: 68px    "להישאר באזור שאוהבים."  32px
       .elementor-element-58c768b  top: 103px   "לעבור לבית"  (divider)  34px
       .elementor-element-6e83c7b  top: 142px   "שמגיע לכם!"             55px

   At rest that leaves 3px between block 1 and 2 and 5px between 2 and 3, and
   the band ends at 207px where the building photo begins - there is no spare
   room at all. So the blocks cannot grow in place. Measured at 375px, plugin
   plus Sections 2-5 only:

       step   block1        block2        block3        overlap 1/2
       none   68..100 (1L)  103..137      142..207      -3   ok
       130    68..105 (1L)  103..142      142..215      +1.8 OVERLAP
       160    68..154 (2L)  103..149      142..226      +51  OVERLAP
       200    68..170 (2L)  103..157      142..328      +67  OVERLAP

   Block 1 wraps to two lines from about step 150, so its height grows in
   jumps - which means scaling the `top` offsets proportionally cannot fix it
   either: no fixed offset can track a box whose line count changes.

   The fix is to stop them overlapping the photo and let them stack. They are
   flex items of a `flex-direction: column` container, so dropping them into
   normal flow makes each one sit below the previous one whatever its height,
   and the container grows instead of the text colliding. They come AFTER the
   photo container (.elementor-element-c7e4181) in DOM order, so `order` is
   what puts them back in front of it. `max-height` has to come off .mx-height
   as well - it is still 97vh on mobile (only `position` is overridden there),
   which the taller band would otherwise spill out of.

   Result at 375px: photo simply moves down (253px at step 130, 487px at 200)
   and clearance between blocks GROWS with the scale instead of going negative
   - verified -3 -> -3.4 -> -4.8 (1/2) and -10 -> -10.7 -> -13 (2/3) at 360,
   375 and 767px. Desktop is untouched: this whole section is inside the
   mobile media query, where the design is the absolute overlay.
   ========================================================================== */
@media (max-width: 767px) {
    html body[class*="pojo-a11y-resize-font-"] .mx-height {
        max-height: none !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-ccf5843,
    html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-58c768b,
    html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-6e83c7b {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        bottom: auto !important;
        align-self: center !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-ccf5843 {
        order: -3 !important;
        margin-top: calc(68px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-58c768b {
        order: -2 !important;
        margin-top: calc(3px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-6e83c7b {
        order: -1 !important;
        margin-top: calc(5px * var(--a11y-scale)) !important;
        margin-bottom: calc(14px * var(--a11y-scale)) !important;
    }
}


/* ==========================================================================
   SECTION 6 - THE ACCESSIBILITY TOOLBAR ITSELF
   --------------------------------------------------------------------------
   #pojo-a11y-toolbar is a SIBLING of .elementor (a direct <nav> child of
   <body>), which is why every generic rule above carries
   :not(:where(#pojo-a11y-toolbar *)).

   Requested change: the toolbar's own menu items should grow LESS than the
   page copy. Left to the plugin they run 12.8px -> 25.6px (x2.00) - wider than
   the 180px toolbar panel on mobile and much larger than the body text they
   sit beside. --a11y-scale-tb takes them to 13.8px at step 1 and 17.3px at
   max instead.

   This is a deliberate departure from "leave the toolbar exactly as the plugin
   made it": the toolbar item span no longer reads 12.8 -> 25.6px. Nothing else
   about the toolbar changes - the toggle button (5.5vw mobile / 1.5vw desktop,
   !important from the theme) and p.pojo-a11y-toolbar-title (16px, excluded by
   the plugin's own :not()) are untouched, and with no step selected the
   toolbar is identical to before.
   ========================================================================== */
html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay span.pojo-a11y-toolbar-text,
html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay li.pojo-a11y-toolbar-item a,
html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay li.pojo-a11y-toolbar-item a span,
html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay a.pojo-a11y-toolbar-link,
html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay a.pojo-a11y-toolbar-link span {
    font-size: calc(12.8px * var(--a11y-scale-tb)) !important;
    line-height: 1.4 !important;
}


/* ==========================================================================
   SECTION 7a - CF7 CONSENT CHECKBOX: BOX GEOMETRY
   --------------------------------------------------------------------------
   The check mark is an absolutely-centred ::before square inside an
   appearance:none input. The site sizes that box with EM in two bands:

       @media (min-width:1025px) and (max-width:1440px) { height: 1.1em !important }
       @media (min-width:2500px)                        { height: 2em   !important }

   and `em` resolves against the box's own font-size - which the plugin blows
   up. Measured at 1440 with the plugin alone:

       step   font-size    box (w x h)          mark
       none   16px         18.7 x 17.6          11.5 x 11.5   centred, fine
       130    100.4px      18.7 x 110.4         11.5 x 11.5   mark lost in a bar
       200    2048px       18.7 x 2252.8        11.5 x 11.5   box 2.2m tall

   So the mark stopped being "inside the box" the moment the font grew, in
   EVERY colour mode. Pinning the box's font-size (Section 4 does that) and
   scaling width / height / border / radius / mark together keeps the box
   square and the mark centred at every step. Values mirror the site's own
   per-band geometry x --a11y-scale-form.
   ========================================================================== */
html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox input[type="checkbox"] {
    font-size: calc(16px * var(--a11y-scale-form)) !important;
    width: calc(1.3vw * var(--a11y-scale-form)) !important;
    min-width: calc(1.3vw * var(--a11y-scale-form)) !important;
    height: calc(1.3vw * var(--a11y-scale-form)) !important;
    border-width: calc(0.1vw * var(--a11y-scale-form)) !important;
    border-radius: calc(0.2vw * var(--a11y-scale-form)) !important;
    top: calc(0.4vw * var(--a11y-scale-form)) !important;
    flex: 0 0 auto !important;
}
html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox input[type="checkbox"]:checked::before {
    width: calc(0.8vw * var(--a11y-scale-form)) !important;
    height: calc(0.8vw * var(--a11y-scale-form)) !important;
    border-radius: calc(0.1vw * var(--a11y-scale-form)) !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}
@media (min-width: 768px) and (max-width: 1080px) {
    html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox input[type="checkbox"] {
        width: calc(15px * var(--a11y-scale-form)) !important;
        min-width: calc(15px * var(--a11y-scale-form)) !important;
        height: calc(15px * var(--a11y-scale-form)) !important;
        border-width: 1px !important;
        top: calc(0.1vw * var(--a11y-scale-form)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox input[type="checkbox"]:checked::before {
        width: calc(9px * var(--a11y-scale-form)) !important;
        height: calc(9px * var(--a11y-scale-form)) !important;
        border-radius: 1px !important;
    }
}
@media (max-width: 767px) {
    html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox input[type="checkbox"] {
        width: calc(22px * var(--a11y-scale-form)) !important;
        min-width: calc(22px * var(--a11y-scale-form)) !important;
        height: calc(22px * var(--a11y-scale-form)) !important;
        border-width: 1px !important;
        border-radius: calc(5px * var(--a11y-scale-form)) !important;
        margin-top: calc(6px * var(--a11y-scale-form)) !important;
        top: auto !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox input[type="checkbox"]:checked::before {
        width: calc(12px * var(--a11y-scale-form)) !important;
        height: calc(12px * var(--a11y-scale-form)) !important;
        border-radius: calc(2px * var(--a11y-scale-form)) !important;
    }
}


/* ==========================================================================
   SECTION 7c - THE GUTTER THE LABEL RESERVES FOR THE BOX
   --------------------------------------------------------------------------
   The checkbox is `position: absolute; right: 0`, so it is OUT OF FLOW - the
   consent text is kept clear of it only by a padding-right on the label:

       .wpcf7-checkbox label                    { padding-right: 1.8vw }
       @media (min-width:768px) and (max-width:1080px) { padding-right: 2.7vw }
       @media (max-width:767px)                 { padding-right: 30px  }
       .checkbox-group .wpcf7-not-valid-tip     { padding-right: 1.8vw !important }
       @media (max-width:767px)                 { padding-right: 28px  !important }

   Section 7a scales the box by --a11y-scale-form (up to x1.75) but that
   padding is a FIXED value, so past the point where the box outgrows it the
   text runs underneath the box. Measured at 375px, step 200: box 38.5px wide
   against a 30px gutter -> 8.5px of the consent text drawn under the box; at
   1440px, step 200: box 32.8px against 1.8vw = 25.9px -> 6.9px under it.

   The gutter has to move on the SAME curve as the box it is reserving space
   for, otherwise the two drift apart. Scaling both by --a11y-scale-form keeps
   the original clearance ratio at every step and every breakpoint.
   ========================================================================== */
html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox label {
    padding-right: calc(1.8vw * var(--a11y-scale-form)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .checkbox-group .wpcf7-not-valid-tip {
    padding-right: calc(1.8vw * var(--a11y-scale-form)) !important;
}
@media (min-width: 768px) and (max-width: 1080px) {
    html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox label {
        padding-right: calc(2.7vw * var(--a11y-scale-form)) !important;
    }
}
@media (max-width: 767px) {
    html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox label {
        padding-right: calc(30px * var(--a11y-scale-form)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .checkbox-group .wpcf7-not-valid-tip {
        padding-right: calc(28px * var(--a11y-scale-form)) !important;
    }
}


/* ==========================================================================
   SECTION 7b - THE CHECK MARK IN EVERY COLOUR MODE
   --------------------------------------------------------------------------
   Gated on the contrast classes, NOT on the resize class, so it applies
   whether or not a font step is active - and still contributes nothing when no
   accessibility option is selected at all.

   Covers the three DARK-page modes only. Light background is a white page, so
   a black box with a white mark would be backwards there - it gets its own
   treatment in Section 7d.

   Why it is needed: the box background is repainted from outside this file -
       pojo   body.pojo-a11y-high-contrast input        { background: black !important }
       pojo   body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar)
                                                        { background: #000  !important }
   while the mark's own `background-color:#fff` carries no !important at all,
   so anything that ever reaches the pseudo-element wins over it. Under
   grayscale the whole document is filtered via html:has(...), so the mark has
   to be a pure white-on-black pair to come out of the filter with contrast
   left. There is also a pre-existing no-op in the site CSS aimed at
   `input:checked::after` - the mark is a ::before, so that rule never applied
   to anything.

   Pinning both halves of the pair - box background AND mark colour - is what
   guarantees a visible mark. The box keeps a white border so its outline stays
   visible against the black fill these three modes produce.
   ========================================================================== */
html body.pojo-a11y-high-contrast .wpcf7-checkbox input[type="checkbox"],
html body.pojo-a11y-negative-contrast .wpcf7-checkbox input[type="checkbox"],
html body.pojo-a11y-grayscale .wpcf7-checkbox input[type="checkbox"] {
    background: #000 !important;
    background-color: #000 !important;
    background-image: none !important;
    border-color: #fff !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    opacity: 1 !important;
}
html body.pojo-a11y-high-contrast .wpcf7-checkbox input[type="checkbox"]:checked::before,
html body.pojo-a11y-negative-contrast .wpcf7-checkbox input[type="checkbox"]:checked::before,
html body.pojo-a11y-grayscale .wpcf7-checkbox input[type="checkbox"]:checked::before {
    content: "" !important;
    display: block !important;
    background: #fff !important;
    background-color: #fff !important;
    box-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}
/* The site's own no-op ::after fix, neutralised so it can never paint a stray
   box if the plugin or a future stylesheet gives that pseudo-element content. */
html body.pojo-a11y-high-contrast .wpcf7-checkbox input[type="checkbox"]:checked::after,
html body.pojo-a11y-negative-contrast .wpcf7-checkbox input[type="checkbox"]:checked::after,
html body.pojo-a11y-light-background .wpcf7-checkbox input[type="checkbox"]:checked::after,
html body.pojo-a11y-grayscale .wpcf7-checkbox input[type="checkbox"]:checked::after {
    color: #fff !important;
    background: transparent !important;
}


/* ==========================================================================
   SECTION 7d - LIGHT BACKGROUND MODE: ENTRY FIELDS OUTLINED, NOT FILLED
   --------------------------------------------------------------------------
   Requested: in light background mode the entry fields should be transparent
   with just a border, instead of the solid black blocks they are now.

   Where the black comes from: the page-level accessibility CSS in the DB has

       body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) input,
       textarea, select, body.pojo-a11y-light-background ... input::placeholder
           { background: #000 !important; color: #fff !important; }

   That rule cannot be edited from here (it lives in the database, not in the
   theme), so it has to be out-specified. Note the specificity: it carries an
   ID, because `:not(#pojo-a11y-toolbar)` contributes one - so it is (1,2,2),
   and the ID column is compared BEFORE the class column. A rule like
   `html body.pojo-a11y-light-background .field-col input:not([type="submit"])`
   is (0,7,3) and would LOSE despite looking far more specific. The selectors
   below therefore carry the same `:not(#pojo-a11y-toolbar)` so they land at
   (1,6,3) and win on the class column.

   Scope: text-entry fields and the consent checkbox only. The submit button is
   explicitly excluded - it is styled by a separate rule
   (`.submit-btn input { background-color:#000; color:#fff }`) and stays a
   filled black button, which is what it should look like.

   Because the box is now transparent over a white page, the check mark has to
   flip to black - a white mark on transparent would be invisible. That is why
   light background is not in Section 7b's list.

   Gated on body.pojo-a11y-light-background, so nothing here applies in any
   other mode or with no accessibility option selected.
   ========================================================================== */
html body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
html body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) textarea,
html body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) select {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    border: 1px solid #000 !important;
}
html body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"])::placeholder,
html body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) textarea::placeholder {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    opacity: 1 !important;
}
/* The consent checkbox: same treatment - outline only, with a black mark so it
   reads against the transparent box on the white page. */
html body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .wpcf7-checkbox input[type="checkbox"] {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-color: #000 !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    opacity: 1 !important;
}
html body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .wpcf7-checkbox input[type="checkbox"]:checked::before {
    content: "" !important;
    display: block !important;
    background: #000 !important;
    background-color: #000 !important;
    box-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}


/* ==========================================================================
   SECTION 8 - OVERFLOW GUARD AT LARGE STEPS
   --------------------------------------------------------------------------
   With the plugin alone, documentElement.scrollWidth exceeded the viewport at
   step 200 on the home page - measured 661 vs 375, and 1561 vs 1440. Sections
   2-5 remove the runaways that caused it; this is the belt-and-braces stop so
   a long Hebrew word at max scale can never introduce a sideways scrollbar.
   Gated, so the default document is untouched.
   ========================================================================== */
html body[class*="pojo-a11y-resize-font-"] {
    overflow-x: hidden !important;
    max-width: 100% !important;
}
html body[class*="pojo-a11y-resize-font-"] .wpcf7-not-valid-tip,
html body[class*="pojo-a11y-resize-font-"] .wpcf7-response-output,
html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox .wpcf7-list-item-label {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}