@charset "UTF-8";
/* ==========================================================================
   accessibility.css - "One Click Accessibility" (Pojo) font-resize repair
   Site   : https://portret.rotshtein-lp.co.il/
   Theme  : r-portret webz  (vw-based, RTL, Elementor + Contact Form 7)
   --------------------------------------------------------------------------
   WHY THIS FILE EXISTS
   The plugin only emits:
       body.pojo-a11y-resize-font-NN p,li,label,input,select,textarea,legend,
       code,pre,dd,dt,span,blockquote { font-size: NN% !important }
       body.pojo-a11y-resize-font-NN h1..h6, h_ span { font-size: NN*1.33% }
   On this site that breaks in five ways (all measured on the live page):
     1. Percentages never resolve against vw, so every vw heading IGNORES the
        setting - 2.4vw (34.56px) actually SHRANK to 27.04px at step 130.
     2. Percentages COMPOUND through CF7's nested spans:
        p > span.wpcf7-list-item-label > span.wpcf7-form-control-wrap >
        span.wpcf7-checkbox > span.wpcf7-list-item > label > span
        measured 10.08px -> 4096px at step 200.
     3. Units change per breakpoint (2.4vw desktop / 24px under 767px), so
        both have to be re-emitted or one of them is destroyed.
     4. <button> and <div> are not in the plugin's selector list, so
        .wpcf7-response-output (div) and .cc-btn (button) never moved at all,
        and .checkbox-row-vertical .wpcf7-submit was frozen by an existing
        "font-size:1vw !important" DB rule.
     5. #cc-banner-root sits OUTSIDE .elementor, .cc-btn is font-size:inherit
        and .cc-root is a hard 14px, so the banner title/body ran away while
        the buttons stayed frozen (banner grew to 1425px wide at 375px).

   TWO HARD RULES OBSERVED THROUGHOUT
   A. Nothing selected -> design unchanged. Every rule below is gated behind
      body[class*="pojo-a11y-resize-font-"] (or, for the colour-mode block in
      Section 7, behind the matching pojo contrast class). With no class set,
      and after Reset, this file contributes nothing.
   B. #pojo-a11y-toolbar is a SIBLING of .elementor and is never reached by a
      generic rule here: every generic selector is scoped inside a content
      root. The single toolbar rule is the deliberate, explicitly requested
      one in Section 6.

   html body[class*="..."] is used throughout to out-specify the hand written
   a11y rules stored in the database (the wp_head inline <style> blocks).
   ========================================================================== */


/* ==========================================================================
   SECTION 1 - Two scale curves (plus a third, gentler one for the toolbar)
   --------------------------------------------------------------------------
   --a11y-scale       page content. Headings/body copy already start large.
   --a11y-scale-form  form controls, validation messages and the cookie
                      banner. These start smallest, so they need a bigger
                      first jump for click 1 to feel like it did something.
   --a11y-scale-tb    accessibility toolbar items - deliberately the smallest
                      curve (see Section 6).
   Plugin steps confirmed live: none -> 130 -> 140 -> ... -> 200 (caps).
   120 is reachable with the minus button and is covered too.
   ========================================================================== */
:root{
    --a11y-scale: 1;
    --a11y-scale-form: 1;
    --a11y-scale-tb: 1;
}
body.pojo-a11y-resize-font-120{ --a11y-scale:1.10; --a11y-scale-form:1.20; --a11y-scale-tb:1.06; }
body.pojo-a11y-resize-font-130{ --a11y-scale:1.15; --a11y-scale-form:1.30; --a11y-scale-tb:1.09; }
body.pojo-a11y-resize-font-140{ --a11y-scale:1.22; --a11y-scale-form:1.40; --a11y-scale-tb:1.13; }
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.31; }
body.pojo-a11y-resize-font-200{ --a11y-scale:1.60; --a11y-scale-form:1.75; --a11y-scale-tb:1.35; }


/* ==========================================================================
   SECTION 2 - Base pin on <body>
   Measured baseline: body = 18px / line-height 26px (ratio 1.444).
   Deliberately UNSCOPED so it is the single anchor everything else inherits
   from. calc(), never a flat px, or the toolbar popup and the banner freeze.
   line-height must become unitless: the theme's fixed 26px crushes the text
   the moment the font grows.
   #pojo-a11y-toolbar carries its own font-size:16px !important from the
   plugin stylesheet, so it does NOT inherit this pin (verified live).
   ========================================================================== */
html body[class*="pojo-a11y-resize-font-"]{
    font-size: calc(18px * var(--a11y-scale)) !important;
    line-height: 1.45 !important;
}


/* ==========================================================================
   SECTION 3 - Kill the compounding inside every content root
   --------------------------------------------------------------------------
   Roots found on this install:
     .elementor            home page (page-template-elementor_header_footer)
     .description-section  page.php / 404.php / search.php - these pages have
                           NO .elementor at all; measured plugin-only there,
                           <p> went 18px -> 64px
     .login-section /
     .login-banner         single.php
     .gold-card-banner     404.php
   input / select / textarea are deliberately NOT in this list - they are
   handled on the form curve in Section 4.
   Specificity here is (0,2,3); every Section 4/5 rule is built to beat it.
   ========================================================================== */
html body[class*="pojo-a11y-resize-font-"] :is(.elementor,.description-section,.login-section,.login-banner,.gold-card-banner) :is(p,li,span,label,blockquote,legend,code,pre,dd,dt){
    font-size: inherit !important;
}

/* Headings in raw post content carry no author font-size at all, so their
   baseline comes from bootstrap.rtl.min.css, which is enqueued site-wide and
   uses Bootstrap 5's responsive-font-size expressions. Mirrored 1:1 here (a
   first attempt with the plain UA em ladder measured h2 32px -> 31.05px at
   step 130, i.e. it SHRANK). Elementor headings with their own post-8.css
   rule out-specify this at (0,4,2) vs (0,2,3) and are pinned in Section 5.  */
html body[class*="pojo-a11y-resize-font-"] :is(.elementor,.description-section,.login-section,.login-banner,.gold-card-banner) h1{ font-size: calc((1.375rem + 1.5vw) * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] :is(.elementor,.description-section,.login-section,.login-banner,.gold-card-banner) h2{ font-size: calc((1.325rem + .9vw) * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] :is(.elementor,.description-section,.login-section,.login-banner,.gold-card-banner) h3{ font-size: calc((1.3rem + .6vw) * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] :is(.elementor,.description-section,.login-section,.login-banner,.gold-card-banner) h4{ font-size: calc((1.275rem + .3vw) * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] :is(.elementor,.description-section,.login-section,.login-banner,.gold-card-banner) h5{ font-size: calc(1.25rem * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] :is(.elementor,.description-section,.login-section,.login-banner,.gold-card-banner) h6{ font-size: calc(1rem * var(--a11y-scale)) !important; }
@media (min-width: 1200px){
    html body[class*="pojo-a11y-resize-font-"] :is(.elementor,.description-section,.login-section,.login-banner,.gold-card-banner) h1{ font-size: calc(2.5rem * var(--a11y-scale)) !important; }
    html body[class*="pojo-a11y-resize-font-"] :is(.elementor,.description-section,.login-section,.login-banner,.gold-card-banner) h2{ font-size: calc(2rem * var(--a11y-scale)) !important; }
    html body[class*="pojo-a11y-resize-font-"] :is(.elementor,.description-section,.login-section,.login-banner,.gold-card-banner) h3{ font-size: calc(1.75rem * var(--a11y-scale)) !important; }
    html body[class*="pojo-a11y-resize-font-"] :is(.elementor,.description-section,.login-section,.login-banner,.gold-card-banner) h4{ font-size: calc(1.5rem * var(--a11y-scale)) !important; }
}

/* "h_ span" stacks on top of a heading that is already scaled - flatten it. */
html body[class*="pojo-a11y-resize-font-"] :is(.elementor,.description-section,.login-section,.login-banner,.gold-card-banner) :is(h1,h2,h3,h4,h5,h6) span{
    font-size: inherit !important;
}


/* ==========================================================================
   SECTION 4 - Form controls, validation messages, consent row
   --------------------------------------------------------------------------
   One shared token set per breakpoint, so the submit button and the text
   inputs are guaranteed to resolve to the SAME height on every device.
   px / vw only - never em (CF7 nesting compounds it) and never rem (rem would
   shrink on wide viewports here because <html> stays 16px).
   READABILITY FLOOR: the theme sizes controls in vw, which renders ~9px on a
   900px-wide tablet. max(14px, <themeValue>) is the floor. It is gated, so
   the default render is untouched.
   Theme source values mirrored 1:1:
     base             input 1vw  | submit 1vw  | label .7vw | tip .8vw
     max-width:600px  input 14px | submit 16px | label 10px | tip 10px
   ========================================================================== */
html body[class*="pojo-a11y-resize-font-"]{
    --a11y-ctl-fs : calc(max(14px, 1vw) * var(--a11y-scale-form));
    --a11y-sub-fs : calc(max(14px, 1vw) * var(--a11y-scale-form));
    --a11y-ctl-h  : calc(max(14px, 1vw) * var(--a11y-scale-form) * 1.9 + 12px);
    --a11y-lbl-fs : calc(max(12px, .7vw) * var(--a11y-scale-form));
    /* Tips live in a 3-column row whose columns are only ~10vw wide, so the
       tip curve is capped to what one column can actually hold. Uncapped, the
       message measured 157.7px of ink inside a 151.9px column at step 200 and
       the three tips ran into each other (gap between adjacent messages:
       -5.8px). Capped, the same message is 125.6px with a 26.3px gap.
       max(11px, …) stops the cap from driving the text under 11px on a narrow
       desktop. The mobile block below replaces this with the uncapped value,
       where the field is full width. */
    --a11y-tip-fs : min(calc(max(12px, .8vw) * var(--a11y-scale)), max(11px, 1.15vw));
    --a11y-resp-fs: calc(max(14px, .8vw) * var(--a11y-scale-form));
    --a11y-box    : calc(max(16px, 1.5vw) * var(--a11y-scale));
}

/* --- 4.1 text inputs / textarea / select --------------------------------- */
html body[class*="pojo-a11y-resize-font-"] .wpcf7-form input.wpcf7-text,
html body[class*="pojo-a11y-resize-font-"] .wpcf7-form input.wpcf7-tel,
html body[class*="pojo-a11y-resize-font-"] .wpcf7-form input.wpcf7-email,
html body[class*="pojo-a11y-resize-font-"] .wpcf7-form input[type="text"],
html body[class*="pojo-a11y-resize-font-"] .wpcf7-form input[type="tel"],
html body[class*="pojo-a11y-resize-font-"] .wpcf7-form input[type="email"],
html body[class*="pojo-a11y-resize-font-"] .wpcf7-form textarea.wpcf7-textarea,
html body[class*="pojo-a11y-resize-font-"] .wpcf7-form select.wpcf7-select,
html body[class*="pojo-a11y-resize-font-"] .cf7-vertical-layout input[type="text"],
html body[class*="pojo-a11y-resize-font-"] .cf7-vertical-layout input[type="tel"],
html body[class*="pojo-a11y-resize-font-"] .cf7-vertical-layout input[type="email"]{
    font-size: var(--a11y-ctl-fs) !important;
    height: var(--a11y-ctl-h) !important;
    min-height: var(--a11y-ctl-h) !important;
    line-height: normal !important;   /* form controls centre their own text */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
}

/* --- 4.2 submit button ---------------------------------------------------
   Same --a11y-ctl-h as the inputs, so the heights match on every device.
   width:auto + min-width so the label can never be clipped as it grows.
   Beats the DB rule ".checkbox-row-vertical .wpcf7-submit{font-size:1vw
   !important}" on specificity: (0,3,2) vs (0,2,0).                          */
html body[class*="pojo-a11y-resize-font-"] .wpcf7-form input.wpcf7-submit,
html body[class*="pojo-a11y-resize-font-"] .checkbox-row-vertical .wpcf7-submit,
html body[class*="pojo-a11y-resize-font-"] .cf7-vertical-layout .wpcf7-submit{
    font-size: var(--a11y-sub-fs) !important;
    height: var(--a11y-ctl-h) !important;
    min-height: var(--a11y-ctl-h) !important;
    line-height: normal !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-inline: calc(var(--a11y-sub-fs) * .9) !important;
    width: auto !important;
    min-width: calc(6.5vw * var(--a11y-scale-form)) !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
}

/* --- 4.3 validation tip - must stay on ONE line --------------------------
   Measured plugin-only at step 130: font 45.7px inside a 36px box with the
   theme's line-height:.8vh (7.2px) => five crushed, overlapping lines.
   The theme anchors the tip position:relative; top:0 (in flow, no fixed px
   anchor), so no re-anchoring is required here - only size, a unitless
   line-height. Never position:static: .wpcf7-form-control-wrap on the consent
   row is only ~30px wide and the text would column-wrap.
   white-space stays `normal` on the multi-column desktop layout: the capped
   font above keeps the standard message on one line, and wrapping is the
   safety net that keeps a longer message (e.g. the e-mail-format error) inside
   its own column instead of bleeding across its neighbours. The mobile block
   below switches it back to nowrap, where the field is full width.          */
html body[class*="pojo-a11y-resize-font-"] .wpcf7-form .wpcf7-not-valid-tip{
    font-size: var(--a11y-tip-fs) !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    display: block !important;
    position: relative !important;
    top: 0 !important;
    bottom: auto !important;
    right: auto !important;
    left: auto !important;
    width: auto !important;
    max-width: none !important;
    margin: calc(var(--a11y-tip-fs) * .25) 0 0 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

/* A one-line tip is wider than its field, and because each field is a flex
   item whose width is content-driven, the tip used to steal width from its
   siblings (measured: the two other inputs dropped 147.5px -> 124.6px while
   the field carrying the tip grew to 188.2px). Equal flex basis keeps all
   three fields the same width whether or not an error is showing. */
html body[class*="pojo-a11y-resize-font-"] .wpcf7-form .cf7-vertical-layout .field-wrapper-placeholder{
    flex: 1 1 0 !important;
    min-width: 0 !important;
}

/* --- 4.4 response output (a <div>: the plugin never touched it at all) ----
   Also centred. The theme floats it right and CF7 computes direction:ltr on
   it, so text-align resolved to `start` = LEFT: at step 160 the Hebrew message
   sat left-aligned in a 449px box with a 6.3px offset on one side only.
   float:none is required - a floated box ignores auto margins.              */
html body[class*="pojo-a11y-resize-font-"] .wpcf7-form .wpcf7-response-output{
    font-size: var(--a11y-resp-fs) !important;
    line-height: 1.4 !important;   /* theme used a vh value, which never grows */
    text-align: center !important;
    float: none !important;
    width: 100% !important;        /* full width, centred text. fit-content   */
    max-width: 100% !important;    /* left a short success message at only    */
    margin-left: 0 !important;     /* 184px inside a 461px form at step 130.  */
    margin-right: 0 !important;    /* longhands only: the theme's 30px mobile */
    box-sizing: border-box !important;  /* margin-top has to survive.         */
}

/* --- 4.5 consent label - the compounding hot spot ------------------------
   Both the outer and the inner span.wpcf7-list-item-label get the same
   ABSOLUTE value, so the nesting can no longer multiply.                    */
html body[class*="pojo-a11y-resize-font-"] .wpcf7-form .wpcf7-list-item-label,
html body[class*="pojo-a11y-resize-font-"] .checkbox-row-vertical .wpcf7-list-item-label{
    font-size: var(--a11y-lbl-fs) !important;
    line-height: 1.4 !important;
}
html body[class*="pojo-a11y-resize-font-"] .wpcf7-form .checkbox-row-vertical,
html body[class*="pojo-a11y-resize-font-"] .wpcf7-form .cf7-vertical-layout{
    font-size: var(--a11y-lbl-fs) !important;
    line-height: 1.4 !important;
}

/* --- 4.6 consent checkbox: keep it square and stop the flex collapse -----
   Measured plugin-only: the box shrank 18.5px -> 5.9px at step 130 while its
   own font-size ran to 4096px.                                             */
html body[class*="pojo-a11y-resize-font-"] .wpcf7-form .wpcf7-checkbox input[type="checkbox"]{
    width: var(--a11y-box) !important;
    height: var(--a11y-box) !important;
    min-width: var(--a11y-box) !important;
    min-height: var(--a11y-box) !important;
    flex: 0 0 auto !important;
    font-size: var(--a11y-box) !important;
    line-height: 1 !important;
}
html body[class*="pojo-a11y-resize-font-"] .wpcf7-form .wpcf7-checkbox input[type="checkbox"]:checked::after{
    font-size: calc(var(--a11y-box) * .72) !important;
    line-height: 1 !important;
}


/* ==========================================================================
   SECTION 4b - Elements with an intentional size of their own
   Includes everything the theme declared through :where(), which has ZERO
   specificity: ".privacy-content :where(p,li,a)" is only (0,2,0) and would be
   flattened by the Section 3 inherit rule. Restated explicitly.
   ========================================================================== */
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content h2{
    font-size: calc(max(16px, 1.4vw) * var(--a11y-scale)) !important;
    line-height: 1.35 !important;
}
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content :is(p,li,a),
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(14px, .8vw) * var(--a11y-scale)) !important;
    line-height: 1.6 !important;
}


/* ==========================================================================
   SECTION 4c - Cookie banner (#cc-banner-root)
   The banner is a direct child of <body>, OUTSIDE .elementor, so the Section
   3 inherit fix cannot reach it. Its own stylesheet declares
     .cc-root{font-size:14px;line-height:1.5}   .cc-title{16px}
     .cc-btn{font-size:inherit;line-height:inherit}   <- confirmed inherit
   which is why .cc-title/.cc-body ran away (14 -> 28px) while .cc-btn and
   .cc-root stayed frozen at 14px and the banner blew out to 1425px wide at a
   375px viewport.
   Generic inherit rule FIRST, then explicit pins; every pin is calc() so the
   banner grows instead of freezing, and every pin exists both bare and
   .cc-root-scoped. .cc-title/.cc-btn ride the FORM curve with bumped
   baselines (16->18, 14->15) so the very first click is a visible jump.
   Ordering note: "... .cc-root .cc-body" is (0,3,2) and beats the generic
   "... .cc-root :is(p,...)" at (0,2,3) - the class column compares first.
   ========================================================================== */
html body[class*="pojo-a11y-resize-font-"] .cc-root :is(p,li,span,label,a){
    font-size: inherit !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-root{
    font-size: calc(14px * var(--a11y-scale)) !important;
    line-height: 1.5 !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-title,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-title{
    font-size: calc(18px * var(--a11y-scale-form)) !important;
    line-height: 1.3 !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-body,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-body{
    font-size: calc(14px * var(--a11y-scale-form)) !important;
    line-height: 1.5 !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-btn,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-btn,
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.3 !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-lang-toggle,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-lang-toggle{
    font-size: calc(12px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-modal-head h2,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-modal-head h2{
    font-size: calc(18px * var(--a11y-scale)) !important;
    line-height: 1.3 !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-modal-close,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-modal-close{
    font-size: calc(24px * var(--a11y-scale)) !important;
    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;
}
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-cookies-list th,
html body[class*="pojo-a11y-resize-font-"] .cc-cookies-list td,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-cookies-list th,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-cookies-list td{
    font-size: calc(12px * var(--a11y-scale)) !important;
}
/* Keep the fixed-position banner inside the viewport once it grows, without
   losing its own 420px cap (.cc-banner.cc-box{max-width:420px}). Measured with
   a bare calc(100vw - 16px) here the banner blew out to 1420px - min() keeps
   both bounds. */
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-banner{
    max-width: min(420px, calc(100vw - 16px)) !important;
    box-sizing: border-box !important;
}


/* ==========================================================================
   SECTION 5 - Every font-size rule from post-8.css, gated and x --a11y-scale
   Base first, then the theme's own @media blocks, in the site's source order
   (theme style.css -> responsive.css -> post-8.css -> inline DB CSS).
   Values mirror post-8.css 1:1. Elementor's em line-heights (1em / 1.4em /
   1.5em) already track their element's font-size, so only the px line-heights
   (mobile) are re-emitted.
   The swiper arrows (5.1rem desktop / 40px mobile) are intentionally left
   alone: they are <div>s, the plugin never touched them, and they are
   decorative icons rather than text.
   ========================================================================== */
/* --- 5.1 base (all widths) ---------------------------------------------- */
html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-element-2032d5c .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-element-08b29c9 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-element-0a469c6 .elementor-heading-title{
    font-size: calc(1vw * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-element-6d0ea69 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-element-2835efe .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-element-6ef655c .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-element-9d66d27 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-element-f1b5c5b .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-element-15cec47 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-element-b0433da .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-element-cfd9d4c .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-element-566e8d3 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-element-86dab5b .elementor-heading-title{
    font-size: calc(.8vw * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-element-c19f87b .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-element-6b4caff .elementor-heading-title{
    font-size: calc(1.5vw * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-element-7a007d5 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-element-e22ee61 .elementor-heading-title{
    font-size: calc(2.4vw * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-element-9f04424 .elementor-heading-title{
    font-size: calc(.7vw * var(--a11y-scale)) !important;
}
/* mobile-only widgets: post-8.css declares no desktop rule for these, so the
   base pin mirrors their measured desktop computed value instead (both are
   inside elementor-hidden-desktop containers).                              */
html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-element-882fdfe .elementor-heading-title{
    font-size: calc(32px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-element-a19d1f2 .elementor-heading-title{
    font-size: calc(18px * var(--a11y-scale)) !important;
}
/* --- 5.1a consent disclaimer width (.elementor-element-9f04424) ----------
   Elementor gives this widget a 70% width (verified: exactly 70.0% of its
   parent at both 1440 and 1024, so it is a percentage, not a px value), which
   leaves ~137px of the column unused while the enlarged text piles up: 2 lines
   at baseline, 3 at step 130/160, 4 at step 200.
   Widen it in step with the type so the text gets the space it needs, capped
   at the parent so it can never overflow.
   Measured: 70% -> 80.5% (130) -> 94.5% (160) -> 100% (200), and the text
   drops back to 2 lines at 130/160 and 3 at 200. Baseline stays 70%.        */
html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-element-9f04424{
    width: min(100%, calc(70% * var(--a11y-scale))) !important;
    max-width: 100% !important;
}

/* --- 5.1b desktop price badge (.elementor-element-323240a) ---------------
   Same failure as the mobile badge in 5.2, different element ids. The badge is
   a fixed flex ROW (flex-wrap:nowrap) of two ~50% columns, so the price is
   trapped in a 226.6px column while it needs 245.8px at step 160 and 291.4px
   at step 200 - it broke "מ-" onto its own line. The subtitle went to 3 lines
   at 160 and 4 at 200.
   The badge itself is wide enough (426.9px of inner width), so: let the two
   columns take their content width and let the row wrap, and hold the price on
   one line. At step 130 the pair still fits side by side and the layout is
   unchanged; from 160 up they stack into two centred rows.
   Measured after: price 1 line at every step, subtitle back to its designed 2
   lines, spill 0 on all four sides, and the badge is SHORTER than before at
   step 200 (167px -> 153.2px). The background here is `cover`, so unlike the
   mobile badge it already grows with the box - no background-size fix needed. */
html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-element-323240a{
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-element-323240a > .e-con{
    width: auto !important;
    flex: 0 1 auto !important;
    max-width: 100% !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-element-7a007d5 .elementor-heading-title{
    white-space: nowrap !important;
}

/* Elementor buttons ride the FORM curve - like the inputs, they start small */
html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-button{
    font-size: calc(15px * var(--a11y-scale-form)) !important;
}

/* --- 5.2 post-8.css / responsive.css @media(max-width:767px) ------------- */
@media (max-width: 767px){
    html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-element-2032d5c .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-element-6d0ea69 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-element-2835efe .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-element-6ef655c .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-element-9d66d27 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-element-f1b5c5b .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-element-08b29c9 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-element-15cec47 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-element-b0433da .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-element-cfd9d4c .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-element-566e8d3 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-element-86dab5b .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-element-0a469c6 .elementor-heading-title{
        font-size: calc(14px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-element-882fdfe .elementor-heading-title{
        font-size: calc(20px * var(--a11y-scale)) !important;
        line-height: calc(24px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-element-a19d1f2 .elementor-heading-title{
        font-size: calc(15px * var(--a11y-scale)) !important;
        line-height: calc(18px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-element-6b4caff .elementor-heading-title{
        font-size: calc(15px * var(--a11y-scale)) !important;
        line-height: calc(19px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-element-e22ee61 .elementor-heading-title{
        font-size: calc(24px * var(--a11y-scale)) !important;
    }

    /* --- mobile price badge (.elementor-element-a74b17b) ------------------
       The pink pill is a background-image with `background-size: 100%`, i.e.
       full width but AUTO height, so it keeps its intrinsic aspect ratio and
       never grows. The box does grow (measured 78px -> 155.2px at step 200),
       so the graphic stayed its original height, centred, and the text spilled
       out above and below it.
       Its two 50%-wide columns also forced "מ- 5.68M ₪" to wrap: 1 line at
       baseline -> 2 at step 160 -> 3 at step 200, splitting the price from the
       currency sign.
       Stretch the pill to the box, let the two columns take their content
       width (they wrap to two centred rows once they no longer fit side by
       side), and keep the price on one line.                                */
    html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-element-a74b17b{
        background-size: 100% 100% !important;
        align-items: center !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-element-a74b17b > .e-con{
        width: auto !important;
        flex: 0 1 auto !important;
        max-width: 100% !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-element-e22ee61 .elementor-heading-title{
        white-space: nowrap !important;
    }
    /* privacy modal, mirroring responsive.css @767 */
    html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content h2{
        font-size: calc(16px * var(--a11y-scale)) !important;
        line-height: 1.4 !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content :is(p,li,a),
    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;
        line-height: 1.65 !important;
    }
}

/* --- 5.3 DB inline CSS @media(max-width:600px) - the form breakpoint ------
   Emitted AFTER the 767px block, mirroring the source order of the site's own
   stylesheets. Overlapping bands resolve by order, not specificity.         */
@media (max-width: 600px){
    html body[class*="pojo-a11y-resize-font-"]{
        --a11y-ctl-fs : calc(14px * var(--a11y-scale-form));
        --a11y-sub-fs : calc(16px * var(--a11y-scale-form));
        --a11y-ctl-h  : calc(16px * var(--a11y-scale-form) * 1.9 + 12px);
        --a11y-lbl-fs : calc(10px * var(--a11y-scale-form));
        --a11y-tip-fs : calc(12px * var(--a11y-scale));
        --a11y-resp-fs: calc(12px * var(--a11y-scale-form));
        --a11y-box    : calc(20px * var(--a11y-scale));
    }
    html body[class*="pojo-a11y-resize-font-"] .wpcf7-form input.wpcf7-submit,
    html body[class*="pojo-a11y-resize-font-"] .checkbox-row-vertical .wpcf7-submit,
    html body[class*="pojo-a11y-resize-font-"] .cf7-vertical-layout .wpcf7-submit{
        min-width: 50% !important;
    }
    /* Below 600px .cf7-vertical-layout is display:block, so each field is full
       width (345px at a 375px viewport) and the message fits on one line at
       every step - measured 1 line at 130 and 200. No column to collide with,
       so nowrap is safe here. */
    html body[class*="pojo-a11y-resize-font-"] .wpcf7-form .wpcf7-not-valid-tip{
        white-space: nowrap !important;
    }
}


/* ==========================================================================
   SECTION 6 - Accessibility toolbar item size (explicit client request)
   --------------------------------------------------------------------------
   The plugin's own "span { font-size: NN% }" rule also fires inside its own
   toolbar, so each menu item's icon span doubles (12.8px -> 25.6px at step
   200) while the item's text label stays at 12.8px - the items end up larger
   than the page copy they are meant to control.
   Requested behaviour: the accessibility menu items should grow a bit LESS
   than the rest of the page. --a11y-scale-tb tops out at 1.35 (17.3px at step
   200) against the content curve's 1.60.
   This is the ONLY rule in this file that touches #pojo-a11y-toolbar. It is
   deliberate, not a leak: deleting this one block restores the plugin's stock
   12.8 -> 25.6px behaviour exactly.
   ========================================================================== */
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-tb)) !important;
}


/* ==========================================================================
   SECTION 7 - Colour modes: consent checkbox tick
   --------------------------------------------------------------------------
   Measured live with the checkbox forced :checked. The tick is the theme's
   ::after "check" glyph:
     default            box #fff / tick #32010c  -> visible
     high-contrast      box #000 / tick #32010c  -> INVISIBLE
     negative-contrast  box #000 / tick #32010c  -> INVISIBLE
     light-background   box #fff / tick #ffffff  -> INVISIBLE
     grayscale          box #fff / tick #32010c  -> visible
   The existing DB override tried to fix this on ::before, but the theme draws
   the tick on ::after, so it never applied.
   Gated on the pojo colour-mode classes only: with no accessibility option
   selected these rules do not exist, so RULE A still holds.
   Specificity note: the DB rule is (1,5,3) because "*:not(#pojo-a11y-toolbar)"
   contributes an ID. These selectors mirror that shape and add
   "form.wpcf7-form" to land at (1,6,5).
   ========================================================================== */
html body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) form.wpcf7-form .wpcf7-checkbox input[type="checkbox"]:checked::after,
html body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) form.wpcf7-form .wpcf7-checkbox input[type="checkbox"]:checked::after{
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    line-height: 1 !important;
}
html body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) form.wpcf7-form .wpcf7-checkbox input[type="checkbox"]:checked::after{
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    line-height: 1 !important;
}
html body.pojo-a11y-grayscale *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) form.wpcf7-form .wpcf7-checkbox input[type="checkbox"]:checked::after{
    color: #1a1a1a !important;
    -webkit-text-fill-color: #1a1a1a !important;
    line-height: 1 !important;
}
/* Pin the checked box's own background per mode as well, so the tick's
   contrast does not depend on whatever the mode did to the row behind it.
   (Measured in negative-contrast the box resolved to a transparent
   background, i.e. it was showing whatever was underneath it.) */
html body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) form.wpcf7-form .wpcf7-checkbox input[type="checkbox"]:checked,
html body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) form.wpcf7-form .wpcf7-checkbox input[type="checkbox"]:checked{
    background: #000000 !important;
    background-color: #000000 !important;
    border-color: #ffffff !important;
}
html body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) form.wpcf7-form .wpcf7-checkbox input[type="checkbox"]:checked{
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-color: #000000 !important;
}

/* Keep the box square and un-shrinkable in every colour mode, so the tick can
   never be clipped by the flex row it sits in. */
html body.pojo-a11y-high-contrast form.wpcf7-form .wpcf7-checkbox input[type="checkbox"],
html body.pojo-a11y-negative-contrast form.wpcf7-form .wpcf7-checkbox input[type="checkbox"],
html body.pojo-a11y-light-background form.wpcf7-form .wpcf7-checkbox input[type="checkbox"],
html body.pojo-a11y-grayscale form.wpcf7-form .wpcf7-checkbox input[type="checkbox"]{
    flex: 0 0 auto !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
}