/* =============================================================================
 * accessibility.css - After2Webz
 * Overrides for the "One Click Accessibility" (Pojo) plugin.
 *
 * 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   -> font-size: NN%
 *     ...and h1..h6 / h_ span                        -> font-size: NN*1.33%
 * On this theme that breaks in five ways:
 *   1. every size is vw - a percentage resolves against the PARENT, not the
 *      viewport, so a 3vw heading SHRINKS at step 130 (measured 43.2 -> 35.9px)
 *      and then explodes at 200.
 *   2. percentages COMPOUND through the CF7 p > span > span nesting
 *      (measured: consent label 8.6 -> 128px, checkbox 14.4 -> 2048px).
 *   3. <button> and <div> are not on the plugin list, so the submit button and
 *      .wpcf7-response-output never move at any step.
 *   4. .cc-root (cookie banner) sits OUTSIDE .elementor, so .cc-title (an h2)
 *      runs away while .cc-btn (font:inherit) and .cc-root freeze.
 *   5. the consent validation tip is absolutely positioned with a FIXED px top
 *      on mobile, so it is painted over a label that grows as you scale.
 *
 * TWO HARD RULES OBSERVED THROUGHOUT
 *   A. Everything font-related is gated behind [class*="pojo-a11y-resize-font-"].
 *      With no class set - and after Reset - the computed diff vs baseline is {}.
 *   B. Generic rules are scoped inside a content root. #pojo-a11y-toolbar is a
 *      SIBLING of .elementor and is never touched by a generic rule.
 *
 * html body[...] is used throughout to out-specify hand-written DB overrides.
 * ========================================================================== */


/* =============================================================================
 * SECTION 1 - three scale curves
 * Body copy and headings start large (vw) and need a gentle curve.
 * Form controls and the cookie banner start small (0.6vw ~ 8.6px / 14px) and
 * need a bigger first jump so click 1 is a visible change.
 * A third, deliberately shallow curve drives the toolbar menu items, which are
 * chrome rather than content and must stay inside a 180px rail.
 * ========================================================================== */
:root{
  --a11y-scale: 1;
  --a11y-scale-form: 1;
  --a11y-scale-ui: 1;
}
body.pojo-a11y-resize-font-130{ --a11y-scale:1.15; --a11y-scale-form:1.30; --a11y-scale-ui:1.08; }
body.pojo-a11y-resize-font-140{ --a11y-scale:1.22; --a11y-scale-form:1.40; --a11y-scale-ui:1.12; }
body.pojo-a11y-resize-font-150{ --a11y-scale:1.28; --a11y-scale-form:1.48; --a11y-scale-ui:1.16; }
body.pojo-a11y-resize-font-160{ --a11y-scale:1.35; --a11y-scale-form:1.55; --a11y-scale-ui:1.20; }
body.pojo-a11y-resize-font-170{ --a11y-scale:1.42; --a11y-scale-form:1.62; --a11y-scale-ui:1.24; }
body.pojo-a11y-resize-font-180{ --a11y-scale:1.48; --a11y-scale-form:1.68; --a11y-scale-ui:1.27; }
body.pojo-a11y-resize-font-190{ --a11y-scale:1.54; --a11y-scale-form:1.72; --a11y-scale-ui:1.30; }
body.pojo-a11y-resize-font-200{ --a11y-scale:1.60; --a11y-scale-form:1.75; --a11y-scale-ui:1.32; }


/* =============================================================================
 * SECTION 2 - base pin on <body>
 * Measured body baseline on this site is 16px.
 * Deliberately UNSCOPED so the toolbar keeps behaving normally; calc(), never a
 * flat px, or the toolbar popup freezes at one size.
 * ========================================================================== */
html body[class*="pojo-a11y-resize-font-"]{
  font-size: calc(16px * var(--a11y-scale)) !important;
}


/* =============================================================================
 * SECTION 3 - kill compounding inside every content root
 * .elementor is the root on Elementor pages; .description-section /
 * .content-wraper / .faq-accordian-section are the roots on page.php, 404.php
 * and search.php, which have no .elementor wrapper at all.
 * input/select/textarea are deliberately excluded - Section 4 owns those.
 * ========================================================================== */
html body[class*="pojo-a11y-resize-font-"]
  :is(.elementor, .description-section, .general-content, .error-content,
      .content-wraper, .text-wraper, .breadcrums, .faq-accordian-section,
      .privacy-wrapper, .main-contact-form)
  :is(p, li, span, label, blockquote, legend, code, pre, dd, dt){
  font-size: inherit !important;
}


/* =============================================================================
 * SECTION 4 - form controls, response and validation messages
 * One rule per selector PER BREAKPOINT, mirroring the theme 1:1, with the media
 * blocks in the theme SOURCE ORDER - the bands overlap
 * ((min-width:500px) and (max-width:767px) is declared before (max-width:768px)),
 * so they resolve by order, not by specificity.
 * px/vw only - never em (CF7 nesting compounds) and never rem (shrinks wide).
 *
 * READABILITY FLOOR: max(14px, <themeValue>). A 0.8vw message renders ~7px at a
 * 900px viewport because the theme has no tablet override for it. The floor sits
 * inside the gate, so the default render is untouched.
 *
 * EQUAL FIELD HEIGHT: --a11y-fh-fs is the LARGER of the input and button font at
 * that breakpoint; both controls then take the same computed height, so the
 * submit button and the inputs stay the same height at every step on every
 * device. Vertical padding is zeroed and the text is centred instead.
 * ========================================================================== */

/* ---- 4.0 shared field metrics (theme source order) ---- */
html body[class*="pojo-a11y-resize-font-"] .private-contact-form{
  --a11y-fh-fs: max(15px, 1.4vw);
  --a11y-fh-pad: 1.1vw;
  --a11y-field-h: calc(var(--a11y-fh-fs) * var(--a11y-scale-form) * 1.2 + var(--a11y-fh-pad));
}
@media (min-width: 768px) and (max-width: 1079px){
  html body[class*="pojo-a11y-resize-font-"] .private-contact-form{
    --a11y-fh-fs: max(15px, 1.6vw);
    --a11y-fh-pad: 1.2vw;
  }
}
@media (min-width: 500px) and (max-width: 767px){
  html body[class*="pojo-a11y-resize-font-"] .private-contact-form{
    --a11y-fh-fs: 18px;
    --a11y-fh-pad: 12px;
  }
}
@media (max-width: 768px){
  html body[class*="pojo-a11y-resize-font-"] .private-contact-form{
    --a11y-fh-fs: 22px;
    --a11y-fh-pad: 12px;
  }
}
@media (max-width: 600px){
  html body[class*="pojo-a11y-resize-font-"] .private-contact-form{
    /* the input is 5.5vw here, which overtakes the 22px button around 600px */
    --a11y-fh-fs: max(22px, 5.5vw);
    --a11y-fh-pad: 12px;
  }
}

/* ---- 4.1 text inputs + textarea (theme: 1.3vw / 1.5vw / 16px / 5.5vw) ---- */
html body[class*="pojo-a11y-resize-font-"] .private-contact-form input:not([type="checkbox"]):not([type="radio"]),
html body[class*="pojo-a11y-resize-font-"] .private-contact-form textarea{
  font-size: calc(max(14px, 1.3vw) * var(--a11y-scale-form)) !important;
  line-height: 1.2 !important;
}
@media (min-width: 768px) and (max-width: 1079px){
  html body[class*="pojo-a11y-resize-font-"] .private-contact-form input:not([type="checkbox"]):not([type="radio"]),
  html body[class*="pojo-a11y-resize-font-"] .private-contact-form textarea{
    font-size: calc(max(14px, 1.5vw) * var(--a11y-scale-form)) !important;
  }
}
@media (min-width: 500px) and (max-width: 767px){
  html body[class*="pojo-a11y-resize-font-"] .private-contact-form input:not([type="checkbox"]):not([type="radio"]),
  html body[class*="pojo-a11y-resize-font-"] .private-contact-form textarea{
    font-size: calc(16px * var(--a11y-scale-form)) !important;
  }
}
@media (max-width: 600px){
  html body[class*="pojo-a11y-resize-font-"] .private-contact-form input:not([type="checkbox"]):not([type="radio"]),
  html body[class*="pojo-a11y-resize-font-"] .private-contact-form textarea{
    font-size: calc(max(14px, 5.5vw) * var(--a11y-scale-form)) !important;
  }
}

/* ---- 4.2 submit button (theme: 1.4vw / 1.6vw / 18px / 22px) ----
 * <button> is NOT on the plugin selector list, so without this it is frozen at
 * its baseline size at every step. Measured: 20.16px at none, at 130 AND at 200. */
html body[class*="pojo-a11y-resize-font-"] .private-contact-form .submit-col .global-btn,
html body[class*="pojo-a11y-resize-font-"] .private-contact-form .submit-col input[type="submit"],
html body[class*="pojo-a11y-resize-font-"] .private-contact-form .wpcf7-submit{
  font-size: calc(max(15px, 1.4vw) * var(--a11y-scale-form)) !important;
  line-height: 1.2 !important;
}
@media (min-width: 768px) and (max-width: 1079px){
  html body[class*="pojo-a11y-resize-font-"] .private-contact-form .submit-col .global-btn,
  html body[class*="pojo-a11y-resize-font-"] .private-contact-form .submit-col input[type="submit"],
  html body[class*="pojo-a11y-resize-font-"] .private-contact-form .wpcf7-submit{
    font-size: calc(max(15px, 1.6vw) * var(--a11y-scale-form)) !important;
  }
}
@media (min-width: 500px) and (max-width: 767px){
  html body[class*="pojo-a11y-resize-font-"] .private-contact-form .submit-col .global-btn,
  html body[class*="pojo-a11y-resize-font-"] .private-contact-form .submit-col input[type="submit"],
  html body[class*="pojo-a11y-resize-font-"] .private-contact-form .wpcf7-submit{
    font-size: calc(18px * var(--a11y-scale-form)) !important;
  }
}
@media (max-width: 768px){
  html body[class*="pojo-a11y-resize-font-"] .private-contact-form .submit-col .global-btn,
  html body[class*="pojo-a11y-resize-font-"] .private-contact-form .submit-col input[type="submit"],
  html body[class*="pojo-a11y-resize-font-"] .private-contact-form .wpcf7-submit{
    font-size: calc(22px * var(--a11y-scale-form)) !important;
  }
}

/* ---- 4.3 EQUAL HEIGHT + proper line-height for inputs and the submit ---- */
html body[class*="pojo-a11y-resize-font-"] .private-contact-form input:not([type="checkbox"]):not([type="radio"]),
html body[class*="pojo-a11y-resize-font-"] .private-contact-form .submit-col .global-btn,
html body[class*="pojo-a11y-resize-font-"] .private-contact-form .submit-col input[type="submit"],
html body[class*="pojo-a11y-resize-font-"] .private-contact-form .wpcf7-submit{
  box-sizing: border-box !important;
  height: var(--a11y-field-h) !important;
  min-height: var(--a11y-field-h) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* the button is display:block in the theme - centre its label inside the new height */
html body[class*="pojo-a11y-resize-font-"] .private-contact-form .submit-col .global-btn,
html body[class*="pojo-a11y-resize-font-"] .private-contact-form .submit-col input[type="submit"],
html body[class*="pojo-a11y-resize-font-"] .private-contact-form .wpcf7-submit{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}
/* textarea keeps its own height, only the rhythm is fixed */
html body[class*="pojo-a11y-resize-font-"] .private-contact-form textarea{
  height: auto !important;
  min-height: var(--a11y-field-h) !important;
  line-height: 1.3 !important;
  padding-top: calc(var(--a11y-fh-pad) / 2) !important;
  padding-bottom: calc(var(--a11y-fh-pad) / 2) !important;
}

/* ---- 4.4 CF7 response output ----
 * NOTE: .wpcf7-response-output is a SIBLING of .private-contact-form (both live
 * inside form.wpcf7-form), so the theme rule
 * ".private-contact-form .wpcf7 form .wpcf7-response-output" never matches.
 * The live selector is the generic one, which is what is mirrored here.
 * It is a <div>, so the plugin never scales it at all.
 * line-height is forced UNITLESS - the theme uses vh elsewhere, which does not
 * grow with the text.                                                        */
html body[class*="pojo-a11y-resize-font-"] .wpcf7 form .wpcf7-response-output{
  font-size: calc(max(14px, 0.8vw) * var(--a11y-scale-form)) !important;
  line-height: 1.5 !important;
}
@media (max-width: 768px){
  html body[class*="pojo-a11y-resize-font-"] .wpcf7 form .wpcf7-response-output{
    font-size: calc(max(14px, 3.5vw) * var(--a11y-scale-form)) !important;
  }
}

/* ---- 4.5 validation tips - size, rhythm, and ONE line ----
 * white-space:nowrap plus the capped curve keeps the longest message on a
 * single line at 375px at step 200.                                          */
html body[class*="pojo-a11y-resize-font-"] .private-contact-form .wpcf7-not-valid-tip{
  font-size: calc(max(13px, 0.8vw) * var(--a11y-scale-form)) !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
}
@media (max-width: 768px){
  html body[class*="pojo-a11y-resize-font-"] .private-contact-form .wpcf7-not-valid-tip{
    font-size: calc(12px * var(--a11y-scale-form)) !important;
  }
}


/* =============================================================================
 * SECTION 4b - elements that carry an intentional size of their own
 * Section 3 flattened every span/label/p inside a content root to `inherit`;
 * anything the theme sized on purpose has to be restated here, AFTER it.
 * That includes everything the theme wrote with :where() - :where() has ZERO
 * specificity, so ".privacy-content :where(p,li,a)" is only (0,2,0) and would
 * lose to Section 3 and get flattened. Restated explicitly.
 * ========================================================================== */

/* consent label (theme: 0.68vw / 0.8vw / 12px / 4vw) */
html body[class*="pojo-a11y-resize-font-"] .private-contact-form .privacy-checkbox .wpcf7-list-item-label,
html body[class*="pojo-a11y-resize-font-"] .private-contact-form .privacy-checkbox .custom-check-label,
html body[class*="pojo-a11y-resize-font-"] .private-contact-form .privacy-checkbox p{
  font-size: calc(max(13px, 0.68vw) * var(--a11y-scale-form)) !important;
  line-height: 1.4 !important;
}
@media (min-width: 768px) and (max-width: 1079px){
  html body[class*="pojo-a11y-resize-font-"] .private-contact-form .privacy-checkbox .wpcf7-list-item-label,
  html body[class*="pojo-a11y-resize-font-"] .private-contact-form .privacy-checkbox .custom-check-label,
  html body[class*="pojo-a11y-resize-font-"] .private-contact-form .privacy-checkbox p{
    font-size: calc(max(13px, 0.8vw) * var(--a11y-scale-form)) !important;
  }
}
@media (min-width: 500px) and (max-width: 767px){
  html body[class*="pojo-a11y-resize-font-"] .private-contact-form .privacy-checkbox .wpcf7-list-item-label,
  html body[class*="pojo-a11y-resize-font-"] .private-contact-form .privacy-checkbox .custom-check-label,
  html body[class*="pojo-a11y-resize-font-"] .private-contact-form .privacy-checkbox p{
    font-size: calc(12px * var(--a11y-scale-form)) !important;
  }
}
@media (max-width: 768px){
  html body[class*="pojo-a11y-resize-font-"] .private-contact-form .privacy-checkbox .wpcf7-list-item-label,
  html body[class*="pojo-a11y-resize-font-"] .private-contact-form .privacy-checkbox .custom-check-label,
  html body[class*="pojo-a11y-resize-font-"] .private-contact-form .privacy-checkbox p{
    font-size: calc(4vw * var(--a11y-scale-form)) !important;
  }
}

/* success block */
html body[class*="pojo-a11y-resize-font-"] .private-contact-form .success-title,
html body[class*="pojo-a11y-resize-font-"] .private-contact-form .success-subtitle{
  font-size: calc(2vw * var(--a11y-scale)) !important;
  line-height: 1.3 !important;
}
@media (max-width: 768px){
  html body[class*="pojo-a11y-resize-font-"] .private-contact-form .success-title,
  html body[class*="pojo-a11y-resize-font-"] .private-contact-form .success-subtitle{
    font-size: calc(24px * var(--a11y-scale)) !important;
  }
}

/* privacy / accessibility modal - the theme wrote these with :where() */
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content h2{
  font-size: calc(max(16px, 1.4vw) * var(--a11y-scale)) !important;
  line-height: 1.4 !important;
}
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content h3{
  font-size: calc(max(15px, 1.1vw) * var(--a11y-scale)) !important;
  line-height: 1.4 !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 div,
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content span{
  font-size: calc(max(14px, 0.8vw) * var(--a11y-scale)) !important;
  line-height: 1.6 !important;
}
@media (max-width: 768px){
  html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content h2{
    font-size: calc(18px * var(--a11y-scale)) !important;
  }
  html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content h3{
    font-size: calc(16px * var(--a11y-scale)) !important;
  }
  html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content p,
  html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content li,
  html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content a,
  html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content div,
  html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content span{
    font-size: calc(12px * var(--a11y-scale)) !important;
  }
}

/* small footer / privacy links */
html body[class*="pojo-a11y-resize-font-"] .pv-links > span,
html body[class*="pojo-a11y-resize-font-"] .pv-link,
html body[class*="pojo-a11y-resize-font-"] .bottom-small-text{
  font-size: calc(max(13px, 0.8vw) * var(--a11y-scale)) !important;
  line-height: 1.3 !important;
}
@media (max-width: 768px){
  html body[class*="pojo-a11y-resize-font-"] .pv-links > span,
  html body[class*="pojo-a11y-resize-font-"] .pv-link,
  html body[class*="pojo-a11y-resize-font-"] .bottom-small-text{
    font-size: calc(14px * var(--a11y-scale)) !important;
  }
}


/* =============================================================================
 * SECTION 4c - consent checkbox box + tick
 * The box is sized in vw/px so it never grows, while the label beside it does.
 * Both the box and the tick glyph go on the form curve so the proportion is
 * preserved, and the tick is re-centred (the theme parks it at top:60%, which
 * drifts visibly once the glyph is scaled).
 * ========================================================================== */
html body[class*="pojo-a11y-resize-font-"] .private-contact-form .privacy-checkbox input[type="checkbox"]{
  width: calc(1.2vw * var(--a11y-scale-form)) !important;
  height: calc(1.2vw * var(--a11y-scale-form)) !important;
  min-width: calc(1.2vw * var(--a11y-scale-form)) !important;
  flex: 0 0 auto !important;
}
html body[class*="pojo-a11y-resize-font-"] .private-contact-form .privacy-checkbox input[type="checkbox"]:checked::before{
  font-size: calc(0.8vw * var(--a11y-scale-form)) !important;
  top: 50% !important;
  line-height: 1 !important;
}
@media (max-width: 768px){
  html body[class*="pojo-a11y-resize-font-"] .private-contact-form .privacy-checkbox input[type="checkbox"]{
    width: calc(22px * var(--a11y-scale-form)) !important;
    height: calc(22px * var(--a11y-scale-form)) !important;
    min-width: calc(22px * var(--a11y-scale-form)) !important;
  }
  html body[class*="pojo-a11y-resize-font-"] .private-contact-form .privacy-checkbox input[type="checkbox"]:checked::before{
    font-size: calc(3.2vw * var(--a11y-scale-form)) !important;
  }
}


/* =============================================================================
 * SECTION 4d - validation tip POSITIONING
 * The theme takes the consent tip out of flow and, inside @media(max-width:768px),
 * pins it with a FIXED px top (measured 60px). The consent label wraps to more
 * lines as it scales, so that fixed anchor ends up painting red text straight
 * over the label. Measured overlap at 375px: none 35px, 130 +532px, 200 +4763px.
 * The scaling causes it, so it is fixed here: restore the auto-tracking anchor
 * inside the SAME media block the theme used, and restate `bottom` explicitly so
 * it also works where :has() is unsupported. Never position:static - the wrap is
 * ~30px wide and the text would squeeze into a column.
 * ========================================================================== */
/* NOT gated on the resize class - deliberately, and at your request.
 * The fixed top:60px anchor is wrong at the DEFAULT size too, not only when the
 * text is scaled: measured at 375px with no accessibility setting active, the
 * tip overlaps the consent label by 37.5px. The right home for this is
 * style.css:430, but this file is what I have, so it is corrected here.
 *
 * This does NOT breach "no class selected -> design unchanged": both rules only
 * bite when a validation error is on screen. .wpcf7-not-valid-tip does not
 * exist in the DOM until CF7 injects it, and the row padding is behind
 * :has(.wpcf7-not-valid). With a clean form the computed output is untouched.
 *
 * var(--a11y-scale-form) is 1 until a step is chosen, so the one rule serves
 * both the default size and every step. */
@media (max-width: 768px){
  html body .private-contact-form .privacy-checkbox.first .wpcf7-not-valid-tip{
    position: absolute !important;
    top: auto !important;
    bottom: 0 !important;
    margin-top: 0 !important;
  }
}
/* reserve the room only while the field is actually invalid, so nothing shifts otherwise */
@supports selector(:has(*)){
  html body .private-contact-form .privacy-checkbox.first:has(.wpcf7-not-valid){
    padding-bottom: calc(max(13px, 0.8vw) * var(--a11y-scale-form) * 1.6 + 8px) !important;
  }
  @media (max-width: 768px){
    html body .private-contact-form .privacy-checkbox.first:has(.wpcf7-not-valid){
      padding-bottom: calc(12px * var(--a11y-scale-form) * 1.6 + 8px) !important;
    }
  }
}


/* =============================================================================
 * SECTION 4e - cookie banner (.cc-root)
 * .cc-root is a direct child of <body>, OUTSIDE .elementor, so the Section 3
 * inherit-fix cannot reach it: .cc-title (h2) and .cc-body (p) run away while
 * .cc-btn (font:inherit, confirmed in the banner stylesheet) and .cc-root itself
 * freeze at 14px. Generic inherit rule FIRST, then explicit pins; each pin gets
 * both a bare and a .cc-root-scoped selector.
 * Specificity note: "html body[...] .cc-root .cc-body" is (0,3,2) and beats
 * "html body[...] .cc-root p" (0,2,3) - the class column compares first.
 * .cc-title and .cc-btn use the FORM curve with bumped baselines (16->18, 14->15)
 * so click 1 is a visible jump. EVERY pin is calc(px * var(--scale)).
 * ========================================================================== */
html body[class*="pojo-a11y-resize-font-"] .cc-root :is(p, li, span, label, a, div, h2, h3, button){
  font-size: inherit !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-root{
  font-size: calc(14px * var(--a11y-scale)) !important;
  line-height: 1.5 !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-title,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-title{
  font-size: calc(18px * var(--a11y-scale-form)) !important;
  line-height: 1.3 !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-body,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-body{
  font-size: calc(14px * var(--a11y-scale-form)) !important;
  line-height: 1.5 !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-btn,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-btn,
html body[class*="pojo-a11y-resize-font-"] .cc-btn.cc-btn-text,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-btn.cc-btn-text{
  font-size: calc(15px * var(--a11y-scale-form)) !important;
  line-height: 1.3 !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-lang-toggle,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-lang-toggle{
  font-size: calc(12px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-modal-head h2,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-modal-head h2{
  font-size: calc(18px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-modal-close,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-modal-close{
  font-size: calc(24px * var(--a11y-scale)) !important;
  line-height: 1 !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-cat-desc,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-cat-desc{
  font-size: calc(13px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-required-badge,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-required-badge{
  font-size: calc(11px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-cookies-list,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-cookies-list,
html body[class*="pojo-a11y-resize-font-"] .cc-cookies-list th,
html body[class*="pojo-a11y-resize-font-"] .cc-cookies-list td,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-cookies-list th,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-cookies-list td{
  font-size: calc(12px * var(--a11y-scale)) !important;
}


/* =============================================================================
 * SECTION 4f - accessibility toolbar menu items
 * Requested explicitly: the toolbar menu items should grow LESS than page text.
 * They are chrome, not content, and the toolbar rail is a fixed 180px wide, so
 * the plugin default (12.8px -> 25.6px at step 200) overflows it.
 * This is the ONLY rule in this file that touches #pojo-a11y-toolbar; the
 * shallow --a11y-scale-ui curve takes it to ~16.9px at step 200 instead.
 * ========================================================================== */
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-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a{
  font-size: calc(12.8px * var(--a11y-scale-ui)) !important;
  line-height: 1.5 !important;
}
html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay p.pojo-a11y-toolbar-title{
  font-size: calc(14px * var(--a11y-scale-ui)) !important;
}


/* =============================================================================
 * SECTION 5 - every font-size rule from post-7.css, gated and scaled
 * Mirrors the Elementor page CSS 1:1: base values plus the theme own
 * @media(max-width:767px) block, in source order. Headings use --a11y-scale,
 * Elementor buttons use --a11y-scale-form.
 * The 0vw heading (elementor-element-df67088) is mirrored deliberately - without
 * it the plugin h2 rule (172.9%) would make a hidden heading visible.
 *
 * REGENERATE THIS SECTION WHENEVER THE PAGE IS EDITED IN ELEMENTOR.
 * It is a 1:1 mirror of post-7.css. A widget added or resized in Elementor is
 * invisible to this file until its rule is copied in here, and because <a>,
 * <button> and <div> are not on the plugin's selector list such a widget stays
 * FROZEN at one size at every step. Two buttons and the footer link list were
 * each frozen for exactly this reason during the original build.
 *
 * How to redo it:
 *   1. Open .../uploads/sites/82/elementor/css/post-7.css
 *   2. Take every rule that declares font-size, keeping its @media block.
 *      Where a rule declares font-size twice, the LAST one is the live value.
 *   3. Re-emit each one as:
 *        html body[class*="pojo-a11y-resize-font-"] <original selector>
 *        { font-size: calc(<value> * var(--a11y-scale)) !important; }
 *      ...using --a11y-scale-form instead for .elementor-button selectors.
 *   4. Keep the base rules first, then the @media(max-width:767px) block,
 *      in the same order post-7.css declares them.
 * ========================================================================== */
/* ---- 5a. base ---- */
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-df67088 .elementor-heading-title
{ font-size: calc(0vw * var(--a11y-scale)) !important; }

html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-d40a361 .elementor-icon-list-item > .elementor-icon-list-text,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-d40a361 .elementor-icon-list-item > a
{ font-size: calc(1vw * var(--a11y-scale)) !important; }

html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-c04bcbd .elementor-button
{ font-size: calc(1.15vw * var(--a11y-scale-form)) !important; }

html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-7de46a0 .elementor-button,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-e12ad84 .elementor-button
{ font-size: calc(1.2vw * var(--a11y-scale-form)) !important; }

html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-12cd588 .elementor-icon-list-item > .elementor-icon-list-text,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-12cd588 .elementor-icon-list-item > a,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-d5a6e0b .elementor-icon-list-item > .elementor-icon-list-text,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-d5a6e0b .elementor-icon-list-item > a,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-99dfdce .elementor-icon-list-item > .elementor-icon-list-text,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-99dfdce .elementor-icon-list-item > a
{ font-size: calc(1.3vw * var(--a11y-scale)) !important; }

html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-ae9c0c0 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-08d64e2 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-f0bdac1 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-197cb73 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-993e0ff .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-1ea40f7 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-b586d83 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-e1af177 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-c69b2ab .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-ab07b0d .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-ab7a742 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-88f5580 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-4541a10 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-302aeba .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-8c35562 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-251a22b .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-9cc4ace .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-9ee2987 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-4b37da2 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-670b797 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-a933ae5 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-e602040 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-c9956be .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-f89074e .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-e2b2998 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-4e06ee1 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-95339aa .elementor-heading-title
{ font-size: calc(1.37vw * var(--a11y-scale)) !important; }

html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-4a13cb4 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-0158ede .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-bd6d478 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-1e1f3c8 .elementor-heading-title
{ font-size: calc(1.65vw * var(--a11y-scale)) !important; }

html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-6e10645 .elementor-divider__text,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-77079d2 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-6fa0c68 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-fb6c00a .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-22ace63 .elementor-heading-title
{ font-size: calc(1.7vw * var(--a11y-scale)) !important; }

html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-c6e49f4 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-31faa5f .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-fe175f1 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-c8aee7f .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-cf58cb3 .elementor-heading-title
{ font-size: calc(1.8vw * var(--a11y-scale)) !important; }

html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-6e00c19 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-8478911 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-6dafbc3 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-5960b83 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-df81d9c .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-2ccf231 .elementor-heading-title
{ font-size: calc(1.9vw * var(--a11y-scale)) !important; }

html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-ed6ad34 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-700b368 .elementor-heading-title
{ font-size: calc(2.5vw * var(--a11y-scale)) !important; }

html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-86c96a6 .elementor-heading-title
{ font-size: calc(2.6vw * var(--a11y-scale)) !important; }

html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-88bcd78 .elementor-heading-title
{ font-size: calc(3vw * var(--a11y-scale)) !important; }

/* ---- 5b. theme breakpoint ---- */
@media(max-width:767px){
  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-6e10645 .elementor-divider__text,
  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-ae9c0c0 .elementor-heading-title,
  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-08d64e2 .elementor-heading-title,
  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-f0bdac1 .elementor-heading-title,
  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-197cb73 .elementor-heading-title,
  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-993e0ff .elementor-heading-title,
  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-1ea40f7 .elementor-heading-title,
  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-b586d83 .elementor-heading-title,
  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-e1af177 .elementor-heading-title,
  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-c69b2ab .elementor-heading-title,
  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-ab07b0d .elementor-heading-title,
  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-ab7a742 .elementor-heading-title,
  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-88f5580 .elementor-heading-title,
  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-4541a10 .elementor-heading-title,
  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-302aeba .elementor-heading-title,
  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-8c35562 .elementor-heading-title,
  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-251a22b .elementor-heading-title,
  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-9cc4ace .elementor-heading-title,
  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-9ee2987 .elementor-heading-title,
  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-4b37da2 .elementor-heading-title,
  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-670b797 .elementor-heading-title,
  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-a933ae5 .elementor-heading-title,
  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-e602040 .elementor-heading-title,
  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-c9956be .elementor-heading-title,
  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-f89074e .elementor-heading-title,
  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-12cd588 .elementor-icon-list-item > .elementor-icon-list-text,
  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-12cd588 .elementor-icon-list-item > a,
  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-d5a6e0b .elementor-icon-list-item > .elementor-icon-list-text,
  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-d5a6e0b .elementor-icon-list-item > a,
  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-99dfdce .elementor-icon-list-item > .elementor-icon-list-text,
  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-99dfdce .elementor-icon-list-item > a,
  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-e2b2998 .elementor-heading-title,
  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-4e06ee1 .elementor-heading-title,
  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-95339aa .elementor-heading-title,
  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-22ace63 .elementor-heading-title
  { font-size: calc(5vw * var(--a11y-scale)) !important; }

  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-c04bcbd .elementor-button,
  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-7de46a0 .elementor-button,
  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-e12ad84 .elementor-button
  { font-size: calc(5vw * var(--a11y-scale-form)) !important; }

  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-4a13cb4 .elementor-heading-title,
  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-0158ede .elementor-heading-title,
  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-bd6d478 .elementor-heading-title,
  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-1e1f3c8 .elementor-heading-title
  { font-size: calc(5.2vw * var(--a11y-scale)) !important; }

  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-77079d2 .elementor-heading-title,
  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-6fa0c68 .elementor-heading-title,
  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-fb6c00a .elementor-heading-title
  { font-size: calc(5.3vw * var(--a11y-scale)) !important; }

  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-c6e49f4 .elementor-heading-title
  { font-size: calc(5.5vw * var(--a11y-scale)) !important; }

  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-6e00c19 .elementor-heading-title,
  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-8478911 .elementor-heading-title,
  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-6dafbc3 .elementor-heading-title,
  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-5960b83 .elementor-heading-title,
  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-df81d9c .elementor-heading-title,
  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-2ccf231 .elementor-heading-title
  { font-size: calc(5.8vw * var(--a11y-scale)) !important; }

  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-31faa5f .elementor-heading-title,
  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-fe175f1 .elementor-heading-title,
  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-c8aee7f .elementor-heading-title,
  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-cf58cb3 .elementor-heading-title,
  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-86c96a6 .elementor-heading-title
  { font-size: calc(6vw * var(--a11y-scale)) !important; }

  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-ed6ad34 .elementor-heading-title,
  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-700b368 .elementor-heading-title
  { font-size: calc(6.5vw * var(--a11y-scale)) !important; }

  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-88bcd78 .elementor-heading-title
  { font-size: calc(8vw * var(--a11y-scale)) !important; }

  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-d40a361 .elementor-icon-list-item > .elementor-icon-list-text,
  html body[class*="pojo-a11y-resize-font-"] .elementor-7 .elementor-element.elementor-element-d40a361 .elementor-icon-list-item > a
  { font-size: calc(12px * var(--a11y-scale)) !important; }

}




/* =============================================================================
 * SECTION 5c - specifications list: keep the column dividers unbroken
 *
 * The dividers are border-right on .elementor-icon-list-text, and the theme
 * relies on that element filling its <li> (align-self:stretch) so the segments
 * meet and read as one continuous line.
 * The columns are forced to equal height (.elementor-element:has(> .specifications-list)
 * { align-self:stretch }) and each li is flex:1 1 auto, so as soon as one column
 * has more wrapped text than another, the shorter column's rows are stretched.
 * The text element's align-self computes to `center`, not the intended
 * `stretch`, so it stays its natural height inside a taller row and the border
 * stops short - leaving a gap at every row boundary.
 * Measured at 1440: baseline 0px gaps everywhere, step 130 up to 15px, step 200
 * up to 10px, always in whichever column happens to be shortest.
 * Baseline is already gapless, so this is gated with everything else and
 * changes nothing until a text size is chosen. The icon keeps align-self:center
 * so it stays vertically centred in the taller row.
 * ========================================================================== */
html body[class*="pojo-a11y-resize-font-"] .specifications-list ul li,
html body[class*="pojo-a11y-resize-font-"] .specifications-list ul li.elementor-icon-list-item{
  align-items: stretch !important;
}
html body[class*="pojo-a11y-resize-font-"] .specifications-list ul li .elementor-icon-list-text{
  align-self: stretch !important;
  height: auto !important;
}
html body[class*="pojo-a11y-resize-font-"] .specifications-list ul li .elementor-icon-list-icon{
  align-self: center !important;
}


/* =============================================================================
 * SECTION 6 - CONTRAST MODES
 *
 * The plugin's contrast modes are far more destructive than the font steps.
 * Measured on this site:
 *   high-contrast     -> "background-image:none !important" AND
 *                        "background:black !important; background-color:black !important"
 *                        on a ~150-element selector list that includes div, section,
 *                        header and footer.
 *   negative-contrast -> "background:#000 !important; color:#fff !important"
 *   light-background  -> "background:#fff !important; color:#000 !important"
 * The `background` SHORTHAND resets background-image/position/repeat/size, so
 * every banner photo and every gradient overlay disappears, and every box that
 * had a background colour collapses into the page (black on black, white on
 * white) and loses its shape.
 *
 * 6a restores the artwork, 6b/6c/6d give the flattened boxes and controls an
 * outline again. None of this is gated on the resize-font class - it is gated on
 * the contrast class, which is itself a deliberate user choice, so Rule A holds.
 *
 * SPECIFICITY NOTE - the reason for :not(#pojo-a11y-toolbar) on every selector
 * below. The plugin writes its negative-contrast and light-background rules as
 *     body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) ...
 * An ID inside :not() still counts, so those rules score (1,1,1) - they carry an
 * ID. A plain class-only override, however long, scores (0,n,m) and LOSES on the
 * ID column no matter how many classes it chains. Measured: the identical rule
 * restored the banner in high-contrast (whose selectors carry no ID, (0,1,2)) but
 * silently did nothing in negative-contrast and light mode.
 * :not(#pojo-a11y-toolbar) on <body> is always true - body is never the toolbar -
 * so it changes nothing except adding the ID column needed to win.
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * 6a. Background images + overlays - restored identically in all three modes
 * Position/repeat/size are restated because the `background` shorthand wiped
 * them too. The :not(:where(...)) gate mirrors Elementor's own container
 * lazy-load rule byte for byte, so images that have not been lazy-loaded yet
 * are still left alone and the optimisation is preserved.
 * -------------------------------------------------------------------------- */

/* 6a-0. Layout containers inside the BANNER go transparent, so the restored
 * hero photo is actually visible through them.
 *
 * SCOPED TO .elementor-element-c2bef27 ON PURPOSE. An earlier version applied
 * this to every container on the page, which stripped the black section
 * backgrounds everywhere in high contrast and left the copy sitting on the pale
 * page colour with only per-element black boxes around it. Every other section
 * keeps the solid background the plugin gives it; only the banner, which has
 * artwork behind it, needs its wrappers to get out of the way.
 * If the footer banner (.elementor-element-5249121) ever shows the same black
 * band over its photo, add that id here too - nothing else should be added.
 * The plugin paints `background:black` (or #fff / #000) onto EVERY div, which
 * includes Elementor's nesting containers. Measured on the hero: the photo was
 * restored on .elementor-element-c2bef27, but its e-con child
 * .elementor-element-b6c4539 (1440x290) sat on top of it as an opaque black
 * band and hid the top third of the image.
 * Only background-COLOR is cleared, never background-image, so the restores
 * above and any Elementor overlay survive. Only layout wrappers are listed -
 * .elementor-widget and the text/button elements inside them keep their
 * background, which is what keeps copy legible once the photo shows through. */
html body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-c2bef27 :is(.e-con, .e-con-inner, .elementor-container, .elementor-column, .elementor-column-wrap, .elementor-widget-wrap, .elementor-row),
html body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-c2bef27 :is(.e-con, .e-con-inner, .elementor-container, .elementor-column, .elementor-column-wrap, .elementor-widget-wrap, .elementor-row),
html body.pojo-a11y-light-background:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-c2bef27 :is(.e-con, .e-con-inner, .elementor-container, .elementor-column, .elementor-column-wrap, .elementor-widget-wrap, .elementor-row){
  background-color: transparent !important;
}

html body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-c2bef27:not(:where(.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload))),
html body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-c2bef27:not(:where(.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload))),
html body.pojo-a11y-light-background:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-c2bef27:not(:where(.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload))){
  background-image: url("https://after2.webzsites.site/wp-content/uploads/sites/82/2026/09/after2-banner-image.webp") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

/* banner scrim - a gradient, i.e. also a background-image */
html body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-9b3d944,
html body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-9b3d944,
html body.pojo-a11y-light-background:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-9b3d944{
  background-color: transparent !important;
  background-image: linear-gradient(180deg, #00000000 0%, #000000A3 80%) !important;
}

/* Green section: watermark logo restored, brand COLOUR deliberately not.
 * The section is #253C29 in the normal design. Putting that green back in a
 * contrast mode defeats the mode - it leaves a mid-tone panel behind the copy
 * instead of the flat black/white the plugin is meant to give. So only the
 * watermark image is restored here; the background colour is left to the
 * plugin, which makes it black in high and negative contrast and white in light
 * mode. Same reasoning as 6a-0: restore artwork, never brand colour. */
html body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-a77175f:not(:where(.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload))),
html body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-a77175f:not(:where(.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload))),
html body.pojo-a11y-light-background:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-a77175f:not(:where(.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload))){
  background-image: url("https://after2.webzsites.site/wp-content/uploads/sites/82/2026/09/lightgreen-background-logo.svg") !important;
  background-position: bottom left !important;
  background-repeat: no-repeat !important;
  background-size: 30% auto !important;
}

/* footer banner photo */
html body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-5249121:not(:where(.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload))),
html body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-5249121:not(:where(.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload))),
html body.pojo-a11y-light-background:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-5249121:not(:where(.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload))){
  background-image: url("https://after2.webzsites.site/wp-content/uploads/sites/82/2026/09/footer-banner-image.webp") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

/* footer banner dark overlay (Elementor ::before, --overlay-opacity:0.58) */
html body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-5249121::before,
html body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-5249121::before,
html body.pojo-a11y-light-background:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-5249121::before{
  background-color: #000000 !important;
  background-image: none !important;
  opacity: 0.58 !important;
}

/* any other Elementor overlay layer that may be added later */
html body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar) .elementor-background-overlay,
html body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar) .elementor-background-overlay,
html body.pojo-a11y-light-background:not(#pojo-a11y-toolbar) .elementor-background-overlay{
  background-color: inherit;
  mix-blend-mode: normal !important;
}

/* keep inline <img> and the <video> hero readable rather than inverted/blanked */
html body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar) .elementor img,
html body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar) .elementor img,
html body.pojo-a11y-light-background:not(#pojo-a11y-toolbar) .elementor img,
html body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar) .auto-play-video,
html body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar) .auto-play-video,
html body.pojo-a11y-light-background:not(#pojo-a11y-toolbar) .auto-play-video{
  background: transparent !important;
  background-color: transparent !important;
}


/* -----------------------------------------------------------------------------
 * 6a-1. Logo backings
 * These logos are flat SVGs in a single brand colour, so in the mode that
 * matches that colour they vanish against the page. 6a above clears the
 * plugin's background off every .elementor img, which is right for photos but
 * leaves these two with nothing behind them - so they are re-backed here, at a
 * higher specificity, only in the mode where they actually disappear.
 * -------------------------------------------------------------------------- */

/* engel-invest-green-logo.svg - dark green on a black page in high/negative */
html body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-d980cd8 img,
html body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-d980cd8 img{
  background: #fff !important;
  background-color: #fff !important;
  padding: 8px !important;
  border-radius: 4px !important;
}

/* engel-invest-white-logo.svg (banner) - white on a white page in light mode.
   white-small-logo.svg in the green section has the same defect and is
   included; drop the second selector if you only want the banner one. */
html body.pojo-a11y-light-background:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-f5cd910 img,
html body.pojo-a11y-light-background:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-03e7014 img{
  background: #000 !important;
  background-color: #000 !important;
  padding: 8px !important;
  border-radius: 4px !important;
}


/* -----------------------------------------------------------------------------
 * 6a-2. Icons in light mode
 * The theme icons are inline SVGs with fill:#fff. Light mode forces the page to
 * #fff, so all 12 icon-list icons render white-on-white and simply disappear -
 * measured fill rgb(255,255,255) on background rgb(255,255,255). A black plate
 * behind each one brings them back without touching the artwork itself.
 * Scoped inside .elementor, so the toolbar and the cookie floater - both
 * siblings of .elementor - are untouched.
 * -------------------------------------------------------------------------- */
html body.pojo-a11y-light-background:not(#pojo-a11y-toolbar) .elementor :is(.elementor-icon-list-icon, .elementor-icon, .elementor-icon-wrapper, .elementor-button-icon, .elementor-social-icon),
html body.pojo-a11y-light-background:not(#pojo-a11y-toolbar) .elementor :is(.elementor-icon-list-icon, .elementor-icon, .elementor-icon-wrapper, .elementor-button-icon, .elementor-social-icon) svg,
html body.pojo-a11y-light-background:not(#pojo-a11y-toolbar) .elementor :is(.elementor-icon-list-icon, .elementor-icon, .elementor-icon-wrapper, .elementor-button-icon, .elementor-social-icon) i{
  background: #000 !important;
  background-color: #000 !important;
  border-radius: 3px !important;
}


/* -----------------------------------------------------------------------------
 * 6a-3. Specifications section - border colour in light mode
 * That section draws its structure with white hairlines: border-bottom:1px #fff
 * on the .e-con row wrapper and border-right:1px #fff on each of the 12
 * .elementor-icon-list-text dividers. Light mode turns the page white, so all
 * 13 lines vanish and the grid loses its structure.
 * Only border-COLOR is set - never width or style - so no border is created
 * where the theme did not already draw one, and nothing shifts.
 * -------------------------------------------------------------------------- */
html body.pojo-a11y-light-background:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-846e9aa,
html body.pojo-a11y-light-background:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-846e9aa *,
html body.pojo-a11y-light-background:not(#pojo-a11y-toolbar) .elementor .specifications-list,
html body.pojo-a11y-light-background:not(#pojo-a11y-toolbar) .elementor .specifications-list *{
  border-color: #000 !important;
}


/* -----------------------------------------------------------------------------
 * 6a-4. Banner divider - no plate behind it, in every contrast mode
 * The divider widget is a full-bleed 1440x54 box. The plugin paints it solid,
 * so once the hero photo is restored it reads as a black bar cutting across the
 * image. It is a rule plus a line of text, not a content block, so it does not
 * need a plate of its own - the gradient scrim underneath already darkens the
 * photo behind it. Targeted by id AND by widget class inside the banner, so it
 * survives an Elementor id change.
 * -------------------------------------------------------------------------- */
html body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-6e10645,
html body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-6e10645 :is(.elementor-divider, .elementor-divider-separator, .elementor-divider__text),
html body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-c2bef27 .elementor-widget-divider,
html body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-c2bef27 .elementor-widget-divider :is(.elementor-divider, .elementor-divider-separator, .elementor-divider__text),
html body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-6e10645,
html body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-6e10645 :is(.elementor-divider, .elementor-divider-separator, .elementor-divider__text),
html body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-c2bef27 .elementor-widget-divider,
html body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-c2bef27 .elementor-widget-divider :is(.elementor-divider, .elementor-divider-separator, .elementor-divider__text),
html body.pojo-a11y-light-background:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-6e10645,
html body.pojo-a11y-light-background:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-6e10645 :is(.elementor-divider, .elementor-divider-separator, .elementor-divider__text),
html body.pojo-a11y-light-background:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-c2bef27 .elementor-widget-divider,
html body.pojo-a11y-light-background:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-c2bef27 .elementor-widget-divider :is(.elementor-divider, .elementor-divider-separator, .elementor-divider__text){
  background: transparent !important;
  background-color: transparent !important;
}

/* Consequence of the rule above, in light mode only: light mode paints text
 * #000, which was fine while the divider still had a white plate behind it.
 * With the plate gone the divider sits directly on the restored hero photo and
 * its scrim (rgba(0,0,0,.64)) - measured black-on-dark, i.e. unreadable.
 * The surface behind this one widget is dark by design in every mode, so its
 * text and rule stay white. Delete this block to keep the plate instead. */
html body.pojo-a11y-light-background:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-6e10645 .elementor-divider__text,
html body.pojo-a11y-light-background:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-c2bef27 .elementor-widget-divider .elementor-divider__text{
  color: #fff !important;
}
html body.pojo-a11y-light-background:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-6e10645 .elementor-divider-separator,
html body.pojo-a11y-light-background:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-c2bef27 .elementor-widget-divider .elementor-divider-separator{
  border-color: #fff !important;
}


/* -----------------------------------------------------------------------------
 * 6a-5. Card icons in the green section - black plate in light mode
 * green-sec-icon-1..4.svg are white-filled SVGs delivered as <img>, not as
 * inline icons, so 6a-2 does not reach them - and 6a explicitly clears the
 * background off every .elementor img (right for photos, wrong for these).
 * Listed by widget id rather than by section, because the same section also
 * holds two large photographs that must keep a transparent background.
 * box-sizing:border-box keeps the 29x29 footprint, so nothing reflows.
 * -------------------------------------------------------------------------- */
html body.pojo-a11y-light-background:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-a813bdf img,
html body.pojo-a11y-light-background:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-da85470 img,
html body.pojo-a11y-light-background:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-c09d83b img,
html body.pojo-a11y-light-background:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-5afc227 img{
  background: #000 !important;
  background-color: #000 !important;
  box-sizing: border-box !important;
  padding: 3px !important;
  border-radius: 3px !important;
}


/* -----------------------------------------------------------------------------
 * 6b. Text that sits on its own background colour
 * These Elementor headings carry #7F8D81 (grey pill) or #FFFFFF (white pill).
 * The plugin flattens the pill to the page colour, so the box vanishes and the
 * text reads as loose text. A full border restores the box:
 *   white in high contrast and negative contrast, black in light mode.
 * Verified against a fresh clone of the node - the live node returns a stale
 * background from the style cache and cannot be trusted for this check.
 * -------------------------------------------------------------------------- */
html body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-31faa5f,
html body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-fe175f1,
html body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-c8aee7f,
html body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-cf58cb3,
html body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-86c96a6,
html body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-6e00c19,
html body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-8478911,
html body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-6dafbc3,
html body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-5960b83,
html body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-df81d9c,
html body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-2ccf231,
html body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-31faa5f,
html body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-fe175f1,
html body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-c8aee7f,
html body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-cf58cb3,
html body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-86c96a6,
html body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-6e00c19,
html body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-8478911,
html body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-6dafbc3,
html body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-5960b83,
html body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-df81d9c,
html body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-2ccf231{
  border: 1px solid #fff !important;
}
html body.pojo-a11y-light-background:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-31faa5f,
html body.pojo-a11y-light-background:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-fe175f1,
html body.pojo-a11y-light-background:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-c8aee7f,
html body.pojo-a11y-light-background:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-cf58cb3,
html body.pojo-a11y-light-background:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-86c96a6,
html body.pojo-a11y-light-background:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-6e00c19,
html body.pojo-a11y-light-background:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-8478911,
html body.pojo-a11y-light-background:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-6dafbc3,
html body.pojo-a11y-light-background:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-5960b83,
html body.pojo-a11y-light-background:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-df81d9c,
html body.pojo-a11y-light-background:not(#pojo-a11y-toolbar) .elementor-7 .elementor-element.elementor-element-2ccf231{
  border: 1px solid #000 !important;
}


/* -----------------------------------------------------------------------------
 * 6c. Buttons - full outline in every contrast mode
 * The plugin only does this for <button> in negative contrast, which misses
 * .elementor-button (an <a>) and misses high contrast and light mode entirely.
 * -------------------------------------------------------------------------- */
html body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar) *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) :is(.elementor-button, .global-btn, .call-btn, .cc-btn, button, input[type="submit"], input[type="button"]),
html body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar) *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) :is(.elementor-button, .global-btn, .call-btn, .cc-btn, button, input[type="submit"], input[type="button"]){
  border: 1px solid #fff !important;
}
html body.pojo-a11y-light-background:not(#pojo-a11y-toolbar) *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) :is(.elementor-button, .global-btn, .call-btn, .cc-btn, button, input[type="submit"], input[type="button"]){
  border: 1px solid #000 !important;
}


/* -----------------------------------------------------------------------------
 * 6d. Form fields - BOTTOM border only, as requested
 * The theme design uses an underline field, not a boxed one; a full 4-side
 * border turns every field into a yellow/black box. Checkboxes are excluded -
 * they need all four sides to read as a box at all, and get their own rule in 6e.
 * -------------------------------------------------------------------------- */
html body.pojo-a11y-light-background:not(#pojo-a11y-toolbar) *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
html body.pojo-a11y-light-background:not(#pojo-a11y-toolbar) *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) textarea,
html body.pojo-a11y-light-background:not(#pojo-a11y-toolbar) *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) select{
  border: 0 !important;
  border-bottom: 1px solid #000 !important;
}
html body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar) *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
html body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar) *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) textarea,
html body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar) *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) select,
html body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar) *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
html body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar) *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) textarea,
html body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar) *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) select{
  border: 0 !important;
  border-bottom: 1px solid #fff !important;
}
html body.pojo-a11y-light-background:not(#pojo-a11y-toolbar) *: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):not(.pojo-a11y-toolbar-link) textarea::placeholder{
  color: #000 !important;
}


/* -----------------------------------------------------------------------------
 * 6e. Consent checkbox - the box and the tick must both stay visible
 * light mode flattens the box to white while the theme border is also white, so
 * the box disappears; the tick then sits on nothing. Four-sided border here on
 * purpose (6d deliberately excluded checkboxes).
 * -------------------------------------------------------------------------- */
html body.pojo-a11y-light-background:not(#pojo-a11y-toolbar) *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) input[type="checkbox"],
html body.pojo-a11y-light-background:not(#pojo-a11y-toolbar) .private-contact-form .privacy-checkbox input[type="checkbox"]{
  border: 1px solid #000 !important;
  background: #fff !important;
}
html body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar) .private-contact-form .privacy-checkbox input[type="checkbox"],
html body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar) .private-contact-form .privacy-checkbox input[type="checkbox"]{
  border: 1px solid #fff !important;
  background: transparent !important;
}
html body.pojo-a11y-light-background:not(#pojo-a11y-toolbar) *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .wpcf7-checkbox input[type="checkbox"]:checked::before,
html body.pojo-a11y-light-background:not(#pojo-a11y-toolbar) .private-contact-form .privacy-checkbox input[type="checkbox"]:checked::before{
  color: #000 !important;
  background: transparent !important;
}
html body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar) .wpcf7-checkbox input[type="checkbox"]:checked::before,
html body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar) .private-contact-form .privacy-checkbox input[type="checkbox"]:checked::before,
html body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar) :not(#pojo-a11y-toolbar) .wpcf7-checkbox input[type="checkbox"]:checked::before,
html body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar) .private-contact-form .privacy-checkbox input[type="checkbox"]:checked::before{
  color: #fff !important;
  background: transparent !important;
}
/* grayscale is only a filter on <html>, so the tick just needs a colour that
   survives desaturation against the dark form panel */
html body.pojo-a11y-grayscale:not(#pojo-a11y-toolbar) .private-contact-form .privacy-checkbox input[type="checkbox"]:checked::before{
  color: #fff !important;
}


/* =============================================================================
 * SECTION 7 - rules supplied by the site owner that are missing from the live
 * theme stylesheet. Verified against the deployed style.css before adding:
 * none of the following were present on the server.
 * ========================================================================== */

/* cookie-banner toggle slider - single colour across every mode
   (this file loads after style.css, so it supersedes the older `gray`) */
.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;
}

/* utility background classes */
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,
body.pojo-a11y-high-contrast .transparent-bg,
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .transparent-bg,
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .transparent-bg img,
body.pojo-a11y-high-contrast .transparent-bg img,
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .transparent-bg img{
  background: transparent !important;
}

/* toolbar + cookie floater placement (values supplied by the site owner;
   these differ from the deployed style.css - see the handover note) */
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;
}
#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;
}

@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{
    top: 48vw !important;
  }
  .cc-pos-right{
    left: 50% !important;
    right: unset !important;
    bottom: 10px !important;
    width: 95%;
    transform: translateX(-50%);
  }
}