@charset "UTF-8";
/* ==========================================================================
   One Click Accessibility (Pojo) - font-resize compatibility layer
   Theme: Yafo Tel Aviv (vw-based, RTL, Elementor + CF7)

   WHY THIS FILE EXISTS
   The plugin only emits percentage font-sizes on a fixed element list:
     body.pojo-a11y-resize-font-NN, p, li, label, input, select, textarea,
     legend, code, pre, dd, dt, span, blockquote  -> NN%
     h1..h6 and "h_ span"                          -> NN*1.33%
   On this site that breaks in five ways:
     1. Percentages never resolve against vw, so vw headings do not move.
     2. Percentages COMPOUND through CF7's nested spans
        (measured: .wpcf7-list-item-label 10.08px -> 4096px at step 200).
     3. Units change per breakpoint (0.7vw desktop / 12px mobile), so a single
        override destroys the other band -> every rule is emitted per band.
     4. "h_ span" stacks on top of an already-scaled heading.
     5. <button> and <div> are not in the plugin's list, so .wpcf7-submit and
        .wpcf7-response-output never move at any step.
   Plus: #cc-banner-root (cookie banner) lives OUTSIDE .elementor, so the
   inherit fix cannot reach it - it needs its own pins, all calc()-based.

   HARD RULES
   RULE A  Nothing selected -> design unchanged. Everything font-related is
           gated behind body[class*="pojo-a11y-resize-font-"]. With no class,
           and after Reset, the computed diff vs baseline is {}.
           (Exception: Section 7 is verbatim client-supplied CSS; see note.)
   RULE B  #pojo-a11y-toolbar is a SIBLING of .elementor. Every generic rule is
           scoped to a content root so the toolbar keeps its own behaviour.
           The only toolbar rule here is the deliberate, gated, client-requested
           "menu items a bit smaller" curve in Section 4b.

   All selectors are prefixed html body[class*="pojo-a11y-resize-font-"] so they
   out-specify any handwritten a11y overrides stored in the database.

   MEASURED BASELINES (this site, plugin only, no file)
     body                     18px  (both 1440 and 375)
     .cf7 input               0.8vw / 16px mobile,  height 38px / 40px
     .wpcf7-submit            1vw   / 20px mobile,  height 36px / 44px
     .wpcf7-response-output   0.7vw / 12px  (a <div> - frozen at every step)
     .wpcf7-not-valid-tip     0.7vw / 12px, line-height 2vh (vh = frozen)
     .wpcf7-list-item-label   0.7vw / 12px
     .cc-root 14px (frozen) .cc-title 16px .cc-body 14px .cc-btn inherit(14px)
     toolbar item span        10.368px / 11.2px  -> x2.0 at step 200 (plugin)
   ========================================================================== */


/* ==========================================================================
   SECTION 1 - Two curves (+ one reduced curve for the toolbar)
   Forms and the cookie banner start from the smallest baselines on the page,
   so they need a bigger first jump to feel like anything happened.
   --a11y-scale-toolbar is deliberately the gentlest curve: the client asked for
   the accessibility menu items to grow less than the rest of the page.
   --a11y-ctl-h is the shared control height that keeps the text inputs and the
   submit button exactly the same height at every step (see Section 4).
   ========================================================================== */
:root {
    --a11y-scale: 1;
    --a11y-scale-form: 1;
    --a11y-scale-toolbar: 1;
}
body.pojo-a11y-resize-font-120 { --a11y-scale: 1.08; --a11y-scale-form: 1.20; --a11y-scale-toolbar: 1.05; }
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.13; }
body.pojo-a11y-resize-font-150 { --a11y-scale: 1.28; --a11y-scale-form: 1.48; --a11y-scale-toolbar: 1.16; }
body.pojo-a11y-resize-font-160 { --a11y-scale: 1.35; --a11y-scale-form: 1.55; --a11y-scale-toolbar: 1.20; }
body.pojo-a11y-resize-font-170 { --a11y-scale: 1.42; --a11y-scale-form: 1.62; --a11y-scale-toolbar: 1.24; }
body.pojo-a11y-resize-font-180 { --a11y-scale: 1.48; --a11y-scale-form: 1.68; --a11y-scale-toolbar: 1.28; }
body.pojo-a11y-resize-font-190 { --a11y-scale: 1.54; --a11y-scale-form: 1.72; --a11y-scale-toolbar: 1.31; }
body.pojo-a11y-resize-font-200 { --a11y-scale: 1.60; --a11y-scale-form: 1.75; --a11y-scale-toolbar: 1.35; }

/* Shared control height - measured desktop input 38px / submit 36px,
   mobile input 40px / submit 44px. One value per band makes them identical. */
html body[class*="pojo-a11y-resize-font-"] { --a11y-ctl-h: calc(40px * var(--a11y-scale-form)); }
@media (max-width: 767px) {
    html body[class*="pojo-a11y-resize-font-"] { --a11y-ctl-h: calc(44px * var(--a11y-scale-form)); }
}


/* ==========================================================================
   SECTION 2 - Base pin on <body>
   Deliberately UNSCOPED so the toolbar popup keeps inheriting normally.
   Uses the MEASURED body baseline (18px, not the 16px default) and calc(),
   never a flat px, so the toolbar does not freeze.
   ========================================================================== */
html body[class*="pojo-a11y-resize-font-"] {
    font-size: calc(18px * var(--a11y-scale)) !important;
    /* theme body line-height is a flat 26px: left alone it would not grow and
       the scaled text would overlap line to line. Scaled by the same curve so
       the designed 18/26 proportion is preserved exactly. */
    line-height: calc(26px * var(--a11y-scale)) !important;
}


/* ==========================================================================
   SECTION 3 - Kill compounding inside every content root
   Content roots found on this install (every direct child of <body> that is
   not .elementor, a <script> or the toolbar has been accounted for):
     .elementor                           Elementor pages - the only root on the LP
     .privacy-wrapper                     privacy modal, injected by the theme shortcode
     .description-section / .text-wraper  page.php, 404.php, single.php
     .login-banner / .login-section       single.php wrappers (body children)
     .gold-card-banner / .error-content   404.php wrappers
     .comments-area / .comment-list / .comment-respond   WordPress comment form.
       Measured there without this: <textarea> goes to 115px and its cols-based
       width to 3171px, giving the whole document 1746px of horizontal scroll.
     .lightbox                            lightbox caption, a direct child of <body>
   input/select/textarea are excluded on purpose - Section 4 owns them.
   ========================================================================== */
html body[class*="pojo-a11y-resize-font-"] :is(.elementor, .privacy-wrapper, .description-section, .text-wraper, .login-banner, .login-section, .gold-card-banner, .error-content, .comments-area, .comment-list, .comment-respond, .lightbox) :is(p, li, span, label, blockquote, legend, code, pre, dd, dt) {
    font-size: inherit !important;
}

/* Heading fallback: any heading WITHOUT an explicit pin below would otherwise
   take the plugin's 266% on top of the already-scaled body - measured
   .login-banner h1 at 40px -> 76.6px at step 200.
   The em values reproduce the Bootstrap defaults this theme inherits
   (h1 2.5rem, h2 2rem, h3 1.75rem, h4 1.5rem, h5 1.25rem, h6 1rem) against the
   18px body baseline, so an unpinned heading keeps its exact designed size at
   scale 1 and then grows on the curve instead of exploding - and, unlike a
   single flat ratio, never ends up SMALLER than its baseline.
   Every heading that has a real design size is pinned in Section 4b/5 at a
   higher specificity and wins over this. */
html body[class*="pojo-a11y-resize-font-"] :is(.elementor, .privacy-wrapper, .description-section, .text-wraper, .login-banner, .login-section, .gold-card-banner, .error-content, .comments-area, .comment-list, .comment-respond) h1 { font-size: 2.222em !important; line-height: 1.2 !important; }
html body[class*="pojo-a11y-resize-font-"] :is(.elementor, .privacy-wrapper, .description-section, .text-wraper, .login-banner, .login-section, .gold-card-banner, .error-content, .comments-area, .comment-list, .comment-respond) h2 { font-size: 1.778em !important; line-height: 1.2 !important; }
html body[class*="pojo-a11y-resize-font-"] :is(.elementor, .privacy-wrapper, .description-section, .text-wraper, .login-banner, .login-section, .gold-card-banner, .error-content, .comments-area, .comment-list, .comment-respond) h3 { font-size: 1.556em !important; line-height: 1.2 !important; }
html body[class*="pojo-a11y-resize-font-"] :is(.elementor, .privacy-wrapper, .description-section, .text-wraper, .login-banner, .login-section, .gold-card-banner, .error-content, .comments-area, .comment-list, .comment-respond) h4 { font-size: 1.333em !important; line-height: 1.2 !important; }
html body[class*="pojo-a11y-resize-font-"] :is(.elementor, .privacy-wrapper, .description-section, .text-wraper, .login-banner, .login-section, .gold-card-banner, .error-content, .comments-area, .comment-list, .comment-respond) h5 { font-size: 1.111em !important; line-height: 1.2 !important; }
html body[class*="pojo-a11y-resize-font-"] :is(.elementor, .privacy-wrapper, .description-section, .text-wraper, .login-banner, .login-section, .gold-card-banner, .error-content, .comments-area, .comment-list, .comment-respond) h6 { font-size: 1em !important; line-height: 1.2 !important; }


/* ==========================================================================
   SECTION 4 - Form controls, messages and validation
   One rule per selector PER BREAKPOINT, values mirroring the theme 1:1, media
   blocks in the theme's own source order (style.css base, then
   responsive.css @media(max-width:767px)). px/vw only - never em (CF7 nesting
   compounds) and never rem (shrinks on wide screens).
   Line-heights are forced UNITLESS: the theme uses vh, which does not grow.
   ========================================================================== */

/* -- 4.0 generic floor for any control inside a content root (comment form on
      single.php, the search form on search.php, 404.php). max-width:100% is
      what stops a cols=/size= sized <textarea>/<input> from widening the
      document once the scaled font makes its character box bigger. */
html body[class*="pojo-a11y-resize-font-"] :is(.elementor, .description-section, .text-wraper, .login-banner, .login-section, .gold-card-banner, .error-content, .comments-area, .comment-list, .comment-respond) :is(input, select, textarea):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]) {
    font-size: calc(16px * var(--a11y-scale-form)) !important;
    line-height: 1.2 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* -- 4.1 text inputs - theme base: font 0.8vw, height 3vh, padding 2vh 0.8vw */
html body[class*="pojo-a11y-resize-font-"] .cf7-vertical-layout input[type="text"],
html body[class*="pojo-a11y-resize-font-"] .cf7-vertical-layout input[type="tel"],
html body[class*="pojo-a11y-resize-font-"] .cf7-vertical-layout input[type="email"] {
    font-size: calc(0.8vw * var(--a11y-scale-form)) !important;
    height: var(--a11y-ctl-h) !important;
    min-height: var(--a11y-ctl-h) !important;
    line-height: 1.2 !important;
    padding: 0 0.8vw !important;
    box-sizing: border-box !important;
}

/* -- 4.2 submit - theme base: font 1vw !important, padding 1vh 2vw,
      line-height 2vh, height fit-content !important.
      Same --a11y-ctl-h as the inputs => identical height at every step. */
html body[class*="pojo-a11y-resize-font-"] .checkbox-row-vertical .wpcf7-submit,
html body[class*="pojo-a11y-resize-font-"] .cf7-vertical-layout .wpcf7-submit,
html body[class*="pojo-a11y-resize-font-"] .elementor .wpcf7-submit {
    font-size: calc(1vw * var(--a11y-scale-form)) !important;
    height: var(--a11y-ctl-h) !important;
    min-height: var(--a11y-ctl-h) !important;
    line-height: 1.2 !important;
    padding: 0 2vw !important;
    box-sizing: border-box !important;
}

/* -- 4.3 other submit skins present in the theme (other pages of this build) */
html body[class*="pojo-a11y-resize-font-"] .submit-btn input {
    font-size: calc(1.2vw * var(--a11y-scale-form)) !important;
    height: var(--a11y-ctl-h) !important;
    min-height: var(--a11y-ctl-h) !important;
    line-height: 1.2 !important;
    padding: 0 0.8vw !important;
    box-sizing: border-box !important;
}

/* -- 4.4 response output - a <div>, so the plugin NEVER touches it.
      Theme: 0.7vw, line-height inherited 26px (frozen).
      READABILITY FLOOR: max(14px, themeValue) - 0.7vw renders ~7px on a
      900px-wide tablet. Gated, so the default render is untouched. */
html body[class*="pojo-a11y-resize-font-"] .wpcf7-response-output,
html body[class*="pojo-a11y-resize-font-"] .elementor .wpcf7-response-output,
html body[class*="pojo-a11y-resize-font-"] .wpcf7 form .wpcf7-response-output {
    font-size: calc(max(14px, 0.7vw) * var(--a11y-scale-form)) !important;
    line-height: 1.5 !important;
}

/* -- 4.5 validation tip - theme: 0.7vw / line-height 2vh (vh never grows).
      Requirement: the tip must stay on ONE line at every step.
      Measured worst-case CF7 message on this form
      ("this field has too long input" in Hebrew) is 12.548px wide per 1px of
      font-size. The desktop field column is 12.4vw, so the largest one-line
      font is 12.4 / 12.548 = 0.988vw. Capped at 0.96vw (~3% safety margin)
      with min(). white-space:nowrap then guarantees the single line; the cap
      guarantees it still fits, so nothing overflows into the neighbouring
      column.
      NOTE: the tip is position:static here (no fixed px anchor), so no
      repositioning fix is required on this theme - see Section 4d. */
html body[class*="pojo-a11y-resize-font-"] .elementor .wpcf7-not-valid-tip,
html body[class*="pojo-a11y-resize-font-"] .wpcf7-form .wpcf7-not-valid-tip,
html body[class*="pojo-a11y-resize-font-"] .wpcf7-form-control-wrap .wpcf7-not-valid-tip {
    font-size: min(calc(0.7vw * var(--a11y-scale-form)), 0.96vw) !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    display: block !important;
}

/* -- 4.6 consent label - theme: 0.7vw, line-height 2.3vh */
html body[class*="pojo-a11y-resize-font-"] .elementor .wpcf7-list-item-label,
html body[class*="pojo-a11y-resize-font-"] .check-col .wpcf7-list-item-label,
html body[class*="pojo-a11y-resize-font-"] .wpcf7-form .wpcf7-list-item-label {
    font-size: calc(0.7vw * var(--a11y-scale-form)) !important;
    line-height: 1.45 !important;
}

/* -- 4.7 mobile band, mirroring responsive.css @media(max-width:767px) -- */
@media (max-width: 767px) {

    html body[class*="pojo-a11y-resize-font-"] .cf7-vertical-layout input[type="text"],
    html body[class*="pojo-a11y-resize-font-"] .cf7-vertical-layout input[type="tel"],
    html body[class*="pojo-a11y-resize-font-"] .cf7-vertical-layout input[type="email"] {
        font-size: calc(16px * var(--a11y-scale-form)) !important;
        height: var(--a11y-ctl-h) !important;
        min-height: var(--a11y-ctl-h) !important;
        line-height: 1.2 !important;
        /* theme mobile padding is right-only (RTL text side) */
        padding: 0 10px 0 0 !important;
    }

    /* responsive.css source order: .cf7-vertical-layout .wpcf7-submit (14px)
       comes first, .checkbox-row-vertical .wpcf7-submit (20px) second and wins
       at equal specificity. Mirrored here in the same order. */
    html body[class*="pojo-a11y-resize-font-"] .cf7-vertical-layout .wpcf7-submit {
        font-size: calc(14px * var(--a11y-scale-form)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .checkbox-row-vertical .wpcf7-submit,
    html body[class*="pojo-a11y-resize-font-"] .elementor .wpcf7-submit {
        font-size: calc(20px * var(--a11y-scale-form)) !important;
        height: var(--a11y-ctl-h) !important;
        min-height: var(--a11y-ctl-h) !important;
        line-height: 1.2 !important;
        padding: 0 10px !important;
        /* theme pins width:53%; let it grow with the label so the text never
           wraps or clips once the font scales */
        width: auto !important;
        min-width: 53% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

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

    /* Mobile column is the full form width (measured 315px at 375vw = 84vw),
       so the one-line cap is far more generous than desktop: 6.2vw. */
    html body[class*="pojo-a11y-resize-font-"] .elementor .wpcf7-not-valid-tip,
    html body[class*="pojo-a11y-resize-font-"] .wpcf7-form .wpcf7-not-valid-tip,
    html body[class*="pojo-a11y-resize-font-"] .wpcf7-form-control-wrap .wpcf7-not-valid-tip {
        font-size: min(calc(12px * var(--a11y-scale-form)), 6.2vw) !important;
        line-height: 1.4 !important;
        white-space: nowrap !important;
    }

    html body[class*="pojo-a11y-resize-font-"] .elementor .wpcf7-list-item-label,
    html body[class*="pojo-a11y-resize-font-"] .check-col .wpcf7-list-item-label,
    html body[class*="pojo-a11y-resize-font-"] .wpcf7-form .wpcf7-list-item-label {
        font-size: calc(12px * var(--a11y-scale-form)) !important;
        line-height: 1.45 !important;
    }

    html body[class*="pojo-a11y-resize-font-"] :is(.elementor, .description-section, .text-wraper, .login-banner, .login-section, .gold-card-banner, .error-content, .comments-area, .comment-list, .comment-respond) :is(input, select, textarea):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]) {
        font-size: calc(16px * var(--a11y-scale-form)) !important;
    }
}


/* ==========================================================================
   SECTION 4b - Elements with an intentional size of their own
   Includes everything the theme wrote with :where(), which has ZERO
   specificity: .privacy-content :where(p,li,a) is (0,2,0) and would lose to
   the Section 3 inherit rule (0,2,3) and get flattened. Restated explicitly.
   ========================================================================== */
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content h2 {
    font-size: calc(1.4vw * var(--a11y-scale)) !important;
    line-height: calc(2.6vh * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content p,
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content li,
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content a,
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content span {
    font-size: calc(0.9vw * var(--a11y-scale)) !important;
    line-height: calc(2.6vh * var(--a11y-scale)) !important;
}
@media (max-width: 767px) {
    html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content h2 {
        font-size: calc(16px * var(--a11y-scale)) !important;
        line-height: calc(22px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content p,
    html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content li,
    html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content a,
    html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content span {
        font-size: calc(12px * var(--a11y-scale)) !important;
        line-height: calc(20px * var(--a11y-scale)) !important;
    }
}

/* Accessibility toolbar menu items - CLIENT REQUEST: grow, but noticeably less
   than the rest of the page. The plugin's generic "span" rule doubles them
   (measured 10.368px -> 20.736px at step 200); --a11y-scale-toolbar caps that
   at 1.35x. Gated, so with no step selected the toolbar renders exactly as the
   plugin renders it on its own. */
html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a span,
html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar .pojo-a11y-toolbar-items .pojo-a11y-toolbar-item a span {
    font-size: calc(0.72vw * var(--a11y-scale-toolbar)) !important;
    line-height: 1.6 !important;
}
@media (max-width: 767px) {
    html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a span,
    html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar .pojo-a11y-toolbar-items .pojo-a11y-toolbar-item a span {
        font-size: calc(11.2px * var(--a11y-scale-toolbar)) !important;
    }
}


/* ==========================================================================
   SECTION 4c - Cookie banner (#cc-banner-root)
   The banner is a direct child of <body>, OUTSIDE .elementor, so Section 3
   cannot reach it. Left alone it behaves exactly as described: .cc-title (h2)
   and .cc-body (p) run away while .cc-root and .cc-btn (font:inherit from a
   div) stay frozen at 14px.
   Generic inherit rule FIRST, then explicit pins. Each pin gets both a bare
   and a .cc-root-scoped selector: the inherit rule is (0,2,3), so a bare
   .cc-title pin (0,2,1) would lose - the scoped one is (0,3,1) and wins.
   EVERY pin is calc(px * var(--scale)) - a flat px would freeze the banner.
   .cc-title and .cc-btn use the FORM curve with bumped baselines (16->18,
   14->15) so the first click is a visible jump.
   ========================================================================== */
html body[class*="pojo-a11y-resize-font-"] .cc-root :is(p, li, span, label, a, h1, h2, h3, h4, h5, h6, button, th, td) {
    font-size: inherit !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-root,
html body[class*="pojo-a11y-resize-font-"] #cc-banner-root.cc-root {
    font-size: calc(14px * var(--a11y-scale)) !important;
    line-height: 1.5 !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-title,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-title {
    font-size: calc(18px * var(--a11y-scale-form)) !important;
    line-height: 1.3 !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-body,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-body {
    font-size: calc(14px * var(--a11y-scale-form)) !important;
    line-height: 1.5 !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-btn,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-btn,
html body[class*="pojo-a11y-resize-font-"] .cc-modal .cc-btn {
    font-size: calc(15px * var(--a11y-scale-form)) !important;
    line-height: 1.3 !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-btn.cc-btn-text,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-btn.cc-btn-text {
    font-size: calc(15px * var(--a11y-scale-form)) !important;
}
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;
    line-height: 1.3 !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-modal-head h2,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-modal-head h2 {
    font-size: calc(18px * var(--a11y-scale)) !important;
    line-height: 1.3 !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-modal-close,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-modal-close {
    font-size: calc(24px * var(--a11y-scale)) !important;
    line-height: 1 !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-cat-desc,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-cat-desc {
    font-size: calc(13px * var(--a11y-scale)) !important;
    line-height: 1.5 !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-required-badge,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-required-badge {
    font-size: calc(11px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-cookies-list,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-cookies-list,
html body[class*="pojo-a11y-resize-font-"] .cc-cookies-list th,
html body[class*="pojo-a11y-resize-font-"] .cc-cookies-list td,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-cookies-list th,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-cookies-list td {
    font-size: calc(12px * var(--a11y-scale)) !important;
    line-height: 1.5 !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-cat-name,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-cat-name {
    font-size: calc(14px * var(--a11y-scale)) !important;
}


/* ==========================================================================
   SECTION 4d - Validation tip POSITIONING
   Not required on this theme: .wpcf7-not-valid-tip resolves to
   position:static / top:auto / bottom:auto at 375 and 1440 in all of
   none / 130 / 200 (measured overlap 0px, spill 0px). There is no fixed px
   anchor to restore, so nothing is emitted here. Section 4.5 keeps the tip on
   one line, which is what actually moves on this build.
   ========================================================================== */


/* ==========================================================================
   SECTION 5 - Every font-size rule from every stylesheet on the page,
   gated and multiplied by the matching curve. Base first, then again inside
   each source @media block, in the theme's own source order.
   Sources: uploads/.../elementor/css/post-2.css, post-208.css,
            theme assets/css/style.css, theme assets/css/responsive.css
   ========================================================================== */

/* -- post-2.css, base (vw)
      Every line-height the theme pairs with these sizes is vh or px, i.e. it
      does NOT grow with the font. Each one is mirrored here multiplied by the
      same curve, so the designed font/line ratio survives at every step and
      the lines never collide. -- */
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-2f26df9 .elementor-heading-title {
    font-size: calc(1vw * var(--a11y-scale)) !important;
    line-height: calc(2.8vh * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-c3a4e03 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-f98ad8a .elementor-heading-title {
    font-size: calc(1vw * var(--a11y-scale)) !important;
    line-height: calc(2.6vh * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-b9f78f5 .elementor-heading-title {
    font-size: calc(1.2vw * var(--a11y-scale)) !important;
    line-height: calc(3vh * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-0feab58 .elementor-heading-title {
    font-size: calc(1.5vw * var(--a11y-scale)) !important;
    line-height: calc(3vh * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-9960019 .elementor-image-box-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-42018f7 .elementor-image-box-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-7f1ff5c .elementor-image-box-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-3759890 .elementor-image-box-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-2a37979 .elementor-image-box-title {
    font-size: calc(0.8vw * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-9960019 .elementor-image-box-description,
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-42018f7 .elementor-image-box-description,
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-7f1ff5c .elementor-image-box-description,
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-3759890 .elementor-image-box-description,
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-2a37979 .elementor-image-box-description {
    font-size: calc(0.78vw * var(--a11y-scale)) !important;
    line-height: calc(2vh * var(--a11y-scale)) !important;
}

/* -- post-208.css (gallery popup), base -- */
html body[class*="pojo-a11y-resize-font-"] .elementor-208 .elementor-element.elementor-element-1ab52ffd .elementor-swiper-button.elementor-swiper-button-prev,
html body[class*="pojo-a11y-resize-font-"] .elementor-208 .elementor-element.elementor-element-1ab52ffd .elementor-swiper-button.elementor-swiper-button-next {
    font-size: calc(12vh * var(--a11y-scale)) !important;
}

/* -- theme style.css, base -- */
html body[class*="pojo-a11y-resize-font-"] .dialog-close-button {
    font-size: calc(2vw * var(--a11y-scale)) !important;
}

/* -- post-2.css @media(max-width:767px) -- */
@media (max-width: 767px) {
    html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-23692ca .elementor-heading-title {
        font-size: calc(24px * var(--a11y-scale)) !important;
        line-height: calc(28px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-d624276,
    html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-0022b4f {
        font-size: calc(16px * var(--a11y-scale)) !important;
        line-height: calc(20px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-f98ad8a .elementor-heading-title {
        font-size: calc(17px * var(--a11y-scale)) !important;
        line-height: calc(20px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-4b5ed38,
    html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-32a2fd1 {
        font-size: calc(10px * var(--a11y-scale)) !important;
        line-height: calc(14px * var(--a11y-scale)) !important;
    }
}


/* ==========================================================================
   SECTION 6 - Checkbox tick visibility in the four display modes
   Measured on this build: the tick is drawn by
   .wpcf7-checkbox input[type=checkbox]:checked::after { content:"OK glyph" }
   in var(--main-color) #384888. Against the mode backgrounds that gives:
     default           bg #eeddbd  -> readable
     high contrast     bg #000     -> dark blue on black, effectively invisible
     negative contrast bg #000     -> same
     light background  bg #fff     -> readable, but the cream border vanishes
     grayscale         bg #eeddbd  -> desaturates to low contrast
   Both ::after (this theme) and ::before (other builds of this stack) are
   covered so the fix holds either way. These rules are gated by the mode class
   itself, so nothing changes in the default view.
   ========================================================================== */
body.pojo-a11y-high-contrast .wpcf7-checkbox input[type="checkbox"]:checked::after,
body.pojo-a11y-high-contrast .wpcf7-checkbox input[type="checkbox"]:checked::before {
    color: #fff !important;
    opacity: 1 !important;
}
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .wpcf7-checkbox input[type="checkbox"]:checked::after,
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .wpcf7-checkbox input[type="checkbox"]:checked::before {
    color: #ff0 !important;
    opacity: 1 !important;
}
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .wpcf7-checkbox input[type="checkbox"]:checked::after,
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .wpcf7-checkbox input[type="checkbox"]:checked::before {
    color: #000 !important;
    opacity: 1 !important;
}
body.pojo-a11y-grayscale .wpcf7-checkbox input[type="checkbox"]:checked::after,
body.pojo-a11y-grayscale .wpcf7-checkbox input[type="checkbox"]:checked::before {
    color: #000 !important;
    opacity: 1 !important;
}
/* Keep the tick centred inside the box in every mode and at every font step:
   the box is a fixed 1.3vw x 2.5vh (19px on mobile), so the glyph must stay
   pinned to the box and must NOT inherit the scaled body size. */
html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox input[type="checkbox"]:checked::after {
    font-size: 0.8vw !important;
    line-height: 1 !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}
@media (max-width: 767px) {
    html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox input[type="checkbox"]:checked::after {
        font-size: 11px !important;
    }
}
/* The box itself must not be squeezed by the surrounding scaled text, and its
   own font-size must not run away either: the plugin's generic "input" rule
   takes it to 57.6px on a 19px box at step 200. Pinning it keeps the box, the
   tick and anything em-based inside it stable. */
html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox input[type="checkbox"] {
    font-size: 0.8vw !important;
    line-height: 1 !important;
    flex: 0 0 auto !important;
    align-self: flex-start !important;
}
@media (max-width: 767px) {
    html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox input[type="checkbox"] {
        font-size: 11px !important;
    }
}


/* ==========================================================================
   SECTION 7 - Client-supplied CSS, added verbatim as requested.
   NOTE: unlike Sections 1-6 this block is NOT gated behind
   pojo-a11y-resize-font-*. The #cc-floater and #pojo-a11y-toolbar position /
   size rules inside it therefore apply in the default view as well and do
   change where the toolbar and the cookie floater sit. That is what was asked
   for; it is called out here so it is not mistaken for a Rule A violation.
   ========================================================================== */
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) input,
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) textarea,
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) select {
    border: 1px solid #000 !important;
}
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) input::placeholder,
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) textarea::placeholder {
    color: #000;
}

/* Remove the problematic body filter only during grayscale mode */
body.pojo-a11y-grayscale {
    -webkit-filter: none !important;
    filter: none !important;
    overflow-x: hidden !important;
}

/* Reapply grayscale to the document root */
html:has(body.pojo-a11y-grayscale) {
    -webkit-filter: grayscale(100%) !important;
    filter: grayscale(100%) !important;
}

/* Change toolbar positioning only during grayscale mode */
body.pojo-a11y-grayscale #pojo-a11y-toolbar {
    position: fixed !important;
    z-index: 99999 !important;
}
.cc-slider, body.pojo-a11y-high-contrast .cc-slider, body.pojo-a11y-grayscale .cc-slider,
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .cc-slider,
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .cc-slider{
    background: #ababff !important;
}
body.pojo-a11y-grayscale .wpcf7-not-valid-tip {
  color: #fff;
}
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .cc-btn{
    border: 1px solid #000 !important;
}
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .cc-slider {
    background: gray !important;
}
body.pojo-a11y-high-contrast .cc-slider {
    background: gray !important;
}
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .cc-slider {
    background: gray !important;
}
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .black-bg img{
    background: #000 !important;
}
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .transparent-bg {
    background: transparent !important;
}
body.pojo-a11y-high-contrast .transparent-bg {
    background: transparent !important;
}
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .transparent-bg {
    background: transparent !important;
}
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .transparent-bg img{
    background: transparent !important;
}
body.pojo-a11y-high-contrast .transparent-bg img{
    background: transparent !important;
}
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .transparent-bg img{
    background: transparent !important;
}
body.pojo-a11y-high-contrast .wpcf7-checkbox input[type="checkbox"]:checked::before {
    color: #fff;
}
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .wpcf7-checkbox input[type="checkbox"]:checked::before {
    color: #fff;
}

body #cc-floater {
    bottom: unset !important;
    top: 12.5vw !important;
    left: 0.2vw !important;
    right: unset !important;
    width: 2.5vw !important;
    height: 2.5vw !important;
    line-height: 2.5vw;
    text-align: center !important;
    z-index: 999 !important;
}
body #cc-floater svg{
    width: 1.5vw !important;
    height: 1.5vw !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
body #pojo-a11y-toolbar{
    z-index: 9999 !important;
    top: 9vw !important;
}
body #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle a {
    font-size: 1.5vw !important;
    padding: 0.6vw !important;
}
body #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle svg{
    width: 1.5vw !important;
}

@media(max-width: 767px){
    body #cc-floater{
        bottom: unset !important;
        top: 25vw !important;
        left: 2px !important;
        width: 7.5vw !important;
        height: 7.5vw !important;
        line-height: 7.5vw;
        padding: 4.5vw !important;
    }
    body #cc-floater svg {
        width: 5vw !important;
        height: 5vw !important;
    }
    body #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle a {
        font-size: 5.5vw !important;
        padding: 2vw !important;
    }
    body #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle svg {
        width: 5.8vw !important;
    }
    body #pojo-a11y-toolbar {
        top: 13vw !important;
    }

    .cc-banner {
            padding: 16px !important;
    }
    .cc-pos-right {
        left: 50% !important;
        right: unset !important;
        bottom: 10px !important;
        width: 95%;
        transform: translateX(-50%);
    }
    .cc-btn{
        padding: 7px 9px !important;
    }
}

/* Remove the problematic body filter only during grayscale mode */
	body.pojo-a11y-grayscale {
		-webkit-filter: none !important;
		filter: none !important;
		overflow-x: hidden !important;
	}

	/* Reapply grayscale to the document root */
	html:has(body.pojo-a11y-grayscale) {
		-webkit-filter: grayscale(100%) !important;
		filter: grayscale(100%) !important;
	}

	/* Change toolbar positioning only during grayscale mode */
	body.pojo-a11y-grayscale #pojo-a11y-toolbar {
		position: fixed !important;
		z-index: 99999 !important;
	}
.cc-slider, body.pojo-a11y-high-contrast .cc-slider, body.pojo-a11y-grayscale .cc-slider,
	body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .cc-slider,
	body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .cc-slider{
		background: #ababff !important;
	}
body.pojo-a11y-grayscale .wpcf7-not-valid-tip {
  color: #fff;
}
	body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .cc-btn{
		border: 1px solid #000 !important;
	}
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .cc-slider {
		background: gray !important;
	}
	body.pojo-a11y-high-contrast .cc-slider {
		background: gray !important;
	}
	body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .cc-slider {
		background: gray !important;
	}
#pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a svg {
    padding-right: 0 !important;
    padding-left: 6px !important;
}


/* ==========================================================================
   SECTION 8 - Font resize: keep the form off the logo strip (desktop)
   The hero column .elementor-element-c12965e paints desktop-bg.png with
   background-size:contain / background-position:0 100%, and the partner logo
   strip is baked into the BOTTOM of that image - it is not a DOM element, so
   nothing in the flow knows it is there.
   MEASURED: the PNG is 934x960 and the logos occupy rows 886-934, i.e. the
   bottom 7.71% of the image. In the default render the content column
   .elementor-element-4667903 stops 118px (16.6% of the 712px column) above the
   container's bottom edge, which is what clears them.
   That clearance is pure slack: the container is only taller than its content
   because the section carries min-height:100vh. As soon as the resized font
   makes the content taller than 100vh the container starts being sized BY the
   content, the slack goes to zero, and the consent label and submit button land
   on top of the logos (measured at step 200: content bottom 1045px, logos
   988-1025px).
   Reserving the same 16.5% as padding-bottom on the content column - a
   percentage, so it resolves against the column's own width and tracks the
   viewport - restores the designed clearance at every step (measured: 63px of
   gap at 120 through 200, against 73px in the default render).
   It has to sit on the INNER column, not on the container: background-position
   resolves against the padding box, so padding on the container would carry the
   image down with it and change nothing.
   Gated, so with no step selected padding-bottom is 0 and the render is
   untouched. Desktop only - the mobile section (.elementor-element-3a7ed21)
   stacks plain <img> elements in flow and cannot overlap.
   ========================================================================== */
@media (min-width: 768px) {
    html body[class*="pojo-a11y-resize-font-"] .elementor-element-c12965e > .elementor-element-4667903 {
        padding-bottom: 16.5% !important;
    }
}


/* ==========================================================================
   SECTION 9 - Contrast modes: floating overlay images, and the sound toggle
   Two plugin rules on the generic element lists cause all of this:
     body.pojo-a11y-high-contrast *        { background-image: none !important }
     body.pojo-a11y-<mode> div,a,img,...   { background: black !important }

   9a  The gallery / "build has started" buttons are transparent PNGs floating
       over the video. The plugin paints their wrappers (.e-con-inner and the
       <a>) solid black and the <img> itself #808080, which draws an opaque
       plate around each button.
       Every element the theme floats over the video this way carries the
       theme's own .w-fit-content utility - verified: the only four elements on
       the page that have it are the vertical rule image, the gallery button
       container and the two button images - so that class is the exact handle
       for "transparent overlay, must stay transparent".
       Scoped to it deliberately: blanking the plate on EVERY image would also
       strip the #808080 backing off the in-flow amenity icons, which are dark
       line art and would then be invisible on black.

   9b  The sound toggle is a bare <button> whose icon is a background-image.
       background-image:none erases the icon and the plugin then paints the
       button #600040 / black - the black square with a white outline that gets
       reported as "the mute button disappeared".
       The icon is restored as a MASK rather than as a background-image: both
       SVGs ship with fill="#000000" and would be invisible against the dark
       mode backgrounds, and mask + background-color re-tints those same two
       files to each mode's foreground without adding any assets.
       mask-size:contain reproduces the theme's background-size:contain exactly.

   SPECIFICITY: in negative-contrast and light-background the winning rules are
   the :not(#pojo-a11y-toolbar) ones, which carry an ID's weight - measured, a
   class-only override at (0,5,3) with !important still loses to them. Every
   selector below therefore mirrors that shape, which also keeps the toolbar
   itself out of scope exactly as Sections 6 and 7 do.
   Grayscale is listed for completeness only: it applies a filter and leaves
   backgrounds alone, so these rules are a no-op there (verified - the toggle
   still resolves to its own background-image and the wrappers to transparent).
   Everything is gated behind a mode class, so the default view is untouched.
   ========================================================================== */

/* -- 9a  transparent overlays stay transparent in every mode -- */
body.pojo-a11y-high-contrast :not(#pojo-a11y-toolbar) :is(.w-fit-content, .w-fit-content .e-con-inner, .w-fit-content a, .w-fit-content img),
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) :is(.w-fit-content, .w-fit-content .e-con-inner, .w-fit-content a, .w-fit-content img),
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) :is(.w-fit-content, .w-fit-content .e-con-inner, .w-fit-content a, .w-fit-content img),
body.pojo-a11y-grayscale :not(#pojo-a11y-toolbar) :is(.w-fit-content, .w-fit-content .e-con-inner, .w-fit-content a, .w-fit-content img) {
    background-color: transparent !important;
}

/* -- 9b  sound toggle: drop the plate, redraw the icon as a tinted mask -- */
body.pojo-a11y-high-contrast :not(#pojo-a11y-toolbar) :is(#Button_toggleButton_0, #Button_toggleButton_m),
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) :is(#Button_toggleButton_0, #Button_toggleButton_m),
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) :is(#Button_toggleButton_0, #Button_toggleButton_m) {
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center center;
            mask-position: center center;
    -webkit-mask-size: contain;
            mask-size: contain;
}

/* unmuted - mirrors .div-button-button-on in assets/css/style.css */
body.pojo-a11y-high-contrast :not(#pojo-a11y-toolbar) :is(#Button_toggleButton_0, #Button_toggleButton_m).div-button-button-on,
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) :is(#Button_toggleButton_0, #Button_toggleButton_m).div-button-button-on,
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) :is(#Button_toggleButton_0, #Button_toggleButton_m).div-button-button-on {
    -webkit-mask-image: url("../images/audio.svg");
            mask-image: url("../images/audio.svg");
}

/* muted - mirrors .div-button-button-off in assets/css/style.css */
body.pojo-a11y-high-contrast :not(#pojo-a11y-toolbar) :is(#Button_toggleButton_0, #Button_toggleButton_m).div-button-button-off,
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) :is(#Button_toggleButton_0, #Button_toggleButton_m).div-button-button-off,
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) :is(#Button_toggleButton_0, #Button_toggleButton_m).div-button-button-off {
    -webkit-mask-image: url("../images/mute.svg");
            mask-image: url("../images/mute.svg");
}

/* Icon colour = that mode's own foreground, so the glyph reads against that
   mode's background: white on black, yellow on black, black on white. */
body.pojo-a11y-high-contrast :not(#pojo-a11y-toolbar) :is(#Button_toggleButton_0, #Button_toggleButton_m) {
    background-color: #fff !important;
}
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) :is(#Button_toggleButton_0, #Button_toggleButton_m) {
    background-color: #ff0 !important;
}
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) :is(#Button_toggleButton_0, #Button_toggleButton_m) {
    background-color: #000 !important;
}

/* -- 9c  gallery popup slider arrows
       The prev/next arrows in the gallery popup (post 208, pinned for size in
       Section 5) are .elementor-swiper-button divs holding an inline <svg> whose
       two <line> elements carry a hard-coded stroke="white" attribute. The
       button itself is transparent by design and the white stroke reads against
       the photo behind it.
       MEASURED per mode, with no fix: the plugin paints the button AND the svg
         high contrast     button #600040, svg #000 - unwanted plate
         negative contrast button #000,    svg #000 - unwanted plate
         light background  button #fff,    svg #fff - unwanted plate, AND the
                           white stroke on the white plate leaves the arrow
                           completely invisible (two blank squares)
         grayscale         untouched
       Clearing the plate is not enough on its own: once it is gone the arrow
       sits straight on the mode's own backdrop, so the stroke has to be pinned
       to that mode's foreground or light background just swaps one invisible
       arrow for another. CSS wins over an SVG presentation attribute, so
       stroke: here overrides the stroke="white" in the markup.
       Colours are the same four used for the checkbox tick in Section 6 and the
       sound toggle in 9b: #fff / #ff0 / #000, grayscale left alone.
       The <svg> children are included in the transparent list because the
       plugin paints the descendants too, not just the button.
       Grayscale is a no-op here, listed only so the rule covers every mode. -- */
body.pojo-a11y-high-contrast :not(#pojo-a11y-toolbar) :is(.elementor-swiper-button, .elementor-swiper-button svg, .elementor-swiper-button svg *),
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) :is(.elementor-swiper-button, .elementor-swiper-button svg, .elementor-swiper-button svg *),
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) :is(.elementor-swiper-button, .elementor-swiper-button svg, .elementor-swiper-button svg *),
body.pojo-a11y-grayscale :not(#pojo-a11y-toolbar) :is(.elementor-swiper-button, .elementor-swiper-button svg, .elementor-swiper-button svg *) {
    background-color: transparent !important;
}

/* arrow stroke = that mode's foreground, so it reads once the plate is gone */
body.pojo-a11y-high-contrast :not(#pojo-a11y-toolbar) .elementor-swiper-button svg :is(line, path, polyline, polygon) {
    stroke: #fff !important;
}
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .elementor-swiper-button svg :is(line, path, polyline, polygon) {
    stroke: #ff0 !important;
}
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .elementor-swiper-button svg :is(line, path, polyline, polygon) {
    stroke: #000 !important;
}