/* ==========================================================================
   ACCESSIBILITY.CSS — font resize support for "One Click Accessibility" (Pojo)
   Site : https://e-ofakim.webzsites.site/   (WordPress multisite 68)
   Theme: ofaqimNew  |  Builder: Elementor Pro (RTL)  |  Forms: Contact Form 7
   Plugin: pojo-accessibility (legacy module)  ->  #pojo-a11y-toolbar

   PAGES / TEMPLATES COVERED (from wp-sitemap + live document.styleSheets):
     /              page-id 8   -> post-8.css   (elementor-8)
                                   + post-72.css (elementor-72, amenities tpl)
                                   + post-50.css (elementor-50, footer tpl)
     /sample-page/  page-id 2   -> NO Elementor. Theme template page.php,
                                   content lives in .description-section
     404 / search               -> same .description-section wrappers

   ---------------------------------------------------------------------------
   WHY THE PLUGIN ALONE DOES NOT WORK HERE  (all numbers measured live)
   ---------------------------------------------------------------------------
   The plugin only adds a body class and emits two !important rules:

     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 }

   1) "vw" ignores body font-size. This design is built almost entirely in vw,
      so body { font-size: NN% } never reaches a heading.

   2) The percentages COMPOUND — every % is relative to the PARENT, so nested
      tags multiply. Measured at step 200 BEFORE this rebuild:

        design size          1280px desktop        375px mobile
        2.5vw  h2            32.00 -> 68.10 (2.13x)  25.00 -> 68.10 (2.72x)
        2.2vw  h2            28.16 -> 68.10 (2.42x)  20.00 -> 68.10 (3.40x)
        2.0vw  h2            25.60 -> 68.10 (2.66x)  18.75 -> 68.10 (3.63x)
        .price-text          12.80 -> 68.10 (5.32x)  11.25 -> 68.10 (6.05x)

      Every heading landed on the SAME 68.1px — the hierarchy fully COLLAPSED.

   3) Anything the plugin's tag list does NOT cover stayed completely FROZEN.
      Measured at step 200 before the rebuild:

        .elementor-button-text     13.00 -> 13.00  (1.00x)  buttons never grew
        .elementor-icon-list-text  11.52 -> 11.52  (1.00x)  footer links frozen

      Both are <span>s that Section 3 sends to inherit; their parent
      (.elementor-button / .elementor-icon-list-item) carries the real size and
      was not being scaled, so the whole control stood still.

   4) <p class="elementor-heading-title"> widgets. Elementor renders some
      heading widgets as <p>. Section 3 flattens <p> to inherit, so FIVE
      different design sizes (21.76 / 16.64 / 14.72 / 12.80 / 11.52px) all
      landed on the same 25.6px body pin. They need per-element sizes exactly
      like the <h2>/<h3> widgets do — which is why Section 5 lists every
      heading widget id regardless of which tag it renders as.

   5) Elements SWITCH UNITS per breakpoint. Elementor writes vw at base and px
      inside @media (max-width:767px) — e.g. .elementor-element-2dc514b is
      2.5vw on desktop but 25px on mobile. Overriding only the vw value with
      !important would silently destroy the mobile size. Every rule below is
      therefore emitted at BASE *and* again inside every breakpoint the source
      CSS uses. 767px is the ONLY breakpoint Elementor emits on this site —
      confirmed by dumping every rule out of document.styleSheets.

   6) The MEGA MENU (.e-n-menu-title-text) is a <span>, so Section 3 sent it to
      inherit and it tracked the body pin instead of its own 1.2vw. Section 5.4
      restates it and also scales --n-menu-title-font-size, so the dropdown
      indicator icon (which is sized from that var) grows with the label.

   7) The PRICE BLOCK (.price / .price-text / .nis-icon) sits inside a heading
      and is styled by the site's own inline CSS, not by Elementor. Measured
      plugin-only it was the single worst runaway on the page (5.3x desktop,
      6.1x mobile). Section 4d pins all three at their real design sizes.

   8) The COOKIE BANNER (#cc-banner-root) is a direct child of <body>, OUTSIDE
      .elementor, so the Section 3 inherit-fix cannot reach it while the
      Section 2 body pin does. Its own CSS says .cc-btn { font-size: inherit }
      while .cc-root never scales, so the buttons FREEZE while the title RUNS
      AWAY. Section 4c fixes both failure modes at once — it pins with
      calc(<px> * var(--a11y-scale...)) and NEVER a flat pixel value, because a
      flat pin stops the runaway but leaves the banner frozen, which is just as
      broken.

   ---------------------------------------------------------------------------
   TWO INVARIANTS THIS FILE GUARANTEES
   ---------------------------------------------------------------------------
   RULE A — Nothing selected => design unchanged.
     Every rule is gated behind body[class*="pojo-a11y-resize-font-"]. With no
     size chosen (and after Reset) this stylesheet contributes zero computed
     differences at 375 / 900 / 1440px, on every page.

   RULE B — The toolbar is never touched.
     #pojo-a11y-toolbar is a SIBLING of .elementor. Every generic rule here is
     scoped inside .elementor / .description-section / .private-contact-form /
     .privacy-wrapper / .cc-*, so none of them can reach it. The site's own CSS
     pins the toggle at 1.5vw (5.5vw on mobile) and the plugin pins
     #pojo-a11y-toolbar { font-size:16px !important }, which also stops the
     Section 2 body pin from cascading in.

   ---------------------------------------------------------------------------
   HOW TO REGENERATE SECTION 5 AFTER EDITING THE PAGE IN ELEMENTOR
   ---------------------------------------------------------------------------
   Elementor writes a NEW element id whenever a widget is duplicated or
   re-created, so Section 5 must be refreshed after structural edits. Paste
   this in the browser console on the live page and re-emit the rules:

     (()=>{const o=[];const w=(rs,m)=>{for(const r of rs){
       if(r.type===4)w(r.cssRules,r.conditionText);
       else if(r.type===1&&r.style&&r.style.fontSize)o.push([m||'',r.selectorText,r.style.fontSize]);
     }};for(const s of document.styleSheets){
       if(!/elementor.css.post-[0-9]/.test(s.href||''))continue;try{w(s.cssRules,'')}catch(e){}
     }return o})()

   Section 6 is the safety net that keeps anything added-but-not-yet-listed
   scaling instead of freezing or running away.
   ========================================================================== */


/* ==========================================================================
   SECTION 1 — STEP -> MULTIPLIERS (two curves)
   Plugin steps: none -> 130 -> 140 -> ... -> 200 (caps at 200); Reset clears.

     --a11y-scale       headings, paragraphs, lists, general text
                        step 1: +15%  ...  max: +60%
     --a11y-scale-form  inputs, textareas, selects, labels, submit + Elementor
                        buttons, response output, checkbox labels, cookie
                        title + body + buttons
                        step 1: +30%  ...  max: +75%

   Two curves because form controls and the cookie banner start from the
   smallest sizes on the page and need a bigger first jump to actually read as
   "bigger" to the user.
   ========================================================================== */
:root {
    --a11y-scale: 1;
    --a11y-scale-form: 1;
    --a11y-scale-heading: 1;
    --a11y-scale-btn: 1;
}

body.pojo-a11y-resize-font-130 { --a11y-scale: 1.15; --a11y-scale-form: 1.30; --a11y-scale-heading: 1.15; --a11y-scale-btn: 1.30; }
body.pojo-a11y-resize-font-140 { --a11y-scale: 1.22; --a11y-scale-form: 1.40; --a11y-scale-heading: 1.22; --a11y-scale-btn: 1.40; }
body.pojo-a11y-resize-font-150 { --a11y-scale: 1.28; --a11y-scale-form: 1.48; --a11y-scale-heading: 1.28; --a11y-scale-btn: 1.48; }
body.pojo-a11y-resize-font-160 { --a11y-scale: 1.35; --a11y-scale-form: 1.55; --a11y-scale-heading: 1.35; --a11y-scale-btn: 1.55; }
body.pojo-a11y-resize-font-170 { --a11y-scale: 1.42; --a11y-scale-form: 1.62; --a11y-scale-heading: 1.42; --a11y-scale-btn: 1.62; }
body.pojo-a11y-resize-font-180 { --a11y-scale: 1.48; --a11y-scale-form: 1.68; --a11y-scale-heading: 1.48; --a11y-scale-btn: 1.68; }
body.pojo-a11y-resize-font-190 { --a11y-scale: 1.54; --a11y-scale-form: 1.72; --a11y-scale-heading: 1.54; --a11y-scale-btn: 1.72; }
body.pojo-a11y-resize-font-200 { --a11y-scale: 1.60; --a11y-scale-form: 1.75; --a11y-scale-heading: 1.60; --a11y-scale-btn: 1.75; }

/* ==========================================================================
   SECTION 1b — MOBILE-ONLY DAMPENED CURVE FOR HEADINGS & CTA/SUBMIT BUTTONS
   --------------------------------------------------------------------------
   On a 375px screen, growing headings and buttons by the same +60% / +75%
   used on desktop makes hero titles wrap onto many lines and CTA buttons
   balloon out of proportion with everything else — reported as "increasing
   too much" / "not looking good" on mobile.

   --a11y-scale-heading and --a11y-scale-btn are the SAME value as
   --a11y-scale / --a11y-scale-form on desktop (declared above), so nothing
   changes above 767px. Below 767px they are overridden here with a gentler
   ramp (~60% of the desktop growth) so headings/buttons still visibly grow
   at every step but stay readable and don't dominate the layout.

   Body text, paragraphs, lists, form inputs, the price block, the cookie
   banner and the mega menu are NOT part of this — they keep growing on the
   original --a11y-scale / --a11y-scale-form curve on every screen size,
   since only headings and buttons were reported as too aggressive on mobile.
   ========================================================================== */
@media (max-width: 767px) {
    body.pojo-a11y-resize-font-130 { --a11y-scale-heading: 1.09; --a11y-scale-btn: 1.19; }
    body.pojo-a11y-resize-font-140 { --a11y-scale-heading: 1.14; --a11y-scale-btn: 1.25; }
    body.pojo-a11y-resize-font-150 { --a11y-scale-heading: 1.18; --a11y-scale-btn: 1.30; }
    body.pojo-a11y-resize-font-160 { --a11y-scale-heading: 1.22; --a11y-scale-btn: 1.35; }
    body.pojo-a11y-resize-font-170 { --a11y-scale-heading: 1.26; --a11y-scale-btn: 1.39; }
    body.pojo-a11y-resize-font-180 { --a11y-scale-heading: 1.30; --a11y-scale-btn: 1.43; }
    body.pojo-a11y-resize-font-190 { --a11y-scale-heading: 1.34; --a11y-scale-btn: 1.45; }
    body.pojo-a11y-resize-font-200 { --a11y-scale-heading: 1.38; --a11y-scale-btn: 1.47; }
}


/* ==========================================================================
   SECTION 2 — BASE PIN
   Replaces the plugin's runaway body { font-size: NN% } with one predictable
   value. Measured baseline of <body> is 16px.
   Deliberately NOT scoped: this is what lets #pojo-a11y-toolbar keep behaving
   exactly as the plugin always made it (RULE B).
   ========================================================================== */
html body[class*="pojo-a11y-resize-font-"] {
    font-size: calc(16px * var(--a11y-scale)) !important;
}


/* ==========================================================================
   SECTION 3 — KILL THE PLUGIN'S COMPOUNDING PERCENTAGES
   These tags carry no intentional size of their own, so letting them inherit
   applies the scaled cascade exactly ONCE. This is what makes <span> inside
   <h2>/<h3>/<p> match its parent instead of picking up a second 266%/200%.

   Scoped to the two content roots that exist on this site:
     .elementor            — page 8 and templates 72 / 50
     .description-section  — page.php / 404.php / search.php (no Elementor)

   Form controls (input/select/textarea) are excluded — Section 4 gives them
   explicit sizes. Anything that DOES carry an intentional size of its own is
   restated in Sections 4b / 4d / 5 / 6, all of which out-specify this block.
   ========================================================================== */
html body[class*="pojo-a11y-resize-font-"] .elementor p,
html body[class*="pojo-a11y-resize-font-"] .elementor li,
html body[class*="pojo-a11y-resize-font-"] .elementor span,
html body[class*="pojo-a11y-resize-font-"] .elementor label,
html body[class*="pojo-a11y-resize-font-"] .elementor blockquote,
html body[class*="pojo-a11y-resize-font-"] .elementor legend,
html body[class*="pojo-a11y-resize-font-"] .elementor code,
html body[class*="pojo-a11y-resize-font-"] .elementor pre,
html body[class*="pojo-a11y-resize-font-"] .elementor dd,
html body[class*="pojo-a11y-resize-font-"] .elementor dt,
html body[class*="pojo-a11y-resize-font-"] .description-section p,
html body[class*="pojo-a11y-resize-font-"] .description-section li,
html body[class*="pojo-a11y-resize-font-"] .description-section span,
html body[class*="pojo-a11y-resize-font-"] .description-section label,
html body[class*="pojo-a11y-resize-font-"] .description-section blockquote,
html body[class*="pojo-a11y-resize-font-"] .description-section dd,
html body[class*="pojo-a11y-resize-font-"] .description-section dt,
html body[class*="pojo-a11y-resize-font-"] .gold-card-banner span,
html body[class*="pojo-a11y-resize-font-"] .breadcrums span,
html body[class*="pojo-a11y-resize-font-"] .breadcrums a {
    font-size: inherit !important;
}


/* ==========================================================================
   SECTION 4 — FORM CONTROLS + RESPONSE / VALIDATION MESSAGES
   Driven by --a11y-scale-form. Values mirror the site's own inline CSS 1:1,
   including its exact breakpoints AND their source order, so at scale 1 the
   computed size is unchanged:

     .private-contact-form input, textarea
         base 1vw   | 768-1079 1.5vw | 500-767 16px | <=480 16px
     .private-contact-form .submit-col .global-btn
         base 1vw   | 768-1079 1.6vw | 500-767 18px | <=768 18px
     .privacy-checkbox .wpcf7-list-item-label
         base 0.6vw | 768-1079 0.8vw | 500-767 12px | <=768 2.4vw
     .privacy-checkbox input[type=checkbox]:checked::before
         base 0.8vw | <=768 3.2vw
     .wpcf7-not-valid-tip           base 0.8vw | <=768 12px
     .wpcf7 .wpcf7-response-output  base 0.8vw | <=768 12px

   line-height is forced UNITLESS on the two message elements so it grows with
   the text (the theme leaves them without one and uses vh elsewhere, which
   does NOT scale). Values are px/vw, never em or rem: em would compound
   through CF7's <p><span class="wpcf7-form-control-wrap"> nesting, and rem
   would shrink below the design size on wide screens.
   ========================================================================== */

/* --- base / desktop --- */
html body[class*="pojo-a11y-resize-font-"] .private-contact-form input,
html body[class*="pojo-a11y-resize-font-"] .private-contact-form textarea,
html body[class*="pojo-a11y-resize-font-"] .private-contact-form select {
    font-size: calc(1vw * var(--a11y-scale-form)) !important;
}

html body[class*="pojo-a11y-resize-font-"] .private-contact-form .submit-col .global-btn,
html body[class*="pojo-a11y-resize-font-"] .private-contact-form .submit-btn input,
html body[class*="pojo-a11y-resize-font-"] .private-contact-form .wpcf7-submit {
    font-size: calc(1vw * var(--a11y-scale-btn)) !important;
}

html body[class*="pojo-a11y-resize-font-"] .private-contact-form .privacy-checkbox .wpcf7-list-item-label,
html body[class*="pojo-a11y-resize-font-"] .private-contact-form .privacy-checkbox .custom-check-label,
html body[class*="pojo-a11y-resize-font-"] .private-contact-form .privacy-checkbox p {
    font-size: calc(0.6vw * var(--a11y-scale-form)) !important;
}

html body[class*="pojo-a11y-resize-font-"] .private-contact-form .privacy-checkbox input[type="checkbox"]:checked::before {
    font-size: calc(0.8vw * var(--a11y-scale-form)) !important;
}

/* The theme sizes both messages at 0.8vw with no tablet override, so they
   render at 7.2px on a 900px viewport — unreadable, and only 12.6px even at
   the maximum step. A 14px floor is applied here so the messages are legible
   at every step. It is inside the gate, so the default render is untouched;
   above ~1750px the theme's own 0.8vw takes over again. */
html body[class*="pojo-a11y-resize-font-"] .private-contact-form .wpcf7-not-valid-tip {
    font-size: calc(max(14px, 0.8vw) * var(--a11y-scale-form)) !important;
    line-height: 1.5 !important;
}

html body[class*="pojo-a11y-resize-font-"] .private-contact-form .wpcf7 form .wpcf7-response-output {
    font-size: calc(max(14px, 0.8vw) * var(--a11y-scale-form)) !important;
    line-height: 1.5 !important;
}

/* Label spans inside the form row, if the markup ever grows one. */
html body[class*="pojo-a11y-resize-font-"] .main-contact-form label span:first-child {
    font-size: calc(1vw * var(--a11y-scale-form)) !important;
}

/* Success panel — display text, so it follows the CONTENT curve. */
html body[class*="pojo-a11y-resize-font-"] .private-contact-form .success-title,
html body[class*="pojo-a11y-resize-font-"] .private-contact-form .success-subtitle {
    font-size: calc(2vw * var(--a11y-scale)) !important;
}

/* --- tablet 768-1079 (the theme's own band) --- */
@media (min-width: 768px) and (max-width: 1079px) {
    html body[class*="pojo-a11y-resize-font-"] .private-contact-form input,
    html body[class*="pojo-a11y-resize-font-"] .private-contact-form textarea,
    html body[class*="pojo-a11y-resize-font-"] .private-contact-form select {
        font-size: calc(1.5vw * var(--a11y-scale-form)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .private-contact-form .submit-col .global-btn,
    html body[class*="pojo-a11y-resize-font-"] .private-contact-form .submit-btn input,
    html body[class*="pojo-a11y-resize-font-"] .private-contact-form .wpcf7-submit {
        font-size: calc(1.6vw * var(--a11y-scale-btn)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .private-contact-form .privacy-checkbox .wpcf7-list-item-label,
    html body[class*="pojo-a11y-resize-font-"] .private-contact-form .privacy-checkbox .custom-check-label,
    html body[class*="pojo-a11y-resize-font-"] .private-contact-form .privacy-checkbox p {
        font-size: calc(0.8vw * var(--a11y-scale-form)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .main-contact-form label span:first-child {
        font-size: calc(1.5vw * var(--a11y-scale-form)) !important;
    }
}

/* --- 500-767 (the theme's own band) --- */
@media (min-width: 500px) and (max-width: 767px) {
    html body[class*="pojo-a11y-resize-font-"] .private-contact-form input,
    html body[class*="pojo-a11y-resize-font-"] .private-contact-form textarea,
    html body[class*="pojo-a11y-resize-font-"] .private-contact-form select {
        font-size: calc(16px * var(--a11y-scale-form)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .private-contact-form .submit-col .global-btn,
    html body[class*="pojo-a11y-resize-font-"] .private-contact-form .submit-btn input,
    html body[class*="pojo-a11y-resize-font-"] .private-contact-form .wpcf7-submit {
        font-size: calc(18px * var(--a11y-scale-btn)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .private-contact-form .privacy-checkbox .wpcf7-list-item-label,
    html body[class*="pojo-a11y-resize-font-"] .private-contact-form .privacy-checkbox .custom-check-label,
    html body[class*="pojo-a11y-resize-font-"] .private-contact-form .privacy-checkbox p {
        font-size: calc(12px * var(--a11y-scale-form)) !important;
    }
}

/* --- mobile <=768 (the theme's own band; declared AFTER the two above so it
       wins the overlap exactly the way the theme's own CSS does) --- */
@media (max-width: 768px) {
    html body[class*="pojo-a11y-resize-font-"] .private-contact-form .submit-col .global-btn,
    html body[class*="pojo-a11y-resize-font-"] .private-contact-form .submit-btn input,
    html body[class*="pojo-a11y-resize-font-"] .private-contact-form .wpcf7-submit {
        font-size: calc(18px * var(--a11y-scale-btn)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .private-contact-form .privacy-checkbox .wpcf7-list-item-label,
    html body[class*="pojo-a11y-resize-font-"] .private-contact-form .privacy-checkbox .custom-check-label,
    html body[class*="pojo-a11y-resize-font-"] .private-contact-form .privacy-checkbox p {
        font-size: calc(2.4vw * var(--a11y-scale-form)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .private-contact-form .privacy-checkbox input[type="checkbox"]:checked::before {
        font-size: calc(3.2vw * var(--a11y-scale-form)) !important;
    }
    /* theme's mobile value is 12px; floored to 14px for the same reason as base */
    html body[class*="pojo-a11y-resize-font-"] .private-contact-form .wpcf7-not-valid-tip {
        font-size: calc(14px * var(--a11y-scale-form)) !important;
        line-height: 1.5 !important;
    }

    /* The consent-checkbox tip is absolutely positioned by the theme, and on
       mobile it is anchored with a FIXED top: 50px. 50px clears the consent
       text only while it is 2 lines tall. As soon as the label is scaled up it
       wraps to more lines and the red message lands on top of it.

       Restoring top:auto; bottom:0 — which is exactly what the theme already
       uses above 768px, and which never overlaps there — makes the tip track
       the bottom of the row instead. bottom is restated so this also works in
       engines without :has() support. */
    html body[class*="pojo-a11y-resize-font-"] .private-contact-form .privacy-checkbox.first .wpcf7-not-valid-tip {
        top: auto !important;
        bottom: 0 !important;
        margin-top: 0 !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .private-contact-form .wpcf7 form .wpcf7-response-output {
        font-size: calc(14px * var(--a11y-scale-form)) !important;
        line-height: 1.5 !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .private-contact-form .success-title,
    html body[class*="pojo-a11y-resize-font-"] .private-contact-form .success-subtitle {
        font-size: calc(24px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .main-contact-form label span:first-child {
        font-size: calc(16px * var(--a11y-scale-form)) !important;
    }
}

/* --- <=480 (the theme's own band; input only) --- */
@media (max-width: 480px) {
    html body[class*="pojo-a11y-resize-font-"] .private-contact-form input,
    html body[class*="pojo-a11y-resize-font-"] .private-contact-form textarea,
    html body[class*="pojo-a11y-resize-font-"] .private-contact-form select {
        font-size: calc(16px * var(--a11y-scale-form)) !important;
    }
}


/* ==========================================================================
   SECTION 4b — ELEMENTS THAT CARRY AN INTENTIONAL SIZE OF THEIR OWN
   Section 3 would otherwise flatten these to inherit.
   The privacy / accessibility modal is written with :where(), which has ZERO
   specificity, so it MUST be restated here or it would lose to Section 3. Its
   line-heights are in vh in the source (they do not grow with the text and
   start overlapping at 1.6x) so they are replaced with unitless values — only
   while a resize step is active.
   ========================================================================== */
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content h2 {
    font-size: calc(1.4vw * var(--a11y-scale)) !important;
    line-height: 1.3 !important;
}
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content h3 {
    font-size: calc(1.1vw * var(--a11y-scale)) !important;
    line-height: 1.3 !important;
}
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content :where(p, li, a, div),
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content p,
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content li,
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content a,
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content div,
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content strong,
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content span {
    font-size: calc(0.8vw * var(--a11y-scale)) !important;
    line-height: 1.6 !important;
}

/* Footer privacy / accessibility links + small print */
html body[class*="pojo-a11y-resize-font-"] .pv-links > span,
html body[class*="pojo-a11y-resize-font-"] .pv-link,
html body[class*="pojo-a11y-resize-font-"] .bottom-small-text {
    font-size: calc(0.8vw * var(--a11y-scale)) !important;
}

@media (max-width: 768px) {
    html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content h2 {
        font-size: calc(18px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content h3 {
        font-size: calc(16px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content :where(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,
    html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content strong,
    html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content span {
        font-size: calc(12px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .pv-links > span,
    html body[class*="pojo-a11y-resize-font-"] .pv-link,
    html body[class*="pojo-a11y-resize-font-"] .bottom-small-text {
        font-size: calc(14px * var(--a11y-scale)) !important;
    }
}


/* ==========================================================================
   SECTION 4c — COOKIE BANNER (#cc-banner-root .cc-root)   [MANDATORY]
   --------------------------------------------------------------------------
   The banner is a direct child of <body>, OUTSIDE .elementor, so Section 3
   never reaches it while the Section 2 body pin does. Measured plugin-only:

     .cc-title  16 -> 24.2 -> 37.2   runaway (plugin h_ 266%)
     .cc-body   14 -> 18.2 -> 28.0   runaway (plugin p 200%)
     .cc-btn    14 -> 14.0 -> 14.0   FROZEN  (its own CSS is font-size:inherit
                                              and .cc-root never scales)
     .cc-root   14 -> 14.0 -> 14.0   FROZEN

   Fix: (1) pin every .cc-* explicitly so the plugin cannot reach it;
        (2) ALWAYS multiply by var(--a11y-scale...) — a flat px pin would stop
            the runaway but leave the banner frozen, which is equally broken;
        (3) .cc-title and .cc-btn use the FORM curve and a slightly bumped
            baseline (16->18 and 14->15) so the first click is a visible jump
            rather than a nudge. Gated, so the default render is untouched;
        (4) .cc-body gets unitless line-height so the paragraph does not crowd.

   The generic inherit rule comes FIRST; every explicit pin below carries both
   a bare and a .cc-root-scoped selector so it wins whether the element is in
   the banner or in the settings modal (which renders outside .cc-root).
   ========================================================================== */

/* Descendants with no size of their own — follow .cc-root, not the plugin. */
html body[class*="pojo-a11y-resize-font-"] .cc-root p,
html body[class*="pojo-a11y-resize-font-"] .cc-root li,
html body[class*="pojo-a11y-resize-font-"] .cc-root span,
html body[class*="pojo-a11y-resize-font-"] .cc-root label,
html body[class*="pojo-a11y-resize-font-"] .cc-root a {
    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;
}
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 {
    font-size: calc(15px * var(--a11y-scale-form)) !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;
}
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-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,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-cookies-list th,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-cookies-list td {
    font-size: calc(12px * var(--a11y-scale)) !important;
}


/* ==========================================================================
   SECTION 4d — PRICE BLOCK  (.price / .price-text / .nis-icon / .last-zeros)
   --------------------------------------------------------------------------
   Styled by the site's own inline CSS, not by Elementor:

     .price       3vw  | <=600  10vw
     .price-text  1vw  | <=600   3vw
     .nis-icon    2vw  | <=600   6vw
     .last-zeros  (no size of its own — inherits .price)

   All three are <span>s sitting INSIDE a heading widget, which is the worst
   possible place to be when the plugin is active: the heading itself runs away
   to 266% and Section 3 then hands that runaway size down to every span in it.
   Measured plugin-only at step 200 this was the biggest error on the page:

                  1280px desktop           375px mobile
     .price       38.40 -> 68.10 (1.77x)   37.50 -> 68.10 (1.82x)
     .nis-icon    25.60 -> 68.10 (2.66x)   22.50 -> 68.10 (3.03x)
     .price-text  12.80 -> 68.10 (5.32x)   11.25 -> 68.10 (6.05x)

   .last-zeros is deliberately NOT listed — it has no design size of its own,
   so leaving it on Section 3's inherit makes it track .price exactly, which is
   what the untouched design does.

   Specificity note: Section 3's ".elementor span" is (0,2,3). Scoping these
   inside .elementor makes them (0,3,2), which wins, and they are declared
   later as well.
   ========================================================================== */
html body[class*="pojo-a11y-resize-font-"] .elementor .price {
    font-size: calc(3vw * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor .price-text {
    font-size: calc(1vw * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor .nis-icon {
    font-size: calc(2vw * var(--a11y-scale)) !important;
}

@media (max-width: 600px) {
    html body[class*="pojo-a11y-resize-font-"] .elementor .price {
        font-size: calc(10vw * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor .price-text {
        font-size: calc(3vw * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor .nis-icon {
        font-size: calc(6vw * var(--a11y-scale)) !important;
    }
}


/* ==========================================================================
   SECTION 5 — PER-ELEMENT HEADINGS / BUTTONS / MENU / LISTS
   Every font-size rule found in the Elementor CSS files, re-emitted with
   var(--a11y-scale-heading) for headings and var(--a11y-scale-btn) for
   buttons (both equal the old --a11y-scale / --a11y-scale-form on desktop;
   dampened only on mobile — see SECTION 1b).

   REFRESHED 2026-08-27 against the CURRENTLY LIVE Elementor post ids — the
   ids below (623 / 544 / 652) are NOT the same numbers described in the big
   comment at the top of this file (8 / 72 / 50). Elementor re-mints an
   element id every time a widget is duplicated or rebuilt, and the page had
   been rebuilt since this file was first written, so every Section 5
   selector was silently matching NOTHING on the live site: headings that
   render as real <h1>-<h6> tags were falling straight through to the legacy
   plugin's own compounding rule (collapsing every one of them to the same
   ~68px at max step, the exact runaway this file exists to prevent), and
   several buttons were only catching Section 6's generic fallback instead of
   their own per-breakpoint size. This refresh re-points every selector at
   the live ids so each element scales from ITS OWN design size again. Follow
   the regeneration snippet a few screens up whenever the page is rebuilt in
   Elementor again — the ids WILL change again the next time a widget in
   these sections is duplicated or recreated.

     post-623.css  page /                22 heading + 3 button rules (x2 bps)
     post-544.css  amenities template    21 heading rules            (x2 bps)
     post-652.css  footer template        1 heading + 1 icon-list     (x2 bps)

   767px is the ONLY breakpoint Elementor emits on this site — confirmed by
   dumping every rule out of document.styleSheets on the live page.

   Heading widgets are listed by element id regardless of the tag they render
   as: several of these are <p class="elementor-heading-title">, and without an
   explicit size they would be flattened to the body pin by Section 3.
   ========================================================================== */

/* -------------------------------------------------------------------------
   5.1  PAGE "/" — post-623.css — BASE
   ------------------------------------------------------------------------- */
html body[class*="pojo-a11y-resize-font-"] .elementor-623 .elementor-element.elementor-element-27f4a1c .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-623 .elementor-element.elementor-element-2b29d97 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-623 .elementor-element.elementor-element-a8dfcc2 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-623 .elementor-element.elementor-element-df6a128 .elementor-heading-title {
    font-size: calc(2.5vw * var(--a11y-scale-heading)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor-623 .elementor-element.elementor-element-1626034 .elementor-heading-title {
    font-size: calc(2.2vw * var(--a11y-scale-heading)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor-623 .elementor-element.elementor-element-7d73a83 .elementor-heading-title {
    font-size: calc(2vw * var(--a11y-scale-heading)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor-623 .elementor-element.elementor-element-63e6ac7 .elementor-heading-title {
    font-size: calc(1.7vw * var(--a11y-scale-heading)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor-623 .elementor-element.elementor-element-39aab10 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-623 .elementor-element.elementor-element-b993401 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-623 .elementor-element.elementor-element-8fb929d .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-623 .elementor-element.elementor-element-f25c88f .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-623 .elementor-element.elementor-element-9e735f0 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-623 .elementor-element.elementor-element-f5e1d0f .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-623 .elementor-element.elementor-element-a709e73 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-623 .elementor-element.elementor-element-3ded639 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-623 .elementor-element.elementor-element-58c5949 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-623 .elementor-element.elementor-element-b722e69 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-623 .elementor-element.elementor-element-30baa66 .elementor-heading-title {
    font-size: calc(1.15vw * var(--a11y-scale-heading)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor-623 .elementor-element.elementor-element-c775464 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-623 .elementor-element.elementor-element-4cd14ca .elementor-heading-title {
    font-size: calc(1vw * var(--a11y-scale-heading)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor-623 .elementor-element.elementor-element-1a7d1d4 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-623 .elementor-element.elementor-element-bf60608 .elementor-heading-title {
    font-size: calc(0.9vw * var(--a11y-scale-heading)) !important;
}
/* CTA buttons. Their text sits in a nested .elementor-button-text <span>;
   Section 3 makes that span inherit, so sizing the <a> is enough — that is
   what un-freezes the buttons AND stops any ballooning. */
html body[class*="pojo-a11y-resize-font-"] .elementor-623 .elementor-element.elementor-element-287d640 .elementor-button,
html body[class*="pojo-a11y-resize-font-"] .elementor-623 .elementor-element.elementor-element-34e9235 .elementor-button,
html body[class*="pojo-a11y-resize-font-"] .elementor-623 .elementor-element.elementor-element-4ca64d6 .elementor-button {
    font-size: calc(1.15vw * var(--a11y-scale-btn)) !important;
}

/* -------------------------------------------------------------------------
   5.2  AMENITIES TEMPLATE — post-544.css — BASE (all 1.3vw)
   ------------------------------------------------------------------------- */
html body[class*="pojo-a11y-resize-font-"] .elementor-544 .elementor-element.elementor-element-c62f8c3 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-544 .elementor-element.elementor-element-44b0da7 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-544 .elementor-element.elementor-element-597a05c .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-544 .elementor-element.elementor-element-ae3e9d2 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-544 .elementor-element.elementor-element-60a193f .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-544 .elementor-element.elementor-element-f60314d .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-544 .elementor-element.elementor-element-13821fc .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-544 .elementor-element.elementor-element-c6f3c7c .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-544 .elementor-element.elementor-element-ca9a4d7 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-544 .elementor-element.elementor-element-70e82c3 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-544 .elementor-element.elementor-element-19b4f34 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-544 .elementor-element.elementor-element-770fe9b .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-544 .elementor-element.elementor-element-8873d4e .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-544 .elementor-element.elementor-element-2fa2ca3 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-544 .elementor-element.elementor-element-a9fde70 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-544 .elementor-element.elementor-element-c89bdf3 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-544 .elementor-element.elementor-element-bc8cfaa .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-544 .elementor-element.elementor-element-c269a71 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-544 .elementor-element.elementor-element-3c3c541 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-544 .elementor-element.elementor-element-bbbaca4 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-544 .elementor-element.elementor-element-055bdfa .elementor-heading-title {
    font-size: calc(1.3vw * var(--a11y-scale-heading)) !important;
}

/* -------------------------------------------------------------------------
   5.3  FOOTER TEMPLATE — post-652.css — BASE
   The icon-list carries the "מדיניות פרטיות" / "הצהרת נגישות" links, which
   were completely FROZEN before this rule existed.
   ------------------------------------------------------------------------- */
html body[class*="pojo-a11y-resize-font-"] .elementor-652 .elementor-element.elementor-element-f352be1 .elementor-heading-title {
    font-size: calc(2vw * var(--a11y-scale-heading)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor-652 .elementor-element.elementor-element-b31bb60 .elementor-icon-list-item,
html body[class*="pojo-a11y-resize-font-"] .elementor-652 .elementor-element.elementor-element-b31bb60 .elementor-icon-list-item > .elementor-icon-list-text,
html body[class*="pojo-a11y-resize-font-"] .elementor-652 .elementor-element.elementor-element-b31bb60 .elementor-icon-list-item > a {
    font-size: calc(0.9vw * var(--a11y-scale)) !important;
}
/* The list icon is sized from --e-icon-list-icon-size (14px), so it must be
   scaled too or the bullet shrinks visually next to the grown label. */
html body[class*="pojo-a11y-resize-font-"] .elementor-652 .elementor-element.elementor-element-b31bb60 {
    --e-icon-list-icon-size: calc(14px * var(--a11y-scale)) !important;
}

/* -------------------------------------------------------------------------
   5.4  MEGA MENU — post-623.css element 5197488
   .e-n-menu-title-text is a <span>, so Section 3 sent it to inherit and it
   tracked the body pin instead of its own 1.2vw. The explicit rule below
   out-specifies Section 3; the var is scaled as well so the dropdown-
   indicator icon, which is sized from
   var(--n-menu-dropdown-indicator-size, var(--n-menu-title-font-size)),
   grows together with the label.
   ------------------------------------------------------------------------- */
html body[class*="pojo-a11y-resize-font-"] .elementor-623 .elementor-element.elementor-element-5197488 {
    --n-menu-title-font-size: calc(1.2vw * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor-623 .elementor-element.elementor-element-5197488 .e-n-menu-title-text {
    font-size: calc(1.2vw * var(--a11y-scale)) !important;
}


/* =========================================================================
   5.5  ELEMENTOR MOBILE BREAKPOINT — @media (max-width: 767px)
   Elementor switches these elements from vw to px here. Omitting this block
   is what silently breaks the mobile design.
   ========================================================================= */
@media (max-width: 767px) {

    /* --- page "/" — post-623.css --- */
    html body[class*="pojo-a11y-resize-font-"] .elementor-623 .elementor-element.elementor-element-27f4a1c .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-623 .elementor-element.elementor-element-2b29d97 .elementor-heading-title {
        font-size: calc(25px * var(--a11y-scale-heading)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-623 .elementor-element.elementor-element-df6a128 .elementor-heading-title {
        font-size: calc(22px * var(--a11y-scale-heading)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-623 .elementor-element.elementor-element-1626034 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-623 .elementor-element.elementor-element-a8dfcc2 .elementor-heading-title {
        font-size: calc(20px * var(--a11y-scale-heading)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-623 .elementor-element.elementor-element-7d73a83 .elementor-heading-title {
        font-size: calc(5vw * var(--a11y-scale-heading)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-623 .elementor-element.elementor-element-a709e73 .elementor-heading-title {
        font-size: calc(16px * var(--a11y-scale-heading)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-623 .elementor-element.elementor-element-39aab10 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-623 .elementor-element.elementor-element-b993401 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-623 .elementor-element.elementor-element-8fb929d .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-623 .elementor-element.elementor-element-63e6ac7 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-623 .elementor-element.elementor-element-f25c88f .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-623 .elementor-element.elementor-element-c775464 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-623 .elementor-element.elementor-element-1a7d1d4 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-623 .elementor-element.elementor-element-4cd14ca .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-623 .elementor-element.elementor-element-bf60608 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-623 .elementor-element.elementor-element-9e735f0 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-623 .elementor-element.elementor-element-f5e1d0f .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-623 .elementor-element.elementor-element-3ded639 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-623 .elementor-element.elementor-element-58c5949 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-623 .elementor-element.elementor-element-b722e69 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-623 .elementor-element.elementor-element-30baa66 .elementor-heading-title {
        font-size: calc(14px * var(--a11y-scale-heading)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-623 .elementor-element.elementor-element-287d640 .elementor-button,
    html body[class*="pojo-a11y-resize-font-"] .elementor-623 .elementor-element.elementor-element-34e9235 .elementor-button,
    html body[class*="pojo-a11y-resize-font-"] .elementor-623 .elementor-element.elementor-element-4ca64d6 .elementor-button {
        font-size: calc(13px * var(--a11y-scale-btn)) !important;
    }

    /* --- mega menu — post-623.css element 5197488 --- */
    html body[class*="pojo-a11y-resize-font-"] .elementor-623 .elementor-element.elementor-element-5197488 {
        --n-menu-title-font-size: calc(16px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-623 .elementor-element.elementor-element-5197488 .e-n-menu-title-text {
        font-size: calc(16px * var(--a11y-scale)) !important;
    }

    /* --- amenities template — post-544.css — all 18px --- */
    html body[class*="pojo-a11y-resize-font-"] .elementor-544 .elementor-element.elementor-element-c62f8c3 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-544 .elementor-element.elementor-element-44b0da7 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-544 .elementor-element.elementor-element-597a05c .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-544 .elementor-element.elementor-element-ae3e9d2 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-544 .elementor-element.elementor-element-60a193f .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-544 .elementor-element.elementor-element-f60314d .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-544 .elementor-element.elementor-element-13821fc .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-544 .elementor-element.elementor-element-c6f3c7c .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-544 .elementor-element.elementor-element-ca9a4d7 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-544 .elementor-element.elementor-element-70e82c3 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-544 .elementor-element.elementor-element-19b4f34 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-544 .elementor-element.elementor-element-770fe9b .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-544 .elementor-element.elementor-element-8873d4e .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-544 .elementor-element.elementor-element-2fa2ca3 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-544 .elementor-element.elementor-element-a9fde70 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-544 .elementor-element.elementor-element-c89bdf3 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-544 .elementor-element.elementor-element-bc8cfaa .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-544 .elementor-element.elementor-element-c269a71 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-544 .elementor-element.elementor-element-3c3c541 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-544 .elementor-element.elementor-element-bbbaca4 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-544 .elementor-element.elementor-element-055bdfa .elementor-heading-title {
        font-size: calc(18px * var(--a11y-scale-heading)) !important;
    }

    /* --- footer template — post-652.css --- */
    html body[class*="pojo-a11y-resize-font-"] .elementor-652 .elementor-element.elementor-element-f352be1 .elementor-heading-title {
        font-size: calc(20px * var(--a11y-scale-heading)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-652 .elementor-element.elementor-element-b31bb60 .elementor-icon-list-item,
    html body[class*="pojo-a11y-resize-font-"] .elementor-652 .elementor-element.elementor-element-b31bb60 .elementor-icon-list-item > .elementor-icon-list-text,
    html body[class*="pojo-a11y-resize-font-"] .elementor-652 .elementor-element.elementor-element-b31bb60 .elementor-icon-list-item > a {
        font-size: calc(11px * var(--a11y-scale)) !important;
    }
}


/* ==========================================================================
   SECTION 6 — SAFETY NET FOR WIDGETS ADDED AFTER THIS FILE WAS WRITTEN
   --------------------------------------------------------------------------
   Elementor mints a new element id every time a widget is created or
   duplicated, so a widget added later will not match any Section 5 selector.
   Without this block such a widget goes straight back to one of the two
   original failure modes: a heading runs away to 266%, a button freezes.

   These rules reproduce Elementor's OWN default typography scale (the values
   in custom-frontend.min.css) multiplied by the curve, so a widget left on
   default typography scales correctly with no per-id rule at all. They sit
   BELOW Section 5 and are far less specific than it, so every element that IS
   listed above keeps its own designed size — this only catches what nothing
   else claimed.
   ========================================================================== */

/* Elementor button size presets (default when no custom size is set). */
html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-button {
    font-size: calc(15px * var(--a11y-scale-btn)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-button.elementor-size-xs {
    font-size: calc(13px * var(--a11y-scale-btn)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-button.elementor-size-md {
    font-size: calc(16px * var(--a11y-scale-btn)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-button.elementor-size-lg {
    font-size: calc(18px * var(--a11y-scale-btn)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-button.elementor-size-xl {
    font-size: calc(20px * var(--a11y-scale-btn)) !important;
}

/* Elementor heading size presets. .elementor-size-default carries no size of
   its own in Elementor's CSS, so it is deliberately NOT listed — it is fully
   covered by the per-element rules in Section 5. */
html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-heading-title.elementor-size-small {
    font-size: calc(15px * var(--a11y-scale-heading)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-heading-title.elementor-size-medium {
    font-size: calc(19px * var(--a11y-scale-heading)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-heading-title.elementor-size-large {
    font-size: calc(29px * var(--a11y-scale-heading)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-heading-title.elementor-size-xl {
    font-size: calc(39px * var(--a11y-scale-heading)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-heading-title.elementor-size-xxl {
    font-size: calc(59px * var(--a11y-scale-heading)) !important;
}

/* Elementor form widget field sizes (not currently used on this site — the
   contact form is CF7 — but present so a future Elementor form scales too). */
html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-field-textual {
    font-size: calc(15px * var(--a11y-scale-form)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-field-textual.elementor-size-xs {
    font-size: calc(13px * var(--a11y-scale-form)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-field-textual.elementor-size-md {
    font-size: calc(16px * var(--a11y-scale-form)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-field-textual.elementor-size-lg {
    font-size: calc(18px * var(--a11y-scale-form)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-field-textual.elementor-size-xl {
    font-size: calc(20px * var(--a11y-scale-form)) !important;
}

/* --------------------------------------------------------------------------
   6b — MAKE THE RESIZE INSTANT ON ELEMENTOR BUTTONS
   Elementor ships .elementor-button with `transition: all .3s`, and `all`
   includes font-size. A running CSS transition outranks even an !important
   author declaration, so for as long as it plays the button keeps REPORTING
   AND RENDERING its old size. Verified live at 1440px, step 200: while the
   transition was in flight the button stayed at 16.56px and only snapped to
   the correct 28.98px the moment the transition finished — and .elementor-button
   is the ONLY element on the page with a font-size transition.

   In a normal browser that is a 0.3s lag. In a throttled or backgrounded tab
   the transition can stall at t=0 and the button then looks like it never grew
   at all. An accessibility control has to apply immediately, so font-size is
   taken out of the transition list while a resize step is active. The hover
   transitions the design actually wants (colour, border, shadow, transform)
   are all listed explicitly so they keep working.
   -------------------------------------------------------------------------- */
html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-button {
    transition-property: background-color, background-image, color, border-color, box-shadow, transform, opacity, fill, stroke !important;
}

/* Theme button used outside the contact form (base 24px in style.css).
   Kept at (0,2,2) on purpose so the Section 4 rule for
   .private-contact-form .submit-col .global-btn — which is (0,4,2) — keeps
   winning inside the form at every breakpoint. */
html body[class*="pojo-a11y-resize-font-"] .global-btn {
    font-size: calc(24px * var(--a11y-scale-btn)) !important;
}