/* ==========================================================================
   Accessibility fixes for "One Click Accessibility" (Pojo) - webinar_ewave
   Page: home (template-home.php + assets/css/style.css + responsive.css).
   The theme is px based with one breakpoint (max-width: 767px); every font
   rule below mirrors the theme value at base AND inside that breakpoint.
   Every font rule is gated behind body[class*="pojo-a11y-resize-font-"], so
   with nothing selected (or after Reset) the design is untouched.
   Content roots (no Elementor here): body > section, .gradient-wrapper and
   the bootstrap .modal popups. #pojo-a11y-toolbar (nav) and the cookie
   banner (#cc-banner-root / .cc-modal-wrap) sit outside them.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Section 1: scale curves.
   --a11y-scale       page text
   --a11y-scale-form  form controls + messages (bigger first jump)
   --a11y-scale-tb    accessibility toolbar items (a bit smaller than text)
   --a11y-scale-cc    cookie banner / settings (a bit smaller than text)
   -------------------------------------------------------------------------- */
:root { --a11y-scale: 1; --a11y-scale-form: 1; --a11y-scale-tb: 1; --a11y-scale-cc: 1; }
body.pojo-a11y-resize-font-130 { --a11y-scale:1.15; --a11y-scale-form:1.30; --a11y-scale-tb:1.05; --a11y-scale-cc:1.08; }
body.pojo-a11y-resize-font-140 { --a11y-scale:1.22; --a11y-scale-form:1.40; --a11y-scale-tb:1.09; --a11y-scale-cc:1.12; }
body.pojo-a11y-resize-font-150 { --a11y-scale:1.28; --a11y-scale-form:1.48; --a11y-scale-tb:1.12; --a11y-scale-cc:1.16; }
body.pojo-a11y-resize-font-160 { --a11y-scale:1.35; --a11y-scale-form:1.55; --a11y-scale-tb:1.16; --a11y-scale-cc:1.20; }
body.pojo-a11y-resize-font-170 { --a11y-scale:1.42; --a11y-scale-form:1.62; --a11y-scale-tb:1.19; --a11y-scale-cc:1.24; }
body.pojo-a11y-resize-font-180 { --a11y-scale:1.48; --a11y-scale-form:1.68; --a11y-scale-tb:1.23; --a11y-scale-cc:1.28; }
body.pojo-a11y-resize-font-190 { --a11y-scale:1.54; --a11y-scale-form:1.72; --a11y-scale-tb:1.26; --a11y-scale-cc:1.32; }
body.pojo-a11y-resize-font-200 { --a11y-scale:1.60; --a11y-scale-form:1.75; --a11y-scale-tb:1.30; --a11y-scale-cc:1.36; }


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


/* --------------------------------------------------------------------------
   Section 3: kill % compounding inside every content root.
   (0,2,3) beats the plugin's p:not()/li:not() (0,2,2); the pins below all
   carry a root class too (0,3,x) so they beat this.
   -------------------------------------------------------------------------- */
html body[class*="pojo-a11y-resize-font-"] > :is(section, .gradient-wrapper, .modal) :is(p, li, span, label, blockquote, legend, code, pre, dd, dt) {
    font-size: inherit !important;
}


/* --------------------------------------------------------------------------
   Section 4: form (CF7 #50 - banner, intro and the popup) on --a11y-scale-form.
   Inputs and the submit button share ONE height formula (all devices), so
   they are always equal; padding-block 0 + unitless line-height centres text.
   Both are border-box (theme: * { box-sizing: border-box }).
   -------------------------------------------------------------------------- */
html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .form input:not([type="checkbox"]):not([type="hidden"]),
html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .form .submit-col .global-btn {
    font-size: calc(24px * var(--a11y-scale-form)) !important;
    line-height: 1.2 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: calc(24px * var(--a11y-scale-form) * 1.2 + 22px) !important;
}
html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .form .submit-col .global-btn {
    white-space: nowrap !important;
    vertical-align: middle !important;
}
/* consent checkbox: label on the form curve, box stays 18px and is centred on
   the label's first line */
html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .form .wpcf7-list-item-label {
    font-size: calc(13px * var(--a11y-scale-form)) !important;
    line-height: 1.35 !important;
}
html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .form .check-col input[type="checkbox"] {
    font-size: 16px !important;
    margin-top: calc((13px * var(--a11y-scale-form) * 1.35 - 18px) / 2) !important;
}
html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .form-area .form-desc {
    font-size: calc(13px * var(--a11y-scale-form)) !important;
    line-height: 1.45 !important;
}
/* validation tips: one line. The column is the container (cqw = its width),
   so the tip font never outgrows it (longest message: "לשדה זה יש קלט ארוך מדי."). */
html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .form .wpcf7-form :is(.row > div, .submit-col) {
    container-type: inline-size;
}
html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .form .wpcf7-not-valid-tip {
    font-size: max(12px, min(calc(16px * var(--a11y-scale-form)), 8.5cqw)) !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
}
html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .form .wpcf7-response-output {
    font-size: calc(16px * var(--a11y-scale-form)) !important;
    line-height: 1.4 !important;
}


/* --------------------------------------------------------------------------
   Section 4b: spans / elements with an intentional size of their own
   (incl. the :where(.link, .date) pair, restated explicitly).
   -------------------------------------------------------------------------- */
html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .banner-places > span {
    font-size: calc(31px * var(--a11y-scale)) !important;
    line-height: 1.15 !important;
}
/* countdown: four counters + three 30px gaps share the form card, so they
   grow only as far as the card allows (cqw = .countdown-area width) and
   never below the theme size */
html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .countdown-area {
    container-type: inline-size;
}
html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .countdown-item > span:first-child {
    font-size: max(15px, min(calc(15px * var(--a11y-scale)), 5.5cqw)) !important;
    line-height: 1.15 !important;
}
html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .countdown-item > span.time-count,
html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .countdown .countdown-item::before {
    font-size: max(40px, min(calc(40px * var(--a11y-scale)), 14cqw)) !important;
    line-height: 1.1 !important;
}
html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .form-title span {
    font-size: calc(24px * var(--a11y-scale)) !important;
    line-height: 1.2 !important;
}
html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .about-content-area .about-detail .date-area .link,
html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .about-content-area .about-detail .date-area .date {
    font-size: calc(24px * var(--a11y-scale)) !important;
    line-height: 1.15 !important;
}
@media (max-width: 767px) {
    html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .banner-places > span {
        font-size: calc(20px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .countdown-item > span:first-child {
        font-size: max(15px, min(calc(15px * var(--a11y-scale)), 5.5cqw)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .countdown-item > span.time-count,
    html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .countdown .countdown-item::before {
        font-size: max(32px, min(calc(32px * var(--a11y-scale)), 14cqw)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .form-title span {
        font-size: calc(22px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .about-content-area .about-detail .date-area .link,
    html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .about-content-area .about-detail .date-area .date {
        font-size: calc(22px * var(--a11y-scale)) !important;
        line-height: calc(26px * var(--a11y-scale)) !important;
    }
}

/* accessibility toolbar items: grow a bit less than the page text and always
   stay on one line in the fixed 180px panel (178px inside its 1px borders).
   Measured in this theme's font: the widest item is "קישורים קו תחתון" with
   its 1.5em icon = 8.55 x font-size in bold (a.active), 8.78 x in "readable
   font" (Verdana). With 12px side padding: 154 / 8.78 = 17.5px max -> cap
   17px (12.8px x 1.30 = 16.64px, so the cap never bites with these labels). */
#pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a {
    white-space: nowrap !important;
}
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: min(calc(12.8px * var(--a11y-scale-tb)), 17px) !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
}
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 {
    font-size: inherit !important;
}
html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay p.pojo-a11y-toolbar-title {
    font-size: calc(16px * var(--a11y-scale-tb)) !important;
}


/* --------------------------------------------------------------------------
   Section 4c: cookie banner + settings popup (outside the content roots).
   Generic inherit first, then explicit pins on --a11y-scale-cc (a bit
   smaller than the page text). Every pin is calc(px * var()) - nothing freezes.
   -------------------------------------------------------------------------- */
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-"] .cc-root { font-size: calc(14px * var(--a11y-scale-cc)) !important; line-height: 1.5 !important; }
html body[class*="pojo-a11y-resize-font-"] .cc-modal { font-size: calc(16px * var(--a11y-scale-cc)) !important; }
html body[class*="pojo-a11y-resize-font-"] .cc-title,
html body[class*="pojo-a11y-resize-font-"] :is(.cc-root, .cc-modal-wrap) .cc-title { font-size: calc(16px * var(--a11y-scale-cc)) !important; line-height: 1.3 !important; }
html body[class*="pojo-a11y-resize-font-"] .cc-body,
html body[class*="pojo-a11y-resize-font-"] :is(.cc-root, .cc-modal-wrap) .cc-body { font-size: calc(14px * var(--a11y-scale-cc)) !important; line-height: 1.5 !important; }
html body[class*="pojo-a11y-resize-font-"] .cc-btn,
html body[class*="pojo-a11y-resize-font-"] :is(.cc-root, .cc-modal-wrap) .cc-btn { font-size: calc(14px * var(--a11y-scale-cc)) !important; line-height: 1.4 !important; }
html body[class*="pojo-a11y-resize-font-"] .cc-lang-toggle,
html body[class*="pojo-a11y-resize-font-"] :is(.cc-root, .cc-modal-wrap) .cc-lang-toggle { font-size: calc(12px * var(--a11y-scale-cc)) !important; }
html body[class*="pojo-a11y-resize-font-"] .cc-modal-head h2,
html body[class*="pojo-a11y-resize-font-"] :is(.cc-root, .cc-modal-wrap) .cc-modal-head h2 { font-size: calc(18px * var(--a11y-scale-cc)) !important; line-height: 1.3 !important; }
html body[class*="pojo-a11y-resize-font-"] .cc-modal-close,
html body[class*="pojo-a11y-resize-font-"] :is(.cc-root, .cc-modal-wrap) .cc-modal-close { font-size: calc(24px * var(--a11y-scale-cc)) !important; }
html body[class*="pojo-a11y-resize-font-"] .cc-modal-body > p,
html body[class*="pojo-a11y-resize-font-"] :is(.cc-root, .cc-modal-wrap) .cc-modal-body > p { font-size: calc(16px * var(--a11y-scale-cc)) !important; line-height: 1.5 !important; }
html body[class*="pojo-a11y-resize-font-"] .cc-cat-name,
html body[class*="pojo-a11y-resize-font-"] :is(.cc-root, .cc-modal-wrap) .cc-cat-name { font-size: calc(16px * var(--a11y-scale-cc)) !important; }
html body[class*="pojo-a11y-resize-font-"] .cc-cat-desc,
html body[class*="pojo-a11y-resize-font-"] :is(.cc-root, .cc-modal-wrap) .cc-cat-desc { font-size: calc(13px * var(--a11y-scale-cc)) !important; line-height: 1.5 !important; }
html body[class*="pojo-a11y-resize-font-"] .cc-required-badge,
html body[class*="pojo-a11y-resize-font-"] :is(.cc-root, .cc-modal-wrap) .cc-required-badge { font-size: calc(11px * var(--a11y-scale-cc)) !important; }
html body[class*="pojo-a11y-resize-font-"] .cc-cookies-list,
html body[class*="pojo-a11y-resize-font-"] :is(.cc-root, .cc-modal-wrap) .cc-cookies-list,
html body[class*="pojo-a11y-resize-font-"] .cc-cookies-list :is(summary, th, td),
html body[class*="pojo-a11y-resize-font-"] :is(.cc-root, .cc-modal-wrap) .cc-cookies-list :is(summary, th, td) { font-size: calc(12px * var(--a11y-scale-cc)) !important; }
/* settings popup buttons inherit the popup's 16px (not the banner's 14px) */
html body[class*="pojo-a11y-resize-font-"] .cc-modal-wrap .cc-btn { font-size: calc(16px * var(--a11y-scale-cc)) !important; }


/* --------------------------------------------------------------------------
   Section 5: every font-size rule of style.css (base) and responsive.css
   (max-width: 767px), gated, x --a11y-scale. Fixed px line-heights are
   scaled with the text (unitless where the theme line-height is tighter
   than the font, so enlarged lines never overlap).
   -------------------------------------------------------------------------- */

/* ---- style.css (base) ---- */
html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .global-btn {
    font-size: calc(24px * var(--a11y-scale)) !important;
    line-height: calc(28px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .banner-title {
    font-size: calc(58px * var(--a11y-scale)) !important;
    line-height: 1.1 !important;
}
html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .banner-time {
    font-size: calc(49px * var(--a11y-scale)) !important;
    line-height: 1.1 !important;
}
html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .banner-content-area .subtitle {
    font-size: calc(29px * var(--a11y-scale)) !important;
    line-height: 1.15 !important;
}
html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .banner-desc {
    font-size: calc(24px * var(--a11y-scale)) !important;
    line-height: calc(36px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .title-area h2.title {
    font-size: calc(72px * var(--a11y-scale)) !important;
    line-height: 1.05 !important;
}
html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .video-title {
    font-size: calc(24px * var(--a11y-scale)) !important;
    line-height: calc(32px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .global-btn.btn-bold {
    font-size: calc(28px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .recommend-area {
    font-size: calc(24px * var(--a11y-scale)) !important;
    line-height: calc(32px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .recommend-area .name {
    font-size: calc(30px * var(--a11y-scale)) !important;
    line-height: calc(34px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .term-title {
    font-size: calc(44px * var(--a11y-scale)) !important;
    line-height: 1.1 !important;
}
html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .term-content .term-desc,
html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .term-content-area .term-bottom-title {
    font-size: calc(30px * var(--a11y-scale)) !important;
    line-height: calc(34px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .awareness-accordion .accordion-item .accordion-header .accordion-button {
    font-size: calc(49px * var(--a11y-scale)) !important;
    line-height: 1.1 !important;
}
html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .global-btn.custom-acco-btn {
    font-size: calc(24px * var(--a11y-scale)) !important;
    line-height: calc(34px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .global-btn.form-modal-btn {
    font-size: calc(46px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .awareness-accordion-content .number {
    font-size: calc(30px * var(--a11y-scale)) !important;
    line-height: calc(40px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .awareness-accordion-content .content {
    font-size: calc(24px * var(--a11y-scale)) !important;
    line-height: calc(32px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .about-content-area .about-detail .title {
    font-size: calc(41px * var(--a11y-scale)) !important;
    line-height: 1.1 !important;
}
html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .cyprus-desc {
    font-size: calc(24px * var(--a11y-scale)) !important;
    line-height: calc(30px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .profile-content {
    font-size: calc(24px * var(--a11y-scale)) !important;
    line-height: calc(32px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .footer-sec .note {
    font-size: calc(22px * var(--a11y-scale)) !important;
    line-height: calc(32px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) :is(.progress-per, .progress-title) {
    font-size: calc(16px * var(--a11y-scale)) !important;
    line-height: calc(22px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .opinion-progress-area :is(h3.title, .desc) {
    font-size: calc(25px * var(--a11y-scale)) !important;
    line-height: calc(36px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .opinion-sec-two .title-area p.desc,
html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .rating-star-number {
    font-size: calc(25px * var(--a11y-scale)) !important;
    line-height: calc(36px * var(--a11y-scale)) !important;
}
/* "ההטבה מוגבלת ל-20 רוכשים ראשונים": the two decorative side lines take
   20% each and sit on the first line - keep the enlarged text between them */
html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .term-content-area .term-bottom-title::before,
html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .term-content-area .term-bottom-title::after {
    top: calc(17px * var(--a11y-scale)) !important;
}
@media (min-width: 768px) {
    html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .term-content-area .term-bottom-title > span {
        display: inline-block !important;
        max-width: 58% !important;
    }
    /* accordion row (title | open list | "קראו עוד" button, flex nowrap):
       enlarged, it no longer fits one row (at 200 the button was pushed 70px
       off the left edge, and at tablet width the list columns overlapped) -
       let it wrap: title, then the open list full width, then the button */
    html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .awareness-accordion .accordion-item {
        flex-wrap: wrap !important;
    }
    html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .awareness-accordion .accordion-item .accordion-header {
        min-width: 0 !important;
        max-width: 100% !important;
    }
    html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .awareness-accordion .accordion-item .accordion-collapse.show {
        flex: 0 0 100% !important;
        min-width: 0 !important;
    }
    html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .awareness-accordion .accordion-item .accordion-collapse .accordion-body {
        width: auto !important;
    }
}
/* "כתבו עלינו": logo (min 216px) + text side by side leave the enlarged
   title ~130px at tablet width - put the text under the logo below 1200px */
@media (min-width: 768px) and (max-width: 1199.98px) {
    html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .about-content-area {
        flex-wrap: wrap !important;
    }
    html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .about-content-area .about-logo-area {
        margin-bottom: 16px !important;
    }
}
/* big CTA buttons: the theme's 28px line-height is tighter than their 46px /
   23px text - when the enlarged label wraps the lines must not overlap */
html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .global-btn:is(.btn-bold, .form-modal-btn) {
    line-height: 1.15 !important;
}

/* ---- responsive.css (max-width: 767px), same order as the theme ---- */
@media (max-width: 767px) {
    html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .banner-title {
        font-size: calc(26px * var(--a11y-scale)) !important;
        line-height: calc(31px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .banner-time {
        font-size: calc(28px * var(--a11y-scale)) !important;
        line-height: calc(34px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .banner-content-area .subtitle {
        font-size: calc(22px * var(--a11y-scale)) !important;
        line-height: calc(25px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .banner-desc {
        font-size: calc(20px * var(--a11y-scale)) !important;
        line-height: calc(28px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .form .wpcf7-list-item-label,
    html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .form-area .form-desc {
        line-height: 1.38 !important;
    }
    html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .title-area h2.title {
        font-size: calc(28px * var(--a11y-scale)) !important;
        line-height: calc(36px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .video-title {
        font-size: calc(20px * var(--a11y-scale)) !important;
        line-height: calc(24px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .global-btn.btn-bold {
        font-size: calc(23px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .awareness-accordion .accordion-item .accordion-header .accordion-button {
        font-size: calc(20px * var(--a11y-scale)) !important;
        line-height: calc(26px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .awareness-accordion-content .content {
        font-size: calc(20px * var(--a11y-scale)) !important;
        line-height: calc(26px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .awareness-accordion-content .number {
        font-size: calc(24px * var(--a11y-scale)) !important;
        line-height: calc(30px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .recommend-area {
        font-size: calc(20px * var(--a11y-scale)) !important;
        line-height: calc(28px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .recommend-area .name {
        font-size: calc(26px * var(--a11y-scale)) !important;
        line-height: calc(30px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .term-content-area .term-bottom-title {
        font-size: calc(26px * var(--a11y-scale)) !important;
        line-height: calc(30px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .term-title {
        font-size: calc(30px * var(--a11y-scale)) !important;
        line-height: calc(32px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .term-content .term-desc {
        font-size: calc(26px * var(--a11y-scale)) !important;
        line-height: calc(30px * var(--a11y-scale)) !important;
    }
    /* mobile: the lines sit above / below the text (theme values) */
    html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .term-content-area .term-bottom-title::before {
        top: -20px !important;
    }
    html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .term-content-area .term-bottom-title::after {
        top: unset !important;
    }
    html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .term-content.text-white .term-desc {
        max-width: calc(195px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .term-content-area .term-bottom-title > span {
        max-width: calc(250px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .about-content-area .about-detail .title {
        font-size: calc(24px * var(--a11y-scale)) !important;
        line-height: calc(28px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .cyprus-desc {
        font-size: calc(20px * var(--a11y-scale)) !important;
        line-height: calc(30px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .profile-content {
        font-size: calc(20px * var(--a11y-scale)) !important;
        line-height: calc(30px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .footer-sec .note {
        font-size: calc(18px * var(--a11y-scale)) !important;
        line-height: calc(26px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .opinion-progress-area :is(h3.title, .desc) {
        line-height: calc(30px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .opinion-sec-two .title-area p.desc,
    html body[class*="pojo-a11y-resize-font-"] :is(section, .gradient-wrapper, .modal) .rating-star-number {
        font-size: calc(22px * var(--a11y-scale)) !important;
    }
}


/* ==========================================================================
   Section 6: contrast modes (high contrast, negative contrast, light
   background, grayscale).
   ========================================================================== */

/* high contrast: page background black (the plugin leaves the theme's beige
   body and white frame) */
html body:not(#pojo-a11y-toolbar).pojo-a11y-high-contrast {
    background: #000 !important;
    background-color: #000 !important;
    border-color: #000 !important;
}

/* photos drawn as CSS backgrounds (.banner-sec desktop, .term-container):
   the plugin's background shorthand wipes them; functions.php re-adds the
   ACF image URLs inline. Here: their fit, and no container colour over them -
   the colour goes behind the text only. */
html body:not(#pojo-a11y-toolbar):is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .banner-sec {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}
html body:not(#pojo-a11y-toolbar):is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .term-container {
    background-size: cover !important;
    background-position: center center !important;
}
@media (min-width: 768px) {
    html body:not(#pojo-a11y-toolbar):is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .banner-sec,
    html body:not(#pojo-a11y-toolbar):is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .banner-sec :is(.container, .row, .col-12, .banner-content-area, .banner-places) {
        background-color: transparent !important;
    }
}
html body:not(#pojo-a11y-toolbar):is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .term-container,
html body:not(#pojo-a11y-toolbar):is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .term-container :is(div, p.term-bottom-title) {
    background-color: transparent !important;
}
html body:not(#pojo-a11y-toolbar):is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .banner-sec :is(.banner-title, .banner-content-area .subtitle, .banner-desc),
html body:not(#pojo-a11y-toolbar):is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .term-container .term-desc {
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0.25em !important;
    padding-right: 0.25em !important;
}
html body:not(#pojo-a11y-toolbar):is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .term-container .term-bottom-title > span {
    padding-left: 0.25em !important;
    padding-right: 0.25em !important;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
html body:not(#pojo-a11y-toolbar):is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) .banner-sec :is(.banner-title, .banner-time, .banner-places > span, .banner-content-area .subtitle, .banner-desc),
html body:not(#pojo-a11y-toolbar):is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) .term-container :is(.term-title, .term-desc, .term-bottom-title > span) {
    background-color: #000 !important;
}
html body:not(#pojo-a11y-toolbar).pojo-a11y-light-background .banner-sec :is(.banner-title, .banner-time, .banner-places > span, .banner-content-area .subtitle, .banner-desc),
html body:not(#pojo-a11y-toolbar).pojo-a11y-light-background .term-container :is(.term-title, .term-desc, .term-bottom-title > span) {
    background-color: #fff !important;
}

/* images: shown as they are - no grey / black / white box behind them */
html body:not(#pojo-a11y-toolbar):is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) > :is(section, .gradient-wrapper, .modal) img {
    background: transparent !important;
}

/* consent checkbox: box + check mark visible in every mode. The theme draws
   the mark as ::after (16px, line-height 20px); in the modes that add a 1px
   border the line box is fitted to the 16px inner box so the mark stays
   inside it. */
html body:not(#pojo-a11y-toolbar):is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) > :is(section, .gradient-wrapper, .modal) .form .check-col input[type="checkbox"] {
    background: #000 !important;
    border: 1px solid #fff !important;
}
html body:not(#pojo-a11y-toolbar).pojo-a11y-light-background > :is(section, .gradient-wrapper, .modal) .form .check-col input[type="checkbox"] {
    background: #fff !important;
    border: 1px solid #000 !important;
}
html body:not(#pojo-a11y-toolbar):is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) > :is(section, .gradient-wrapper, .modal) .form .check-col input[type="checkbox"]:checked::after {
    font-size: 13px !important;
    line-height: 16px !important;
    height: 16px !important;
    overflow: hidden !important;
}
html body:not(#pojo-a11y-toolbar):is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) > :is(section, .gradient-wrapper, .modal) .form .check-col input[type="checkbox"]:checked::after {
    color: #fff !important;
}
html body:not(#pojo-a11y-toolbar).pojo-a11y-light-background > :is(section, .gradient-wrapper, .modal) .form .check-col input[type="checkbox"]:checked::after {
    color: #000 !important;
}
html body:not(#pojo-a11y-toolbar).pojo-a11y-grayscale > :is(section, .gradient-wrapper, .modal) .form .check-col input[type="checkbox"]:checked::after {
    color: #fff !important;
}

/* buttons: visible border in every contrast mode (the video overlays and the
   slider dots are not real buttons visually and are left alone) */
html body:not(#pojo-a11y-toolbar):is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) > :is(section, .gradient-wrapper, .modal) :is(.global-btn, button:not(.video__play-button):not(.accordion-button):not([role="tab"]):not(.slick-arrow)),
html body:not(#pojo-a11y-toolbar):is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) > :is(section, .gradient-wrapper, .modal) .global-btn.accordion-button,
html body:not(#pojo-a11y-toolbar):is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) :is(.cc-root, .cc-modal-wrap) button {
    border: 1px solid #fff !important;
}
html body:not(#pojo-a11y-toolbar).pojo-a11y-light-background > :is(section, .gradient-wrapper, .modal) :is(.global-btn, button:not(.video__play-button):not(.accordion-button):not([role="tab"]):not(.slick-arrow)),
html body:not(#pojo-a11y-toolbar).pojo-a11y-light-background > :is(section, .gradient-wrapper, .modal) .global-btn.accordion-button,
html body:not(#pojo-a11y-toolbar).pojo-a11y-light-background :is(.cc-root, .cc-modal-wrap) button {
    border: 1px solid #000 !important;
}
/* cookie banner / settings box: an edge, so it does not melt into the page */
html body:not(#pojo-a11y-toolbar):is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) :is(.cc-banner, .cc-modal) {
    border: 1px solid #fff !important;
}
html body:not(#pojo-a11y-toolbar).pojo-a11y-light-background :is(.cc-banner, .cc-modal) {
    border: 1px solid #000 !important;
}

/* cookie settings toggles: the "on" state must differ from "off" in every
   mode (Section 7 paints every track #ababff / gray) - outline the track and
   give the checked track its own colour, knob stays white */
html body:not(#pojo-a11y-toolbar) .cc-toggle input:checked + .cc-slider {
    background: #10b981 !important;
}
html body:not(#pojo-a11y-toolbar):is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) .cc-slider {
    outline: 1px solid #fff !important;
}
html body:not(#pojo-a11y-toolbar):is(.pojo-a11y-light-background, .pojo-a11y-grayscale) .cc-slider {
    outline: 1px solid #000 !important;
}
html body:not(#pojo-a11y-toolbar):is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background, .pojo-a11y-grayscale) .cc-toggle input:checked + .cc-slider {
    background: #0a7d57 !important;
}
html body:not(#pojo-a11y-toolbar):is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background, .pojo-a11y-grayscale) .cc-slider::before {
    background: #fff !important;
    border: 1px solid #000 !important;
}


/* ==========================================================================
   Section 7: site-wide rules requested for this site (as supplied)
   ========================================================================== */
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) input,
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) textarea,
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) select {
    border: 1px solid #000 !important;
}
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) input::placeholder,
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) textarea::placeholder {
    color: #000;
}

/* Remove the problematic body filter only during grayscale mode */
body.pojo-a11y-grayscale {
    -webkit-filter: none !important;
    filter: none !important;
    overflow-x: hidden !important;
}
/* Reapply grayscale to the document root */
html:has(body.pojo-a11y-grayscale) {
    -webkit-filter: grayscale(100%) !important;
    filter: grayscale(100%) !important;
}
/* Change toolbar positioning only during grayscale mode */
body.pojo-a11y-grayscale #pojo-a11y-toolbar {
    position: fixed !important;
    z-index: 99999 !important;
}

.cc-slider, body.pojo-a11y-high-contrast .cc-slider, body.pojo-a11y-grayscale .cc-slider,
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .cc-slider,
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .cc-slider {
    background: #ababff !important;
}
body.pojo-a11y-grayscale .wpcf7-not-valid-tip {
    color: #fff;
}
/* ...except on this site's white form cards, where white text would vanish */
body.pojo-a11y-grayscale .form-area .wpcf7-not-valid-tip {
    color: #dc3232;
}
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .cc-btn {
    border: 1px solid #000 !important;
}
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .cc-slider {
    background: gray !important;
}
body.pojo-a11y-high-contrast .cc-slider {
    background: gray !important;
}
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .cc-slider {
    background: gray !important;
}
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .black-bg img {
    background: #000 !important;
}
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .transparent-bg {
    background: transparent !important;
}
body.pojo-a11y-high-contrast .transparent-bg {
    background: transparent !important;
}
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .transparent-bg {
    background: transparent !important;
}
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .transparent-bg img {
    background: transparent !important;
}
body.pojo-a11y-high-contrast .transparent-bg img {
    background: transparent !important;
}
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .transparent-bg img {
    background: transparent !important;
}
body.pojo-a11y-high-contrast .wpcf7-checkbox input[type="checkbox"]:checked::before {
    color: #fff;
}
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .wpcf7-checkbox input[type="checkbox"]:checked::before {
    color: #fff;
}

#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;
}

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

@media (max-width: 767px) {
    body #cc-floater {
        bottom: unset !important;
        top: 60vw !important;
        left: 2px !important;
        width: 7.5vw !important;
        height: 7.5vw !important;
        line-height: 7.5vw;
        padding: 4.5vw !important;
    }
    body #cc-floater svg {
        width: 5vw !important;
        height: 5vw !important;
    }
    body #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle a {
        font-size: 5.5vw !important;
        padding: 2vw !important;
    }
    body #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle svg {
        width: 5.8vw !important;
    }
    body #pojo-a11y-toolbar {
        top: 48vw !important;
    }
    /* cookie banner centred on mobile */
    .cc-banner {
        padding: 16px !important;
    }
    .cc-pos-right {
        left: 50% !important;
        right: unset !important;
        bottom: 10px !important;
        width: 95%;
        transform: translateX(-50%);
    }
    .cc-btn {
        padding: 7px 9px !important;
    }
}


/* ==========================================================================
   Section 8: <html dir="rtl"> (added in functions.php) must not move
   anything. slick.css flips slides to float:right under [dir="rtl"]; the
   sliders run with rtl:true on an LTR root today, so keep their float.
   ========================================================================== */
html[dir="rtl"] .slick-slide {
    float: left;
}