/* ==========================================================================
   ACCESSIBILITY COMPATIBILITY LAYER  -  Montefiore13
   Loaded by functions.php after 'style' and 'responsive'.

   WHY THIS FILE EXISTS
   ---------------------------------------------------------------------------
   The One Click Accessibility (Pojo) plugin adds a body class and emits two
   font-size percentages, nothing else:

     body...NN, p:not(.pojo-a11y-toolbar-title), li:not(.pojo-a11y-toolbar-item),
     label, input, select, textarea, legend, code, pre, dd, dt, span, blockquote
                                                   { font-size: NN%      !important }
     body...NN h1..h6, h1 span .. h6 span          { font-size: NN*1.33% !important }

   This site is built almost entirely in vw, and a percentage resolves against
   the PARENT, never against vw. Measured on the live site with this file
   removed from the DOM, at 375px, none -> step 200:

     RUNAWAYS (percentages compounding through nested markup)
       .wpcf7-list-item-label   11.25px -> 2048px  (p > span > span > span > label > span)
       .price-text              15      ->  512
       .wpcf7-not-valid-tip     14      ->  256
       .field-col input         16      ->  256
       .nis-icon                22.5    ->  128
       .cc-required-badge       11      ->   64
       bare <p> on single.php   16      ->   64

     FREEZES (elements the plugin's selector list cannot reach)
       .wpcf7-response-output   12 -> 12   a <div>
       icon-list <a>            14 -> 14   an <a>
       .cc-root / .cc-btn       14 -> 14   a <div> / a <button>
       .cc-lang-toggle          12 -> 12
       .cc-cat-desc             13 -> 13
       .cc-cookies-list th      12 -> 12
       .cc-modal-close          24 -> 24

     HORIZONTAL OVERFLOW
       documentElement.scrollWidth - innerWidth: -15 -> 46 (step 160) -> 589 (200)

   THE RULE THIS FILE OBEYS
   ---------------------------------------------------------------------------
   Every rule is gated. Nothing is ungated except :root and the body.pojo-*
   variable declarations, which only set custom properties and therefore paint
   nothing on their own. Two gates are in use:

     Sections 1-7   body[class*="pojo-a11y-resize-font-"][class]   (font resize)
     Section 8      body.pojo-a11y-light-background,
                    body.pojo-a11y-high-contrast,
                    body.pojo-a11y-negative-contrast,
                    body.pojo-a11y-grayscale                (contrast modes)

   With nothing selected, and again after Reset, this file contributes ZERO
   computed differences at 375 / 900 / 1440 on every page.

   CONTENT ROOTS
   ---------------------------------------------------------------------------
   Confirmed by walking document.body.children on every URL in the sitemap:

     home (page-id 2)      body > .elementor.elementor-2
     404 / search.php      body > .gold-card-banner  (> .container > .content-wraper)
                           body > .container > .breadcrums
                           body > .description-section (> .container > .text-wraper)
     single.php/index.php  body > <p>            NO WRAPPER AT ALL

   The third shape is the awkward one: single.php and index.php print
   the_content() straight into <body>, so there is no wrapper to scope to and
   the content is a SIBLING of #pojo-a11y-toolbar. Section 3 therefore has a
   second block written with the child combinator (body > p), which reaches
   bare content and cannot reach anything inside the toolbar.

   SPECIFICITY BUDGET
   ---------------------------------------------------------------------------
   The site carries no handwritten a11y overrides - a walk of every accessible
   stylesheet plus every inline <style> found 0 rules matching
   pojo-a11y-resize-font-\d+ outside the plugin's own sheet - so this file only
   has to out-specify the plugin.

   The plugin's own rules are NOT all the same weight, and this is the trap
   that matters. Two of its selectors carry a :not(), and :not() contributes
   its argument's specificity:

     body...NN span                        (0,1,2)
     body...NN h1 span                     (0,1,3)
     body...NN p:not(.pojo-a11y-toolbar-title)   (0,2,2)   <- the heavy one
     body...NN li:not(.pojo-a11y-toolbar-item)   (0,2,2)   <- the heavy one

   So anything that has to beat the plugin on <p> or <li> needs (0,2,3) or
   better - NOT (0,1,x). Three tiers are used here, and every rule in the file
   sits in exactly one of them:

     tier 1  Sections 3 + 6 generic
             html body[attr][class] :where(.elementor, ...) p        (0,2,3)
             beats the plugin's (0,2,2)

     tier 2  every explicit pin
             html body[attr][class] .some-class                      (0,3,2)
             beats tier 1, because the class column is compared first

   The mechanism is one extra attribute unit on the gate, [class], which is
   always true on a body that already carries a class - it is there purely to
   buy a specificity point. Tier 1 then wraps its content root in :where(),
   which contributes ZERO specificity, while tier 2 names a real class and
   picks up the point. That single convention - "generic rules use :where(),
   pins name a class" - keeps the two tiers one full class unit apart and
   removes the whole category of "my own inherit rule beat my own pin" bugs.
   ========================================================================== */


/* ==========================================================================
   SECTION 1 - STEP -> MULTIPLIERS (three curves)

   Three curves, because three groups start from very different sizes.

     --a11y-scale          text, headings, lists, the ENTIRE cookie banner
                           step 1 +15%  ...  max +60%
     --a11y-scale-form     inputs, submit, response output, validation tips,
                           checkbox + label. These start from the smallest
                           sizes on the page (5.4px-16px) and need a bigger
                           first jump to read as "bigger".
                                               step 1 +30%  ...  max +75%
                           NOT the cookie banner - it was on this curve and
                           the first click was far too big. See Section 4c.
     --a11y-scale-toolbar  the accessibility toolbar's own menu items.
                           Deliberately gentler than the rest of the page, as
                           requested: plugin-only these go 12.8 -> 25.6px and
                           wrap inside the 180px panel.
                                               step 1 +10%  ...  max +35%
   ========================================================================== */
:root {
    --a11y-scale: 1;
    --a11y-scale-form: 1;
    --a11y-scale-toolbar: 1;
}
body.pojo-a11y-resize-font-130 { --a11y-scale: 1.15; --a11y-scale-form: 1.30; --a11y-scale-toolbar: 1.10; }
body.pojo-a11y-resize-font-140 { --a11y-scale: 1.22; --a11y-scale-form: 1.40; --a11y-scale-toolbar: 1.14; }
body.pojo-a11y-resize-font-150 { --a11y-scale: 1.28; --a11y-scale-form: 1.48; --a11y-scale-toolbar: 1.18; }
body.pojo-a11y-resize-font-160 { --a11y-scale: 1.35; --a11y-scale-form: 1.55; --a11y-scale-toolbar: 1.22; }
body.pojo-a11y-resize-font-170 { --a11y-scale: 1.42; --a11y-scale-form: 1.62; --a11y-scale-toolbar: 1.26; }
body.pojo-a11y-resize-font-180 { --a11y-scale: 1.48; --a11y-scale-form: 1.68; --a11y-scale-toolbar: 1.29; }
body.pojo-a11y-resize-font-190 { --a11y-scale: 1.54; --a11y-scale-form: 1.72; --a11y-scale-toolbar: 1.32; }
body.pojo-a11y-resize-font-200 { --a11y-scale: 1.60; --a11y-scale-form: 1.75; --a11y-scale-toolbar: 1.35; }


/* ==========================================================================
   SECTION 2 - BASE PIN

   The measured <body> baseline is 16px at 375, 900 and 1440 on every page, so
   16px is the real starting value and not a guess. calc(), never a flat px: a
   flat px would freeze everything that inherits from <body>, including the
   toolbar popup, which the plugin pins with its own
   #pojo-a11y-toolbar { font-size: 16px !important }.

   line-height is deliberately NOT set here. Bootstrap gives <body> a UNITLESS
   1.5, which inherits as a ratio and therefore already grows with the font.
   ========================================================================== */
html body[class*="pojo-a11y-resize-font-"][class] {
    font-size: calc(16px * var(--a11y-scale)) !important;
}


/* ==========================================================================
   SECTION 3 - KILL THE COMPOUNDING PERCENTAGES

   The element list mirrors the plugin's own selector list. Elements the plugin
   never touches (a, div, button, img) are deliberately absent: they already
   inherit correctly, and forcing `inherit` on them would flatten sizes the
   design sets on purpose - the footer icon-list <a> is 0.7vw by design.

   input / select / textarea are also absent - Section 4 owns them.

   `span` is in the list on purpose. It is what fixes the plugin's
   `h1 span .. h6 span { NN*1.33% }` rule stacking a second multiplier on top
   of a heading Section 5 has already scaled: the span inherits the heading's
   size instead.

   BLOCK 1 covers the wrapper-based roots via :where(), which costs no
   specificity (see the budget in the file header).
   BLOCK 2 covers single.php / index.php, where the_content() is printed
   straight into <body>. The child combinator is what keeps this off the
   toolbar - #pojo-a11y-toolbar is a <nav> sibling, so its <p class=
   "pojo-a11y-toolbar-title"> and <li class="pojo-a11y-toolbar-item"> are
   never `body > p` or `body > li`.
   ========================================================================== */

/* -- BLOCK 1: wrapper roots --------------------------------------------- */
html body[class*="pojo-a11y-resize-font-"][class] :where(.elementor, .description-section, .gold-card-banner, .breadcrums) p,
html body[class*="pojo-a11y-resize-font-"][class] :where(.elementor, .description-section, .gold-card-banner, .breadcrums) li,
html body[class*="pojo-a11y-resize-font-"][class] :where(.elementor, .description-section, .gold-card-banner, .breadcrums) span,
html body[class*="pojo-a11y-resize-font-"][class] :where(.elementor, .description-section, .gold-card-banner, .breadcrums) label,
html body[class*="pojo-a11y-resize-font-"][class] :where(.elementor, .description-section, .gold-card-banner, .breadcrums) blockquote,
html body[class*="pojo-a11y-resize-font-"][class] :where(.elementor, .description-section, .gold-card-banner, .breadcrums) legend,
html body[class*="pojo-a11y-resize-font-"][class] :where(.elementor, .description-section, .gold-card-banner, .breadcrums) code,
html body[class*="pojo-a11y-resize-font-"][class] :where(.elementor, .description-section, .gold-card-banner, .breadcrums) pre,
html body[class*="pojo-a11y-resize-font-"][class] :where(.elementor, .description-section, .gold-card-banner, .breadcrums) dd,
html body[class*="pojo-a11y-resize-font-"][class] :where(.elementor, .description-section, .gold-card-banner, .breadcrums) dt {
    font-size: inherit !important;
}

/* -- BLOCK 2: bare the_content() straight inside <body> ------------------ */
html body[class*="pojo-a11y-resize-font-"][class] > p,
html body[class*="pojo-a11y-resize-font-"][class] > p span,
html body[class*="pojo-a11y-resize-font-"][class] > blockquote,
html body[class*="pojo-a11y-resize-font-"][class] > blockquote p,
html body[class*="pojo-a11y-resize-font-"][class] > ul li,
html body[class*="pojo-a11y-resize-font-"][class] > ol li,
html body[class*="pojo-a11y-resize-font-"][class] > dl dd,
html body[class*="pojo-a11y-resize-font-"][class] > dl dt,
html body[class*="pojo-a11y-resize-font-"][class] > pre,
html body[class*="pojo-a11y-resize-font-"][class] > figure figcaption,
html body[class*="pojo-a11y-resize-font-"][class] > table td,
html body[class*="pojo-a11y-resize-font-"][class] > table th {
    font-size: inherit !important;
}


/* ==========================================================================
   SECTION 4 - FORM CONTROLS + MESSAGES   (--a11y-scale-form)

   Values mirror assets/css/style.css 1:1. The mobile mirror is Section 4e.

   READABILITY FLOOR
   ---------------------------------------------------------------------------
   The form is sized in vw with NO tablet override - style.css uses vw at base
   and responsive.css only switches to px at 767px - so the 768-1024px band
   collapses. Measured at 900px with accessibility OFF:

     .wpcf7-list-item-label   5.4px      .simple-text p           5.4px
     .wpcf7-not-valid-tip     6.3px      .wpcf7-response-output   8.1px
     .field-col input         9.0px      .main-form-title         9.0px

   calc(max(<floor>, <themeValue>) * scale) keeps all of them legible at every
   step. max() never lowers a value, and the whole thing is inside the gate, so
   the default render is untouched.

   Units are px and vw only. Never em - CF7 nests p > span > span and em would
   compound exactly like the percentages this file exists to remove. Never rem
   either: Section 2 does not move the root, so rem would not scale at all.
   ========================================================================== */

/* -- text inputs / selects (theme: 1vw, height 2.3vw) -------------------- */
html body[class*="pojo-a11y-resize-font-"][class] .field-col input,
html body[class*="pojo-a11y-resize-font-"][class] .field-col label .wpcf7-form-control-wrap,
html body[class*="pojo-a11y-resize-font-"][class] .wpcf7-select,
html body[class*="pojo-a11y-resize-font-"][class] input.wpcf7-text,
html body[class*="pojo-a11y-resize-font-"][class] input.wpcf7-email,
html body[class*="pojo-a11y-resize-font-"][class] input.wpcf7-tel,
html body[class*="pojo-a11y-resize-font-"][class] textarea.wpcf7-textarea {
    font-size: calc(max(15px, 1vw) * var(--a11y-scale-form)) !important;
    line-height: 1.4 !important;
    height: auto !important;
    padding-top: 0.6vh !important;
    padding-bottom: 0.6vh !important;
    max-width: 100% !important;
}

/* SHRINK GUARD. style.css gives `.field-col label input` a flat 22px, which
   beats its own `.field-col input { 1vw }`. Letting it share the 15px/1vw
   baseline above would render it SMALLER than at rest on every viewport. */
html body[class*="pojo-a11y-resize-font-"][class] .field-col label input {
    font-size: calc(22px * var(--a11y-scale-form)) !important;
}

/* -- submit button (theme: 1.6vw, height 2.3vw) -------------------------- */
html body[class*="pojo-a11y-resize-font-"][class] .submit-btn input,
html body[class*="pojo-a11y-resize-font-"][class] input.wpcf7-submit {
    font-size: calc(max(16px, 1.6vw) * var(--a11y-scale-form)) !important;
    line-height: 1.3 !important;
    height: auto !important;
    padding-top: 0.7vh !important;
    padding-bottom: 0.7vh !important;
    max-width: 100% !important;
    white-space: normal !important;
}

/* -- the arrow.
      It is position:absolute; top:50% inside .submit-btn > p. style.css
      already sets that <p> to height:auto; restating it keeps the arrow on the
      button's own centre line if a sibling column grows the row, and scales
      the image with the button it sits on. ------------------------------- */
html body[class*="pojo-a11y-resize-font-"][class] .submit-btn > p {
    height: auto !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .submit-btn img {
    width: calc(max(14px, 1vw) * var(--a11y-scale-form)) !important;
    height: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* -- CF7 response output. A <div>, so the plugin can never reach it:
      measured frozen at 12px (375) / 8.1px (900) / 12.96px (1440) at EVERY
      step. line-height is forced unitless because style.css writes it as
      1.8vh, which does not grow with the font. --------------------------- */
html body[class*="pojo-a11y-resize-font-"][class] .wpcf7-response-output {
    font-size: calc(max(14px, 0.9vw) * var(--a11y-scale-form)) !important;
    line-height: 1.5 !important;
    height: auto !important;
    max-width: 100% !important;
}

/* -- CF7 validation tip.
      position stays RELATIVE, which is what style.css already uses and what
      keeps the tip in flow. It is deliberately not made static: the tip lives
      inside .wpcf7-form-control-wrap, and that span is narrow.
      line-height is forced unitless - style.css writes 1.5vh. ------------ */
html body[class*="pojo-a11y-resize-font-"][class] .wpcf7-not-valid-tip {
    font-size: calc(max(14px, 0.7vw) * var(--a11y-scale-form)) !important;
    line-height: 1.45 !important;
    position: relative !important;
    display: block !important;
    margin-top: 4px !important;
    margin-bottom: 4px !important;
    white-space: normal !important;
    max-width: 100% !important;
}

/* -- consent checkbox row (theme: 0.6vw label, 1.3vw box, 1vw tick) ------ */
html body[class*="pojo-a11y-resize-font-"][class] .wpcf7-list-item-label,
html body[class*="pojo-a11y-resize-font-"][class] .simple-text p {
    font-size: calc(max(13px, 0.6vw) * var(--a11y-scale-form)) !important;
    line-height: 1.55 !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .wpcf7-checkbox input[type="checkbox"] {
    font-size: calc(max(13px, 0.6vw) * var(--a11y-scale-form)) !important;
    min-width: calc(max(18px, 1.3vw) * var(--a11y-scale-form)) !important;
    width: calc(max(18px, 1.3vw) * var(--a11y-scale-form)) !important;
    height: calc(max(18px, 1.3vw) * var(--a11y-scale-form)) !important;
    top: 0 !important;
    margin-top: 0 !important;
}
/* The tick is centred with 50%/50%/translate at BOTH breakpoints. Section 4e
   restates this because responsive.css unsets top, left and transform. */
html body[class*="pojo-a11y-resize-font-"][class] .wpcf7-checkbox input[type="checkbox"]:checked::before {
    font-size: calc(max(14px, 1vw) * var(--a11y-scale-form)) !important;
    line-height: 1 !important;
    width: auto !important;
    height: auto !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
}
/* The box is position:absolute at right:0, so the label needs a gutter wide
   enough for the grown box. The theme value is a flat 1.8vw. */
html body[class*="pojo-a11y-resize-font-"][class] .wpcf7-checkbox label {
    align-items: flex-start !important;
    padding-right: calc(max(18px, 1.3vw) * var(--a11y-scale-form) + 0.5vw) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .checkbox-group .wpcf7-not-valid-tip {
    padding-right: calc(max(18px, 1.3vw) * var(--a11y-scale-form) + 0.5vw) !important;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
}


/* ==========================================================================
   SECTION 4b - ELEMENTS CARRYING AN INTENTIONAL SIZE OF THEIR OWN

   Section 3 flattens every <span> inside a content root. These spans are sized
   on purpose, so they have to be restated.
   ========================================================================== */
html body[class*="pojo-a11y-resize-font-"][class] .price-text {
    font-size: calc(max(12px, 0.7vw) * var(--a11y-scale)) !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .nis-icon {
    font-size: calc(max(14px, 1vw) * var(--a11y-scale)) !important;
}

/* Form furniture that only appears in some states - the success block is
   written by assets/js/custom.js on wpcf7mailsent, and .success-title is an
   <h3>, so without this the plugin's h3 rule takes it to 23 -> 61px. */
html body[class*="pojo-a11y-resize-font-"][class] .cf7-success-message .success-title,
html body[class*="pojo-a11y-resize-font-"][class] h3.success-title {
    font-size: calc(23px * var(--a11y-scale)) !important;
    line-height: 1.35 !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .contact-form .form-heading {
    font-size: calc(30px * var(--a11y-scale)) !important;
    line-height: 1.2 !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .field-col label > span:first-child {
    font-size: calc(25px * var(--a11y-scale-form)) !important;
    line-height: 1.25 !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .main-form-title {
    font-size: calc(max(16px, 1vw) * var(--a11y-scale)) !important;
    line-height: 1.4 !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .pv-links > span,
html body[class*="pojo-a11y-resize-font-"][class] .pv-link {
    font-size: calc(max(13px, 0.8vw) * var(--a11y-scale)) !important;
    line-height: 1.4 !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .global-btn {
    font-size: calc(24px * var(--a11y-scale-form)) !important;
    line-height: 1.3 !important;
    height: auto !important;
}

/* -- PRIVACY / ACCESSIBILITY MODALS -------------------------------------
   Both come from shortcodes in functions.php and share the same markup:
       #privacyModal.privacy-wrapper       > .privacy-content > h2 / h3 / p
       #accessibilityModal.privacy-wrapper > .privacy-content > h2 / h3 / p

   TWO SEPARATE FAILURES
   1. :where() HAS ZERO SPECIFICITY. style.css sizes the body copy with
        .privacy-wrapper .privacy-content :where(p, li, a, div) { 0.8vw }
      which is only (0,2,0) - :where() contributes nothing, not even an element
      unit - so the plugin's own `body...NN p { NN% !important }` beats it and
      the legal text compounds. Restating it explicitly and !important fixes
      that; it is also why the p/li/a/div list below is spelled out rather than
      copied as a :where().
   2. h2 / h3 in style.css carry no !important either, so the plugin's
      `body...NN h2 { 266% !important }` beats them and runs off the already
      scaled <body>.

   Line-heights are forced UNITLESS: style.css writes 2.6vh / 2.4vh, which do
   not grow with the font, so scaled text in a scrolling legal modal would
   collide line-to-line.

   `div` appears at base but style.css DROPS it from the 767px rule, which
   would leave a nested <div> at the 0.8vw base value - about 3px on a phone.
   Section 4e matches it to <p>, which is the obvious intent.

   NOTE: both modals are currently EMPTY on the live site - the ACF fields
   privacy_content and accessibility_statement have no content. These rules are
   here so the modals are correct the moment that copy is added. ----------- */
html body[class*="pojo-a11y-resize-font-"][class] .privacy-wrapper .privacy-content h2 {
    font-size: calc(max(20px, 1.4vw) * var(--a11y-scale)) !important;
    line-height: 1.3 !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .privacy-wrapper .privacy-content h3 {
    font-size: calc(max(17px, 1.1vw) * var(--a11y-scale)) !important;
    line-height: 1.35 !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .privacy-wrapper .privacy-content p,
html body[class*="pojo-a11y-resize-font-"][class] .privacy-wrapper .privacy-content li,
html body[class*="pojo-a11y-resize-font-"][class] .privacy-wrapper .privacy-content a,
html body[class*="pojo-a11y-resize-font-"][class] .privacy-wrapper .privacy-content div,
html body[class*="pojo-a11y-resize-font-"][class] .privacy-wrapper .privacy-content strong,
html body[class*="pojo-a11y-resize-font-"][class] .privacy-wrapper .privacy-content span {
    font-size: calc(max(14px, 0.8vw) * var(--a11y-scale)) !important;
    line-height: 1.7 !important;
}


/* ==========================================================================
   SECTION 4c - COOKIE BANNER  (#cc-banner-root, injected by
   https://cookie.webzapp.click/public/cookie-consent.js)

   The banner is a CHILD OF <body>, outside every content root, so it shows
   both failure shapes at once. Measured plugin-only, none -> step 200:

     RUNAWAY   .cc-title  (an h2)  16 -> 37.24     .cc-body   (a p)  14 -> 28
               .cc-modal-head h2   18 -> 85.12     .cc-modal-body p 16 -> 64
               .cc-required-badge  11 -> 64        .cc-cat-name     16 -> 32
     FROZEN    .cc-root 14 -> 14   .cc-btn 14 -> 14   .cc-lang-toggle 12 -> 12
               .cc-cat-desc 13 -> 13   .cc-cookies-list th 12 -> 12
               .cc-modal-close 24 -> 24

   .cc-btn's own rule is `font: inherit`, and it inherits from .cc-root, which
   the plugin cannot reach - that is the whole reason the buttons freeze.

   Pinning these to a FLAT px would stop the runaway and leave the freeze in
   place: the user would click and nothing would grow. EVERY pin below is
   calc(<px> * var(--a11y-scale...)).

   CURVE: the whole banner is on --a11y-scale, the same text curve as the rest
   of the page, and every pin uses its true MEASURED baseline.

   .cc-title, .cc-body and .cc-btn were originally on the form curve with
   bumped baselines (16->18, 14->15) to make the first click a visible jump.
   That overshot badly - it made the first click land at 23.4px on a 16px
   title, a 46% jump, when the same click moves body text 15%. It also made the
   banner inconsistent with itself, since the other nine pins here were already
   on --a11y-scale. The bump is removed: the first click now moves the title
   16 -> 18.4 and the body and buttons 14 -> 16.1, in step with everything else.

   The settings modal (.cc-modal-wrap) is appended to <body> OUTSIDE .cc-root,
   so .cc-modal is listed as its own root alongside .cc-root throughout.
   ========================================================================== */

/* Generic inherit first, so anything not pinned below still follows its root
   instead of compounding. */
html body[class*="pojo-a11y-resize-font-"][class] :where(.cc-root, .cc-modal) p,
html body[class*="pojo-a11y-resize-font-"][class] :where(.cc-root, .cc-modal) li,
html body[class*="pojo-a11y-resize-font-"][class] :where(.cc-root, .cc-modal) span,
html body[class*="pojo-a11y-resize-font-"][class] :where(.cc-root, .cc-modal) label,
html body[class*="pojo-a11y-resize-font-"][class] :where(.cc-root, .cc-modal) a {
    font-size: inherit !important;
}

html body[class*="pojo-a11y-resize-font-"][class] .cc-root {
    font-size: calc(14px * var(--a11y-scale)) !important;
    line-height: 1.5 !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .cc-modal {
    font-size: calc(16px * var(--a11y-scale)) !important;
    line-height: 1.5 !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .cc-title {
    font-size: calc(16px * var(--a11y-scale)) !important;
    line-height: 1.3 !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .cc-body {
    font-size: calc(14px * var(--a11y-scale)) !important;
    line-height: 1.5 !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .cc-btn {
    font-size: calc(14px * var(--a11y-scale)) !important;
    line-height: 1.3 !important;
    height: auto !important;
    white-space: normal !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .cc-lang-toggle {
    font-size: calc(12px * var(--a11y-scale)) !important;
    line-height: 1.3 !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .cc-modal-head h2 {
    font-size: calc(18px * var(--a11y-scale)) !important;
    line-height: 1.3 !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .cc-modal-close {
    font-size: calc(24px * var(--a11y-scale)) !important;
    line-height: 1 !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .cc-modal-body > p {
    font-size: calc(16px * var(--a11y-scale)) !important;
    line-height: 1.5 !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .cc-cat-name {
    font-size: calc(16px * var(--a11y-scale)) !important;
    line-height: 1.4 !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .cc-cat-desc {
    font-size: calc(13px * var(--a11y-scale)) !important;
    line-height: 1.5 !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .cc-required-badge {
    font-size: calc(11px * var(--a11y-scale)) !important;
    line-height: 1.5 !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .cc-cookies-list,
html body[class*="pojo-a11y-resize-font-"][class] .cc-cookies-list summary,
html body[class*="pojo-a11y-resize-font-"][class] .cc-cookies-list th,
html body[class*="pojo-a11y-resize-font-"][class] .cc-cookies-list td {
    font-size: calc(12px * var(--a11y-scale)) !important;
    line-height: 1.5 !important;
}


/* ==========================================================================
   SECTION 4d - VALIDATION TIP POSITIONING

   Audited at 375 and 1440, at steps none / 130 / 160 / 200, by adding
   wpcf7-not-valid to the control and injecting <span class="wpcf7-not-valid-tip">
   where CF7 puts it (inside .wpcf7-form-control-wrap, after the control).

   Every tip on this site is `position: relative` and in flow. There is no
   absolutely positioned tip and therefore no fixed px anchor to repair, so
   nothing here needs to move a tip. Measured overlap stayed negative
   (clearance) and spill stayed <= 0 at every step, at both widths.

   ONE REAL DEFECT, on mobile only. responsive.css pulls the tip UP with

       @media(max-width:767px) .wpcf7-not-valid-tip { margin: -11px 0 2px 0 }

   -11px is tuned for a 14px/20px tip. It already leaves only 2px of clearance
   at 375px with accessibility switched OFF, and once the tip grows the message
   is drawn over the field above it. Section 4 replaces the margin with a
   symmetric 4px, and Section 4e restates that inside the same media block
   responsive.css used, so it lands after the rule it corrects.
   ========================================================================== */


/* ==========================================================================
   SECTION 4e - MOBILE MIRROR  (max-width: 767px)

   Mirrors the px values responsive.css switches to at this breakpoint, in the
   theme's own source order. Missing a breakpoint here would silently leave a
   mobile size frozen at its base vw value.
   ========================================================================== */
@media (max-width: 767px) {

    html body[class*="pojo-a11y-resize-font-"][class] .field-col input,
    html body[class*="pojo-a11y-resize-font-"][class] .field-col label input,
    html body[class*="pojo-a11y-resize-font-"][class] .field-col label .wpcf7-form-control-wrap,
    html body[class*="pojo-a11y-resize-font-"][class] .wpcf7-select,
    html body[class*="pojo-a11y-resize-font-"][class] input.wpcf7-text,
    html body[class*="pojo-a11y-resize-font-"][class] input.wpcf7-email,
    html body[class*="pojo-a11y-resize-font-"][class] input.wpcf7-tel,
    html body[class*="pojo-a11y-resize-font-"][class] textarea.wpcf7-textarea {
        font-size: calc(16px * var(--a11y-scale-form)) !important;
        line-height: 1.4 !important;
        height: auto !important;
        padding: 8px 16px !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class] .submit-btn input,
    html body[class*="pojo-a11y-resize-font-"][class] input.wpcf7-submit {
        font-size: calc(22px * var(--a11y-scale-form)) !important;
        line-height: 1.2 !important;
        height: auto !important;
        padding: 6px 16px !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class] .submit-btn img {
        width: calc(18px * var(--a11y-scale-form)) !important;
        height: auto !important;
    }
    /* responsive.css uses 12px here; 13px is the readability floor, and it
       only applies once a size has been chosen. */
    html body[class*="pojo-a11y-resize-font-"][class] .wpcf7-response-output {
        font-size: calc(13px * var(--a11y-scale-form)) !important;
        line-height: 1.5 !important;
    }
    /* Replaces responsive.css `margin: -11px 0 2px 0` - see Section 4d. */
    html body[class*="pojo-a11y-resize-font-"][class] .wpcf7-not-valid-tip {
        font-size: calc(14px * var(--a11y-scale-form)) !important;
        line-height: 1.45 !important;
        margin: 4px 0 4px 0 !important;
    }
    /* Theme: `.wpcf7-checkbox .wpcf7-list-item-label { 3vw }` wins over
       `.form-order form :where(p, .wpcf7-list-item-label) { 13px }`, so 3vw is
       the real label size and 13px the real size of the other form <p>s. */
    html body[class*="pojo-a11y-resize-font-"][class] .wpcf7-list-item-label,
    html body[class*="pojo-a11y-resize-font-"][class] .simple-text p {
        font-size: calc(max(13px, 3vw) * var(--a11y-scale-form)) !important;
        line-height: 1.55 !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class] .form-order form p {
        font-size: calc(13px * var(--a11y-scale-form)) !important;
        line-height: 1.55 !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class] .wpcf7-checkbox input[type="checkbox"] {
        font-size: calc(max(13px, 3vw) * var(--a11y-scale-form)) !important;
        min-width: calc(22px * var(--a11y-scale-form)) !important;
        width: calc(22px * var(--a11y-scale-form)) !important;
        height: calc(22px * var(--a11y-scale-form)) !important;
        top: 0 !important;
        margin-top: 2px !important;
    }
    /* responsive.css unsets top, left and transform and gives the tick a flat
       22x22 box with line-height 20px. Once the checkbox itself scales, that
       stops being centred, so the 50%/50%/translate centring from Section 4 is
       restated here. */
    html body[class*="pojo-a11y-resize-font-"][class] .wpcf7-checkbox input[type="checkbox"]:checked::before {
        font-size: calc(18px * var(--a11y-scale-form)) !important;
        line-height: 1 !important;
        width: auto !important;
        height: auto !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        text-align: center !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class] .wpcf7-checkbox label {
        padding-right: calc(22px * var(--a11y-scale-form) + 8px) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class] .checkbox-group .wpcf7-not-valid-tip {
        padding-right: calc(22px * var(--a11y-scale-form) + 6px) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class] .main-form-title {
        font-size: calc(18px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class] .pv-link,
    html body[class*="pojo-a11y-resize-font-"][class] .pv-links > span {
        font-size: calc(14px * var(--a11y-scale)) !important;
    }

    /* Section 4b's modals: responsive.css switches to px here
       (h2 18 / h3 16 / body copy 12). Emitted in this block so it lands after
       the base rules it is meant to override. */
    html body[class*="pojo-a11y-resize-font-"][class] .privacy-wrapper .privacy-content h2 {
        font-size: calc(18px * var(--a11y-scale)) !important;
        line-height: 1.3 !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class] .privacy-wrapper .privacy-content h3 {
        font-size: calc(16px * var(--a11y-scale)) !important;
        line-height: 1.35 !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class] .privacy-wrapper .privacy-content p,
    html body[class*="pojo-a11y-resize-font-"][class] .privacy-wrapper .privacy-content li,
    html body[class*="pojo-a11y-resize-font-"][class] .privacy-wrapper .privacy-content a,
    html body[class*="pojo-a11y-resize-font-"][class] .privacy-wrapper .privacy-content div,
    html body[class*="pojo-a11y-resize-font-"][class] .privacy-wrapper .privacy-content strong,
    html body[class*="pojo-a11y-resize-font-"][class] .privacy-wrapper .privacy-content span {
        font-size: calc(12px * var(--a11y-scale)) !important;
        line-height: 1.7 !important;
    }
}


/* ==========================================================================
   SECTION 5 - ELEMENTOR PER-ELEMENT SIZES  (post-2.css)

   Every font-size declaration in
   /wp-content/uploads/sites/81/elementor/css/post-2.css - 40 declarations in
   26 value groups - wrapped in the gate and multiplied by --a11y-scale.
   post-12.css (the Elementor kit) declares no font-size at all, and no
   post-*.css loads on any non-Elementor page.

   Section 3 sets .elementor p and .elementor span to inherit, which would
   flatten all of these, so every one has to be restated.

   MEDIA BLOCKS ARE EMITTED IN post-2.css'S OWN SOURCE ORDER:
     base -> min-width:2400px -> max-width:1366px -> max-width:1200px
          -> max-width:767px
   Overlapping bands resolve by order, not by which looks more specific, so
   reordering them would change sizes at rest.

   READABILITY FLOOR: between 768px and 1366px there is no breakpoint, and the
   small groups collapse - at 900px, 0.7vw is 6.3px and 0.8vw is 7.2px with
   accessibility OFF. Every group whose value can fall below 12px in the
   768-1440 band carries a 12px floor. The four largest groups (1.45vw and up)
   are left at their exact theme value.

   Line-heights are NOT touched: post-2.css writes them unitless or in em, both
   of which already grow with the font.
   ========================================================================== */

/* -- base ---------------------------------------------------------------- */
html body[class*="pojo-a11y-resize-font-"][class] .elementor-element.elementor-element-cf027a6 .elementor-icon-list-item > .elementor-icon-list-text,
html body[class*="pojo-a11y-resize-font-"][class] .elementor-element.elementor-element-cf027a6 .elementor-icon-list-item > a {
    font-size: calc(max(12px, 0.7vw) * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .elementor-element.elementor-element-bc9bb38 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"][class] .elementor-element.elementor-element-9b763a4 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"][class] .elementor-element.elementor-element-54ceb68 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"][class] .elementor-element.elementor-element-227dc21 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"][class] .elementor-element.elementor-element-eee9dbb .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"][class] .elementor-element.elementor-element-2726378 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"][class] .elementor-element.elementor-element-f10258f .elementor-heading-title {
    font-size: calc(max(12px, 0.8vw) * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .elementor-element.elementor-element-3f1b85e .elementor-heading-title {
    font-size: calc(max(12px, 1.07vw) * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .elementor-element.elementor-element-db22b89 .elementor-heading-title {
    font-size: calc(max(12px, 1.15vw) * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .elementor-element.elementor-element-7da1c89 .elementor-heading-title {
    font-size: calc(max(12px, 1.35vw) * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .elementor-element.elementor-element-1e0a7ab .elementor-heading-title {
    font-size: calc(1.45vw * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .elementor-element.elementor-element-0577c16 .elementor-heading-title {
    font-size: calc(2.4vw * var(--a11y-scale)) !important;
}

/* -- @media(min-width:2400px)  [post-2.css block 2] ---------------------- */
@media (min-width: 2400px) {
    html body[class*="pojo-a11y-resize-font-"][class] .elementor-element.elementor-element-bc9bb38 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"][class] .elementor-element.elementor-element-9b763a4 .elementor-heading-title {
        font-size: calc(1.1vw * var(--a11y-scale)) !important;
    }
}

/* -- @media(max-width:1366px)  [post-2.css block 3] ---------------------- */
@media (max-width: 1366px) {
    html body[class*="pojo-a11y-resize-font-"][class] .elementor-element.elementor-element-bc9bb38 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"][class] .elementor-element.elementor-element-9b763a4 .elementor-heading-title {
        font-size: calc(max(12px, 1.05vw) * var(--a11y-scale)) !important;
    }
}

/* -- @media(max-width:1200px)  [post-2.css block 4] ---------------------- */
@media (max-width: 1200px) {
    html body[class*="pojo-a11y-resize-font-"][class] .elementor-element.elementor-element-0577c16 .elementor-heading-title {
        font-size: calc(2vw * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class] .elementor-element.elementor-element-7da1c89 .elementor-heading-title {
        font-size: calc(max(12px, 1.1vw) * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class] .elementor-element.elementor-element-3f1b85e .elementor-heading-title {
        font-size: calc(max(12px, 1vw) * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class] .elementor-element.elementor-element-1e0a7ab .elementor-heading-title {
        font-size: calc(max(12px, 1.25vw) * var(--a11y-scale)) !important;
    }
}

/* -- @media(max-width:767px)  [post-2.css block 5] -----------------------
   Every value here is the mobile px/vw override. Emitting only the base vw
   rule would silently destroy all of these - this is the breakpoint the
   headings actually render at on a phone. */
@media (max-width: 767px) {
    html body[class*="pojo-a11y-resize-font-"][class] .elementor-element.elementor-element-cf027a6 .elementor-icon-list-item > .elementor-icon-list-text,
    html body[class*="pojo-a11y-resize-font-"][class] .elementor-element.elementor-element-cf027a6 .elementor-icon-list-item > a {
        font-size: calc(14px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class] .elementor-element.elementor-element-9b763a4 .elementor-heading-title {
        font-size: calc(2.6vw * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class] .elementor-element.elementor-element-bc9bb38 .elementor-heading-title {
        font-size: calc(4vw * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class] .elementor-element.elementor-element-54ceb68 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"][class] .elementor-element.elementor-element-227dc21 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"][class] .elementor-element.elementor-element-eee9dbb .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"][class] .elementor-element.elementor-element-2726378 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"][class] .elementor-element.elementor-element-f10258f .elementor-heading-title {
        font-size: calc(4.5vw * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class] .elementor-element.elementor-element-3f1b85e .elementor-heading-title {
        font-size: calc(5vw * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class] .elementor-element.elementor-element-1e0a7ab .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"][class] .elementor-element.elementor-element-db22b89 .elementor-heading-title {
        font-size: calc(6vw * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class] .elementor-element.elementor-element-7da1c89 .elementor-heading-title {
        font-size: calc(6.2vw * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class] .elementor-element.elementor-element-0577c16 .elementor-heading-title {
        font-size: calc(11vw * var(--a11y-scale)) !important;
    }
}

/* -- @media(max-width:600px)  [style.css] --------------------------------
   .price-text and .nis-icon are the only two selectors the theme changes at
   600px, so this block cannot collide with the 767px blocks above.

   VALUE MISMATCH, DELIBERATE. The DEPLOYED style.css uses 4vw / 6vw here; the
   local working copy of style.css currently says 2.5vw / 4vw. The larger
   (deployed) value is used, because max() can only raise: mirroring the
   smaller one would make these two elements SHRINK on the first click on the
   live site. If the local style.css is the one being deployed, drop these to
   2.5vw / 4vw to keep the first jump proportionate. */
@media (max-width: 600px) {
    html body[class*="pojo-a11y-resize-font-"][class] .price-text {
        font-size: calc(max(12px, 4vw) * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class] .nis-icon {
        font-size: calc(max(14px, 6vw) * var(--a11y-scale)) !important;
    }
}


/* ==========================================================================
   SECTION 5b - THE CIRCULAR STICKER BADGE  (.sticker = element-5c78d1b)

   The badge is a fixed circle - width and height are equal and set in vw, and
   the two headings inside it (5241b1b "from" line, 11fb366 sub-line) are sized
   in vw to fit that circle exactly. Scaling only the text, the way Section 5
   does for every other heading, grows the words inside a circle that stays the
   same size, so at the higher steps the text runs straight out of it.

   So the badge is treated as one object: the two headings are pinned to their
   ORIGINAL theme values - deliberately WITHOUT var(--a11y-scale) - and the
   whole .sticker element is scaled with a transform instead. Text and circle
   then grow together and the fit is preserved at every step by construction.

   transform is used rather than growing width/height/font because it scales
   the border-radius, the padding and the type as a single unit, and because it
   does not reflow anything around it - the badge is absolutely positioned, so
   there is nothing to push.

   The mobile rule has to restate translateX(-50%): transform is one property,
   so declaring scale() alone would drop the theme's centering translate and
   the badge would jump half its width to the right.
   ========================================================================== */
html body[class*="pojo-a11y-resize-font-"][class] .elementor-element.elementor-element-5241b1b .elementor-heading-title {
    font-size: 1.5vw !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .elementor-element.elementor-element-11fb366 .elementor-heading-title {
    font-size: 1vw !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .sticker {
    transform: scale(var(--a11y-scale)) !important;
    transform-origin: center center !important;
}

@media (max-width: 767px) {
    html body[class*="pojo-a11y-resize-font-"][class] .elementor-element.elementor-element-5241b1b .elementor-heading-title {
        font-size: 3.6vw !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class] .elementor-element.elementor-element-11fb366 .elementor-heading-title {
        font-size: 2.8vw !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class] .sticker {
        transform: translateX(-50%) scale(var(--a11y-scale)) !important;
    }
}


/* ==========================================================================
   SECTION 5c - THE PRICE, KEPT ON ONE LINE  (element-03b59c0)

   MARKUP
       <div class="...element-03b59c0 elementor-widget__width-initial dir-ltr">
         <p class="elementor-heading-title">
           <span class="nis-icon">shekel</span>
           <span class="price">3,500,<span class="last-zeros">000
             <span class="price-text">from</span>
           </span></span>
         </p>
       </div>

   THE CONSTRAINT
   ---------------------------------------------------------------------------
   Measured against a max-content clone of the heading, the one-line width of
   this string is a constant 4.976x its font-size - 4.976 at 1440 and 4.975 at
   375 - so the ratio is stable across breakpoints and can be solved directly:

       stays on one line  <=>  4.976 * fontSize  <=  availableWidth

   The widget is not free to use the whole row. Elementor pins it to
   --container-widget-width: 66.794%, which is 220px at 375 and 317px at 1440,
   while the row's content box is 330px and ~475px. Both halves therefore have
   to be handled: give the widget the room it is being denied, and cap the font
   so the line still fits what it gets.

   min-width:max-content is what gives it the room, and it is deliberately
   min-width rather than width. Setting width:max-content would also stop the
   wrap, but it would shrink the box BELOW 66.794% on desktop, where the string
   is narrower than the widget - measured 317px down to 165px - and moving the
   box moves where the price sits in the row. min-width leaves the widget at
   exactly its authored size whenever the text already fits, and expands it
   only on the breakpoints where the text would otherwise break.

   max-width:100% keeps it inside the row. Note that min-width beats max-width
   when the two conflict, so that clamp is only sound because the cap below
   guarantees the content never asks for more than the row has.

   THE CAP
   ---------------------------------------------------------------------------
   Mobile is the only breakpoint that needs one, and it needs it: the theme
   value is 12vw, so at max scale the heading would ask for 19.2vw = 72px,
   whose one-line width is 358px against a 330px row. 17vw is the largest value
   that still fits - 63.75px at 375, a 317px line inside 330px - so the size is
   min(theme * scale, 17vw). Below the top of the range the theme value is the
   smaller of the two and wins, so the cap only clamps the last steps.

   Desktop needs no cap: 2vw at max scale is 3.2vw = 46px, a 229px line sitting
   in a ~475px row.

   PRE-EXISTING, NOT FIXED HERE: at 375 with accessibility OFF the price
   ALREADY wraps. The theme asks for 12vw = 45px, whose one-line width is 224px,
   against a 220px widget - it overflows by 4px and breaks after "3,500,".
   Correcting that at rest would change the default design, which Rule A
   forbids, so it is left alone and reported instead. Either lowering
   .elementor-element-03b59c0 to about 11.8vw in the 767px block of post-2.css,
   or widening the widget past 66.794%, clears it.
   ========================================================================== */
html body[class*="pojo-a11y-resize-font-"][class] .elementor-element.elementor-element-03b59c0 {
    min-width: max-content !important;
    max-width: 100% !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .elementor-element.elementor-element-03b59c0 .elementor-heading-title {
    font-size: calc(2vw * var(--a11y-scale)) !important;
    white-space: nowrap !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .elementor-element.elementor-element-03b59c0 .price,
html body[class*="pojo-a11y-resize-font-"][class] .elementor-element.elementor-element-03b59c0 .last-zeros {
    white-space: nowrap !important;
}

@media (max-width: 767px) {
    html body[class*="pojo-a11y-resize-font-"][class] .elementor-element.elementor-element-03b59c0 .elementor-heading-title {
        font-size: min(calc(12vw * var(--a11y-scale)), 17vw) !important;
    }
}


/* ==========================================================================
   SECTION 5d - CONTACT FORM WIDTH  (element-3e2320e, desktop + laptop only)

   The form is an Elementor shortcode widget pinned to
   --container-widget-width: 18vw - 259px at 1440, inside a 648px row. That is
   already tight at rest, and it becomes the binding constraint as soon as the
   fields and the consent label scale: the labels wrap several lines deep and
   the column reads as broken long before the text is actually large. Growing
   the type without growing the box it lives in is the whole problem.

   So the widget grows on the form curve alongside its own contents:
       18vw -> 23.4vw (step 1) -> 31.5vw (max),  i.e. 259 -> 337 -> 453px
   at 1440, all comfortably inside the 648px row. max-width:100% guarantees it
   can never exceed that row on a narrower laptop.

   Both --container-widget-width and width are set. Elementor applies the
   custom property through its own rule, so setting the property alone would be
   overridden by any later width declaration, and setting width alone would
   leave the property stale for anything else reading it.

   SCOPED TO min-width:1025px, per the request - desktop and laptop only.
   Tablet and phone are untouched, and want to be: below 767px responsive.css
   already gives the form the full row, so there is no width left to add.
   ========================================================================== */
@media (min-width: 1025px) {
    html body[class*="pojo-a11y-resize-font-"][class] .elementor-element.elementor-element-3e2320e {
        --container-widget-width: calc(18vw * var(--a11y-scale-form)) !important;
        width: calc(18vw * var(--a11y-scale-form)) !important;
        max-width: 100% !important;
    }
}


/* ==========================================================================
   SECTION 6 - THEME-TEMPLATE PAGES (no Elementor wrapper)

   single.php and index.php print the_content() straight into <body>; page.php,
   404.php and search.php wrap it in .description-section > .container >
   .text-wraper. None of them load a post-*.css, so the only sizes in play are
   Bootstrap's and the browser's.

   Measured plugin-only on /2026/08/31/hello-world/, none -> 200:
       bare <p>   16 -> 64px
   and on a 404:
       h1   40 -> 35.96 (SHRINKS on the first click) -> 85.12px
       h3   30 -> 35.96 -> 85.12px

   Section 3 already fixes the <p>. The headings need their own pin, because
   the plugin's h1-h6 rule is 1.33x the already-scaled <body>.

   The values reproduce Bootstrap 5's own responsive heading formulas -
   calc(A + Bvw) below 1200px, a flat rem above it - which is what actually
   governs these headings, expressed with min() so one declaration covers both
   sides of Bootstrap's breakpoint.

   SCOPED TO THE CONTENT ROOTS, exactly like Section 3, and for the same
   reason. Scoping this by body class alone reaches every <h2> on the page,
   and the cookie banner's .cc-title IS an <h2> that lives outside every
   content root - measured at 900px on a single post, an unscoped Section 6
   drove .cc-title to 33.7px at step 130 and 46.9px at max, worse than the
   plugin's own runaway. Same two-block shape as Section 3: :where() roots for
   the wrapped templates, the child combinator for bare the_content().
   ========================================================================== */
html body[class*="pojo-a11y-resize-font-"][class] :where(.description-section, .gold-card-banner, .text-wraper, .content-wraper, .breadcrums) h1,
html body[class*="pojo-a11y-resize-font-"][class] > h1 {
    font-size: calc(min(2.5rem, 1.375rem + 1.5vw) * var(--a11y-scale)) !important;
    line-height: 1.2 !important;
}
html body[class*="pojo-a11y-resize-font-"][class] :where(.description-section, .gold-card-banner, .text-wraper, .content-wraper, .breadcrums) h2,
html body[class*="pojo-a11y-resize-font-"][class] > h2 {
    font-size: calc(min(2rem, 1.325rem + 0.9vw) * var(--a11y-scale)) !important;
    line-height: 1.25 !important;
}
html body[class*="pojo-a11y-resize-font-"][class] :where(.description-section, .gold-card-banner, .text-wraper, .content-wraper, .breadcrums) h3,
html body[class*="pojo-a11y-resize-font-"][class] > h3 {
    font-size: calc(min(1.75rem, 1.3rem + 0.6vw) * var(--a11y-scale)) !important;
    line-height: 1.3 !important;
}
html body[class*="pojo-a11y-resize-font-"][class] :where(.description-section, .gold-card-banner, .text-wraper, .content-wraper, .breadcrums) h4,
html body[class*="pojo-a11y-resize-font-"][class] > h4 {
    font-size: calc(min(1.5rem, 1.275rem + 0.3vw) * var(--a11y-scale)) !important;
    line-height: 1.3 !important;
}
html body[class*="pojo-a11y-resize-font-"][class] :where(.description-section, .gold-card-banner, .text-wraper, .content-wraper, .breadcrums) h5,
html body[class*="pojo-a11y-resize-font-"][class] > h5 {
    font-size: calc(1.25rem * var(--a11y-scale)) !important;
    line-height: 1.35 !important;
}
html body[class*="pojo-a11y-resize-font-"][class] :where(.description-section, .gold-card-banner, .text-wraper, .content-wraper, .breadcrums) h6,
html body[class*="pojo-a11y-resize-font-"][class] > h6 {
    font-size: calc(1rem * var(--a11y-scale)) !important;
    line-height: 1.4 !important;
}

/* 404.php hard-codes style="font-size:30px" on its <h3>, which beats any
   stylesheet rule. The inline style is not editable from here, so the heading
   is restated at its real 30px baseline. Named class, so tier 2. */
html body[class*="pojo-a11y-resize-font-"][class] .text-wraper h3 {
    font-size: calc(30px * var(--a11y-scale)) !important;
    line-height: 1.3 !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .call-btn {
    font-size: calc(max(14px, 1rem) * var(--a11y-scale-form)) !important;
    line-height: 1.4 !important;
    height: auto !important;
}


/* ==========================================================================
   SECTION 7 - THE ACCESSIBILITY TOOLBAR ITSELF

   A deliberate, requested departure from "never touch the toolbar".

   Plugin-only the toolbar behaves inconsistently: the plugin pins
   #pojo-a11y-toolbar to 16px, so the panel root and the title never move, but
   .pojo-a11y-toolbar-text and .pojo-a11y-toolbar-icon are <span>s and take the
   full percentage - measured 12.8 -> 16.64 (130) -> 25.6px (200). At 25.6px
   the labels wrap inside the 180px-wide panel and the item height goes
   33 -> 78px.

   The menu items are therefore put on --a11y-scale-toolbar, which is
   deliberately gentler than the page: 12.8 -> 14.08 (130) -> 17.28px (200).
   The title moves with them so the panel stays coherent.

   line-height is deliberately left alone. The plugin's own line-height tracks
   the font size 1:1, so it already grows correctly, and overriding it changed
   the panel's item rhythm for no benefit.

   The closed-state toggle button is NOT touched: style.css sizes it in vw
   (1.5vw desktop / 5.5vw mobile) as a fixed piece of page furniture.
   ========================================================================== */
html body[class*="pojo-a11y-resize-font-"][class] #pojo-a11y-toolbar .pojo-a11y-toolbar-text,
html body[class*="pojo-a11y-resize-font-"][class] #pojo-a11y-toolbar .pojo-a11y-toolbar-icon {
    font-size: calc(12.8px * var(--a11y-scale-toolbar)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] #pojo-a11y-toolbar .pojo-a11y-toolbar-title {
    font-size: calc(16px * var(--a11y-scale-toolbar)) !important;
}


/* ==========================================================================
   SECTION 8 - CONTRAST MODES: THE CONSENT CHECKBOX

   GATE: these are gated behind the CONTRAST body classes, not behind
   body[class*="pojo-a11y-resize-font-"][class]. Same guarantee - the classes only
   exist while the user has chosen that mode.

   THE MECHANISM
   ---------------------------------------------------------------------------
   style.css draws the tick as a pseudo-element on the checkbox itself:

       .wpcf7-checkbox input[type="checkbox"]         { background:#fff;
                                                        border:0.5px solid #BDC1C5 }
       .wpcf7-checkbox input[type="checkbox"]:checked { background:#fff;
                                                        border:0.5px solid #BDC1C5 }
       .wpcf7-checkbox input[type="checkbox"]:checked::before
                                    { content:"\2713"; color:#082550 }

   The plugin repaints the page with very long selector lists, but it targets
   ELEMENTS only, and a universal selector does NOT match pseudo-elements. So
   in every mode the plugin recolours the BOX while the tick keeps its
   hard-coded #082550:

     mode                box bg     box border   tick      result
     none                #fff       #BDC1C5      #082550   ok
     grayscale           #fff       #BDC1C5      #082550   ok (desaturated)
     high-contrast       #000       #fff         #082550   INVISIBLE
     negative-contrast   #000       #fff         #082550   INVISIBLE
     light-background    #fff       #BDC1C5      #082550   readable, but the
                                                           box melts into the
                                                           all-white page

   #082550 on #000 is about 1.3:1 - that is the "tick does not show inside the
   box" symptom, in the two dark modes.

   These rules are colour-only. Size, position and the glyph itself stay with
   style.css and Section 4, so the mobile variants of the ::before still apply
   and the tick stays centred in the box at every step.
   ========================================================================== */

/* -- LIGHT BACKGROUND: the plugin forces every background to #fff, so the box
      is white on a white page. Keep the dark tick, and make the outline black
      so the empty box is visible at all. --------------------------------- */
body.pojo-a11y-light-background .wpcf7-checkbox input[type="checkbox"]:checked::before {
    color: #082550 !important;
}
body.pojo-a11y-light-background .wpcf7-checkbox input[type="checkbox"],
body.pojo-a11y-light-background .wpcf7-checkbox input[type="checkbox"]:checked {
    background: #fff !important;
    border-color: #000 !important;
}

/* -- GRAYSCALE: nothing is repainted, but pinning the pair keeps the tick
      deterministic once the html filter desaturates it. ------------------ */
body.pojo-a11y-grayscale .wpcf7-checkbox input[type="checkbox"]:checked::before {
    color: #082550 !important;
}
body.pojo-a11y-grayscale .wpcf7-checkbox input[type="checkbox"],
body.pojo-a11y-grayscale .wpcf7-checkbox input[type="checkbox"]:checked {
    background: #fff !important;
    border-color: #767676 !important;
}

/* -- HIGH CONTRAST: the plugin paints the box #000 and the text #fff, so the
      tick has to follow the text, not the theme. ------------------------- */
body.pojo-a11y-high-contrast .wpcf7-checkbox input[type="checkbox"]:checked::before {
    color: #fff !important;
}
body.pojo-a11y-high-contrast .wpcf7-checkbox input[type="checkbox"],
body.pojo-a11y-high-contrast .wpcf7-checkbox input[type="checkbox"]:checked {
    background: #000 !important;
    border-color: #fff !important;
}

/* -- NEGATIVE CONTRAST: the plugin paints the box #000 and the text yellow,
      so the tick follows the yellow. ------------------------------------- */
body.pojo-a11y-negative-contrast .wpcf7-checkbox input[type="checkbox"]:checked::before {
    color: #ff0 !important;
}
body.pojo-a11y-negative-contrast .wpcf7-checkbox input[type="checkbox"],
body.pojo-a11y-negative-contrast .wpcf7-checkbox input[type="checkbox"]:checked {
    background: #000 !important;
    border-color: #ff0 !important;
}

/* -- Validation tips. The plugin paints a background onto everything it
      matches, which boxes the red message in a solid block. -------------- */
body.pojo-a11y-grayscale .wpcf7-not-valid-tip {
    color: #dc3232 !important;
}
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .wpcf7-not-valid-tip,
body.pojo-a11y-high-contrast :not(#pojo-a11y-toolbar) .wpcf7-not-valid-tip,
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .wpcf7-not-valid-tip {
    background: transparent !important;
}

/* -- The submit arrow is a white SVG; on a light background it disappears
      into the button, so it gets a dark plate behind it. ----------------- */
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .submit-btn img {
    background: #000 !important;
}
