/* ==========================================================================
   Alora – One Click Accessibility (Pojo) font-resize compatibility layer
   --------------------------------------------------------------------------
   Loaded LAST (see functions.php -> wp_enqueue_style('accessibility', ...)).

   WHY THIS FILE EXISTS
   The Pojo "One Click Accessibility" plugin resizes text by putting
   `body.pojo-a11y-resize-font-NNN` on <body> and then forcing
   `font-size: NNN% !important` on body / p / li / span / label / input /
   select / textarea / dd / dt / code / pre / blockquote, plus a separate
   `font-size: (NNN*1.33)% !important` on h1..h6 AND on `h_ span`.

   On this theme that produces four visible bugs:
     1. Every heading collapses to the SAME size (h1 34px, h3 18px and
        h2 38px all render 85px at step 200) – the whole type hierarchy
        is destroyed.
     2. Contact-Form-7 wraps each field in <p><span class="wpcf7-form-
        control-wrap"><input>, so the plugin percentage compounds:
        input 20px -> 256px, .wpcf7-list-item-label 14px -> 896px.
     3. Elements that are <p> but designed large SHRINK
        (.card-count 76px -> 27px at the first step).
     4. #cc-banner-root (cookie banner) lives OUTSIDE the page content, so
        .cc-body runs away (14px -> 45px) while .cc-btn (font: inherit)
        stays frozen at 14px.

   HOW IT IS FIXED
     * Section 1 defines three multiplier curves.
     * Section 2 pins <body> font-size / line-height to a scaled value.
     * Section 3 neutralises the plugin's compounding percentages inside the
       page content only, so those elements simply inherit once.
     * Sections 4/4c/5 restate every font-size (and its matching px
       line-height) that the theme itself declares, multiplied by the curve.
     * Section 6 holds the few layout guards needed so nothing overlaps at
       the larger sizes.

   TWO HARD RULES THIS FILE OBEYS
     RULE A  Nothing selected  ->  design is byte-for-byte unchanged.
             Every single rule below is gated behind
             body[class*="pojo-a11y-resize-font-"], so with no accessibility
             size chosen (and after Reset) this file contributes nothing.
     RULE B  The accessibility toolbar is never touched. #pojo-a11y-toolbar
             is a <nav> sibling of the page content and carries its own
             `font-size:16px`, and every generic rule here is scoped to the
             content roots (header / section / footer / ...), so the toolbar
             popup keeps scaling exactly as the plugin always made it
             (item span 12.8px -> 25.6px, with or without this file).
   ========================================================================== */


/* ==========================================================================
   SECTION 1 – STEP -> MULTIPLIERS (three curves)
   --------------------------------------------------------------------------
   --a11y-scale       general text: paragraphs, lists, headings, links,
                      buttons, nav.                 step 1: +18%  ...  max +62%
   --a11y-scale-form  form controls, labels, validation/response messages and
                      the cookie banner. These start from the smallest sizes
                      on the site, so they need a bigger first jump to read as
                      "bigger".                     step 1: +32%  ...  max +78%
   --a11y-scale-lg    oversized display type (.card-count 76px, privacy H1
                      50px). A full +62% on a 76px numeral would break its
                      card, so display type is damped.
                                                    step 1: +8%   ...  max +30%
   ========================================================================== */
:root {
    --a11y-scale: 1;
    --a11y-scale-form: 1;
    --a11y-scale-lg: 1;
}
body.pojo-a11y-resize-font-120 { --a11y-scale: 1.12; --a11y-scale-form: 1.22; --a11y-scale-lg: 1.05; }
body.pojo-a11y-resize-font-130 { --a11y-scale: 1.18; --a11y-scale-form: 1.32; --a11y-scale-lg: 1.08; }
body.pojo-a11y-resize-font-140 { --a11y-scale: 1.25; --a11y-scale-form: 1.42; --a11y-scale-lg: 1.12; }
body.pojo-a11y-resize-font-150 { --a11y-scale: 1.31; --a11y-scale-form: 1.50; --a11y-scale-lg: 1.16; }
body.pojo-a11y-resize-font-160 { --a11y-scale: 1.38; --a11y-scale-form: 1.57; --a11y-scale-lg: 1.20; }
body.pojo-a11y-resize-font-170 { --a11y-scale: 1.44; --a11y-scale-form: 1.63; --a11y-scale-lg: 1.24; }
body.pojo-a11y-resize-font-180 { --a11y-scale: 1.50; --a11y-scale-form: 1.68; --a11y-scale-lg: 1.27; }
body.pojo-a11y-resize-font-190 { --a11y-scale: 1.56; --a11y-scale-form: 1.73; --a11y-scale-lg: 1.30; }
body.pojo-a11y-resize-font-200 { --a11y-scale: 1.62; --a11y-scale-form: 1.78; --a11y-scale-lg: 1.32; }


/* ==========================================================================
   SECTION 2 – BASE PIN
   --------------------------------------------------------------------------
   The theme's body is `font-size:16px; line-height:26px`. Both are absolute,
   so the plugin's percentage on <body> is the only thing that would move and
   nothing inherits a usable size from it. Pin both to a scaled value; the
   px line-height MUST scale too or lines crowd/overlap as text grows.

   Applied to <body> itself (not scoped) — the toolbar is unaffected because
   #pojo-a11y-toolbar declares its own `font-size:16px` at ID specificity.
   ========================================================================== */
html body[class*="pojo-a11y-resize-font-"][class] {
    font-size: calc(16px * var(--a11y-scale)) !important;
    line-height: calc(26px * var(--a11y-scale)) !important;
}


/* ==========================================================================
   SECTION 3 – KILL THE PLUGIN'S COMPOUNDING PERCENTAGES (page content only)
   --------------------------------------------------------------------------
   These elements carry no size of their own in this theme, so `inherit` is
   exactly what they should compute to. `inherit` copies the parent's already
   computed px value, which is why it cannot compound the way the plugin's
   percentages do — this is what stops
   CF7's <p><span class="wpcf7-form-control-wrap"> chain from multiplying,
   and what makes a <span> inside an <h_>/<p> match its parent again.

   The root list is deliberately written with :where() (zero specificity) so
   this rule stays at (0,2,2) and every restated theme rule in Sections 4/5
   out-ranks it, while still beating the plugin's (0,1,2) / (0,1,3) rules.

   Roots = the theme's own content wrappers. #pojo-a11y-toolbar (RULE B) and
   #cc-banner-root (handled separately in 4c) are NOT in this list.
   ========================================================================== */
body[class*="pojo-a11y-resize-font-"][class]
:where(header, section, footer, main, article,
       .privacy-content, .description-section, .page-content,
       #quiz-popup-overlay, .trans-bottom-content, .expert-bottom-content,
       .control-bottom-content, .gold-card-banner, .breadcrumb-sec, .breadcrums)
:is(p, li, span, label, blockquote, dd, dt, legend, code, pre, samp, kbd) {
    font-size: inherit !important;
}


/* ==========================================================================
   SECTION 4 – FORM CONTROLS + RESPONSE / VALIDATION MESSAGES
   --------------------------------------------------------------------------
   Every value is stated explicitly per breakpoint (never em/rem): CF7's
   <p><span> nesting would compound an em value, and a rem value would shrink
   the field below the theme's design size. All of these use
   --a11y-scale-form.
   ========================================================================== */

/* Bare controls that have no theme size of their own (they normally take
   `font-size:inherit` from Bootstrap = 16px). */
html body[class*="pojo-a11y-resize-font-"][class] input,
html body[class*="pojo-a11y-resize-font-"][class] select,
html body[class*="pojo-a11y-resize-font-"][class] textarea {
    font-size: calc(16px * var(--a11y-scale-form)) !important;
}

/* Theme: form input { font-size:20px; line-height:24px } */
html body[class*="pojo-a11y-resize-font-"][class] form input,
html body[class*="pojo-a11y-resize-font-"][class] form select,
html body[class*="pojo-a11y-resize-font-"][class] form textarea {
    font-size: calc(20px * var(--a11y-scale-form)) !important;
    line-height: calc(24px * var(--a11y-scale-form)) !important;
}

/* Checkboxes / radios must not grow their box with the text. */
html body[class*="pojo-a11y-resize-font-"][class] form input[type="checkbox"],
html body[class*="pojo-a11y-resize-font-"][class] form input[type="radio"],
html body[class*="pojo-a11y-resize-font-"][class] form input.form-check-input {
    font-size: calc(16px * var(--a11y-scale-form)) !important;
    line-height: normal !important;
}

/* Theme: form .submit-btn, form input[type=submit], .submit-btn.footer-quiz-btn
          { font-size:23px; line-height:28px } */
html body[class*="pojo-a11y-resize-font-"][class] form .submit-btn,
html body[class*="pojo-a11y-resize-font-"][class] form input[type="submit"],
html body[class*="pojo-a11y-resize-font-"][class] .submit-btn.footer-quiz-btn {
    font-size: calc(23px * var(--a11y-scale-form)) !important;
    line-height: calc(28px * var(--a11y-scale-form)) !important;
}

/* Theme: .quiz-submit input[type=submit] { font-size:16px } */
html body[class*="pojo-a11y-resize-font-"][class] .quiz-submit input[type="submit"] {
    font-size: calc(16px * var(--a11y-scale-form)) !important;
}

/* Theme: .wpcf7-not-valid-tip { font-size:18px; line-height:24px }
   CF7 injects this <span> only after a failed submit, so it must be covered
   even though it is absent from the initial DOM. Unitless line-height keeps
   the lines from crowding as it grows. */
html body[class*="pojo-a11y-resize-font-"][class] .wpcf7-not-valid-tip {
    font-size: calc(18px * var(--a11y-scale-form)) !important;
    line-height: 1.4 !important;
}

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

/* CF7 checkbox / radio option rows. */
html body[class*="pojo-a11y-resize-font-"][class] .wpcf7-list-item-label,
html body[class*="pojo-a11y-resize-font-"][class] .wpcf7-list-item {
    font-size: inherit !important;
}


/* ==========================================================================
   SECTION 4c – COOKIE BANNER  (#cc-banner-root / .cc-modal-wrap)
   --------------------------------------------------------------------------
   The banner sits OUTSIDE the content roots used in Section 3, so:
     * the plugin's `p !important` runs .cc-body away  (14px -> ~45px at max),
     * the plugin's `h_ !important` runs .cc-title away (16px -> ~37px),
     * .cc-btn is `font: inherit` in the banner's own stylesheet, so without
       an explicit rule of ours the plugin cannot scale it at all and the
       buttons stay frozen at 14px on every step.

   Each pin is calc(<px> * var(--a11y-scale…)) — never a flat px value, which
   would stop the runaway but also FREEZE the banner.
   .cc-title (16 -> 18) and .cc-btn (14 -> 15) get a slightly raised baseline
   so the FIRST click is an obvious jump rather than a nudge; the rule is
   gated, so at default the banner still renders at its original sizes.
   ========================================================================== */
html body[class*="pojo-a11y-resize-font-"][class] .cc-root {
    font-size: calc(14px * var(--a11y-scale)) !important;
    line-height: 1.5 !important;
}
/* The settings modal is appended straight to <body>, not inside the banner,
   and inherits 16px from <body> by default — so it gets its own baseline. */
html body[class*="pojo-a11y-resize-font-"][class] .cc-modal-wrap {
    font-size: calc(16px * var(--a11y-scale)) !important;
    line-height: 1.5 !important;
}
/* Everything inside the banner/modal that the plugin would otherwise force.
   The scope is in :where() so this stays at (0,2,3) and the individual .cc-*
   pins below (0,3,2) still win — otherwise .cc-required-badge, being a
   <span>, would flatten to the container size instead of its own 11px. */
html body[class*="pojo-a11y-resize-font-"][class] :where(.cc-root, .cc-modal-wrap) :is(p, span, li, label, dd, dt) {
    font-size: inherit !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .cc-title {
    font-size: calc(18px * var(--a11y-scale-form)) !important;
    line-height: 1.35 !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .cc-body {
    font-size: calc(14px * var(--a11y-scale-form)) !important;
    line-height: 1.5 !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .cc-btn {
    font-size: calc(15px * var(--a11y-scale-form)) !important;
    line-height: 1.3 !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .cc-lang-toggle {
    font-size: calc(12px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .cc-modal-head h2 {
    font-size: calc(18px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .cc-modal-close {
    font-size: calc(24px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .cc-cat-desc {
    font-size: calc(13px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .cc-required-badge {
    font-size: calc(11px * var(--a11y-scale)) !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)) !important;
}
/* The banner is a fixed 420px box; let it grow a little and stay on screen. */
html body[class*="pojo-a11y-resize-font-"][class] .cc-banner.cc-box {
    max-width: min(calc(420px * var(--a11y-scale)), calc(100vw - 40px)) !important;
}


/* ==========================================================================
   SECTION 5 – THE THEME'S OWN TYPE SCALE, RESTATED AND MULTIPLIED
   --------------------------------------------------------------------------
   One rule for every `font-size` this theme (and Bootstrap, for bare
   headings) declares, in the SAME source order as the originals, so the
   relative cascade is preserved exactly. Where the theme pairs the size with
   an absolute px `line-height`, that is scaled by the same factor so the
   vertical rhythm is identical, just larger.

   Icon-only rules (.navbar-toggler, .contact-details li i,
   .slick-arrow-custom, .form-submit-btn .submit-btn > i) are deliberately
   NOT restated: the plugin does not target them, they keep their design size
   and their fixed-size circles/badges therefore never overflow.
   ========================================================================== */

/* ---- Bootstrap bare headings (only reached where the theme sets nothing) -- */
html body[class*="pojo-a11y-resize-font-"][class] h1 { font-size: calc((1.375rem + 1.5vw) * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"][class] h2 { font-size: calc((1.325rem + 0.9vw) * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"][class] h3 { font-size: calc((1.3rem + 0.6vw) * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"][class] h4 { font-size: calc((1.275rem + 0.3vw) * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"][class] h5 { font-size: calc(1.25rem * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"][class] h6 { font-size: calc(1rem * var(--a11y-scale)) !important; }
@media (min-width: 1200px) {
    html body[class*="pojo-a11y-resize-font-"][class] h1 { font-size: calc(2.5rem * var(--a11y-scale)) !important; }
    html body[class*="pojo-a11y-resize-font-"][class] h2 { font-size: calc(2rem * var(--a11y-scale)) !important; }
    html body[class*="pojo-a11y-resize-font-"][class] h3 { font-size: calc(1.75rem * var(--a11y-scale)) !important; }
    html body[class*="pojo-a11y-resize-font-"][class] h4 { font-size: calc(1.5rem * var(--a11y-scale)) !important; }
}
html body[class*="pojo-a11y-resize-font-"][class] .btn { font-size: calc(1rem * var(--a11y-scale)) !important; }

/* ---- assets/css/style.css, in source order ------------------------------- */
html body[class*="pojo-a11y-resize-font-"][class] .global-btn {
    font-size: calc(18px * var(--a11y-scale)) !important;
    line-height: calc(26px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .title-area .title {
    font-size: calc(38px * var(--a11y-scale)) !important;
    line-height: calc(44px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .title-area p.subtitle {
    font-size: calc(22px * var(--a11y-scale)) !important;
    line-height: calc(34px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .title-area .subtitle {
    font-size: calc(26px * var(--a11y-scale)) !important;
    line-height: calc(35px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .main-menu li a {
    font-size: calc(18px * var(--a11y-scale)) !important;
    line-height: calc(24px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .ft-wrapper .ft-about-content .title {
    font-size: calc(24px * var(--a11y-scale)) !important;
    line-height: calc(30px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .contact-details .item {
    font-size: calc(19px * var(--a11y-scale)) !important;
    line-height: calc(28px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .privacy-links :where(a, span) {
    font-size: calc(16px * var(--a11y-scale)) !important;
    line-height: calc(26px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] h1.title {
    font-size: calc(34px * var(--a11y-scale)) !important;
    line-height: calc(40px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .hero-content .desc {
    font-size: calc(18px * var(--a11y-scale)) !important;
    line-height: calc(26px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .result-box .title {
    font-size: calc(28px * var(--a11y-scale)) !important;
    line-height: calc(32px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .result-box .desc {
    font-size: calc(16px * var(--a11y-scale)) !important;
    line-height: calc(22px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .secret-sec .title-area .title small {
    line-height: calc(36px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .secret-sec .desc {
    font-size: calc(18px * var(--a11y-scale)) !important;
    line-height: calc(26px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .secret-list .list-item .content .title {
    font-size: calc(20px * var(--a11y-scale)) !important;
    line-height: calc(26px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .wl-content .desc p :where(b, strong) {
    font-size: calc(18px * var(--a11y-scale)) !important;
    line-height: calc(24px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .scroll-card-content h3 {
    font-size: calc(28px * var(--a11y-scale)) !important;
    line-height: calc(34px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .scroll-card-content h4 {
    font-size: calc(24px * var(--a11y-scale)) !important;
    line-height: calc(30px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .scrol-card-contentl p {
    font-size: calc(16px * var(--a11y-scale)) !important;
    line-height: calc(24px * var(--a11y-scale)) !important;
}
/* Damped: 76px display numeral. */
html body[class*="pojo-a11y-resize-font-"][class] .card-count {
    font-size: calc(76px * var(--a11y-scale-lg)) !important;
    line-height: calc(76px * var(--a11y-scale-lg)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .testi-content {
    font-size: calc(15px * var(--a11y-scale)) !important;
    line-height: calc(23px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .testi-wrapper .read-btn,
html body[class*="pojo-a11y-resize-font-"][class] .expert-detail-wrapper .read-btn {
    font-size: calc(16px * var(--a11y-scale)) !important;
    line-height: calc(23px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .info-wrapper .title {
    font-size: calc(24px * var(--a11y-scale)) !important;
    line-height: calc(30px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .info-wrapper .desc {
    font-size: calc(16px * var(--a11y-scale)) !important;
    line-height: calc(22px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .control-wrapper .desc {
    font-size: calc(18px * var(--a11y-scale)) !important;
    line-height: calc(24px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .expert-detail-wrapper .name {
    font-size: calc(30px * var(--a11y-scale)) !important;
    line-height: calc(34px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .expert-detail-wrapper .role {
    font-size: calc(16px * var(--a11y-scale)) !important;
    line-height: calc(22px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .expert-detail-wrapper .about-expert {
    font-size: calc(15px * var(--a11y-scale)) !important;
    line-height: calc(22px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .expert-bottom-content .title {
    font-size: calc(30px * var(--a11y-scale)) !important;
    line-height: calc(40px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .expert-bottom-content p.subtitle {
    font-size: calc(18px * var(--a11y-scale)) !important;
    line-height: calc(26px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .faq-accordion .accordion-button {
    font-size: calc(16px * var(--a11y-scale)) !important;
    line-height: calc(24px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .faq-accordion .accordion-body {
    font-size: calc(16px * var(--a11y-scale)) !important;
    line-height: calc(24px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .quiz-wrapper .quiz-content .title-area p.subtitle {
    font-size: calc(18px * var(--a11y-scale)) !important;
    line-height: calc(28px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .take-control .title-area p.subtitle {
    font-size: calc(30px * var(--a11y-scale)) !important;
    line-height: calc(40px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .accordion-toggle h3 {
    font-size: calc(18px * var(--a11y-scale)) !important;
    line-height: calc(22px * var(--a11y-scale)) !important;
}
/* Privacy / generic page body copy: theme sets only a px line-height. */
html body[class*="pojo-a11y-resize-font-"][class] .page-content p {
    line-height: calc(28px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .privacy-banner h1 {
    font-size: calc(50px * var(--a11y-scale-lg)) !important;
    line-height: calc(56px * var(--a11y-scale-lg)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .breadcrumbs li {
    font-size: calc(24px * var(--a11y-scale)) !important;
    line-height: calc(24px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .accordion-toggle .toggle-icon {
    font-size: calc(1.4rem * var(--a11y-scale)) !important;
}
/* ---- quiz popup ---------------------------------------------------------- */
/* Damped on purpose: the popup's "x" is absolutely positioned over the step
   rail (it already clips a step label at the default size — pre-existing), so
   it is grown only enough to stay proportionate, not enough to cover more. */
html body[class*="pojo-a11y-resize-font-"][class] #close-quiz-btn {
    font-size: calc(2rem * var(--a11y-scale-lg)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .quiz-steps-indicator .step {
    font-size: calc(1rem * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .step-label {
    font-size: calc(13px * var(--a11y-scale-form)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .quiz-answer {
    font-size: calc(14px * var(--a11y-scale-form)) !important;
}
html body[class*="pojo-a11y-resize-font-"][class] #quiz-popup-content .wpcf7-response-output {
    font-size: calc(15px * var(--a11y-scale-form)) !important;
    line-height: 1.5 !important;
}
html body[class*="pojo-a11y-resize-font-"][class] #quiz-popup-content .wpcf7-not-valid-tip {
    font-size: calc(14px * var(--a11y-scale-form)) !important;
    line-height: 1.4 !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .form-success-message {
    font-size: calc(20px * var(--a11y-scale)) !important;
    line-height: calc(28px * var(--a11y-scale)) !important;
}

/* ---- assets/css/responsive.css — @media (max-width: 991px) --------------- */
@media (max-width: 991px) {
    html body[class*="pojo-a11y-resize-font-"][class] .title-area .title {
        font-size: calc(32px * var(--a11y-scale)) !important;
        line-height: calc(38px * var(--a11y-scale)) !important;
    }
}

/* ---- assets/css/responsive.css — @media (max-width: 767px) --------------- */
@media (max-width: 767px) {
    html body[class*="pojo-a11y-resize-font-"][class] .title-area .title {
        font-size: calc(28px * var(--a11y-scale)) !important;
        line-height: calc(34px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class] .title-area p.subtitle {
        font-size: calc(21px * var(--a11y-scale)) !important;
        line-height: calc(32px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class] .ft-wrapper .title {
        font-size: calc(18px * var(--a11y-scale)) !important;
        line-height: calc(28px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class] .contact-details .item {
        font-size: calc(18px * var(--a11y-scale)) !important;
        line-height: calc(24px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class] h1.title {
        font-size: calc(30px * var(--a11y-scale)) !important;
        line-height: calc(34px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class] .result-box .title {
        font-size: calc(24px * var(--a11y-scale)) !important;
        line-height: calc(28px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class] .secret-sec .title-area .title small {
        font-size: calc(22px * var(--a11y-scale)) !important;
        line-height: calc(22px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class] .secret-sec .title-area .title {
        line-height: calc(32px * var(--a11y-scale)) !important;
    }
    /* Theme resets this one back to `line-height: unset` on mobile, so it must
       inherit here too — otherwise the 76px display line-height leaks in. */
    html body[class*="pojo-a11y-resize-font-"][class] .card.how-work-content-inner-wrap .accordion-toggle .card-count {
        font-size: calc(27px * var(--a11y-scale)) !important;
        line-height: inherit !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class] .testi-content,
    html body[class*="pojo-a11y-resize-font-"][class] .result-box .desc {
        font-size: calc(18px * var(--a11y-scale)) !important;
        line-height: calc(26px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class] .info-wrapper .desc {
        font-size: calc(18px * var(--a11y-scale)) !important;
        line-height: calc(24px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class] .expert-detail-wrapper .name {
        font-size: calc(22px * var(--a11y-scale)) !important;
        line-height: calc(22px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class] .expert-detail-wrapper .role,
    html body[class*="pojo-a11y-resize-font-"][class] .expert-detail-wrapper .about-expert {
        font-size: calc(18px * var(--a11y-scale)) !important;
        line-height: calc(26px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class] .faq-accordion .accordion-body {
        font-size: calc(18px * var(--a11y-scale)) !important;
        line-height: calc(26px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class] .take-control .title-area p.subtitle {
        font-size: calc(22px * var(--a11y-scale)) !important;
        line-height: calc(32px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class] .privacy-links :where(a, span) {
        font-size: calc(14px * var(--a11y-scale)) !important;
        line-height: calc(22px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class] .privacy-banner h1 {
        font-size: calc(42px * var(--a11y-scale-lg)) !important;
        line-height: calc(48px * var(--a11y-scale-lg)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class] .breadcrumbs li {
        font-size: calc(22px * var(--a11y-scale)) !important;
        line-height: calc(22px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class] .quiz-step .popup-title {
        font-size: calc(16px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class] .quiz-question label {
        font-size: calc(14px * var(--a11y-scale-form)) !important;
        line-height: calc(22px * var(--a11y-scale-form)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class] .quiz-form-wrapper input {
        font-size: calc(16px * var(--a11y-scale-form)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class] .quiz-answer label {
        font-size: calc(13px * var(--a11y-scale-form)) !important;
    }
}


/* ==========================================================================
   SECTION 6 – LAYOUT GUARDS (only ever active while a size is selected)
   --------------------------------------------------------------------------
   Larger type needs a little more room in a handful of fixed-size boxes.
   Every rule here is gated the same way, so the default design is untouched.
   ========================================================================== */

/* The footer CTA pins its chevron with `position:absolute; right:20px`, which
   at the larger sizes lands on top of the label. Put the icon back in flow —
   .global-btn is already `display:flex; align-items:center` with
   `margin-left:10px` on its <i>, so it simply sits after the text. */
html body[class*="pojo-a11y-resize-font-"][class] .form-submit-btn .submit-btn > i,
html body[class*="pojo-a11y-resize-font-"][class] .form-submit i {
    position: static !important;
    transform: none !important;
    margin-left: 10px;
}
/* ...and the 330px cap would otherwise clip the longer label. */
html body[class*="pojo-a11y-resize-font-"][class] .form-submit,
html body[class*="pojo-a11y-resize-font-"][class] .form-submit-btn .submit-btn {
    max-width: 100% !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .footer-quiz-btn {
    min-width: 0 !important;
    height: auto !important;
}

/* Desktop nav: logo + 7 links + CTA on one row overflows once the links grow.
   Let the row wrap instead of pushing a horizontal scrollbar onto the page. */
@media (min-width: 992px) {
    html body[class*="pojo-a11y-resize-font-"][class] .header {
        flex-wrap: wrap !important;
        gap: 16px 24px;
    }
    html body[class*="pojo-a11y-resize-font-"][class] .main-menu {
        flex-wrap: wrap !important;
        gap: 8px 20px;
    }
}

/* Footer contact rows are `d-flex flex-nowrap`, so the e-mail address — one
   unbreakable token — cannot shrink below its min-content width and pushes the
   page sideways at 375px once it is scaled up. `min-width:0` lets the flex item
   shrink and `overflow-wrap:anywhere` lets the address itself break. */
html body[class*="pojo-a11y-resize-font-"][class] .contact-details .item,
html body[class*="pojo-a11y-resize-font-"][class] .contact-details .item a,
html body[class*="pojo-a11y-resize-font-"][class] .contact-details .item span {
    min-width: 0 !important;
    overflow-wrap: anywhere;
}

/* Buttons and headings must never force a horizontal scrollbar. */
html body[class*="pojo-a11y-resize-font-"][class] .global-btn {
    max-width: fit-content !important;
    height: auto !important;
    white-space: normal;
}
html body[class*="pojo-a11y-resize-font-"][class] :is(h1, h2, h3, h4, h5, h6, p, li, a, span) {
    overflow-wrap: break-word;
}

/* Cards in the "how it works" / programme stacks have a fixed min-height and
   a sticky offset tuned to the default type size. */
html body[class*="pojo-a11y-resize-font-"][class] .card.how-work-content-inner-wrap {
    min-height: 0 !important;
}
html body[class*="pojo-a11y-resize-font-"][class] .inner-our-program-container .our-program-work-card-box,
html body[class*="pojo-a11y-resize-font-"][class] .success-container .success-card-box {
    height: auto !important;
}

/* Mobile accordion rows are flex; their <h3> keeps `min-width:auto`, so the
   longest word sets a floor that pushes the title under the chevron and past
   the viewport edge once scaled. Let the title shrink and wrap.

   Only the TITLE may shrink. This used to be `.accordion-toggle > *`, i.e.
   every child, which is what wrecked the rows in mobile view: the header is
   [image][step numeral][title], and with no floor left on any of them the
   growing title squeezed the two fixed-size columns to a few px each. The
   55px <img> (still `width:55px !important` from responsive.css) then spilled
   out of its collapsed box and the .card-count numeral out of its own, so both
   landed on top of the title. They are pinned with `flex:0 0 auto` below. */
html body[class*="pojo-a11y-resize-font-"][class] .accordion-toggle h3 {
    min-width: 0 !important;
}

/* The two fixed columns of the mobile accordion header, and the title that
   takes what is left.

   The image box is given an explicit width that grows on the damped display
   curve (55px -> 58px at the first step, 73px at the last) so the thumbnail
   keeps pace with the text instead of staying tiny beside it, and the <img> is
   released from its flat 55px so it fills that box. The width is capped at
   20vw so on a narrow phone the thumbnail can never grow into the space the
   title needs.

   The <h3> is also taken out of `display:flex` (the markup carries Bootstrap's
   `d-flex justify-content-between` on some of these titles). Its text sits in
   an anonymous flex item, and an anonymous item keeps `min-width:auto` — the
   longest word — whatever is set on the <h3> itself. That floor, not the <h3>,
   is what pushed the row past the viewport edge; as a plain block the text
   wraps (and breaks, via the `overflow-wrap` guard above) inside the column. */
@media (max-width: 767px) {
    html body[class*="pojo-a11y-resize-font-"][class] .accordion-toggle .scroll-card-img {
        flex: 0 0 auto !important;
        width: min(calc(55px * var(--a11y-scale-lg)), 20vw) !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class] .accordion-toggle .scroll-card-img > img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class] .accordion-toggle .scroll-card-content {
        flex: 0 0 auto !important;
    }
    html body[class*="pojo-a11y-resize-font-"][class] .accordion-toggle h3 {
        display: block !important;
        flex: 1 1 auto !important;
    }
}

/* The quiz popup's 7-step rail is only made scrollable below 767px by the
   theme. Above that it runs off the popup once the labels grow, so give it
   the same treatment the theme already uses on mobile. */
html body[class*="pojo-a11y-resize-font-"][class] .quiz-steps-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
html body[class*="pojo-a11y-resize-font-"][class] .quiz-steps-indicator {
    min-width: fit-content;
}
html body[class*="pojo-a11y-resize-font-"][class] .quiz-steps-indicator .step-number {
    min-width: 24px;
}
html body[class*="pojo-a11y-resize-font-"][class] .quiz-answer label {
    max-width: 100%;
}

/* Read-more clamps count LINES, so at the larger sizes the clamped block gets
   very tall. Keep the clamp but let the accordion/list rows breathe. */
html body[class*="pojo-a11y-resize-font-"][class] .testimoninal-slider .slick-track .slide {
    height: inherit !important;
}
