/*==============================================================================
  Varburg theme - One Click Accessibility (Pojo) corrections
  --------------------------------------------------------------------------
  Everything that reacts to the font-resize buttons is gated behind
  body[class*="pojo-a11y-resize-font-"].  With no step selected - and after
  Reset - this file contributes nothing, so the baseline design is untouched.

  Measured baselines (deployed CSS removed, plugin only):
    body 18px | biggest heading 3.6vw | input 1.2vw/16px | submit 1.3vw/18px
    tip 0.8vw/12px | response-output 0.9vw/10px (a <div>, never moved)
    .cc-root 14px, .cc-btn font-size:inherit (a <button>, never moved)
  Only one breakpoint exists on this site: max-width:767px.
==============================================================================*/


/*==============================================================================
  SECTION 1 - the scale curves
  Three curves, because three kinds of content have three different ceilings.

  --a11y-scale  (1.02 -> 1.10)  The home page copy. Deliberately small. This
      page is built as fixed-vw panels sitting on decorative diagonal shapes,
      and the text has nowhere to go: measured on the live page, 1.10 is the
      last value at which nothing is covered by the artwork. At 1.15 the small
      footnote goes under the map section, and by 1.30 the price figures do
      too - exactly the breakage that was reported.
  --a11y-scale-free (1.15 -> 1.60)  The blog post, the 404 page and the privacy
      modal. Plain flowing templates with no artwork to collide with, so they
      get the full range.
  --a11y-scale-form (1.30 -> 1.75)  Inputs, submit, validation, response text
      and the cookie banner. Not inside the artwork either, and these are the
      ones a visitor actually has to read and type into, so they grow most.

  --a11y-scale-toolbar (1.06 -> 1.35)  The accessibility menu itself. It has to
      grow - the person using it asked for bigger text - but deliberately less
      than everything else, so it stays the smaller control it was designed to
      be. See Section 4e. No width is ever set on the toolbar.
==============================================================================*/
:root{
    --a11y-scale: 1;
    --a11y-scale-form: 1;
    --a11y-scale-free: 1;
    --a11y-scale-toolbar: 1;
}
body.pojo-a11y-resize-font-130{ --a11y-scale:1.02; --a11y-scale-form:1.30; --a11y-scale-free:1.15; --a11y-scale-toolbar:1.06; }
body.pojo-a11y-resize-font-140{ --a11y-scale:1.03; --a11y-scale-form:1.40; --a11y-scale-free:1.22; --a11y-scale-toolbar:1.10; }
body.pojo-a11y-resize-font-150{ --a11y-scale:1.04; --a11y-scale-form:1.48; --a11y-scale-free:1.28; --a11y-scale-toolbar:1.14; }
body.pojo-a11y-resize-font-160{ --a11y-scale:1.05; --a11y-scale-form:1.55; --a11y-scale-free:1.35; --a11y-scale-toolbar:1.18; }
body.pojo-a11y-resize-font-170{ --a11y-scale:1.06; --a11y-scale-form:1.62; --a11y-scale-free:1.42; --a11y-scale-toolbar:1.22; }
body.pojo-a11y-resize-font-180{ --a11y-scale:1.07; --a11y-scale-form:1.68; --a11y-scale-free:1.48; --a11y-scale-toolbar:1.26; }
body.pojo-a11y-resize-font-190{ --a11y-scale:1.09; --a11y-scale-form:1.72; --a11y-scale-free:1.54; --a11y-scale-toolbar:1.30; }
body.pojo-a11y-resize-font-200{ --a11y-scale:1.10; --a11y-scale-form:1.75; --a11y-scale-free:1.60; --a11y-scale-toolbar:1.35; }

/* Shared form-control metrics. One height for inputs AND submit, so the two
   are identical on every device at every step. */
html body[class*="pojo-a11y-resize-font-"]{
    --a11y-ctl-fs: calc(max(14px, 1.2vw) * var(--a11y-scale-form));
    --a11y-submit-fs: calc(max(14px, 1.3vw) * var(--a11y-scale-form));
    --a11y-ctl-h: calc(var(--a11y-ctl-fs) * 2.2 + 4px);
}
@media(max-width:767px){
    html body[class*="pojo-a11y-resize-font-"]{
        --a11y-ctl-fs: calc(16px * var(--a11y-scale-form));
        --a11y-submit-fs: calc(18px * var(--a11y-scale-form));
    }
}


/*==============================================================================
  SECTION 2 - base pin on <body>
  The plugin sizes everything in %, which resolves against the parent and so
  never sees the vw type scale. Pin body to its measured 18px baseline times
  the curve. Deliberately UNSCOPED, and calc() rather than a flat px, so the
  toolbar popup keeps behaving instead of freezing.
==============================================================================*/
html body[class*="pojo-a11y-resize-font-"]{
    font-size: calc(18px * var(--a11y-scale)) !important;
}


/*==============================================================================
  SECTION 3 - kill the compounding
  The plugin re-applies NN% at every nesting level, and CF7 nests
  p > span > span > span (measured 12.96px -> 2048px at step 200). Inside every
  content root on this site, text-level elements simply inherit.
  Content roots: .elementor (home + popups), .description-section /
  .login-section / .text-wraper (page.php, single.php, 404.php),
  .privacy-content (privacy modal), .wpcf7-form.
  Form controls are excluded here and handled in Section 4.
==============================================================================*/
html body[class*="pojo-a11y-resize-font-"] :is(.elementor,.description-section,.login-section,.text-wraper,.privacy-content,.wpcf7-form) :is(p,li,span,label,blockquote,legend,code,pre,dd,dt,figcaption),
html body[class*="pojo-a11y-resize-font-"] :is(.elementor,.description-section,.login-section,.text-wraper,.privacy-content,.wpcf7-form) :is(h1,h2,h3,h4,h5,h6) :is(span,a,b,strong,em,i,small){
    font-size: inherit !important;
}

/* Those same roots carry the page copy of the blog post, the 404 page and the
   privacy modal - none of which sit inside the fixed hero artwork - so they get
   the full curve. Section 3 makes their p/li/span inherit, so setting the root
   is enough. */
html body[class*="pojo-a11y-resize-font-"] :is(.description-section,.login-section,.text-wraper,.privacy-content){
    font-size: calc(18px * var(--a11y-scale-free)) !important;
}

/* Plain-template headings (page.php / single.php / 404.php) have no vw size of
   their own, so pin them to the UA ratios against the scaled 18px baseline
   instead of letting the plugin stack 266% on top of an already scaled body. */
html body[class*="pojo-a11y-resize-font-"] :is(.description-section,.login-section,.text-wraper,.privacy-content) h1{ font-size: calc(36px * var(--a11y-scale-free)) !important; }
html body[class*="pojo-a11y-resize-font-"] :is(.description-section,.login-section,.text-wraper,.privacy-content) h2{ font-size: calc(27px * var(--a11y-scale-free)) !important; }
html body[class*="pojo-a11y-resize-font-"] :is(.description-section,.login-section,.text-wraper,.privacy-content) h3{ font-size: calc(21px * var(--a11y-scale-free)) !important; }
html body[class*="pojo-a11y-resize-font-"] :is(.description-section,.login-section,.text-wraper,.privacy-content) h4{ font-size: calc(18px * var(--a11y-scale-free)) !important; }
html body[class*="pojo-a11y-resize-font-"] :is(.description-section,.login-section,.text-wraper,.privacy-content) h5{ font-size: calc(15px * var(--a11y-scale-free)) !important; }
html body[class*="pojo-a11y-resize-font-"] :is(.description-section,.login-section,.text-wraper,.privacy-content) h6{ font-size: calc(12px * var(--a11y-scale-free)) !important; }


/*==============================================================================
  SECTION 4 - form controls, messages and validation
  One rule per selector per breakpoint, mirroring the theme values 1:1, media
  blocks in the theme's own source order (base, then max-width:767px).
  px / vw only - never em (CF7 nesting compounds) and never rem (shrinks wide).
  A 14px readability floor is applied because 0.8vw-0.9vw renders ~7px on a
  900px-wide desktop. It is gated, so the default render is untouched.
==============================================================================*/

/* --- text inputs, textarea, select ------------------------------------- */
html body[class*="pojo-a11y-resize-font-"] .wpcf7-form input:not([type="checkbox"]):not([type="submit"]):not([type="hidden"]),
html body[class*="pojo-a11y-resize-font-"] .wpcf7-form textarea,
html body[class*="pojo-a11y-resize-font-"] .wpcf7-form select{
    font-size: var(--a11y-ctl-fs) !important;
    line-height: 1.2 !important;
    height: var(--a11y-ctl-h) !important;
    min-height: var(--a11y-ctl-h) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
html body[class*="pojo-a11y-resize-font-"] .wpcf7-form textarea{
    height: auto !important;
    min-height: calc(var(--a11y-ctl-h) * 2) !important;
    padding-top: calc(var(--a11y-ctl-fs) * 0.4) !important;
    padding-bottom: calc(var(--a11y-ctl-fs) * 0.4) !important;
}

/* --- submit button: same explicit height as the inputs, every device ---- */
html body[class*="pojo-a11y-resize-font-"] .wpcf7-form .submit-btn input[type="submit"],
html body[class*="pojo-a11y-resize-font-"] .wpcf7-form .submit-col input[type="submit"],
html body[class*="pojo-a11y-resize-font-"] .wpcf7-form input.wpcf7-submit{
    font-size: var(--a11y-submit-fs) !important;
    line-height: 1.2 !important;
    height: var(--a11y-ctl-h) !important;
    min-height: var(--a11y-ctl-h) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* --- response output: a <div>, so the plugin never touches it at all ---- */
html body[class*="pojo-a11y-resize-font-"] .wpcf7-form .wpcf7-response-output,
html body[class*="pojo-a11y-resize-font-"] .wpcf7 form .wpcf7-response-output{
    font-size: calc(max(14px, 0.9vw) * var(--a11y-scale-form)) !important;
    line-height: 1.5 !important;   /* theme uses 2vh, which does not grow */
}

/* --- validation tips: always exactly one line -------------------------- */
/* The cap keeps the longest message (the e-mail one, 14.1px of width per 1px
   of font-size) inside the 20vw-wide field, so it can never wrap. */
html body[class*="pojo-a11y-resize-font-"] .wpcf7-form .wpcf7-not-valid-tip{
    font-size: min(calc(max(12px, 0.8vw) * var(--a11y-scale-form)), 1.35vw) !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
}

/* --- checkbox box + tick, scaled together so the tick stays centred ----- */
html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox input[type="checkbox"]{
    min-width: calc(1.3vw * var(--a11y-scale-form)) !important;
    width: calc(1.3vw * var(--a11y-scale-form)) !important;
    height: calc(2.5vh * var(--a11y-scale-form)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox input[type="checkbox"]:checked::after{
    font-size: calc(0.8vw * var(--a11y-scale-form)) !important;
    line-height: 1 !important;
}
html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox label{
    padding-right: calc(1.8vw * var(--a11y-scale-form)) !important;
}

@media(max-width:767px){
    html body[class*="pojo-a11y-resize-font-"] .wpcf7-form .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;
    }
    html body[class*="pojo-a11y-resize-font-"] .wpcf7-form .wpcf7-not-valid-tip{
        font-size: min(calc(12px * var(--a11y-scale-form)), 6vw) !important;
        line-height: 1.3 !important;
        white-space: nowrap !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox input[type="checkbox"]{
        min-width: calc(16px * var(--a11y-scale-form)) !important;
        width: calc(16px * var(--a11y-scale-form)) !important;
        height: calc(16px * var(--a11y-scale-form)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox input[type="checkbox"]:checked::after{
        font-size: calc(11px * var(--a11y-scale-form)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox label{
        padding-right: calc(22px * var(--a11y-scale-form)) !important;
    }
}


/*==============================================================================
  SECTION 4b - elements that carry a deliberate size of their own
  Restated explicitly because Section 3 flattens spans, and because the theme
  writes some of these through :where(), which has ZERO specificity and would
  otherwise lose to Section 3.
==============================================================================*/
html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox .wpcf7-list-item-label,
html body[class*="pojo-a11y-resize-font-"] .wpcf7-form .wpcf7-list-item-label{
    font-size: calc(max(14px, 0.9vw) * var(--a11y-scale-form)) !important;
    line-height: 1.4 !important;
}
html body[class*="pojo-a11y-resize-font-"] .main-form-title{
    font-size: calc(max(14px, 0.93vw) * var(--a11y-scale)) !important;
    line-height: 1.4 !important;
}
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content h2{
    font-size: calc(1.4vw * var(--a11y-scale-free)) !important;
    line-height: 1.4 !important;
}
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content :is(p,li,a){
    font-size: calc(max(14px, 0.8vw) * var(--a11y-scale-free)) !important;
    line-height: 1.6 !important;
}
html body[class*="pojo-a11y-resize-font-"] .sec-title span.primary-title,
html body[class*="pojo-a11y-resize-font-"] .sec-title span.secondary-title{
    font-size: inherit !important;
}
/* CookieYes selectors kept in the theme - gated, harmless if the plugin is off */
html body[class*="pojo-a11y-resize-font-"] .cky-notice .cky-notice-group :is(.cky-notice-des > p, .cky-notice-des a){
    font-size: calc(max(14px, 0.9vw) * var(--a11y-scale)) !important;
    line-height: 1.6 !important;
}
html body[class*="pojo-a11y-resize-font-"] .cky-btn{
    font-size: calc(max(14px, 1vw) * var(--a11y-scale-form)) !important;
    line-height: 1.4 !important;
}

@media(max-width:767px){
    html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox .wpcf7-list-item-label,
    html body[class*="pojo-a11y-resize-font-"] .wpcf7-form .wpcf7-list-item-label{
        font-size: calc(14px * var(--a11y-scale-form)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .main-form-title{
        font-size: calc(14px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content h2{
        font-size: calc(16px * var(--a11y-scale-free)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content :is(p,li,a){
        font-size: calc(14px * var(--a11y-scale-free)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .cky-notice .cky-notice-group :is(.cky-notice-des > p, .cky-notice-des a){
        font-size: calc(14px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .cky-btn{
        font-size: calc(14px * var(--a11y-scale-form)) !important;
    }
}


/*==============================================================================
  SECTION 4c - cookie banner (#cc-banner-root)
  The banner is a SIBLING of .elementor - a direct child of <body> - so the
  Section 3 inherit fix cannot reach it. Measured plugin-only behaviour:
  .cc-title 16 -> 37.24px and .cc-body 14 -> 28px run away, while .cc-root (a
  div) and .cc-btn (a button with font-size:inherit) stay frozen at 14px.
  Generic inherit rule first, then explicit pins - each pin gets a bare and a
  .cc-root-scoped selector. Every pin is calc(px * scale), never flat px, so
  the banner scales instead of freezing.
  .cc-title and .cc-btn ride the FORM curve with bumped baselines (16->18,
  14->15) so the very first click is a visible jump.
==============================================================================*/
html body[class*="pojo-a11y-resize-font-"] .cc-root :is(p,li,span,label,a,button,div){
    font-size: inherit !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-root,
html body[class*="pojo-a11y-resize-font-"] #cc-banner-root{
    font-size: calc(14px * var(--a11y-scale)) !important;
    line-height: 1.5 !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-title,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-title{
    font-size: calc(18px * var(--a11y-scale-form)) !important;
    line-height: 1.3 !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-body,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-body{
    font-size: calc(14px * var(--a11y-scale-form)) !important;
    line-height: 1.5 !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-btn,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-btn,
html body[class*="pojo-a11y-resize-font-"] .cc-btn.cc-btn-text,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-btn.cc-btn-text{
    font-size: calc(15px * var(--a11y-scale-form)) !important;
    line-height: 1.4 !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-lang-toggle,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-lang-toggle{
    font-size: calc(12px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-modal-head h2,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-modal-head h2{
    font-size: calc(18px * var(--a11y-scale)) !important;
    line-height: 1.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-name,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-cat-name{
    font-size: calc(14px * var(--a11y-scale)) !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-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 - validation tip positioning
  The field tips are position:absolute; top:50%; transform:translateY(-50%) -
  an auto-tracking anchor, which is fine once the tip is forced onto one line.
  The consent tip inherits that same top:50% while being position:relative, so
  it drifted +54px at step 130 and drew over the label. Neutralise the anchor
  and let it sit in flow directly under the label instead.
  At enlarged sizes the checkbox row and the submit button stack, which is what
  gives the consent label and its one-line tip the full form width.
==============================================================================*/
html body[class*="pojo-a11y-resize-font-"] .checkbox-group{
    flex-wrap: wrap !important;
    row-gap: calc(1vh * var(--a11y-scale-form)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .checkbox-group > .check-col,
html body[class*="pojo-a11y-resize-font-"] .checkbox-group > .submit-col{
    width: 100% !important;
}
html body[class*="pojo-a11y-resize-font-"] .check-col{
    position: relative !important;
}
html body[class*="pojo-a11y-resize-font-"] .check-col .wpcf7-not-valid-tip{
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    display: block !important;
    width: max-content !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    margin-top: calc(1vh * var(--a11y-scale-form)) !important;
    font-size: min(calc(max(12px, 0.8vw) * var(--a11y-scale-form)), 1.45vw) !important;
}
@media(max-width:767px){
    html body[class*="pojo-a11y-resize-font-"] .check-col .wpcf7-not-valid-tip{
        font-size: min(calc(12px * var(--a11y-scale-form)), 6.5vw) !important;
        margin-top: calc(6px * var(--a11y-scale-form)) !important;
    }
}


/*==============================================================================
  SECTION 4e - accessibility menu type
  The plugin's generic `span` rule has no toolbar exception, so at step 200 it
  puts the menu labels at 200% of their own size: measured 9.2px -> 18.4px at
  1280 wide, against body copy of 19.8px. The menu ends up as large as the page
  it is meant to be a control for.

  So the labels simply inherit from their link again, and the toolbar rides its
  own gentle curve (1.06 -> 1.35) instead of the plugin's 2.0. That keeps the
  menu growing - so it stays usable for someone who needed bigger text in the
  first place - while holding it clearly smaller than everything else: about
  65% of body copy at the top step, against 51% at baseline.

  No width is set here: the panel keeps the theme's own 9vw / 32vw.
==============================================================================*/
/* Default size, ungated. The theme gives the toolbar 0.9vw, and the menu
   labels are 0.8em of that - so 9.2px on a 1280 screen, 13.8px even on a 1920
   one. An 18px floor puts the labels at 14.4px everywhere, which is a readable
   control rather than fine print. The panel keeps the theme width, so the one
   long label ("kishurim kav tachton") wraps onto two lines - that is the
   trade-off for not touching the width. */
html #pojo-a11y-toolbar{
    --a11y-tb-w: 185px;
    font-size: 16px !important;
}
/* Panel width. The theme's 9vw is 115px on a 1280 screen, but the longest
   label needs 162.6px at the default size, and 207px once the toolbar curve
   has taken it to 19.4px at step 200 - measured, including the 30px of padding
   and the 1.5em icon. 215px covers both, and on a very wide monitor 9vw takes
   over again. The width is a single static value rather than one that scales
   with the step, because the theme transitions `right` over 0.75s and a width
   that moved on a step change would leave the closed panel part-way onscreen. The toggle
   offset and the closed offset have to move with it or the panel no longer
   parks off-screen. */
html #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay{
    width: var(--a11y-tb-w) !important;
}
html #pojo-a11y-toolbar.pojo-a11y-toolbar-right .pojo-a11y-toolbar-toggle{
    right: var(--a11y-tb-w) !important;
}
html #pojo-a11y-toolbar.pojo-a11y-toolbar-right{
    right: calc(var(--a11y-tb-w) * -1) !important;
}
html #pojo-a11y-toolbar.pojo-a11y-toolbar-right.pojo-a11y-toolbar-open{
    right: 0 !important;
}

/* Row spacing. The plugin uses a flat 10px, which stays 10px however large
   the menu type gets - that is what made the rows look packed together on a
   big monitor. 1em grows with the menu; the 12px floor is there because 1em of
   a small link would otherwise be LESS than the plugin default and make the
   spacing worse on mid-size screens. */
/* With the labels at 14.4px in a panel the theme keeps at 9vw / 32vw, the
   longer ones wrap onto two lines and the menu gets tall: measured 604px at
   step 200 on a 390x780 phone, against 780 - 48vw of top offset = 581px of
   room, which put Reset off the bottom with no way to scroll to it. Capping
   the panel to the space below the toolbar keeps Reset reachable. It is not a
   width and not a font-size - just containment. */
html #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay{
    max-height: max(180px, calc(100vh - 9vw - 12px)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
}
html #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a{
    padding: 7px 12px !important;
    white-space: nowrap !important;
}
/* ...and the gentle curve rides on top of that floor while a step is active. */
html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar{
    font-size: calc(16px * var(--a11y-scale-toolbar)) !important;
}
html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay :is(span,p,li,label,strong,em){
    font-size: inherit !important;
}
@media(max-width:767px){
    html #pojo-a11y-toolbar{
        --a11y-tb-w: 185px;
    }
    html #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay{
        max-height: max(180px, calc(100vh - 48vw - 12px)) !important;
    }
    /* mobile opens from the left, so the offsets flip */
    html #pojo-a11y-toolbar.pojo-a11y-toolbar-right .pojo-a11y-toolbar-toggle{
        left: var(--a11y-tb-w) !important;
        right: unset !important;
    }
    html #pojo-a11y-toolbar.pojo-a11y-toolbar-right{
        left: calc(var(--a11y-tb-w) * -1) !important;
        right: unset !important;
    }
    html #pojo-a11y-toolbar.pojo-a11y-toolbar-right.pojo-a11y-toolbar-open{
        left: 0 !important;
        right: unset !important;
    }

    html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar{
        font-size: calc(16px * var(--a11y-scale-toolbar)) !important;
    }
}

/*==============================================================================
  SECTION 5 - every font-size declaration found in every post-*.css on the site
  Gated, multiplied by --a11y-scale, grouped by shared value, base first and
  then re-stated inside the theme's only breakpoint (max-width:767px).
  Without these the plugin replaces a 3.6vw heading with a percentage of body
  and the heading SHRINKS: measured 51.84px -> 35.96px at step 130.
==============================================================================*/
/* --- base --- */
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-14f8836 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-cf08ca8 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-9bc3ba0 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-537b350 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-bb5b5af .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-e78c4f3 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-bd9fc3b .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-4337064 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-2691ea3 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-486a220 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-6f5fe27 .elementor-heading-title {
    font-size: calc(0.95vw * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-a503cbc .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-2a38039 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-98f379b .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-db9897d .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-a83f9bb .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-c437c0b .elementor-heading-title {
    font-size: calc(1vw * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-e1a90f3 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-fb0bc95 .elementor-heading-title {
    font-size: calc(1.2vw * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-c9c830f .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-4e77b14 .elementor-heading-title {
    font-size: calc(1.23vw * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-6c16c48 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-9882e6d .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-f43632c .elementor-heading-title {
    font-size: calc(1.5vw * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-b340514 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-2c401b0 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-ea3a127 .elementor-heading-title {
    font-size: calc(1.6vw * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] #elementor-popup-modal-463 .dialog-close-button {
    font-size: calc(2vw * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-706de33 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-bee9a5f .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-97d2df0 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-90e537b .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-ff93ca2 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-8460811 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-680aa77 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-55c6f6b .elementor-heading-title {
    font-size: calc(3.6vw * var(--a11y-scale)) !important;
}

/* --- <=767 --- */
@media(max-width:767px){
    html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-e1a90f3 .elementor-heading-title {
        font-size: calc(2.4vw * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-14f8836 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-cf08ca8 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-9bc3ba0 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-2691ea3 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-486a220 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-6f5fe27 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-f7195a8,
    html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-d9ab7de,
    html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-610fe3c,
    html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-68cc699,
    html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-a83f9bb .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-c437c0b .elementor-heading-title {
        font-size: calc(3vw * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-4e77b14 .elementor-heading-title {
        font-size: calc(4vw * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-6c16c48 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-f43632c .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-680aa77 .elementor-heading-title {
        font-size: calc(5vw * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-706de33 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-ff93ca2 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-8460811 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-55c6f6b .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] #elementor-popup-modal-463 .dialog-close-button {
        font-size: calc(6vw * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-b340514 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-ea3a127 .elementor-heading-title {
        font-size: calc(9vw * var(--a11y-scale)) !important;
    }
}



/*==============================================================================
  SECTION 5c - readable backing behind text that leaves its shape
  The home page sits its copy in fixed-vw panels on decorative diagonal shapes.
  Even with the capped curve the longer blocks can reach past the shape and end
  up over a photograph, which is what made them unreadable. Client's call: give
  that text a solid plate of its own so it reads wherever it lands.

  Measured text colours decide the plate:
    white rgb(255,255,255) and orange rgb(243,137,84) -> the brand green
    #005655, which both read cleanly against.
    b81c969 is the exception - its copy is rgb(0,86,85), the green itself, so
    a green plate would erase it. That one gets white.

  Only while a font step is active; with nothing selected the panels are bare
  exactly as designed.
==============================================================================*/
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-2c82d84 :is(.elementor-heading-title,.elementor-widget-text-editor),
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-13d75c7 :is(.elementor-heading-title,.elementor-widget-text-editor),
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-cd6273b :is(.elementor-heading-title,.elementor-widget-text-editor),
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-ec6c8b0 :is(.elementor-heading-title,.elementor-widget-text-editor),
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-290bfa1 :is(.elementor-heading-title,.elementor-widget-text-editor),
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-4c4344b :is(.elementor-heading-title,.elementor-widget-text-editor),
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-588ee9e :is(.elementor-heading-title,.elementor-widget-text-editor),
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-6d27ffa :is(.elementor-heading-title,.elementor-widget-text-editor),
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-2903d4b :is(.elementor-heading-title,.elementor-widget-text-editor),
html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-9f98931 :is(.elementor-heading-title,.elementor-widget-text-editor),
html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-e492172 :is(.elementor-heading-title,.elementor-widget-text-editor),
html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-c403db1 :is(.elementor-heading-title,.elementor-widget-text-editor),
html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-79fe64e :is(.elementor-heading-title,.elementor-widget-text-editor),
html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-2050165 :is(.elementor-heading-title,.elementor-widget-text-editor) {
    background-color: #005655 !important;
    padding: 0.1em 0.35em !important;
    border-radius: 4px !important;
    display: inline !important;
    box-decoration-break: clone !important;
}
/* Those headings are two-tone: white text with a <span class="primary-title">
   in rgb(0,86,85) - the very green the plate is painted in, so that word went
   invisible. Measured on five of them: "al ha-yishuv", "mapat ha-ezor",
   "ha-karka meusheret" and the two mobile twins. On the plate that span turns
   white; .secondary-title is orange and already reads fine against green. */
html body[class*="pojo-a11y-resize-font-"] .elementor-2 :is(.elementor-element-2c82d84,.elementor-element-13d75c7,.elementor-element-cd6273b,.elementor-element-ec6c8b0,.elementor-element-290bfa1,.elementor-element-4c4344b,.elementor-element-588ee9e,.elementor-element-6d27ffa,.elementor-element-2903d4b) :is(.elementor-heading-title,.elementor-widget-text-editor) .primary-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-195 :is(.elementor-element-9f98931,.elementor-element-e492172,.elementor-element-c403db1,.elementor-element-79fe64e,.elementor-element-2050165) :is(.elementor-heading-title,.elementor-widget-text-editor) .primary-title {
    color: #ffffff !important;
}
/* ATERRA / Amit Group block, and the surveyor note in the mobile tree: the copy
   in both is the green itself, so they need the opposite plate or the text would
   vanish. 68cc699 measured rgb(0,86,85) and goes under its container at step 200
   on a 375px screen, which is what put it here. */
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-b81c969 :is(.elementor-heading-title,.elementor-widget-text-editor),
html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-68cc699 > p {
    background-color: #ffffff !important;
    padding: 0.1em 0.35em !important;
    border-radius: 4px !important;
    display: inline !important;
    box-decoration-break: clone !important;
}


/* On a phone these headings carry a run of zero-width spaces (12 in "mapat
   ha-atar", 19 in "al ha-yishuv") that forces a break, so an inline plate split
   into one box per line and stair-stepped. inline-block makes it a single box
   that shrink-wraps the longest line instead - measured 92x62 and 77x62, both
   inside their parent, covering nothing. Same specificity as the plate rule
   above, so it wins on source order. */
@media (max-width: 767px){
    html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-2c82d84 :is(.elementor-heading-title),
    html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-13d75c7 :is(.elementor-heading-title),
    html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-cd6273b :is(.elementor-heading-title),
    html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-ec6c8b0 :is(.elementor-heading-title),
    html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-290bfa1 :is(.elementor-heading-title),
    html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-4c4344b :is(.elementor-heading-title),
    html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-588ee9e :is(.elementor-heading-title),
    html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-6d27ffa :is(.elementor-heading-title),
    html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-2903d4b :is(.elementor-heading-title),
    html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-9f98931 :is(.elementor-heading-title),
    html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-e492172 :is(.elementor-heading-title),
    html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-c403db1 :is(.elementor-heading-title),
    html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-79fe64e :is(.elementor-heading-title),
    html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-2050165 :is(.elementor-heading-title){
        display: inline-block !important;
    }
}


/*==============================================================================
  SECTION 5b - line-height
  Every line-height on this site is written in `vh` (or a fixed px on mobile),
  and neither unit reacts to font-size. So at the larger steps the type grew
  while the line box stayed put and the lines collided - worst case the 3.6vw
  hero heading, whose 6vh leading is only 1.04x its own size.
  Each ratio below is the theme's own leading divided by its own font-size,
  measured at the reference viewport for that band (1440x900 for base,
  375x812 for the mobile block), then written unitless so it tracks the type.
  Floor 1.15 so lines can never collide, ceiling 2.0 so nothing drifts apart.
  Form controls and messages keep the explicit leading set in Section 4.
==============================================================================*/
/* base */
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-706de33 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-90e537b .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-bee9a5f .elementor-heading-title {
    line-height: 1.15 !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-2c401b0 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-ea3a127 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-b340514 .elementor-heading-title {
    line-height: 1.17 !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-55c6f6b .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-680aa77 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-8460811 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-ff93ca2 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-97d2df0 .elementor-heading-title {
    line-height: 1.22 !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-9882e6d .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-f43632c .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-6c16c48 .elementor-heading-title {
    line-height: 1.25 !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-4e77b14 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-c9c830f .elementor-heading-title {
    line-height: 1.27 !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-fb0bc95 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-e1a90f3 .elementor-heading-title {
    line-height: 1.30 !important;
}
html body[class*="pojo-a11y-resize-font-"] {
    line-height: 1.44 !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-2691ea3 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-4337064 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-486a220 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-6f5fe27 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-bd9fc3b .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-e78c4f3 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-14f8836 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-537b350 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-9bc3ba0 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-bb5b5af .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-cf08ca8 .elementor-heading-title {
    line-height: 1.64 !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-a83f9bb .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-c437c0b .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-2a38039 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-98f379b .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-a503cbc .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-db9897d .elementor-heading-title {
    line-height: 1.88 !important;
}

@media(max-width:767px){
    html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-55c6f6b .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-680aa77 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-8460811 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-ff93ca2 .elementor-heading-title {
        line-height: 1.15 !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-ea3a127 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-b340514 .elementor-heading-title {
        line-height: 1.20 !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-f43632c .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-6c16c48 .elementor-heading-title {
        line-height: 1.30 !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-706de33 .elementor-heading-title {
        line-height: 1.37 !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-2691ea3 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-486a220 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-610fe3c,
    html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-68cc699,
    html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-6f5fe27 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-d9ab7de,
    html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-f7195a8,
    html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-14f8836 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-9bc3ba0 .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-cf08ca8 .elementor-heading-title {
        line-height: 1.44 !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-4e77b14 .elementor-heading-title {
        line-height: 1.62 !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-a83f9bb .elementor-heading-title,
    html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-c437c0b .elementor-heading-title {
        line-height: 1.80 !important;
    }
}

/*==============================================================================
  SECTION 6 - contrast modes
  These are keyed on the contrast body classes, NOT on the resize classes, and
  they do nothing at all unless one of those modes is switched on.

  6a. Bring the background photographs back.
      High contrast forces background-image:none on every element; negative
      contrast and light background use the `background` shorthand, which wipes
      the image plus its position/size/repeat. The five containers that carry a
      photograph on this site are restored with the exact values from
      post-2.css / post-195.css, including the mobile-only variants.
      The container background COLOURS are deliberately not restored - the
      colour is what the contrast mode is there to replace.
==============================================================================*/
html body:is(.pojo-a11y-high-contrast,.pojo-a11y-negative-contrast,.pojo-a11y-light-background) .elementor-2 .elementor-element.elementor-element-880437a:not(#pojo-a11y-toolbar){
    background-image: url("https://sde-varburd.webzsites.site/wp-content/uploads/sites/23/2025/09/map-sec22.webp") !important;
    background-position: top right !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}
html body:is(.pojo-a11y-high-contrast,.pojo-a11y-negative-contrast,.pojo-a11y-light-background) .elementor-2 .elementor-element.elementor-element-f204b40:not(#pojo-a11y-toolbar){
    background-image: url("https://sde-varburd.webzsites.site/wp-content/uploads/sites/23/2025/09/sport-ground.webp") !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}
html body:is(.pojo-a11y-high-contrast,.pojo-a11y-negative-contrast,.pojo-a11y-light-background) .elementor-2 .elementor-element.elementor-element-7d20a04:not(#pojo-a11y-toolbar){
    background-image: url("https://sde-varburd.webzsites.site/wp-content/uploads/sites/23/2025/09/farm.webp") !important;
    background-position: top center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-color: transparent !important;
}
html body:is(.pojo-a11y-high-contrast,.pojo-a11y-negative-contrast,.pojo-a11y-light-background) .elementor-195 .elementor-element.elementor-element-3d5257c:not(#pojo-a11y-toolbar){
    background-image: url("https://sde-varburd.webzsites.site/wp-content/uploads/sites/23/2025/09/farm.webp") !important;
    background-position: top center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-color: transparent !important;
}
@media(max-width:767px){
    html body:is(.pojo-a11y-high-contrast,.pojo-a11y-negative-contrast,.pojo-a11y-light-background) .elementor-2 .elementor-element.elementor-element-880437a:not(#pojo-a11y-toolbar){
        background-position: center center !important;
    }
    html body:is(.pojo-a11y-high-contrast,.pojo-a11y-negative-contrast,.pojo-a11y-light-background) .elementor-195 .elementor-element.elementor-element-8e82534:not(#pojo-a11y-toolbar){
        background-image: url("https://sde-varburd.webzsites.site/wp-content/uploads/sites/23/2025/09/mobile-1.webp") !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
    }
}

/* 6b. Strip the flat colour off layout containers so those photographs are
       actually visible. Text-level elements keep the contrast background, so
       the colour still sits behind the words and nowhere else.
       The :not(#pojo-a11y-toolbar) is there to out-specify the plugin's own
       light-background rule, which carries an ID in the selector.            */
html body:is(.pojo-a11y-high-contrast,.pojo-a11y-negative-contrast,.pojo-a11y-light-background) :is(.elementor,.e-con,.e-con-inner,.e-con-full,.e-parent,.e-child,.elementor-section,.elementor-container,.elementor-row,.elementor-column,.elementor-column-wrap,.elementor-widget,.elementor-widget-wrap,.elementor-widget-container,.elementor-widget-image,.elementor-image,.container,.container-fluid,.row,.content-wraper,.content-wrapper,.text-wraper,.form-wrapper,.logo-wrapper,.position-relative,.description-section,.login-section,.checkbox-group,.form-field-col,.check-col,.submit-col):not(#pojo-a11y-toolbar){
    background-color: transparent !important;
}

/* 6b2. Every image keeps a transparent background in every contrast mode.
        The plugin paints a solid grey plate behind each <img>
        (body.pojo-a11y-high-contrast img {background:#808080}), which shows
        through logos and transparent PNGs as a grey/black box. Cleared here
        for img/svg/video/picture/canvas/iframe and their Elementor wrappers.
        The :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) pair is what
        out-specifies the plugin's own light-background rule, which carries an
        ID plus two classes in its selector.                                  */
html body:is(.pojo-a11y-high-contrast,.pojo-a11y-negative-contrast,.pojo-a11y-light-background,.pojo-a11y-grayscale) :is(img,svg,video,picture,canvas,iframe,figure,.elementor-widget-image,.elementor-image,.elementor-widget-image .elementor-widget-container,.wp-caption,.attachment-full,.size-full):not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link){
    background: transparent !important;
    background-color: transparent !important;
}
/* Elementor image widgets also wrap the <img> in a link - clear that too.    */
html body:is(.pojo-a11y-high-contrast,.pojo-a11y-negative-contrast,.pojo-a11y-light-background,.pojo-a11y-grayscale) :is(.elementor-widget-image a,.elementor-image a):not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link){
    background: transparent !important;
    background-color: transparent !important;
}

/* 6e. The mobile menu (Elementor popup 699) must read orange in every contrast
       mode. Five of its six rows are full-width PNGs with the orange baked in
       (menu-1..menu-5); the sixth, last-menu.png, is only 48% wide, so the row
       behind it shows the popup's own background - black once a contrast mode
       is on, which is why that one item looked different. Painting the popup
       container in the brand orange makes every row read the same.
       The :not(#pojo-a11y-toolbar) is what out-specifies the plugin's own
       light-background rule, which carries an ID.                            */
html body:is(.pojo-a11y-high-contrast,.pojo-a11y-negative-contrast,.pojo-a11y-light-background,.pojo-a11y-grayscale) #elementor-popup-modal-699 .dialog-widget-content:not(#pojo-a11y-toolbar),
html body:is(.pojo-a11y-high-contrast,.pojo-a11y-negative-contrast,.pojo-a11y-light-background,.pojo-a11y-grayscale) #elementor-popup-modal-699 .dialog-message:not(#pojo-a11y-toolbar),
html body:is(.pojo-a11y-high-contrast,.pojo-a11y-negative-contrast,.pojo-a11y-light-background,.pojo-a11y-grayscale) .elementor-699 .elementor-element.elementor-element-b9513a2:not(#pojo-a11y-toolbar),
html body:is(.pojo-a11y-high-contrast,.pojo-a11y-negative-contrast,.pojo-a11y-light-background,.pojo-a11y-grayscale) .elementor-699 .elementor-element.m-menu-item:not(#pojo-a11y-toolbar){
    background-color: #f48856 !important;
    background-image: none !important;
}

/* 6c. Checkbox tick must stay visible inside its box in every mode.
       The theme draws it with ::after; the ::before variants are included so
       either markup works.                                                   */
html body.pojo-a11y-high-contrast .wpcf7-checkbox input[type="checkbox"]:checked::after,
html body.pojo-a11y-high-contrast .wpcf7-checkbox input[type="checkbox"]:checked::before,
html body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .wpcf7-checkbox input[type="checkbox"]:checked::after,
html body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .wpcf7-checkbox input[type="checkbox"]:checked::before{
    color: #fff !important;
    opacity: 1 !important;
}
html body.pojo-a11y-high-contrast .wpcf7-checkbox input[type="checkbox"],
html body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .wpcf7-checkbox input[type="checkbox"]{
    border-color: #fff !important;
}
html body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .wpcf7-checkbox input[type="checkbox"]:checked::after,
html 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;
}
html body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .wpcf7-checkbox input[type="checkbox"]{
    border-color: #000 !important;
    background: #fff !important;
}
html body.pojo-a11y-grayscale .wpcf7-checkbox input[type="checkbox"]:checked::after,
html body.pojo-a11y-grayscale .wpcf7-checkbox input[type="checkbox"]:checked::before{
    color: #000 !important;
    opacity: 1 !important;
}
html body.pojo-a11y-grayscale .wpcf7-checkbox input[type="checkbox"]{
    border-color: #000 !important;
}
/* The tick is absolutely centred in its box in every mode, at any font step. */
html body:is(.pojo-a11y-high-contrast,.pojo-a11y-negative-contrast,.pojo-a11y-light-background,.pojo-a11y-grayscale) .wpcf7-checkbox input[type="checkbox"]:checked::after{
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    line-height: 1 !important;
}

/* 6d. Text that the contrast modes would otherwise leave unreadable.        */
html body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .submit-btn input,
html body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) input.wpcf7-submit{
    color: #000 !important;
    border: 1px solid #000 !important;
}
html body.pojo-a11y-high-contrast .submit-btn input,
html body.pojo-a11y-high-contrast input.wpcf7-submit,
html body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .submit-btn input,
html body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) input.wpcf7-submit{
    color: #fff !important;
    border: 1px solid #fff !important;
}
html body.pojo-a11y-high-contrast input::placeholder,
html body.pojo-a11y-high-contrast textarea::placeholder,
html body.pojo-a11y-negative-contrast input::placeholder,
html body.pojo-a11y-negative-contrast textarea::placeholder{
    color: #fff !important;
    opacity: 1 !important;
}
/* Light background: the placeholder has to be black, and it has to beat the
   theme's own `input::placeholder{color:var(--white-color) !important}` in
   responsive.css:94. The client's rule in Section 7 carries no !important, so
   below 767px the placeholder stayed white on white and the fields read as
   empty. Restated here with !important and a higher specificity so it wins at
   every width. */
html body.pojo-a11y-light-background input::placeholder,
html body.pojo-a11y-light-background textarea::placeholder,
html body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) input::placeholder,
html body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) textarea::placeholder{
    color: #000 !important;
    opacity: 1 !important;
}


/*==============================================================================
  SECTION 7 - CSS supplied by the client, included verbatim
==============================================================================*/
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: 60vw !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: 48vw !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 - cookie toggle sits directly under the accessibility toggle
  Section 7 parks #cc-floater on the LEFT edge (left:0.2vw) while the
  accessibility toggle sits on the RIGHT, so the two controls ended up on
  opposite sides of the screen. This puts the cookie button under the
  accessibility one, on the same edge.

  The position is derived rather than guessed, so it still holds if the toolbar
  offset changes:
    toolbar top          9vw   (Section 7)
    toggle height        2.7vw = font-size 1.5vw + padding 0.6vw top and bottom
                                 (measured 34.5px at 1280 wide)
    gap                  10px
  and the toggle's right edge is flush with the viewport, so centring the
  2.5vw floater under the 2.7vw toggle needs (2.7 - 2.5) / 2 = 0.1vw.

  Mobile mirrors it: there the toolbar is on the left with top 48vw and a
  toggle of 5.5vw + 2vw + 2vw = 9.5vw, and the floater is 7.5vw wide.
==============================================================================*/
html body #cc-floater{
    top: calc(9vw + 2.7vw + 10px) !important;
    right: 0.1vw !important;
    left: auto !important;
    bottom: auto !important;
}
@media(max-width: 767px){
    html body #cc-floater{
        top: calc(48vw + 9.8vw + 8px) !important;
        left: 0.4vw !important;
        right: auto !important;
        bottom: auto !important;
    }
}


/*==============================================================================
  SECTION 9 - short screens (landscape phones)
  Section 7 parks the toolbar at top:48vw on mobile. That is a WIDTH-based
  offset, so on a landscape phone it collapses: at 740x360 it resolves to
  355px in a 360px-tall viewport, leaving the panel - and Reset with it -
  entirely below the fold, with no way to scroll to it because the panel
  itself starts off-screen.

  Only on screens that are both narrow and short, lift the toolbar to the top
  and bring the cookie button with it, so the pair stays usable. Portrait
  phones are above this height and keep the design exactly as drawn.
==============================================================================*/
@media (max-width: 767px) and (max-height: 560px){
    html body #pojo-a11y-toolbar{
        top: 8px !important;
    }
    html body #cc-floater{
        top: calc(8px + 9.8vw + 8px) !important;
    }
}


/*==============================================================================
  SECTION 10 - dark contrast modes: black page, no container plates, readable logos

  High contrast used to leave the page white because the plugin's white-background
  rules are written as descendant selectors (body.pojo-a11y-high-contrast body)
  that never match BODY itself, while negative contrast sets BODY directly. The
  three blocks below make high contrast match negative contrast, strip the light
  container plates that survive in both, and put a white plate behind the dark
  logo artwork so it stays readable on the black page.

  Everything here is gated behind a contrast-mode class, so with no mode selected
  the design is untouched (RULE A). #pojo-a11y-toolbar is excluded (RULE B).
==============================================================================*/

/* 10a. make the high-contrast page black, exactly like negative contrast. */
html body.pojo-a11y-high-contrast{
    background-color: #000000 !important;
}

/* 10b. remove the leftover light container plates across the whole site so a
   background is only painted behind text. Beats the plugin's own
   "background: black !important" (0,2,1) and the per-page colours that Elementor
   writes into post-*.css. Headings and text editors are excluded on purpose -
   they carry the readable plates from section 5c. */
html body:is(.pojo-a11y-high-contrast,.pojo-a11y-negative-contrast) :is(.elementor,.e-con,.e-con-inner,.e-con-full,.e-parent,.e-child,.elementor-section,.elementor-container,.elementor-column,.elementor-column-wrap,.elementor-widget-wrap,.elementor-widget:not(.elementor-widget-heading):not(.elementor-widget-text-editor)):not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link){
    background-color: transparent !important;
}

/* 10c. logos are dark artwork on a transparent canvas, so on the black page they
   disappear. Give them a white plate. The four :not() guards are what lift this
   rule to (1,5,2) so it out-specifies section 6b2 (1,4,2), which forces every
   image transparent; they also keep the toolbar out of range. Only the two dark
   modes are listed - light background and grayscale keep a light page, where a
   plate would be a needless change to the design. */
html body:is(.pojo-a11y-high-contrast,.pojo-a11y-negative-contrast) img[src*="logo"]:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link):not(.pojo-a11y-toolbar-title):not(.pojo-a11y-toolbar-item),
html body:is(.pojo-a11y-high-contrast,.pojo-a11y-negative-contrast) img[src*="atera"]:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link):not(.pojo-a11y-toolbar-title):not(.pojo-a11y-toolbar-item),
html body:is(.pojo-a11y-high-contrast,.pojo-a11y-negative-contrast) img[src*="aterra"]:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link):not(.pojo-a11y-toolbar-title):not(.pojo-a11y-toolbar-item),
html body:is(.pojo-a11y-high-contrast,.pojo-a11y-negative-contrast) img[src*="ami-group"]:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link):not(.pojo-a11y-toolbar-title):not(.pojo-a11y-toolbar-item),
html body:is(.pojo-a11y-high-contrast,.pojo-a11y-negative-contrast) img[src*="amit"]:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link):not(.pojo-a11y-toolbar-title):not(.pojo-a11y-toolbar-item){
    background-color: #ffffff !important;
    padding: 6px !important;
    border-radius: 4px !important;
}


/* 10d. With no contrast mode on the page keeps its own colours, so a plate is
   only wanted where a logo actually sits on the dark green. Measured every logo
   on the page: exactly two have a backdrop of rgb(0,86,85) (luminance 60) -
   7be103f in the desktop tree and f4ff902 in the mobile one. The rest, the AMIT
   GROUP and ATERRA marks in 4e55b2f, 3f1fb75, 66e320a and a30ae9a among them,
   sit on white at luminance 255, where a white plate would show as a box around
   nothing. They are left alone here; the dark contrast modes are handled by 10c
   above, which does cover every logo because there the whole page is black. */
html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-7be103f img:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link):not(.pojo-a11y-toolbar-title):not(.pojo-a11y-toolbar-item),
html body[class*="pojo-a11y-resize-font-"] .elementor-195 .elementor-element.elementor-element-f4ff902 img:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link):not(.pojo-a11y-toolbar-title):not(.pojo-a11y-toolbar-item){
    background-color: #ffffff !important;
    padding: 6px !important;
    border-radius: 4px !important;
}


/*==============================================================================
  SECTION 11 - consent checkbox plate

  The contact form's consent checkbox is drawn with appearance:none, a 1px green
  border and no fill, so where the form sits over the photograph the empty box
  all but disappears. Give it a white plate and keep its tick dark enough to read
  on that plate in every contrast mode - section 7 paints the tick white for high
  and negative contrast, which would be white on white once the fill is there.
==============================================================================*/
html body input[type="checkbox"]:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link){
    background-color: #ffffff !important;
}
html body input[type="checkbox"]:checked::before,
html body:is(.pojo-a11y-high-contrast,.pojo-a11y-negative-contrast,.pojo-a11y-light-background,.pojo-a11y-grayscale) .wpcf7-checkbox input[type="checkbox"]:checked::before{
    color: #005655 !important;
}


/*==============================================================================
  SECTIONS 12-15 - stacking and panel background, DESKTOP AND TABLET ONLY

  All four blocks below are wrapped in min-width:768px on the client's
  instruction: on a phone the enlarged type plus these overrides rearranged the
  page badly, so phones keep exactly the behaviour they had before any of this
  was added. Nothing here applies under 768px.

  12 - keep text above the artwork.
       The pages lay copy over photographs and diagonal shapes. At the default
       size the glyphs clear the artwork, but once the font grows the lines
       reach further out and the images, which paint later, cover the ends of
       them. The lift is z-index 3, not a large number: decorative containers
       sit at 2 and the design's own absolutely placed title containers at 4.
       At 1 the artwork still covered the copy; at 10 a body-copy widget
       outranked the title container and hid the heading instead.
       Widgets Elementor places absolutely keep their own position - forcing
       position:relative on those dropped them out of their panels entirely.

  13 - separate a section title from its decorative artwork.
       A title container holds BOTH the title and the triangle beside it and
       carries z-index 4, so the pair paints as one unit and no z-index on the
       body copy is right either way. The container stops forming a stacking
       context so its children can be ordered: title 6, copy 3, artwork 1.

  14 - the copy panel must paint above the photo beside it.
       f204b40 (copy) and 23d5d69 (photo) are siblings BOTH at z-index 2, so
       document order decided it and the photo won. farm-img.webp has a
       transparent diagonal, so the copy showed through part of it and vanished
       under the rest - the text that looked cut off mid-word. Measured at
       1360x667 step 200: 100% covered over 277 samples before, 0% after, with
       the photo-side text still at 0% covered.

  15 - the description panel carries the green.
       Client's call, and scoped to that one panel only: 290bfa1, the block
       holding the two description paragraphs. The per-line plates in section
       5c are kept - same green, invisible against the panel, but they still
       back any line that runs past the panel edge.
       Measuring note: getComputedStyle lies about these .e-con panels. It
       reports rgba(0,0,0,0) even for an inline !important background. A fresh
       clone of the node, or a forced reflow, reports the true rgb(0,86,85).
==============================================================================*/
@media (min-width: 768px){

    html body[class*="pojo-a11y-resize-font-"] :is(.elementor-widget-heading,.elementor-widget-text-editor):not(.elementor-absolute):not(.elementor-fixed):not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link){
        position: relative !important;
        z-index: 3 !important;
    }
    html body[class*="pojo-a11y-resize-font-"] :is(.elementor-widget-heading,.elementor-widget-text-editor):is(.elementor-absolute,.elementor-fixed):not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link){
        z-index: 10 !important;
    }

    html body[class*="pojo-a11y-resize-font-"] .elementor-element:has(> .elementor-absolute):not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link){
        z-index: auto !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-absolute:is(.elementor-widget-heading,.elementor-widget-text-editor):not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link){
        z-index: 6 !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor-element:has(> .elementor-absolute) .elementor-widget-image:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link){
        position: relative !important;
        z-index: 1 !important;
    }

    html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-f204b40{
        position: relative !important;
        z-index: 6 !important;
    }

    html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-290bfa1{
        background-color: #005655 !important;
        border-radius: 6px !important;
    }
}


/*==============================================================================
  SECTION 16 - white plate behind the contact form when the type is enlarged

  Client's request, from a phone screenshot where the form sat over the
  photograph. The form's own container gets the plate, so the form always
  carries its own background regardless of how tall it grows or how far its
  parent reaches - f8bacfb on the mobile tree (it holds the intro line, the
  three fields, the consent row and the submit), 29506be on the desktop one.

  Deliberately NOT inside the min-width:768px block above: this one was asked
  for on the phone, so it applies at every width.

  High contrast and negative contrast are excluded. Both turn the page black and
  force the text white, so a white plate there would be white text on white.
  Light background and grayscale keep dark text, so they are left in.
==============================================================================*/
html body[class*="pojo-a11y-resize-font-"]:not(.pojo-a11y-high-contrast):not(.pojo-a11y-negative-contrast) .elementor-195 .elementor-element.elementor-element-f8bacfb,
html body[class*="pojo-a11y-resize-font-"]:not(.pojo-a11y-high-contrast):not(.pojo-a11y-negative-contrast) .elementor-2 .elementor-element.elementor-element-29506be{
    background-color: #ffffff !important;
    border-radius: 6px !important;
    padding: 12px !important;
}