/* =========================================================================
   accessibility.css — fixes for "One Click Accessibility" (Pojo)
   -------------------------------------------------------------------------
   The theme is px-based, so every scaled size below is
   calc(<theme px> * var(--a11y-scale…)), mirroring style.css (base) and
   responsive.css (@media max-width:767px) 1:1.

   Font-resize rules are all gated behind body[class*="pojo-a11y-resize-font-"]
   so with no size selected (or after Reset) nothing here applies.
   Contrast-mode rules are gated behind Pojo's own contrast body classes.

   Gates:
     G  = html body[class*="pojo-a11y-resize-font-"]          (0,1,2)
     GG = html body[class*="pojo-a11y-resize-font-"][class]   (0,2,2)
   Section 3 (inherit reset) uses G + :is() = (0,2,4), which beats the
   plugin's p:not(.x) / li:not(.x) rules (0,2,2). Everything that must beat
   Section 3 uses GG.
   ========================================================================= */


/* -------------------------------------------------------------------------
   Section 1: STEP → MULTIPLIERS
     --a11y-scale       text / headings            +15% … +60%
     --a11y-scale-form  inputs, submit, checkbox label, messages
                                                   +30% … +75%
     --a11y-scale-cc    cookie banner + modal      +8%  … +35%  (kept smaller)
     --a11y-scale-tb    accessibility toolbar items +8% … +35% (kept smaller)
   ------------------------------------------------------------------------- */
:root { --a11y-scale: 1; --a11y-scale-form: 1; --a11y-scale-cc: 1; --a11y-scale-tb: 1; }
body.pojo-a11y-resize-font-130 { --a11y-scale: 1.15; --a11y-scale-form: 1.30; --a11y-scale-cc: 1.08; --a11y-scale-tb: 1.08; }
body.pojo-a11y-resize-font-140 { --a11y-scale: 1.22; --a11y-scale-form: 1.40; --a11y-scale-cc: 1.12; --a11y-scale-tb: 1.12; }
body.pojo-a11y-resize-font-150 { --a11y-scale: 1.28; --a11y-scale-form: 1.48; --a11y-scale-cc: 1.16; --a11y-scale-tb: 1.16; }
body.pojo-a11y-resize-font-160 { --a11y-scale: 1.35; --a11y-scale-form: 1.55; --a11y-scale-cc: 1.20; --a11y-scale-tb: 1.20; }
body.pojo-a11y-resize-font-170 { --a11y-scale: 1.42; --a11y-scale-form: 1.62; --a11y-scale-cc: 1.24; --a11y-scale-tb: 1.24; }
body.pojo-a11y-resize-font-180 { --a11y-scale: 1.48; --a11y-scale-form: 1.68; --a11y-scale-cc: 1.28; --a11y-scale-tb: 1.28; }
body.pojo-a11y-resize-font-190 { --a11y-scale: 1.54; --a11y-scale-form: 1.72; --a11y-scale-cc: 1.32; --a11y-scale-tb: 1.32; }
body.pojo-a11y-resize-font-200 { --a11y-scale: 1.60; --a11y-scale-form: 1.75; --a11y-scale-cc: 1.35; --a11y-scale-tb: 1.35; }


/* -------------------------------------------------------------------------
   Section 2: Base pin on <body> (measured baseline 16px)
   ------------------------------------------------------------------------- */
html body[class*="pojo-a11y-resize-font-"] {
    font-size: calc(16px * var(--a11y-scale)) !important;
}


/* -------------------------------------------------------------------------
   Section 3: Kill the compounding percentages inside the content roots.
   Content roots on this theme: the landing <section>s, the mobile bar and
   the theme-template wrapper (.description-section, used by 404.php).
   Headings are sized explicitly in Section 5.
   ------------------------------------------------------------------------- */
html body[class*="pojo-a11y-resize-font-"] :is(body > section, body > .mobile-menu, .description-section) :is(p, li, span, label, blockquote, legend, code, pre, dd, dt),
html body[class*="pojo-a11y-resize-font-"] :is(body > section, .description-section) :is(h1, h2, h3, h4, h5, h6) span {
    font-size: inherit !important;
}

/* Theme-template pages (404) have no per-element sizes: headings get a
   modest scaled size instead of the plugin's 266%. */
html body[class*="pojo-a11y-resize-font-"][class] .description-section :is(h1, h2) { font-size: calc(30px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"][class] .description-section :is(h3, h4, h5, h6) { font-size: calc(22px * var(--a11y-scale)) !important; }


/* -------------------------------------------------------------------------
   Section 4: FORM (Contact Form 7) on --a11y-scale-form.
   Fixed heights (46px / 42px) are released so scaled text isn't clipped.
   Messages get a unitless line-height (theme uses px / vh).
   ------------------------------------------------------------------------- */
html body[class*="pojo-a11y-resize-font-"][class] .field-col input,
html body[class*="pojo-a11y-resize-font-"][class] .field-col textarea,
html body[class*="pojo-a11y-resize-font-"][class] .field-col select,
html body[class*="pojo-a11y-resize-font-"][class] .wpcf7-select {
    font-size: calc(16px * var(--a11y-scale-form)) !important;
    line-height: 1.3 !important;
    height: max(46px, calc(16px * var(--a11y-scale-form) * 1.3 + 30px)) !important;
}
/* Submit matches the field height exactly (same calc), label centred. */
html body[class*="pojo-a11y-resize-font-"][class] .submit-btn input {
    font-size: calc(23px * var(--a11y-scale-form)) !important;
    line-height: 1 !important;
    height: max(46px, calc(16px * var(--a11y-scale-form) * 1.3 + 30px)) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .wpcf7-checkbox .wpcf7-list-item-label {
    font-size: calc(12px * var(--a11y-scale-form)) !important;
    line-height: 1.5 !important;
}
/* Keep the box centred on the (now taller) first line of the label. */
html body[class*="pojo-a11y-resize-font-"][class] .wpcf7-checkbox input[type="checkbox"] {
    top: calc((12px * var(--a11y-scale-form) * 1.5 - 20px) / 2) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .wpcf7-not-valid-tip {
    font-size: calc(15px * var(--a11y-scale-form)) !important;
    line-height: 1.3 !important;
}
/* Base is 0.9vw (≈3.4px at 375px) — floor it so it is readable. */
html body[class*="pojo-a11y-resize-font-"][class] .wpcf7-response-output {
    font-size: calc(max(14px, 0.9vw) * var(--a11y-scale-form)) !important;
    line-height: 1.4 !important;
}

@media (max-width: 767px) {
    html body[class*="pojo-a11y-resize-font-"][class] .field-col input,
    html body[class*="pojo-a11y-resize-font-"][class] .field-col textarea,
    html body[class*="pojo-a11y-resize-font-"][class] .field-col select,
    html body[class*="pojo-a11y-resize-font-"][class] .wpcf7-select {
        height: max(42px, calc(16px * var(--a11y-scale-form) * 1.3 + 16px)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class] .submit-btn input {
        font-size: calc(22px * var(--a11y-scale-form)) !important;
        height: max(42px, calc(16px * var(--a11y-scale-form) * 1.3 + 16px)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class] .wpcf7-checkbox .wpcf7-list-item-label {
        font-size: calc(13px * var(--a11y-scale-form)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class] .wpcf7-checkbox input[type="checkbox"] {
        top: calc((13px * var(--a11y-scale-form) * 1.5 - 22px) / 2) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class] .wpcf7-not-valid-tip {
        font-size: calc(14px * var(--a11y-scale-form)) !important;
    }
}


/* -------------------------------------------------------------------------
   Section 4c: Cookie banner (#cc-banner-root) and its settings modal
   (.cc-modal-wrap). Both sit outside the content roots. Deliberately on the
   smaller --a11y-scale-cc curve. Every pin is calc(), never flat px.
   ------------------------------------------------------------------------- */
html body[class*="pojo-a11y-resize-font-"] :is(.cc-root, .cc-modal-wrap) :is(p, li, span, label, a, summary) {
    font-size: inherit !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .cc-root {
    font-size: calc(14px * var(--a11y-scale-cc)) !important;
    line-height: 1.5 !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .cc-title,
html body[class*="pojo-a11y-resize-font-"][class] .cc-root .cc-title {
    font-size: calc(16px * var(--a11y-scale-cc)) !important;
    line-height: 1.3 !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .cc-body,
html body[class*="pojo-a11y-resize-font-"][class] .cc-root .cc-body {
    font-size: calc(14px * var(--a11y-scale-cc)) !important;
    line-height: 1.5 !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .cc-btn,
html body[class*="pojo-a11y-resize-font-"][class] .cc-root .cc-btn {
    font-size: calc(14px * var(--a11y-scale-cc)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .cc-lang-toggle,
html body[class*="pojo-a11y-resize-font-"][class] .cc-root .cc-lang-toggle {
    font-size: calc(12px * var(--a11y-scale-cc)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .cc-modal-wrap .cc-modal {
    font-size: calc(16px * var(--a11y-scale-cc)) !important;
    line-height: 1.5 !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .cc-modal-wrap .cc-btn {
    font-size: calc(16px * var(--a11y-scale-cc)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .cc-modal-head h2 {
    font-size: calc(18px * var(--a11y-scale-cc)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .cc-modal-close {
    font-size: calc(24px * var(--a11y-scale-cc)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .cc-cat-desc {
    font-size: calc(13px * var(--a11y-scale-cc)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .cc-required-badge {
    font-size: calc(11px * var(--a11y-scale-cc)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .cc-cookies-list,
html body[class*="pojo-a11y-resize-font-"][class] .cc-cookies-list th,
html body[class*="pojo-a11y-resize-font-"][class] .cc-cookies-list td {
    font-size: calc(12px * var(--a11y-scale-cc)) !important;
}


/* -------------------------------------------------------------------------
   Section 4e: Accessibility toolbar items — deliberately a bit smaller than
   the page text (plugin alone: 12.8px → 25.6px; here 12.8px → ~17.3px).
   The toolbar title keeps the plugin's own behaviour.
   ------------------------------------------------------------------------- */
html body[class*="pojo-a11y-resize-font-"][class] #pojo-a11y-toolbar .pojo-a11y-toolbar-item .pojo-a11y-toolbar-icon,
html body[class*="pojo-a11y-resize-font-"][class] #pojo-a11y-toolbar .pojo-a11y-toolbar-item .pojo-a11y-toolbar-text {
    font-size: calc(12.8px * var(--a11y-scale-tb)) !important;
}
/* Keep every toolbar item on one line, with the panel only as wide as its
   longest label. The plugin fixes the panel at 180px and slides it shut with
   left:-180px (toggle at left:180px); here the panel sizes to its content
   (never narrower than the original 180px) and slides shut by its own width
   with a transform, the toggle riding on its edge. */
html body[class*="pojo-a11y-resize-font-"][class] #pojo-a11y-toolbar,
html body[class*="pojo-a11y-resize-font-"][class] #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay {
    width: max-content !important;
    min-width: 180px;
}
html body[class*="pojo-a11y-resize-font-"][class] #pojo-a11y-toolbar .pojo-a11y-toolbar-item a {
    white-space: nowrap !important;
}
html body[class*="pojo-a11y-resize-font-"][class] #pojo-a11y-toolbar.pojo-a11y-toolbar-left {
    left: 0 !important;
    transform: translateX(-100%);
    transition: transform 750ms cubic-bezier(.23, 1, .32, 1) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] #pojo-a11y-toolbar.pojo-a11y-toolbar-left .pojo-a11y-toolbar-toggle {
    left: 100% !important;
}
html body[class*="pojo-a11y-resize-font-"][class] #pojo-a11y-toolbar.pojo-a11y-toolbar-right {
    right: 0 !important;
    transform: translateX(100%);
    transition: transform 750ms cubic-bezier(.23, 1, .32, 1) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] #pojo-a11y-toolbar.pojo-a11y-toolbar-right .pojo-a11y-toolbar-toggle {
    right: 100% !important;
}
html body[class*="pojo-a11y-resize-font-"][class] #pojo-a11y-toolbar.pojo-a11y-toolbar-open {
    transform: none;
}


/* -------------------------------------------------------------------------
   Section 5: Landing-page elements — every font-size rule from style.css and
   responsive.css, multiplied by --a11y-scale. px line-heights are scaled too
   so lines don't overlap.
   ------------------------------------------------------------------------- */

/* Hero has a fixed height; let it grow when the text needs it. The extra
   bottom padding keeps content clear of the features block (-110px overlap). */
html body[class*="pojo-a11y-resize-font-"][class] .hero_wrap {
    height: auto !important;
    min-height: 730px;
    padding-bottom: 130px;
}

html body[class*="pojo-a11y-resize-font-"][class] .hero_heading          { font-size: calc(59px * var(--a11y-scale)) !important; line-height: calc(46px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"][class] .hero_heading_2        { font-size: calc(66px * var(--a11y-scale)) !important; line-height: calc(66px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"][class] .hero_yellow_text      { font-size: calc(37px * var(--a11y-scale)) !important; line-height: calc(42px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"][class] .hero_description      { font-size: calc(22px * var(--a11y-scale)) !important; line-height: calc(30px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"][class] .global_gradient_button { font-size: calc(26px * var(--a11y-scale)) !important; line-height: calc(26px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"][class] .investment_heading_wrapper { font-size: calc(39px * var(--a11y-scale)) !important; line-height: calc(45px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"][class] .faq_counter           { font-size: calc(38px * var(--a11y-scale)) !important; line-height: calc(38px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"][class] .opportunity_text      { font-size: calc(18px * var(--a11y-scale)) !important; line-height: calc(22px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"][class] .investment_item_description p { font-size: calc(18px * var(--a11y-scale)) !important; line-height: calc(23px * var(--a11y-scale)) !important; }

html body[class*="pojo-a11y-resize-font-"][class] .faq_heading,
html body[class*="pojo-a11y-resize-font-"][class] .results_main_heading { font-size: calc(40px * var(--a11y-scale)) !important; }

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

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

html body[class*="pojo-a11y-resize-font-"][class] .invest_main_heading_black,
html body[class*="pojo-a11y-resize-font-"][class] .invest_main_heading_yellow { font-size: calc(36px * var(--a11y-scale)) !important; }

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

html body[class*="pojo-a11y-resize-font-"][class] .situation_heading,
html body[class*="pojo-a11y-resize-font-"][class] .financial_reality_heading,
html body[class*="pojo-a11y-resize-font-"][class] .government_heading_1 { font-size: calc(32px * var(--a11y-scale)) !important; }

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

html body[class*="pojo-a11y-resize-font-"][class] .financial_reality_heading_2,
html body[class*="pojo-a11y-resize-font-"][class] .notice_inner,
html body[class*="pojo-a11y-resize-font-"][class] .invest_quote_heading { font-size: calc(30px * var(--a11y-scale)) !important; }

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

html body[class*="pojo-a11y-resize-font-"][class] .footer_top_text,
html body[class*="pojo-a11y-resize-font-"][class] .faq_question,
html body[class*="pojo-a11y-resize-font-"][class] .invest_quote_description { font-size: calc(26px * var(--a11y-scale)) !important; }

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

html body[class*="pojo-a11y-resize-font-"][class] .government_heading_2,
html body[class*="pojo-a11y-resize-font-"][class] .government_heading_3 { font-size: calc(22px * var(--a11y-scale)) !important; }

html body[class*="pojo-a11y-resize-font-"][class] .faq_description,
html body[class*="pojo-a11y-resize-font-"][class] .faq_arrow i,
html body[class*="pojo-a11y-resize-font-"][class] .faq_answer p { font-size: calc(20px * var(--a11y-scale)) !important; }

html body[class*="pojo-a11y-resize-font-"][class] .feature_text,
html body[class*="pojo-a11y-resize-font-"][class] .lifetime_opportunity_description,
html body[class*="pojo-a11y-resize-font-"][class] .commitment_description { font-size: calc(19px * var(--a11y-scale)) !important; }

html body[class*="pojo-a11y-resize-font-"][class] .situation_item p,
html body[class*="pojo-a11y-resize-font-"][class] .financial_reality_description,
html body[class*="pojo-a11y-resize-font-"][class] .financial_reality_description_2,
html body[class*="pojo-a11y-resize-font-"][class] .government_description_1,
html body[class*="pojo-a11y-resize-font-"][class] .government_description_2,
html body[class*="pojo-a11y-resize-font-"][class] .government_description_3,
html body[class*="pojo-a11y-resize-font-"][class] .think_box_description { font-size: calc(18px * var(--a11y-scale)) !important; }

html body[class*="pojo-a11y-resize-font-"][class] .results_feature_title,
html body[class*="pojo-a11y-resize-font-"][class] .results_feature_description { font-size: calc(15px * var(--a11y-scale)) !important; }

html body[class*="pojo-a11y-resize-font-"][class] .invest_card_title,
html body[class*="pojo-a11y-resize-font-"][class] .invest_card_text { font-size: calc(14px * var(--a11y-scale)) !important; }

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

@media (max-width: 767px) {
    html body[class*="pojo-a11y-resize-font-"][class] .hero_wrap { min-height: 772px; }

    html body[class*="pojo-a11y-resize-font-"][class] .hero_heading          { font-size: calc(40px * var(--a11y-scale)) !important; line-height: calc(40px * var(--a11y-scale)) !important; }
    html body[class*="pojo-a11y-resize-font-"][class] .hero_heading_2        { font-size: calc(45px * var(--a11y-scale)) !important; line-height: calc(45px * var(--a11y-scale)) !important; }
    html body[class*="pojo-a11y-resize-font-"][class] .hero_yellow_text      { font-size: calc(25px * var(--a11y-scale)) !important; line-height: calc(34px * var(--a11y-scale)) !important; }
    html body[class*="pojo-a11y-resize-font-"][class] .hero_description      { font-size: calc(16px * var(--a11y-scale)) !important; line-height: calc(22px * var(--a11y-scale)) !important; }
    html body[class*="pojo-a11y-resize-font-"][class] .global_gradient_button { font-size: calc(20px * var(--a11y-scale)) !important; line-height: calc(25px * var(--a11y-scale)) !important; }
    html body[class*="pojo-a11y-resize-font-"][class] .footer_top_text       { font-size: calc(30px * var(--a11y-scale)) !important; line-height: calc(35px * var(--a11y-scale)) !important; }
    html body[class*="pojo-a11y-resize-font-"][class] .financial_reality_heading { font-size: calc(30px * var(--a11y-scale)) !important; line-height: calc(34px * var(--a11y-scale)) !important; }
    html body[class*="pojo-a11y-resize-font-"][class] .lifetime_opportunity_heading { font-size: calc(30px * var(--a11y-scale)) !important; line-height: calc(32px * var(--a11y-scale)) !important; }
    html body[class*="pojo-a11y-resize-font-"][class] .investment_heading_wrapper { font-size: calc(30px * var(--a11y-scale)) !important; line-height: calc(35px * var(--a11y-scale)) !important; }
    html body[class*="pojo-a11y-resize-font-"][class] .faq_counter           { font-size: calc(18px * var(--a11y-scale)) !important; }

    html body[class*="pojo-a11y-resize-font-"][class] .features_heading,
    html body[class*="pojo-a11y-resize-font-"][class] .situation_heading,
    html body[class*="pojo-a11y-resize-font-"][class] .faq_heading,
    html body[class*="pojo-a11y-resize-font-"][class] .invest_main_heading_black,
    html body[class*="pojo-a11y-resize-font-"][class] .invest_main_heading_yellow,
    html body[class*="pojo-a11y-resize-font-"][class] .results_main_heading,
    html body[class*="pojo-a11y-resize-font-"][class] .commitment_heading,
    html body[class*="pojo-a11y-resize-font-"][class] .think_main_heading { font-size: calc(30px * var(--a11y-scale)) !important; }

    html body[class*="pojo-a11y-resize-font-"][class] .government_heading_1,
    html body[class*="pojo-a11y-resize-font-"][class] .invest_quote_heading { font-size: calc(28px * var(--a11y-scale)) !important; }

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

    html body[class*="pojo-a11y-resize-font-"][class] .notice_inner,
    html body[class*="pojo-a11y-resize-font-"][class] .think_box_heading { font-size: calc(22px * var(--a11y-scale)) !important; }

    html body[class*="pojo-a11y-resize-font-"][class] .government_heading_2,
    html body[class*="pojo-a11y-resize-font-"][class] .government_heading_3,
    html body[class*="pojo-a11y-resize-font-"][class] .investment_item_heading { font-size: calc(20px * var(--a11y-scale)) !important; }

    html body[class*="pojo-a11y-resize-font-"][class] .mobile-results-owl .owl-nav button.owl-prev,
    html body[class*="pojo-a11y-resize-font-"][class] .mobile-results-owl .owl-nav button.owl-next { font-size: calc(18px * var(--a11y-scale)) !important; }

    html body[class*="pojo-a11y-resize-font-"][class] .situation_item p,
    html body[class*="pojo-a11y-resize-font-"][class] .financial_reality_description,
    html body[class*="pojo-a11y-resize-font-"][class] .financial_reality_description_2,
    html body[class*="pojo-a11y-resize-font-"][class] .lifetime_opportunity_description,
    html body[class*="pojo-a11y-resize-font-"][class] .government_description_1,
    html body[class*="pojo-a11y-resize-font-"][class] .government_description_2,
    html body[class*="pojo-a11y-resize-font-"][class] .government_description_3,
    html body[class*="pojo-a11y-resize-font-"][class] .faq_description,
    html body[class*="pojo-a11y-resize-font-"][class] .faq_question,
    html body[class*="pojo-a11y-resize-font-"][class] .invest_quote_description,
    html body[class*="pojo-a11y-resize-font-"][class] .commitment_description,
    html body[class*="pojo-a11y-resize-font-"][class] .think_box_description,
    html body[class*="pojo-a11y-resize-font-"][class] .mobile-owl .invest_card_title { font-size: calc(16px * var(--a11y-scale)) !important; }

    /* Sticky bottom bar: gentler curve and one line per button, so the fixed
       bar stays short; the footer's bottom padding (90px, which clears the
       bar) grows with it so the last footer links are never covered. */
    html body[class*="pojo-a11y-resize-font-"][class] .detail-mob a,
    html body[class*="pojo-a11y-resize-font-"][class] .phone-mob a {
        font-size: calc(16px * var(--a11y-scale-tb)) !important;
        white-space: nowrap !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class] .footer_section {
        padding-bottom: calc(90px + 24px * var(--a11y-scale-tb)) !important;
    }

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

    html body[class*="pojo-a11y-resize-font-"][class] .mobile-owl .invest_card_text { font-size: calc(15px * var(--a11y-scale)) !important; }

    html body[class*="pojo-a11y-resize-font-"][class] .faq_answer p,
    html body[class*="pojo-a11y-resize-font-"][class] .faq_arrow i { font-size: calc(14px * var(--a11y-scale)) !important; }

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

@media (min-width: 1900px) {
    html body[class*="pojo-a11y-resize-font-"][class] .hero_wrap { min-height: 790px; }
}
@media (min-width: 2000px) {
    html body[class*="pojo-a11y-resize-font-"][class] .hero_wrap { min-height: 920px; }
}


/* -------------------------------------------------------------------------
   Consent checkbox alignment (all states): the theme drops the box 4px
   below the text (10px on mobile via margin-top). Centre it on the first
   line instead: desktop box 20px / line 18px, mobile box 22px / line 18px.
   ------------------------------------------------------------------------- */
html body .wpcf7-checkbox input[type="checkbox"] {
    top: -1px !important;
    margin-top: 0 !important;
}
@media (max-width: 767px) {
    html body .wpcf7-checkbox input[type="checkbox"] {
        top: -2px !important;
    }
}


/* =========================================================================
   Section 6: CONTRAST MODES
   (high contrast / negative contrast / light background / grayscale)
   ========================================================================= */

/* 6-. Page background: black in high / negative contrast. Pojo's own rule
   (body.pojo-a11y-high-contrast body) never matches <body> itself, so the
   theme's white body showed through. */
html:has(body.pojo-a11y-high-contrast),
html:has(body.pojo-a11y-negative-contrast),
html body.pojo-a11y-high-contrast,
html body.pojo-a11y-negative-contrast {
    background: #000 !important;
}

/* 6a. Background images -----------------------------------------------------
   Pojo removes them (high contrast: background-image:none; negative/light:
   background:#000/#fff shorthand on every element). The section images come
   from ACF inline styles; a small script in functions.php copies each one
   into --a11y-bg, which is restored here exactly as designed (no overlay).
   Grayscale already keeps images (filter). */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) [style*="--a11y-bg"]:not(#a11y-x) {
    background-image: var(--a11y-bg) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .hero_wrap[style*="--a11y-bg"]:not(#a11y-x) {
    background-position: bottom center !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .faq_section[style*="--a11y-bg"]:not(#a11y-x) {
    background-position: top center !important;
}
/* Pojo also paints every element solid (#000 / #fff), which covers the
   restored image with boxes behind each heading and paragraph. Inside the
   image sections everything is transparent — except the cards and the hero
   button pill, which keep their solid background. */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) :is(.hero_wrap, .investment_section, .faq_section, .think_section) :not(.faq_item, .faq_item *, .investment_item, .investment_item *, .think_box, .think_box *, .hero_button_wrap, .hero_button_wrap *):not(#a11y-x) {
    background: transparent !important;
}
/* Text sitting directly on those photos: the mode's light text (white /
   green / yellow) disappears on the bright images, so it takes a colour that
   contrasts with its own photo, as in the normal design — black on the light
   hero / FAQ / "think" images, white on the dark investment image. */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) :is(.hero_wrap, .faq_section, .think_section) :not(.faq_item, .faq_item *, .think_box, .think_box *, .hero_button_wrap, .hero_button_wrap *):not(#a11y-x) {
    color: #000 !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .investment_section :not(.investment_item, .investment_item *):not(#a11y-x) {
    color: #fff !important;
}
/* <img>: Pojo paints a solid box behind images (high contrast #808080,
   negative #000, light #fff), which fills transparent PNG areas. */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background, .pojo-a11y-grayscale) img:not(#a11y-x):not(.a11y-x) {
    background: transparent !important;
}
/* Hero button arrow (a pseudo-element image) */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .hero_button_wrap::before {
    background-image: url("https://karkaot.webzsites.site/wp-content/uploads/sites/50/2025/11/left-arrow-button.png") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

/* 6b. Form field borders ----------------------------------------------------- */
html body.pojo-a11y-high-contrast .wpcf7 :is(input:not([type="hidden"]):not([type="checkbox"]), textarea, select):not(#a11y-x),
html body.pojo-a11y-negative-contrast .wpcf7 :is(input:not([type="hidden"]):not([type="checkbox"]), textarea, select):not(#a11y-x) {
    border: 2px solid #fff !important;
}
html body.pojo-a11y-light-background .wpcf7 :is(input:not([type="hidden"]):not([type="checkbox"]), textarea, select):not(#a11y-x),
html body.pojo-a11y-grayscale .wpcf7 :is(input:not([type="hidden"]):not([type="checkbox"]), textarea, select):not(#a11y-x) {
    border: 2px solid #000 !important;
}

/* 6b2. Button borders ---------------------------------------------------------
   Every button gets a visible 2px border in every contrast mode.
   high / negative: buttons are black → white border.
   light: buttons are white → black border.
   grayscale: the page keeps its own colours → border contrasts with the
   button's own fill (black pills / mobile "details" get white, the rest black).
   The two mobile sticky-bar buttons use an inset outline instead of a border:
   a border would take 4px from their tight 48% columns and wrap the label. */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) :is(.hero_button_wrap, .wpcf7-submit, .cc-btn, .cc-lang-toggle, .cc-modal-close, #cc-floater, .owl-nav button):not(#a11y-x) {
    border: 2px solid #fff !important;
}
html body.pojo-a11y-light-background :is(.hero_button_wrap, .wpcf7-submit, .cc-btn, .cc-lang-toggle, .cc-modal-close, #cc-floater, .owl-nav button):not(#a11y-x) {
    border: 2px solid #000 !important;
}
html body.pojo-a11y-grayscale :is(.wpcf7-submit, .cc-btn, .cc-lang-toggle, .cc-modal-close, #cc-floater, .owl-nav button):not(#a11y-x) {
    border: 2px solid #000 !important;
}
html body.pojo-a11y-grayscale .hero_button_wrap:not(#a11y-x) {
    border: 2px solid #fff !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) :is(.detail-mob, .phone-mob):not(#a11y-x),
html body.pojo-a11y-grayscale .detail-mob:not(#a11y-x) {
    outline: 2px solid #fff !important;
    outline-offset: -2px !important;
}
html body.pojo-a11y-light-background :is(.detail-mob, .phone-mob):not(#a11y-x),
html body.pojo-a11y-grayscale .phone-mob:not(#a11y-x) {
    outline: 2px solid #000 !important;
    outline-offset: -2px !important;
}

/* 6b3. Mobile sticky bar icons ------------------------------------------------
   The "details" arrow is an <img> the theme turns white with a filter (for
   its black button) and the phone icon is currentColor. Pin both to the
   button's text colour: white on black (high / negative), black on white
   (light). Grayscale keeps the theme's own colours. */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) .mobile-menu a img:not(#a11y-x) {
    filter: brightness(0) invert(1) !important;
}
html body.pojo-a11y-light-background .mobile-menu a img:not(#a11y-x) {
    filter: brightness(0) !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) .mobile-menu a svg:not(#a11y-x) {
    color: #fff !important;
    fill: #fff !important;
}
html body.pojo-a11y-light-background .mobile-menu a svg:not(#a11y-x) {
    color: #000 !important;
    fill: #000 !important;
}

/* 6c. Consent checkbox: visible box + a CSS-drawn tick that always sits
   centred inside the box (the theme's "✔" glyph is sized in vw/vh and is
   black-on-black in high / negative contrast). */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background, .pojo-a11y-grayscale) .wpcf7-checkbox input[type="checkbox"]:not(#a11y-x) {
    border-width: 2px !important;
    border-style: solid !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background, .pojo-a11y-grayscale) .wpcf7-checkbox input[type="checkbox"]:checked:not(#a11y-x)::before {
    content: "" !important;
    position: absolute !important;
    top: 45% !important;
    left: 50% !important;
    width: 6px !important;
    height: 11px !important;
    border-style: solid !important;
    border-width: 0 2.5px 2.5px 0 !important;
    border-radius: 0 !important;
    background: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    transform: translate(-50%, -50%) rotate(45deg) !important;
    box-sizing: border-box !important;
}
/* high / negative: white box on black */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) .wpcf7-checkbox input[type="checkbox"]:not(#a11y-x) {
    background: #000 !important;
    border-color: #fff !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) .wpcf7-checkbox input[type="checkbox"]:checked:not(#a11y-x) {
    background: #fff !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) .wpcf7-checkbox input[type="checkbox"]:checked:not(#a11y-x)::before {
    border-color: #000 !important;
}
/* light: black box on white */
html body.pojo-a11y-light-background .wpcf7-checkbox input[type="checkbox"]:not(#a11y-x) {
    background: #fff !important;
    border-color: #000 !important;
}
html body.pojo-a11y-light-background .wpcf7-checkbox input[type="checkbox"]:checked:not(#a11y-x) {
    background: #000 !important;
}
html body.pojo-a11y-light-background .wpcf7-checkbox input[type="checkbox"]:checked:not(#a11y-x)::before {
    border-color: #fff !important;
}
/* grayscale: theme colours (white box on the dark footer) */
html body.pojo-a11y-grayscale .wpcf7-checkbox input[type="checkbox"]:not(#a11y-x) {
    background: transparent !important;
    border-color: #fff !important;
}
html body.pojo-a11y-grayscale .wpcf7-checkbox input[type="checkbox"]:checked:not(#a11y-x) {
    background: #fff !important;
}
html body.pojo-a11y-grayscale .wpcf7-checkbox input[type="checkbox"]:checked:not(#a11y-x)::before {
    border-color: #000 !important;
}

/* 6d. Cookie settings toggles --------------------------------------------------
   style.css forces .cc-slider to #ababff !important in every state, so ON and
   OFF look identical. Give the ON state its own colour in every mode. */
html body .cc-toggle input:checked + .cc-slider:not(#a11y-x) {
    background: #047857 !important;
}
html body .cc-toggle input:focus-visible + .cc-slider:not(#a11y-x) {
    outline: 2px solid #0C213B;
    outline-offset: 2px;
}
/* high / negative: outlined dark track, yellow when ON */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) .cc-toggle .cc-slider:not(#a11y-x) {
    background: #000 !important;
    outline: 2px solid #fff !important;
    outline-offset: 0;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) .cc-toggle .cc-slider:not(#a11y-x)::before {
    background: #fff !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) .cc-toggle input:checked + .cc-slider:not(#a11y-x) {
    background: #ff0 !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) .cc-toggle input:checked + .cc-slider:not(#a11y-x)::before {
    background: #000 !important;
}
/* light: outlined white track, black when ON */
html body.pojo-a11y-light-background .cc-toggle .cc-slider:not(#a11y-x) {
    background: #fff !important;
    outline: 2px solid #000 !important;
    outline-offset: 0;
}
html body.pojo-a11y-light-background .cc-toggle .cc-slider:not(#a11y-x)::before {
    background: #000 !important;
}
html body.pojo-a11y-light-background .cc-toggle input:checked + .cc-slider:not(#a11y-x) {
    background: #000 !important;
}
html body.pojo-a11y-light-background .cc-toggle input:checked + .cc-slider:not(#a11y-x)::before {
    background: #fff !important;
}
/* grayscale: OFF stays light, ON is the dark green above (reads as dark grey) */