@charset "UTF-8";
/* ==========================================================================
   Accessibility font-resize compatibility layer  (One Click Accessibility / Pojo)
   Theme: Nahariya  —  nahariya.lp-efficapital.co.il

   WHY THIS FILE EXISTS
   The plugin only emits two !important rules per step:
       body...NN, p, li, label, input, select, textarea, span, ... { font-size:NN% }
       body...NN h1..h6, h1 span .. h6 span                        { font-size:NN*1.33% }
   On this theme that produces four separate failures:
     1. Almost every size is authored in vw/vh. A % font-size resolves against the
        PARENT, never against vw, so vw-sized text never moves.
     2. The percentages COMPOUND through nesting. CF7 wraps the consent checkbox in
        p > span > span > span > span: measured 15.36px -> 512px at step 200.
     3. <div> and <button> are not in the plugin's selector list, so .description,
        .tag-text, .desclaimer-text and .wpcf7-response-output are frozen forever.
     4. The consent banner (#cc-banner-root) is a sibling of the theme markup, so
        .cc-title / .cc-body run away while .cc-root / .cc-btn stay frozen at 14px.

   DESIGN RULES OBSERVED
     RULE A  Every rule is gated behind body[class*="pojo-a11y-resize-font-"].
             With nothing selected, and again after Reset, this file contributes
             ZERO computed differences at any viewport on any page.
     RULE B  #pojo-a11y-toolbar is a SIBLING of the page content, never a child of
             a content root, so no generic rule can reach it. The toolbar is
             handled ONLY by the explicit block in Section 6.
   ========================================================================== */


/* ==========================================================================
   SECTION 1 — STEP -> MULTIPLIERS
   Three curves:
     --a11y-scale        body text, headings, lists, static copy   +15% .. +60%
     --a11y-scale-form   inputs, submit, messages, validation tips,
                         checkbox labels, banner title/body/buttons
                         (these start from the smallest sizes on the page and
                          need a bigger first jump to read as "bigger")
                                                                   +30% .. +75%
     --a11y-scale-menu   the accessibility toolbar's own menu items.
                         Deliberately the GENTLEST curve, per request: the menu
                         should grow noticeably less than page content so the
                         panel stays compact and fully on-screen.
                                                                    +8% .. +35%
   ========================================================================== */
:root {
    --a11y-scale: 1;
    --a11y-scale-form: 1;
    --a11y-scale-menu: 1;
}
body.pojo-a11y-resize-font-130 { --a11y-scale: 1.15; --a11y-scale-form: 1.30; --a11y-scale-menu: 1.08; }
body.pojo-a11y-resize-font-140 { --a11y-scale: 1.22; --a11y-scale-form: 1.40; --a11y-scale-menu: 1.12; }
body.pojo-a11y-resize-font-150 { --a11y-scale: 1.28; --a11y-scale-form: 1.48; --a11y-scale-menu: 1.16; }
body.pojo-a11y-resize-font-160 { --a11y-scale: 1.35; --a11y-scale-form: 1.55; --a11y-scale-menu: 1.20; }
body.pojo-a11y-resize-font-170 { --a11y-scale: 1.42; --a11y-scale-form: 1.62; --a11y-scale-menu: 1.24; }
body.pojo-a11y-resize-font-180 { --a11y-scale: 1.48; --a11y-scale-form: 1.68; --a11y-scale-menu: 1.28; }
body.pojo-a11y-resize-font-190 { --a11y-scale: 1.54; --a11y-scale-form: 1.72; --a11y-scale-menu: 1.31; }
body.pojo-a11y-resize-font-200 { --a11y-scale: 1.60; --a11y-scale-form: 1.75; --a11y-scale-menu: 1.35; }


/* ==========================================================================
   SECTION 2 — BASE PIN
   Measured body baseline on this site is exactly 16px on every page/viewport.
   calc(), never a flat px: the toolbar popup and .breadcrums inherit from here
   and would freeze if this were a constant.
   Intentionally NOT scoped to a content root — it must reach the whole document.
   ========================================================================== */
html body[class*="pojo-a11y-resize-font-"] {
    font-size: calc(16px * var(--a11y-scale)) !important;
}


/* ==========================================================================
   SECTION 3 — KILL THE COMPOUNDING PERCENTAGES
   One block per content root found by enumerating document.body.children.
   This site has NO .elementor wrapper on any page; the roots are theme markup:
       .main-bg          home  (container-fluid)
       .mobile-menu      home  (sticky bar, sibling of .main-bg)
       .privacy-wrapper  home  (privacy modal, sibling of .main-bg)
       .gold-card-banner page.php + 404.php
       .breadcrums       page.php + 404.php
       .description-section  page.php + 404.php  (editor content)
   input/select/textarea are deliberately EXCLUDED here; Section 4 owns them.
   ========================================================================== */
html body[class*="pojo-a11y-resize-font-"] .main-bg p,
html body[class*="pojo-a11y-resize-font-"] .main-bg li,
html body[class*="pojo-a11y-resize-font-"] .main-bg span,
html body[class*="pojo-a11y-resize-font-"] .main-bg label,
html body[class*="pojo-a11y-resize-font-"] .main-bg legend,
html body[class*="pojo-a11y-resize-font-"] .main-bg blockquote,
html body[class*="pojo-a11y-resize-font-"] .main-bg code,
html body[class*="pojo-a11y-resize-font-"] .main-bg pre,
html body[class*="pojo-a11y-resize-font-"] .main-bg dd,
html body[class*="pojo-a11y-resize-font-"] .main-bg dt,
html body[class*="pojo-a11y-resize-font-"] .mobile-menu p,
html body[class*="pojo-a11y-resize-font-"] .mobile-menu li,
html body[class*="pojo-a11y-resize-font-"] .mobile-menu span,
html body[class*="pojo-a11y-resize-font-"] .mobile-menu label,
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper p,
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper li,
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper span,
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper label,
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper blockquote,
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper dd,
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper 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-"] .breadcrums a,
html body[class*="pojo-a11y-resize-font-"] .breadcrums 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 legend,
html body[class*="pojo-a11y-resize-font-"] .description-section blockquote,
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,
html body[class*="pojo-a11y-resize-font-"] .description-section a {
    font-size: inherit !important;
}


/* ==========================================================================
   SECTION 4 — FORM CONTROLS, MESSAGES AND vw-FROZEN COPY   (BASE band, >1020px)

   Values mirror the theme 1:1. px/vw only — never em (CF7's p > span > span
   nesting would compound it) and never rem (rem is html-relative, so it would
   ignore the Section 2 body pin and shrink below design size on wide screens).

   READABILITY FLOOR — measured with accessibility OFF, this theme renders
   .custom-check span at 8.64px @1440 and 7.2px @900, and .wpcf7-response-output
   at 8.64px @1440 / 9px @900. Scaling a 7px message by 1.75 still only reaches
   12.6px. Every message and micro-label therefore uses
        calc(max(<floor>, <themeValue>) * var(--a11y-scale-form))
   so it is legible at every step. The floor sits INSIDE the gate, so the
   default render is byte-for-byte untouched.
   ========================================================================== */

/* --- text inputs ------------------------------------------------------- */
html body[class*="pojo-a11y-resize-font-"] .hebrew-contact-form .form-field,
html body[class*="pojo-a11y-resize-font-"] .hebrew-contact-form input.wpcf7-form-control,
html body[class*="pojo-a11y-resize-font-"] .field-wrapper > p > span {
    font-size: calc(max(13px, 1vw) * var(--a11y-scale-form)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .hebrew-contact-form .form-field::placeholder {
    font-size: calc(max(13px, 1vw) * var(--a11y-scale-form)) !important;
}

/* --- consent checkbox label ------------------------------------------- */
html body[class*="pojo-a11y-resize-font-"] .custom-check .wpcf7-form-control .wpcf7-list-item {
    font-size: calc(max(12px, 0.8vw) * var(--a11y-scale-form)) !important;
    line-height: 1.45 !important;
}
html body[class*="pojo-a11y-resize-font-"] .custom-check span,
html body[class*="pojo-a11y-resize-font-"] .custom-check .wpcf7-list-item-label {
    font-size: calc(max(12px, 0.6vw) * var(--a11y-scale-form)) !important;
    line-height: 1.45 !important;
}

/* --- submit ------------------------------------------------------------ */
html body[class*="pojo-a11y-resize-font-"] .submit-container input,
html body[class*="pojo-a11y-resize-font-"] .submit-container input.wpcf7-submit {
    font-size: calc(max(13px, 1.2vw) * var(--a11y-scale-form)) !important;
    line-height: 1.25 !important;
    height: auto !important;
    padding: calc(0.5vh * var(--a11y-scale-form)) calc(1vw * var(--a11y-scale-form)) !important;
}

/* --- messages: unitless line-height, the theme uses vh which never grows -- */
html body[class*="pojo-a11y-resize-font-"] .wpcf7 form .wpcf7-response-output,
html body[class*="pojo-a11y-resize-font-"] .wpcf7-response-output {
    font-size: calc(max(14px, 0.6vw) * var(--a11y-scale-form)) !important;
    line-height: 1.4 !important;
}
html body[class*="pojo-a11y-resize-font-"] .wpcf7-not-valid-tip,
html body[class*="pojo-a11y-resize-font-"] .custom-check .wpcf7-not-valid-tip {
    font-size: calc(max(14px, 0.8vw) * var(--a11y-scale-form)) !important;
    line-height: 1.35 !important;
    white-space: normal !important;
}

/* --- vw-frozen static copy (all <div>, so the plugin can never reach it) -- */
html body[class*="pojo-a11y-resize-font-"] .tag-text,
html body[class*="pojo-a11y-resize-font-"] .description,
html body[class*="pojo-a11y-resize-font-"] .apartment-tag,
html body[class*="pojo-a11y-resize-font-"] .date-tag {
    font-size: calc(1vw * var(--a11y-scale)) !important;
    line-height: 1.5 !important;
}
html body[class*="pojo-a11y-resize-font-"] .desclaimer-text {
    font-size: calc(max(12px, 0.6vw) * var(--a11y-scale)) !important;
    line-height: 1.45 !important;
}


/* ==========================================================================
   SECTION 4b — ELEMENTS CARRYING AN INTENTIONAL SIZE OF THEIR OWN
   Section 3 flattened these to inherit; restore them explicitly.
   NOTE the two :where() selectors in the theme —
        .privacy-wrapper .privacy-content :where(p, li, a)
   :where() has ZERO specificity, so the theme rule is only (0,2,0) and loses to
   Section 3's (0,2,3). Both are restated here as plain selectors.
   ========================================================================== */
html body[class*="pojo-a11y-resize-font-"] .illustration-notice {
    font-size: calc(1vw * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .image-notice {
    font-size: calc(14px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content h2 {
    font-size: calc(1.4vw * 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 {
    font-size: calc(max(12px, 0.9vw) * var(--a11y-scale)) !important;
    line-height: 1.7 !important;
}


/* ==========================================================================
   SECTION 4c — CONSENT BANNER  (#cc-banner-root / .cc-root)
   The banner is a direct child of <body>, a SIBLING of every theme content
   root, so no Section 3 block can reach it. Measured plugin-only behaviour:
       .cc-title  16px -> 37.24px   (runaway, via the h-rule)
       .cc-body   14px -> 28px      (runaway, via the p-rule)
       .cc-root   14px -> 14px      (frozen — it is a <div>)
       .cc-btn    14px -> 14px      (frozen — its own rule is font-size:inherit,
                                     and its inherited chain is frozen too)
   Generic inherit-fix FIRST, then explicit pins.

   SPECIFICITY: the pins must out-rank the generic rule directly above them.
       html body[attr] .cc-root .cc-body  = (0,3,2)
       html body[attr] .cc-root p         = (0,2,3)
   The class column is compared first, so 3 > 2 and the pin wins. Every pin is
   therefore given both a bare and a .cc-root-scoped selector, so it also wins
   inside the settings modal.

   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 h1,
html body[class*="pojo-a11y-resize-font-"] .cc-root h2,
html body[class*="pojo-a11y-resize-font-"] .cc-root h3,
html body[class*="pojo-a11y-resize-font-"] .cc-root h4,
html body[class*="pojo-a11y-resize-font-"] .cc-root h5,
html body[class*="pojo-a11y-resize-font-"] .cc-root h6 {
    font-size: inherit !important;
}

html body[class*="pojo-a11y-resize-font-"] .cc-root {
    font-size: calc(14px * var(--a11y-scale)) !important;
    line-height: 1.5 !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-title,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-title {
    font-size: calc(18px * var(--a11y-scale-form)) !important;
    line-height: 1.35 !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-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 {
    font-size: calc(12px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-modal-head h2,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-modal-head h2 {
    font-size: calc(18px * var(--a11y-scale)) !important;
    line-height: 1.35 !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-modal-close,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-modal-close {
    font-size: calc(24px * var(--a11y-scale)) !important;
    line-height: 1 !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-cat-desc,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-cat-desc {
    font-size: calc(13px * var(--a11y-scale)) !important;
    line-height: 1.5 !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-required-badge,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-required-badge {
    font-size: calc(11px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-cookies-list,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-cookies-list,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-cookies-list th,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-cookies-list td {
    font-size: calc(12px * var(--a11y-scale)) !important;
}


/* ==========================================================================
   SECTION 4d — VALIDATION TIP POSITIONING
   Audited by injecting a real .wpcf7-not-valid-tip into each control wrap.

   Both tips are position:absolute (the theme's first rule is
   `.wpcf7-not-valid-tip{position:absolute !important}`, which also defeats the
   later `.custom-check .wpcf7-not-valid-tip{position:relative}`).

   They are anchored by `bottom`, NOT by a fixed `top` — but the anchor leaves
   no clearance, so scaling still drives the message straight through the label:
       consent tip, 1920px, plugin only:  overlap +0.3px at rest -> +41.3px @200
       plain  tip, 1920px, plugin only:   overlap -10.3px at rest -> +20.6px @200
   Because the overlap is caused BY the scaling, it is this file's to fix.

   Fix: re-anchor to `top:100%; bottom:auto`, which tracks the bottom of the
   control wrap however tall the label grows, and reserve room underneath on the
   row so the tip cannot spill into the next field.

   position:static is deliberately NOT used — the tip would be laid out inside
   .wpcf7-form-control-wrap, which on the plain fields is only as wide as the
   input's inline box, squeezing the message into a narrow column.
   ========================================================================== */
html body[class*="pojo-a11y-resize-font-"] .hebrew-contact-form .wpcf7-not-valid-tip,
html body[class*="pojo-a11y-resize-font-"] .custom-check .wpcf7-not-valid-tip {
    top: 100% !important;
    bottom: auto !important;
    right: 0 !important;
    left: 0 !important;
    margin-top: 2px !important;
    text-align: right !important;
}
html body[class*="pojo-a11y-resize-font-"] .hebrew-contact-form .field-wrapper:has(.wpcf7-not-valid-tip) {
    padding-bottom: calc(max(14px, 0.8vw) * var(--a11y-scale-form) * 1.5 + 6px) !important;
}
html body[class*="pojo-a11y-resize-font-"] .hebrew-contact-form .custom-check:has(.wpcf7-not-valid-tip) {
    height: auto !important;
    padding-bottom: calc(max(14px, 0.8vw) * var(--a11y-scale-form) * 3 + 6px) !important;
}


/* ==========================================================================
   SECTION 5 - HEADINGS AND PER-PAGE TYPE   (BASE band)
   Every font-size rule found in the theme CSS, plus the Bootstrap heading scale
   that page.php / 404.php inherit. There is no Elementor wrapper anywhere on
   this site; post-60.css is the Elementor *kit* only and declares no font-size
   that reaches rendered markup.
   ========================================================================== */

/* home ------------------------------------------------------------------ */
html body[class*="pojo-a11y-resize-font-"] .main-heading {
    font-size: calc(1.9vw * var(--a11y-scale)) !important;
    line-height: 1.7 !important;
}
html body[class*="pojo-a11y-resize-font-"] .contact-form-container h2 {
    font-size: calc(1.2vw * var(--a11y-scale)) !important;
    line-height: 1.35 !important;
}

/* page.php + 404.php ---------------------------------------------------- */
html body[class*="pojo-a11y-resize-font-"] .gold-card-banner h1 {
    font-size: calc(40px * var(--a11y-scale)) !important;
    line-height: 1.25 !important;
}
html body[class*="pojo-a11y-resize-font-"] .description-section h1 { font-size: calc(40px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] .description-section h2 { font-size: calc(32px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] .description-section h3 { font-size: calc(28px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] .description-section h4 { font-size: calc(24px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] .description-section h5 { font-size: calc(20px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] .description-section h6 { font-size: calc(16px * var(--a11y-scale)) !important; }

/* 404.php ships an inline style="font-size:30px" on its h3; only !important
   from a gated rule can scale that. */
html body[class*="pojo-a11y-resize-font-"] .error-content h3 {
    font-size: calc(30px * var(--a11y-scale)) !important;
    line-height: 1.3 !important;
}
html body[class*="pojo-a11y-resize-font-"] .error-content .call-btn {
    font-size: calc(16px * var(--a11y-scale)) !important;
}


/* ==========================================================================
   SECTION 6 - ACCESSIBILITY TOOLBAR MENU ITEMS
   The toolbar is a SIBLING of the page content, so nothing above reaches it and
   by default it keeps the plugin behaviour (12.8px -> 25.6px at step 200).

   Per explicit request the menu items are made to grow NOTICEABLY LESS than
   page content, using the gentle --a11y-scale-menu curve:
       12.8px -> 13.82px (step 1) -> 17.28px (max)   instead of -> 25.6px
   This is the one deliberate departure from "leave the toolbar exactly as the
   plugin made it"; it keeps the panel compact and fully on screen at max scale.
   The toggle button itself is left completely untouched.
   ========================================================================== */
html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar .pojo-a11y-toolbar-item span,
html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a span {
    font-size: calc(12.8px * var(--a11y-scale-menu)) !important;
    line-height: 1.35 !important;
}


/* ==========================================================================
   SECTION 7 - CONSENT CHECKBOX: TICK MUST STAY VISIBLE AND CENTRED
   The box is an input[type=checkbox] with appearance:none; the tick is an
   ::after glyph coloured #483f50 (the page plum) on a white fill.

   Measured, checked, per mode - BEFORE this section:
       default            box #fff        tick #483f50   visible
       high-contrast      box #000        tick #483f50   INVISIBLE (dark on black)
       negative-contrast  box #000        tick #483f50   INVISIBLE (dark on black)
       light-background   box transparent tick #483f50   no fill, so checked and
                                                         unchecked look identical
       grayscale          box #fff        tick grey      low contrast

   These rules are gated on the CONTRAST classes rather than the resize class,
   because a visitor can turn contrast on without ever changing font size. With
   no accessibility option selected at all none of them apply, so Rule A holds.
   ========================================================================== */

/* geometry - applies in every mode so the glyph is centred whatever the fill */
html body.pojo-a11y-high-contrast .wpcf7-checkbox input[type="checkbox"]:not(#pojo-a11y-toolbar)::after,
html body.pojo-a11y-negative-contrast .wpcf7-checkbox input[type="checkbox"]:not(#pojo-a11y-toolbar)::after,
html body.pojo-a11y-light-background .wpcf7-checkbox input[type="checkbox"]:not(#pojo-a11y-toolbar)::after,
html body.pojo-a11y-grayscale .wpcf7-checkbox input[type="checkbox"]:not(#pojo-a11y-toolbar)::after {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    line-height: 1 !important;
    pointer-events: none !important;
}

/* high contrast + negative contrast + grayscale: the plugin paints the box
   black, so force a white fill back on and flip the tick to black. */
html body.pojo-a11y-high-contrast .wpcf7-checkbox input[type="checkbox"]:not(#pojo-a11y-toolbar):checked,
html body.pojo-a11y-negative-contrast .wpcf7-checkbox input[type="checkbox"]:not(#pojo-a11y-toolbar):checked,
html body.pojo-a11y-grayscale .wpcf7-checkbox input[type="checkbox"]:not(#pojo-a11y-toolbar):checked {
    background-color: #ffffff !important;
    background-image: none !important;
    border-color: #ffffff !important;
}
html body.pojo-a11y-high-contrast .wpcf7-checkbox input[type="checkbox"]:not(#pojo-a11y-toolbar):checked::after,
html body.pojo-a11y-negative-contrast .wpcf7-checkbox input[type="checkbox"]:not(#pojo-a11y-toolbar):checked::after,
html body.pojo-a11y-grayscale .wpcf7-checkbox input[type="checkbox"]:not(#pojo-a11y-toolbar):checked::after {
    color: #000000 !important;
}
/* unchecked box in those modes still needs a visible outline */
html body.pojo-a11y-high-contrast .wpcf7-checkbox input[type="checkbox"]:not(#pojo-a11y-toolbar),
html body.pojo-a11y-negative-contrast .wpcf7-checkbox input[type="checkbox"]:not(#pojo-a11y-toolbar) {
    border: 2px solid #ffffff !important;
}

/* light background: the theme forces every input transparent, which erases the
   checked state entirely. Give it a solid dark fill and a white tick. */
html body.pojo-a11y-light-background .wpcf7-checkbox input[type="checkbox"]:not(#pojo-a11y-toolbar) {
    background-color: transparent !important;
    border: 2px solid #000000 !important;
}
html body.pojo-a11y-light-background .wpcf7-checkbox input[type="checkbox"]:not(#pojo-a11y-toolbar):checked {
    background-color: #000000 !important;
    background-image: none !important;
    border-color: #000000 !important;
}
html body.pojo-a11y-light-background .wpcf7-checkbox input[type="checkbox"]:not(#pojo-a11y-toolbar):checked::after {
    color: #ffffff !important;
}

/* size - only while a font step is active, so the box keeps pace with the label
   and the glyph keeps a ~65% ratio inside the box at every step. */
html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox input[type="checkbox"]:not(#pojo-a11y-toolbar) {
    width: calc(17px * var(--a11y-scale-form)) !important;
    height: calc(17px * var(--a11y-scale-form)) !important;
    min-width: calc(17px * var(--a11y-scale-form)) !important;
    flex: 0 0 auto !important;
    border-radius: 3px !important;
}
html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox input[type="checkbox"]:not(#pojo-a11y-toolbar)::after,
html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox input[type="checkbox"]:not(#pojo-a11y-toolbar):checked::after {
    font-size: calc(11px * var(--a11y-scale-form)) !important;
    line-height: 1 !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}


/* ==========================================================================
   SECTION 8 - BREAKPOINT BANDS

   The theme declares its media blocks in this SOURCE ORDER inside
   assets/css/responsive.css:
       (max-width:767px) (max-width:680px) (max-width:350px) (max-width:400px)
       (min-width:400px and max-width:600px) (max-width:380px)
       (max-width:600px) (min-width:1921px) (max-width:1020px)
   Note that (max-width:1020px) is declared LAST, after (max-width:600px).
   Where both match, the 600px block only still wins because the theme marked
   those declarations !important. The measured EFFECTIVE cascade is therefore
   simply base -> 1020 -> 767 -> 680 -> 600, and the blocks below are emitted in
   exactly that order so the narrowest band wins on source order alone. Every
   value below was verified against a computed measurement at 375 / 900 / 1440.
   ========================================================================== */


/* --- Bootstrap fluid headings below the lg breakpoint ------------------- */
@media (max-width: 1199.98px) {
    html body[class*="pojo-a11y-resize-font-"] .gold-card-banner h1,
    html body[class*="pojo-a11y-resize-font-"] .description-section h1 {
        font-size: calc((22px + 1.5vw) * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .description-section h2 {
        font-size: calc((21.2px + 0.9vw) * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .description-section h3 {
        font-size: calc((20.8px + 0.6vw) * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .description-section h4 {
        font-size: calc((20.4px + 0.3vw) * var(--a11y-scale)) !important;
    }
}


/* --- tablet / small laptop --------------------------------------------- */
@media (max-width: 1020px) {
    html body[class*="pojo-a11y-resize-font-"] .description {
        font-size: calc(1.4vw * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .tag-text,
    html body[class*="pojo-a11y-resize-font-"] .apartment-tag,
    html body[class*="pojo-a11y-resize-font-"] .date-tag {
        font-size: calc(1.5vw * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .contact-form-container h2 {
        font-size: calc(1.4vw * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .field-wrapper > p > span {
        font-size: calc(max(13px, 1.2vw) * var(--a11y-scale-form)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .custom-check .wpcf7-form-control .wpcf7-list-item {
        font-size: calc(max(12px, 1vw) * var(--a11y-scale-form)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .custom-check span,
    html body[class*="pojo-a11y-resize-font-"] .custom-check .wpcf7-list-item-label {
        font-size: calc(max(12px, 0.9vw) * var(--a11y-scale-form)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .desclaimer-text {
        font-size: calc(max(12px, 0.8vw) * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .wpcf7 form .wpcf7-response-output,
    html body[class*="pojo-a11y-resize-font-"] .wpcf7-response-output {
        font-size: calc(max(14px, 1vw) * var(--a11y-scale-form)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .wpcf7-not-valid-tip,
    html body[class*="pojo-a11y-resize-font-"] .custom-check .wpcf7-not-valid-tip {
        font-size: calc(max(14px, 1vw) * var(--a11y-scale-form)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .hebrew-contact-form .field-wrapper:has(.wpcf7-not-valid-tip) {
        padding-bottom: calc(max(14px, 1vw) * var(--a11y-scale-form) * 1.5 + 6px) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .hebrew-contact-form .custom-check:has(.wpcf7-not-valid-tip) {
        padding-bottom: calc(max(14px, 1vw) * var(--a11y-scale-form) * 3 + 6px) !important;
    }
}


/* --- the theme switches .image-notice to px here ------------------------ */
@media (max-width: 767px) {
    html body[class*="pojo-a11y-resize-font-"] .image-notice {
        font-size: calc(12px * var(--a11y-scale)) !important;
    }
}


/* --- the theme switches .main-heading from vw to px here ---------------- */
@media (max-width: 680px) {
    html body[class*="pojo-a11y-resize-font-"] .main-heading {
        font-size: calc(20px * var(--a11y-scale)) !important;
        line-height: 1.7 !important;
    }
}


/* --- phone: the theme re-authors the whole form in px ------------------- */
@media (max-width: 600px) {
    html body[class*="pojo-a11y-resize-font-"] .tag-text,
    html body[class*="pojo-a11y-resize-font-"] .description,
    html body[class*="pojo-a11y-resize-font-"] .apartment-tag,
    html body[class*="pojo-a11y-resize-font-"] .date-tag {
        font-size: calc(14px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .contact-form-container h2 {
        font-size: calc(20px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .illustration-notice {
        font-size: calc(12px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .desclaimer-text {
        font-size: calc(12px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .mobile-menu a {
        font-size: calc(20px * var(--a11y-scale)) !important;
        line-height: 1.2 !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content h2 {
        font-size: calc(16px * var(--a11y-scale)) !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 {
        font-size: calc(12px * var(--a11y-scale)) !important;
    }

    html body[class*="pojo-a11y-resize-font-"] .hebrew-contact-form .form-field,
    html body[class*="pojo-a11y-resize-font-"] .hebrew-contact-form input.wpcf7-form-control,
    html body[class*="pojo-a11y-resize-font-"] .field-wrapper > p > span {
        font-size: calc(12px * var(--a11y-scale-form)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .hebrew-contact-form .form-field::placeholder {
        font-size: calc(12px * var(--a11y-scale-form)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .custom-check .wpcf7-form-control .wpcf7-list-item,
    html body[class*="pojo-a11y-resize-font-"] .custom-check span,
    html body[class*="pojo-a11y-resize-font-"] .custom-check .wpcf7-list-item-label {
        font-size: calc(12px * var(--a11y-scale-form)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .submit-container input,
    html body[class*="pojo-a11y-resize-font-"] .submit-container input.wpcf7-submit {
        font-size: calc(14px * var(--a11y-scale-form)) !important;
        line-height: 1.25 !important;
        padding: calc(8px * var(--a11y-scale-form)) calc(14px * var(--a11y-scale-form)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .wpcf7 form .wpcf7-response-output,
    html body[class*="pojo-a11y-resize-font-"] .wpcf7-response-output {
        font-size: calc(14px * var(--a11y-scale-form)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .wpcf7-not-valid-tip,
    html body[class*="pojo-a11y-resize-font-"] .custom-check .wpcf7-not-valid-tip {
        font-size: calc(14px * var(--a11y-scale-form)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .hebrew-contact-form .field-wrapper:has(.wpcf7-not-valid-tip) {
        padding-bottom: calc(14px * var(--a11y-scale-form) * 1.5 + 6px) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .hebrew-contact-form .custom-check:has(.wpcf7-not-valid-tip) {
        padding-bottom: calc(14px * var(--a11y-scale-form) * 3 + 6px) !important;
    }
}


/* ==========================================================================
   SECTION 9 - LAYOUT UNDER SCALE: WIDTH, LEADING, CHECKBOX ANCHOR
   Emitted LAST so it wins on source order over every band above.

   Sections 1-8 fix how big the text is. They do not fix the BOXES the text sits
   in, and every one of those boxes is capped in vw or px, so the cap does not
   move when the font grows. Measured live at step 200, 1920px wide, inside a
   .left-side-content that is 614px across:

       .description              max-width 345.6px (18vw)  -> 414.7px TALL
       .hebrew-contact-form      max-width 384px   (20vw)
       .custom-check             max-width 192px   (10vw)  -> label 194.8px tall
       .desclaimer-text-wrapper  max-width 422.4px (22vw)

   Releasing those caps to 100% lets each block use the panel it already lives
   in; .left-side-content keeps its own padding, so nothing reaches the edge.
   ========================================================================== */

/* --- 9a: heading leading -----------------------------------------------
   .main-heading rendered font 58.37px / line 99.23px (ratio 1.7) at step 200:
   a display heading with a gap nearly twice the glyph height. 1.25 still
   clears Hebrew descenders and keeps the rule's borders close to the text. */
html body[class*="pojo-a11y-resize-font-"] .main-heading {
    line-height: 1.25 !important;
}

/* --- 9b: release the width caps ---------------------------------------- */
html body[class*="pojo-a11y-resize-font-"] .description,
html body[class*="pojo-a11y-resize-font-"] .hebrew-contact-form,
html body[class*="pojo-a11y-resize-font-"] .desclaimer-text-wrapper,
html body[class*="pojo-a11y-resize-font-"] .custom-check,
html body[class*="pojo-a11y-resize-font-"] .custom-check .wpcf7-form-control .wpcf7-list-item,
html body[class*="pojo-a11y-resize-font-"] .custom-check .wpcf7-form-control-wrap {
    max-width: 100% !important;
    width: auto !important;
}


/* --- 9c: CHECKBOX / LABEL ALIGNMENT ------------------------------------
   The theme lays this row out by absolutely positioning the box at
   right:-2vw (desktop) / right:-20px (phone) inside .wpcf7-form-control-wrap.
   Two things break that once the text is scaled:

     1. Those offsets are FIXED while Section 7 grows the box to 17px * the form
        curve (up to ~29.8px), so the box slides back over the first line -
        measured 9.75px of overlap on a phone at step 200.
     2. .wpcf7-form-control-wrap is an INLINE box. As soon as the label wraps to
        more than one line, the containing block it offers is no longer anchored
        to the first line, so even an explicit top:0 lands part-way down the
        block - measured 60.9px below the label's top at 1440 / step 200, which
        is why the box drifted down beside the last line.

   No absolute offset can track that, because the anchor itself moves. The row
   is therefore laid out as a flex line instead: the box and the label become
   siblings in a row, align-items:flex-start pins the box to the first line, and
   the gap replaces the old negative offset. The page is RTL, so the natural
   row direction already puts the box on the right exactly as the theme had it.

   Measured after, at 375 / 768 / 1440 - box top vs label top: +2.6px at step
   130, +3.5px at step 200 (the theme's own default is +5 to +9), gap to the
   text 7.8-10.5px, box flush with the form's right edge, zero overflow. */
html body[class*="pojo-a11y-resize-font-"] .custom-check {
    margin-right: 0 !important;
}
html body[class*="pojo-a11y-resize-font-"] .custom-check .wpcf7-form-control-wrap,
html body[class*="pojo-a11y-resize-font-"] .custom-check .wpcf7-checkbox {
    display: block !important;
}
html body[class*="pojo-a11y-resize-font-"] .custom-check .wpcf7-form-control .wpcf7-list-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: calc(6px * var(--a11y-scale-form)) !important;
    margin: 0 !important;
}
/* position:relative, never static: the box is in flex flow either way, but the
   tick is an ::after with position:absolute + top/left 50%. With the input
   static its containing block becomes .wpcf7-form-control-wrap, and the glyph
   is drawn ~200px away in the middle of the label text - dark plum on the dark
   panel, so it reads as an empty box. relative keeps the box its own
   containing block and the tick stays centred in it. */
html body[class*="pojo-a11y-resize-font-"] .custom-check input[type="checkbox"]:not(#pojo-a11y-toolbar) {
    position: relative !important;
    right: auto !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin: calc(2px * var(--a11y-scale-form)) 0 0 0 !important;
    flex: 0 0 auto !important;
}
html body[class*="pojo-a11y-resize-font-"] .custom-check .wpcf7-list-item-label {
    flex: 1 1 auto !important;
    display: block !important;
}

/* --- 9d: form fields span the row -------------------------------------- */
html body[class*="pojo-a11y-resize-font-"] .field-wrapper > p > span.wpcf7-form-control-wrap {
    flex: 1 1 auto !important;
}
html body[class*="pojo-a11y-resize-font-"] .hebrew-contact-form .form-field {
    width: 100% !important;
    min-width: 0 !important;
}

/* --- 9e: the two clip-path tags ----------------------------------------
   .apartment-tag / .date-tag are a 70% / 30% split with a FIXED height (32px
   at <=600) and vw padding. Scaled text overflows the clip-path and the 70/30
   split starves the longer Hebrew label. Let both size to their content, keep
   the angled shape, and allow a wrap rather than a clip. */
html body[class*="pojo-a11y-resize-font-"] .bottom-section {
    flex-wrap: wrap !important;
    align-items: stretch !important;
}
html body[class*="pojo-a11y-resize-font-"] .apartment-tag {
    width: auto !important;
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: calc(6px * var(--a11y-scale)) calc(16px * var(--a11y-scale)) !important;
    line-height: 1.35 !important;
}
html body[class*="pojo-a11y-resize-font-"] .date-tag {
    width: auto !important;
    flex: 0 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: calc(6px * var(--a11y-scale)) calc(16px * var(--a11y-scale)) !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
}

/* --- 9f: SPACING BETWEEN FIELDS ----------------------------------------
   Section 4d reserves room under each row so a validation tip cannot spill
   into the next field. Reserving it unconditionally made every row carry that
   gap even on a clean form - measured at 375px / step 200: 42.75px of dead
   padding per row and 79.5px under the consent row, so a single-line input
   occupied 97.1px.

   The reservation is now conditional on CF7 having actually injected a tip
   (:has(.wpcf7-not-valid-tip) on the six rules in Section 4d), so a clean form
   keeps a normal rhythm and the room appears only at the moment it is needed.
   In an engine without :has() those rules are dropped as an invalid selector,
   which degrades to the theme's own untouched spacing.

   .custom-check still needs height:auto at all times: the theme pins it to
   height:7vh, which clips the consent label as soon as it grows. */
html body[class*="pojo-a11y-resize-font-"] .hebrew-contact-form .custom-check {
    height: auto !important;
}
html body[class*="pojo-a11y-resize-font-"] .hebrew-contact-form .field-wrapper {
    padding-bottom: calc(4px * var(--a11y-scale-form)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .hebrew-contact-form .field-wrapper > p {
    margin-bottom: calc(8px * var(--a11y-scale-form)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .hebrew-contact-form .custom-check > p {
    margin-bottom: 0 !important;
}


/* ==========================================================================
   SECTION 10 - FIELD GEOMETRY IN THE CONTRAST MODES
   The theme draws its inputs as a single underline: border 0 on three sides,
   border-bottom 0.2vh, transparent fill. Pojo's contrast sheets repaint every
   element, which turns each field into a filled, fully-boxed rectangle.
   Measured border widths (top/right/bottom/left) and fill on .form-field:

       default            0/0/1/0   transparent   <- the intended look
       high-contrast      1/1/1/1   #000          <- boxed
       negative-contrast  1/1/1/1   #000          <- boxed
       light-background   0/0/1/0   transparent   <- already correct

   Restored below for the two boxed modes. The underline uses currentColor, so
   it follows whatever text colour the active mode sets (white on high
   contrast, yellow on negative) and stays legible without hard-coding either.
   Pojo's rule is `body.pojo-a11y-<mode> :not(#pojo-a11y-toolbar)` = (1,1,2),
   which carries an ID, so these selectors need their own :not(#id) to outrank
   it - a plain class chain loses no matter how long it is.
   ========================================================================== */
html body.pojo-a11y-high-contrast .hebrew-contact-form .form-field:not(#pojo-a11y-toolbar),
html body.pojo-a11y-negative-contrast .hebrew-contact-form .form-field:not(#pojo-a11y-toolbar),
html body.pojo-a11y-light-background .hebrew-contact-form .form-field:not(#pojo-a11y-toolbar) {
    border: 0 !important;
    border-bottom: 0.2vh solid currentColor !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}
@media (max-width: 600px) {
    /* the theme drops the underline to a hairline on phones */
    html body.pojo-a11y-high-contrast .hebrew-contact-form .form-field:not(#pojo-a11y-toolbar),
    html body.pojo-a11y-negative-contrast .hebrew-contact-form .form-field:not(#pojo-a11y-toolbar),
    html body.pojo-a11y-light-background .hebrew-contact-form .form-field:not(#pojo-a11y-toolbar) {
        border-bottom-width: 1px !important;
    }
}


/* ==========================================================================
   SECTION 11 - HIGH CONTRAST + NEGATIVE CONTRAST, MODELLED ON LIGHT MODE

   assets/css/style.css already carries a finished compatibility layer for
   body.pojo-a11y-light-background, built on two marker classes the markup
   already has: .transparent-bg ("Pojo must not paint a plate here") and
   .black-bg / .mobile-dark-bg / .icon-bg ("this asset needs an opaque plate").
   High contrast and negative contrast had no equivalent, so Pojo's blanket
   `background-color:#000` fills a box behind every logo, vector and arrow.

   This section mirrors the light-mode rules one for one for those two modes.
   The page ground is inverted relative to light mode (black, not white), so:
     - .transparent-bg  -> transparent, same as light mode
     - .black-bg assets -> already sit on black; the plate becomes a no-op but
                           the light-mode PADDING is kept so nothing reflows
     - submit button    -> white on black text, the inverse of light mode's
                           black on white

   Pojo's own rule is `body.pojo-a11y-<mode> :not(#pojo-a11y-toolbar)` = (1,1,2).
   The `*:not(#id):not(.class)` prefix below matches the shape style.css already
   uses for light mode and scores (1,2,2), so it outranks Pojo without needing
   !important wars. The toolbar is excluded exactly as light mode excludes it.
   ========================================================================== */

/* --- surfaces that must stay unpainted --------------------------------- */
html body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .transparent-bg,
html body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .transparent-bg :where(img, svg),
html body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) svg,
html body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) :where(.slick-arrow-transparent, .swiper-pagination, .contact-btn a, .mobile-menu, .slick-arrow),
html body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .transparent-bg,
html body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .transparent-bg :where(img, svg),
html body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) svg,
html body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) :where(.slick-arrow-transparent, .swiper-pagination, .contact-btn a, .mobile-menu, .slick-arrow) {
    background: transparent !important;
}

/* light mode gives .transparent-bg a little vertical breathing room; keep it
   identical here so the two modes lay out the same */
html body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .transparent-bg,
html body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .transparent-bg {
    padding: 0.4vw 0;
}

/* --- assets that carry their own plate ---------------------------------- */
html body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .icon-bg img,
html body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .black-bg,
html body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .black-bg :where(img, svg),
html body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .icon-bg img,
html body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .black-bg,
html body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .black-bg :where(img, svg) {
    background: #000 !important;
}
html body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .black-bg :where(img, svg),
html body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .black-bg :where(img, svg) {
    padding: 0.4vw 0;
}
html body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .black-bg img,
html body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .black-bg img {
    padding: 0.4vw;
}

/* --- submit: inverse of light mode's black-on-white --------------------- */
html body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .submit-container input,
html body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .submit-container input {
    background-color: #fff !important;
    color: #000 !important;
}

@media (max-width: 600px) {
    html body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .mobile-dark-bg,
    html body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .mobile-dark-bg img,
    html body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .mobile-dark-bg,
    html body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .mobile-dark-bg img {
        background: #000 !important;
    }
    html body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .black-bg :where(img, svg),
    html body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .black-bg :where(img, svg) {
        padding: 4px;
    }
}


/* ==========================================================================
   SECTION 12 - SLIDER ARROW BUTTONS
   .slick-prev / .slick-next are <button>s with a transparent fill; the visible
   chevron is their ::before background-image. Pojo paints the BUTTON, which
   leaves a solid 20x20 tile sitting on the slide behind the chevron:

       default            transparent      correct
       light-background   transparent      already handled by style.css
       grayscale          transparent      filter only, nothing repainted
       high-contrast      rgb(96,0,64)     purple tile
       negative-contrast  rgb(0,0,0)       black tile

   The ::before keeps its background-image in every mode, so only the button
   fill has to be cleared. Declared for all four modes rather than just the two
   that are currently broken, so the arrows stay clean if Pojo's palette
   changes. Listed explicitly by class as well as via .slick-arrow, because
   .slick-arrow is only added by slick at runtime.
   ========================================================================== */
html body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) :where(.slick-prev, .slick-next, .slick-arrow),
html body.pojo-a11y-high-contrast :where(.slick-prev, .slick-next, .slick-arrow):not(#pojo-a11y-toolbar),
html body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) :where(.slick-prev, .slick-next, .slick-arrow),
html body.pojo-a11y-negative-contrast :where(.slick-prev, .slick-next, .slick-arrow):not(#pojo-a11y-toolbar),
html body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) :where(.slick-prev, .slick-next, .slick-arrow),
html body.pojo-a11y-grayscale *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) :where(.slick-prev, .slick-next, .slick-arrow) {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}


/* ==========================================================================
   SECTION 13 - SUBMIT IN FLOW, AND NO HORIZONTAL SCROLL

   13a. THE SUBMIT BUTTON OVERLAPPING THE CONSENT TEXT
   .submit-container is position:absolute; left:0; bottom:0 inside the
   position:relative .hebrew-contact-form. At the theme's own sizes the consent
   row is short enough to clear it, but once the label grows the two occupy the
   same band - measured at 375px / step 200, the button sat 78.2px INSIDE the
   label. Section 9f's height:auto on .custom-check is what lets the label grow;
   an absolutely positioned sibling cannot react to that.

   Putting the button back in normal flow is the fix. position:relative rather
   than static, so it still establishes a containing block for the CF7 spinner
   (see 13b). text-align:left reproduces where left:0 used to park it on this
   RTL page. Measured after: -17.2px at step 130, -23.4px at step 200 (negative
   = clearance) against both the label and the checkbox, at 375 and 1440.
   At rest the button keeps its original absolute placement untouched.

   13b. HORIZONTAL SCROLLBAR
   Measured overflow with a step active: +33px at 768, +28px at 1024, +19px at
   1440 - and exactly 0 at rest. Two compounding causes:

     1. The real culprit is .wpcf7-spinner: position:absolute with no offsets,
        so on an RTL page it lands to the LEFT of the submit and escapes the
        form. Measured at 768 / step 200 it sat at left:-18px against a document
        starting at 15px - 33px outside, which is the whole overflow.
     2. Scaled content makes the page taller, which brings in the vertical
        scrollbar, which shrinks the viewport by ~15px - but every width on this
        layout is authored in vw, and vw does NOT subtract the scrollbar. So the
        layout keeps computing against the full width.

   The spinner is pinned back inside its container, and the root is clipped as a
   standing guarantee for cause 2, which is inherent to vw-based layout and
   cannot be solved per element. overflow-x:clip is declared after
   overflow-x:hidden so engines that support it use it - unlike hidden, clip
   does not create a scroll container, so nothing sticky or fixed changes
   behaviour. Measured after: 0px of overflow at 375/768/1024/1440/1920, at
   steps none, 130 and 200.
   ========================================================================== */
html body[class*="pojo-a11y-resize-font-"] {
    overflow-x: hidden !important;
    overflow-x: clip !important;
}
html body[class*="pojo-a11y-resize-font-"] .hebrew-contact-form .submit-container {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    margin-top: calc(12px * var(--a11y-scale-form)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .hebrew-contact-form .submit-container > p {
    margin: 0 !important;
    text-align: left !important;
}
html body[class*="pojo-a11y-resize-font-"] .hebrew-contact-form .wpcf7-spinner {
    position: absolute !important;
    left: auto !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
}


/* ==========================================================================
   SECTION 14 - MOBILE STICKY BAR IN HIGH / NEGATIVE CONTRAST
   The phone-only bar (.mobile-menu, <=600px) holds one link, "leave details",
   with a small arrow PNG beside the label. Pojo paints a plate behind that
   image, which reads as a heavy mismatched border around the icon:

       default            transparent
       high-contrast      rgb(128,128,128)   grey tile
       negative-contrast  rgb(0,0,0)         black tile

   Section 11 already lists .mobile-menu among the surfaces that must stay
   unpainted, but that block uses the light-mode selector shape
   `body.<mode> *:not(#id):not(.class) .mobile-menu`, which requires an element
   BETWEEN body and the target. .mobile-menu is a direct child of <body>, so
   that selector can never match it - the same blind spot exists in the theme's
   own light-mode layer. These rules address it directly.

   The button then needs an edge of its own to still read as a button on a black
   ground, so it gets a 2px border in currentColor: blue in high contrast,
   yellow in negative contrast, always matching the label it surrounds rather
   than hard-coding a colour that could clash if Pojo's palette changes.
   ========================================================================== */
html body.pojo-a11y-high-contrast .mobile-menu:not(#pojo-a11y-toolbar),
html body.pojo-a11y-negative-contrast .mobile-menu:not(#pojo-a11y-toolbar),
html body.pojo-a11y-high-contrast .mobile-menu :where(img, svg):not(#pojo-a11y-toolbar),
html body.pojo-a11y-negative-contrast .mobile-menu :where(img, svg):not(#pojo-a11y-toolbar) {
    background: transparent !important;
}
html body.pojo-a11y-high-contrast .mobile-menu a:not(#pojo-a11y-toolbar),
html body.pojo-a11y-negative-contrast .mobile-menu a:not(#pojo-a11y-toolbar) {
    border: 2px solid currentColor !important;
    box-sizing: border-box !important;
}