/* =========================================================================
   12 Stones – accessibility fixes for "One Click Accessibility" (Pojo)
   Loaded after style.css and responsive.css.

   A) FONT RESIZE  – every rule is gated behind body[class*="pojo-a11y-resize-font-"],
      so with no size chosen (and after Reset) this file changes nothing.
   B) CONTRAST MODES – gated behind the plugin's contrast body classes.
   C) COOKIE TOGGLES – the only ungated part: the on/off state of the cookie
      settings switches was not distinguishable (style.css paints both states
      #ababff), so it is fixed in every mode.

   The site sizes text in vw. The plugin sets body/p/span/... to NN% (which
   ignores vw and compounds through nesting), so every size is restated here
   as  calc(<theme value> * multiplier).
   ========================================================================= */


/* -------------------------------------------------------------------------
   Section 1: STEP → MULTIPLIERS
     --a11y-scale       text, headings, lists           +15% … +60%
     --a11y-scale-form  inputs, submit, form messages,  +30% … +75%
                        consent labels (smallest text on the page)
     --a11y-scale-ui    cookie popup                    +10% … +40%
     --a11y-scale-menu  accessibility menu              +4%  … +25%
                        (both deliberately smaller than the page text)
   ------------------------------------------------------------------------- */
:root { --a11y-scale: 1; --a11y-scale-form: 1; --a11y-scale-ui: 1; --a11y-scale-menu: 1; }
body.pojo-a11y-resize-font-130 { --a11y-scale: 1.15; --a11y-scale-form: 1.30; --a11y-scale-ui: 1.10; --a11y-scale-menu: 1.04; }
body.pojo-a11y-resize-font-140 { --a11y-scale: 1.22; --a11y-scale-form: 1.40; --a11y-scale-ui: 1.14; --a11y-scale-menu: 1.07; }
body.pojo-a11y-resize-font-150 { --a11y-scale: 1.28; --a11y-scale-form: 1.48; --a11y-scale-ui: 1.18; --a11y-scale-menu: 1.10; }
body.pojo-a11y-resize-font-160 { --a11y-scale: 1.35; --a11y-scale-form: 1.55; --a11y-scale-ui: 1.22; --a11y-scale-menu: 1.13; }
body.pojo-a11y-resize-font-170 { --a11y-scale: 1.42; --a11y-scale-form: 1.62; --a11y-scale-ui: 1.26; --a11y-scale-menu: 1.16; }
body.pojo-a11y-resize-font-180 { --a11y-scale: 1.48; --a11y-scale-form: 1.68; --a11y-scale-ui: 1.30; --a11y-scale-menu: 1.19; }
body.pojo-a11y-resize-font-190 { --a11y-scale: 1.54; --a11y-scale-form: 1.72; --a11y-scale-ui: 1.35; --a11y-scale-menu: 1.22; }
body.pojo-a11y-resize-font-200 { --a11y-scale: 1.60; --a11y-scale-form: 1.75; --a11y-scale-ui: 1.40; --a11y-scale-menu: 1.25; }


/* -------------------------------------------------------------------------
   Section 2: Base pin on <body>. The theme's body size is var(--t-body)
   (1.016vw / 1.45vw tablet / 3.467vw mobile) – the variable carries every
   breakpoint, so one rule covers them all.
   ------------------------------------------------------------------------- */
html body[class*="pojo-a11y-resize-font-"] {
    font-size: calc(var(--t-body) * var(--a11y-scale)) !important;
}


/* -------------------------------------------------------------------------
   Section 3: Stop the compounding NN% inside every content root.
   Roots: header, main, footer, the privacy/accessibility popups and the
   404 template wrappers. :where() keeps this at (0,2,2) so every explicit
   size below (same or higher specificity, later in the file) wins.
   Form controls are handled in Section 4.
   ------------------------------------------------------------------------- */
html body[class*="pojo-a11y-resize-font-"] :is(.ts-header, .ts-main, .ts-footer, .privacy-wrapper, .gold-card-banner, .breadcrums, .description-section) :where(p, li, span, label, blockquote, legend, code, pre, dd, dt) {
    font-size: inherit !important;
}
/* headings without a size of their own (popup / 404 content) keep normal proportions */
html body[class*="pojo-a11y-resize-font-"] :is(.ts-header, .ts-main, .ts-footer, .privacy-wrapper, .gold-card-banner, .breadcrums, .description-section) :where(h1) { font-size: 2em !important; }
html body[class*="pojo-a11y-resize-font-"] :is(.ts-header, .ts-main, .ts-footer, .privacy-wrapper, .gold-card-banner, .breadcrums, .description-section) :where(h2) { font-size: 1.5em !important; }
html body[class*="pojo-a11y-resize-font-"] :is(.ts-header, .ts-main, .ts-footer, .privacy-wrapper, .gold-card-banner, .breadcrums, .description-section) :where(h3) { font-size: 1.17em !important; }
html body[class*="pojo-a11y-resize-font-"] :is(.ts-header, .ts-main, .ts-footer, .privacy-wrapper, .gold-card-banner, .breadcrums, .description-section) :where(h4, h5, h6) { font-size: 1em !important; }
html body[class*="pojo-a11y-resize-font-"] :is(.ts-header, .ts-main, .ts-footer, .privacy-wrapper, .gold-card-banner, .breadcrums, .description-section) :where(h1, h2, h3, h4, h5, h6) :where(span) { font-size: inherit !important; }


/* -------------------------------------------------------------------------
   Section 4: FORM CONTROLS + MESSAGES (--a11y-scale-form)
   Theme order mirrored: base → (768–1100px) → (≤767px).
   Messages get a readability floor (they are 6–11px in the theme) and a
   unitless line-height so the box grows with the text.
   ------------------------------------------------------------------------- */
/* Fields and SEND share one height: the theme height as a minimum, growing
   with the enlarged field text (2.3 × font). Set per breakpoint below. */
html body[class*="pojo-a11y-resize-font-"] .ts-form {
    --a11y-field-h: max(2.616vw, calc(var(--t-body) * var(--a11y-scale-form) * 2.3));
}
html body[class*="pojo-a11y-resize-font-"] .ts-form input[type="text"],
html body[class*="pojo-a11y-resize-font-"] .ts-form input[type="tel"],
html body[class*="pojo-a11y-resize-font-"] .ts-form input[type="email"] {
    font-size: calc(var(--t-body) * var(--a11y-scale-form)) !important;
    height: var(--a11y-field-h) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: normal !important;
}
html body[class*="pojo-a11y-resize-font-"] .ts-form input[type="submit"],
html body[class*="pojo-a11y-resize-font-"] .ts-form .wpcf7-submit {
    font-size: calc(1.521vw * var(--a11y-scale-form)) !important;
    width: auto !important;
    min-width: 7.908vw;
    height: var(--a11y-field-h) !important;
    padding: 0 0.9em !important;
    line-height: 1 !important;
}
html body[class*="pojo-a11y-resize-font-"] .ts-form .wpcf7-list-item label {
    font-size: calc(max(12px, 0.608vw) * var(--a11y-scale-form)) !important;
    line-height: 1.35 !important;
}
html body[class*="pojo-a11y-resize-font-"] .ts-form input[type="checkbox"] {
    width: calc(max(12px, 0.73vw) * var(--a11y-scale-form)) !important;
    height: calc(max(12px, 0.73vw) * var(--a11y-scale-form)) !important;
    background-size: 100% 100% !important;
}
html body[class*="pojo-a11y-resize-font-"] .ts-contact .wpcf7-not-valid-tip {
    font-size: calc(max(14px, 0.669vw) * var(--a11y-scale-form)) !important;
    line-height: 1.35 !important;
}
html body[class*="pojo-a11y-resize-font-"] .ts-contact .wpcf7 form .wpcf7-response-output {
    font-size: calc(max(14px, 0.73vw) * var(--a11y-scale-form)) !important;
    line-height: 1.35 !important;
}
html body[class*="pojo-a11y-resize-font-"] .cf7-success-message .success-title {
    font-size: calc(var(--t-body) * var(--a11y-scale-form)) !important;
}

@media (min-width: 768px) and (max-width: 1100px) {
    html body[class*="pojo-a11y-resize-font-"] .ts-form {
        --a11y-field-h: max(4.6vw, calc(var(--t-body) * var(--a11y-scale-form) * 2.3));
    }
    html body[class*="pojo-a11y-resize-font-"] .ts-form .wpcf7-list-item label {
        font-size: calc(max(12px, 1vw) * var(--a11y-scale-form)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .ts-form input[type="checkbox"] {
        width: calc(max(12px, 1.3vw) * var(--a11y-scale-form)) !important;
        height: calc(max(12px, 1.3vw) * var(--a11y-scale-form)) !important;
    }
}

@media (max-width: 767px) {
    html body[class*="pojo-a11y-resize-font-"] .ts-form {
        --a11y-field-h: max(12.267vw, calc(var(--t-body) * var(--a11y-scale-form) * 2.3));
    }
    html body[class*="pojo-a11y-resize-font-"] .ts-form .wpcf7-list-item label {
        font-size: calc(max(12px, 2.667vw) * var(--a11y-scale-form)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .ts-form input[type="submit"],
    html body[class*="pojo-a11y-resize-font-"] .ts-form .wpcf7-submit {
        font-size: calc(4.8vw * var(--a11y-scale-form)) !important;
        width: 100% !important;
        min-width: 0;
    }
    html body[class*="pojo-a11y-resize-font-"] .ts-form input[type="checkbox"] {
        width: calc(max(12px, 3.467vw) * var(--a11y-scale-form)) !important;
        height: calc(max(12px, 3.467vw) * var(--a11y-scale-form)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .ts-contact .wpcf7-not-valid-tip {
        font-size: calc(max(14px, 2.933vw) * var(--a11y-scale-form)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .ts-contact .wpcf7 form .wpcf7-response-output {
        font-size: calc(max(14px, 3.2vw) * var(--a11y-scale-form)) !important;
    }
}


/* -------------------------------------------------------------------------
   Section 4c: COOKIE POPUP (--a11y-scale-ui, a bit smaller than page text)
   The banner (#cc-banner-root.cc-root) and the settings modal
   (.cc-modal-wrap, appended straight to <body>) sit outside the content
   roots. Generic inherit first, then explicit pins (higher specificity).
   ------------------------------------------------------------------------- */
html body[class*="pojo-a11y-resize-font-"] :is(.cc-root, .cc-modal-wrap) :where(p, li, span, label, a, div, summary, td, th, h2) {
    font-size: inherit !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-root {
    font-size: calc(14px * var(--a11y-scale-ui)) !important;
    line-height: 1.5 !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-modal-wrap {
    font-size: calc(var(--t-body) * var(--a11y-scale-ui)) !important;
}
html body[class*="pojo-a11y-resize-font-"] :is(.cc-root, .cc-modal-wrap) .cc-title {
    font-size: calc(16px * var(--a11y-scale-ui)) !important;
}
html body[class*="pojo-a11y-resize-font-"] :is(.cc-root, .cc-modal-wrap) .cc-body {
    font-size: calc(14px * var(--a11y-scale-ui)) !important;
    line-height: 1.5 !important;
}
html body[class*="pojo-a11y-resize-font-"] :is(.cc-root, .cc-modal-wrap) .cc-btn {
    font-size: calc(14px * var(--a11y-scale-ui)) !important;
}
html body[class*="pojo-a11y-resize-font-"] :is(.cc-root, .cc-modal-wrap) .cc-lang-toggle {
    font-size: calc(12px * var(--a11y-scale-ui)) !important;
}
html body[class*="pojo-a11y-resize-font-"] :is(.cc-root, .cc-modal-wrap) .cc-modal-head h2 {
    font-size: calc(18px * var(--a11y-scale-ui)) !important;
}
html body[class*="pojo-a11y-resize-font-"] :is(.cc-root, .cc-modal-wrap) .cc-modal-close {
    font-size: calc(24px * var(--a11y-scale-ui)) !important;
}
html body[class*="pojo-a11y-resize-font-"] :is(.cc-root, .cc-modal-wrap) .cc-cat-desc {
    font-size: calc(13px * var(--a11y-scale-ui)) !important;
}
html body[class*="pojo-a11y-resize-font-"] :is(.cc-root, .cc-modal-wrap) .cc-required-badge {
    font-size: calc(11px * var(--a11y-scale-ui)) !important;
}
html body[class*="pojo-a11y-resize-font-"] :is(.cc-root, .cc-modal-wrap) .cc-cookies-list,
html body[class*="pojo-a11y-resize-font-"] :is(.cc-root, .cc-modal-wrap) .cc-cookies-list th,
html body[class*="pojo-a11y-resize-font-"] :is(.cc-root, .cc-modal-wrap) .cc-cookies-list td {
    font-size: calc(12px * var(--a11y-scale-ui)) !important;
}


/* -------------------------------------------------------------------------
   Section 4d: VALIDATION MESSAGE POSITION
   style.css keeps every field message in the normal flow (display:block,
   position:static) under its field, so a bigger message pushes the next
   field down instead of covering it. Nothing extra is needed here.
   ------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------
   Section 4e: ACCESSIBILITY MENU – grows much less than the page text (max +25%).
   The menu width, its closed offset and the toggle position must stay equal,
   so all three use one value (capped to the screen width on phones).
   ------------------------------------------------------------------------- */
html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar {
    --a11y-tb-w: min(calc(220px * var(--a11y-scale-menu)), calc(100vw - 48px));
}
html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay {
    width: var(--a11y-tb-w);
}
html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar.pojo-a11y-toolbar-left:not(.pojo-a11y-toolbar-open) {
    left: calc(-1 * var(--a11y-tb-w));
}
html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar.pojo-a11y-toolbar-left .pojo-a11y-toolbar-toggle {
    left: var(--a11y-tb-w);
}
html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar.pojo-a11y-toolbar-right:not(.pojo-a11y-toolbar-open) {
    right: calc(-1 * var(--a11y-tb-w));
}
html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar.pojo-a11y-toolbar-right .pojo-a11y-toolbar-toggle {
    right: var(--a11y-tb-w);
}
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-menu)) !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: calc(12.8px * var(--a11y-scale-menu)) !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 .pojo-a11y-toolbar-text,
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 .pojo-a11y-toolbar-icon {
    /* the plugin doubles every <span> – the icon span included – so both follow the link size */
    font-size: inherit !important;
}


/* -------------------------------------------------------------------------
   Section 5: PAGE ELEMENTS (--a11y-scale) – every font-size rule in
   style.css, restated at each breakpoint the theme uses, in the theme's order.
   Rules that use the theme's size variables carry every breakpoint already.
   ------------------------------------------------------------------------- */
html body[class*="pojo-a11y-resize-font-"] .ts-intro__heading {
    font-size: calc(var(--t-h-intro) * var(--a11y-scale)) !important;
    white-space: normal !important;
}
html body[class*="pojo-a11y-resize-font-"] .ts-heading--xl {
    font-size: calc(var(--t-h-xl) * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .ts-heading--lg {
    font-size: calc(var(--t-h-lg) * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .ts-header__link {
    font-size: calc(var(--t-small) * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .ts-partner {
    font-size: calc(var(--t-h-partner) * var(--a11y-scale)) !important;
    white-space: normal !important;
}
html body[class*="pojo-a11y-resize-font-"] .ts-contact__title {
    font-size: calc(var(--t-body) * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .ts-distance__title {
    font-size: calc(1.539vw * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .ts-distance__time {
    font-size: calc(0.7vw * var(--a11y-scale)) !important;
    width: calc(2.311vw * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .ts-distance__time b {
    font-size: calc(0.979vw * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .ts-distance__place {
    font-size: calc(0.888vw * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .ts-partner__role {
    font-size: calc(0.876vw * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .ts-partners__tagline,
html body[class*="pojo-a11y-resize-font-"] .ts-contact__info {
    font-size: calc(0.912vw * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .privacy-content {
    font-size: calc(max(13px, 0.852vw) * var(--a11y-scale)) !important;
}
/* the driving-distance box grows with its text instead of clipping it */
html body[class*="pojo-a11y-resize-font-"] .ts-distance {
    width: auto !important;
    min-width: 17.336vw;
}
html body[class*="pojo-a11y-resize-font-"] .ts-distance__list li {
    height: auto !important;
    min-height: 4.927vw;
    padding-top: 0.6em !important;
    padding-bottom: 0.2em !important;
}

@media (min-width: 768px) and (max-width: 1100px) {
    html body[class*="pojo-a11y-resize-font-"] .ts-distance__title {
        font-size: calc(2vw * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .ts-distance__time {
        font-size: calc(1vw * var(--a11y-scale)) !important;
        width: calc(3.6vw * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .ts-distance__time b {
        font-size: calc(1.45vw * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .ts-distance__place {
        font-size: calc(1.3vw * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .ts-partner__role,
    html body[class*="pojo-a11y-resize-font-"] .ts-partners__tagline,
    html body[class*="pojo-a11y-resize-font-"] .ts-contact__info {
        font-size: calc(1.2vw * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .ts-distance {
        min-width: 26vw;
    }
    html body[class*="pojo-a11y-resize-font-"] .ts-distance__list li {
        min-height: 6.4vw;
    }
}

@media (max-width: 767px) {
    /* capped so the longest single word ("INVESTMENTS") still fits a phone */
    html body[class*="pojo-a11y-resize-font-"] .ts-partner {
        font-size: min(calc(var(--t-h-partner) * var(--a11y-scale)), 17vw) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .ts-distance__title {
        font-size: calc(5.333vw * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .ts-distance__time {
        font-size: calc(2.667vw * var(--a11y-scale)) !important;
        width: calc(10.133vw * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .ts-distance__time b {
        font-size: calc(4.267vw * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .ts-distance__place {
        font-size: calc(3.733vw * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .ts-partner__role {
        font-size: calc(2.667vw * var(--a11y-scale)) !important;
        /* keep the label inside the screen once the name gets bigger */
        left: min(var(--x, 30%), 55%) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .ts-partners__tagline {
        font-size: calc(3.2vw * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .ts-contact__info {
        font-size: calc(3.467vw * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .privacy-content {
        font-size: calc(3.733vw * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .ts-distance {
        min-width: 0;
    }
    html body[class*="pojo-a11y-resize-font-"] .ts-distance__list li {
        min-height: 16vw;
    }
}


/* =========================================================================
   B) CONTRAST MODES
   The plugin wipes backgrounds with very specific selectors
   (negative: body *:not(#pojo-a11y-toolbar) = 1-1-1, light = 1-2-1),
   so these rules carry two :not(#id) to win.
   ========================================================================= */

/* Transparent PNG icons (logo, monograms, badge, wordmark) must not get the
   grey (high), black (negative) or white (light) box behind them. */
html body.pojo-a11y-high-contrast:not(#ts-a11y-a):not(#ts-a11y-b) img,
html body.pojo-a11y-negative-contrast:not(#ts-a11y-a):not(#ts-a11y-b) img,
html body.pojo-a11y-light-background:not(#ts-a11y-a):not(#ts-a11y-b) img {
    background: transparent !important;
}
/* Light background: the cream icons would be white on white – show them in black.
   (The hero icon stays cream: it sits on the photo.) */
html body.pojo-a11y-light-background:not(#ts-a11y-a):not(#ts-a11y-b) .ts-header.is-stuck .ts-header__logo img,
html body.pojo-a11y-light-background:not(#ts-a11y-a):not(#ts-a11y-b) .ts-intro__badge,
html body.pojo-a11y-light-background:not(#ts-a11y-a):not(#ts-a11y-b) .ts-interior__icon,
html body.pojo-a11y-light-background:not(#ts-a11y-a):not(#ts-a11y-b) .ts-footer__wordmark {
    filter: brightness(0) !important;
}

/* Header over the hero: no contrast-mode background until it becomes sticky
   (same as the default view). Home page only – that is where it sits on the photo. */
html body.pojo-a11y-high-contrast.page-template-template-home:not(#ts-a11y-a):not(#ts-a11y-b) .ts-header:not(.is-stuck),
html body.pojo-a11y-high-contrast.page-template-template-home:not(#ts-a11y-a):not(#ts-a11y-b) .ts-header:not(.is-stuck) *,
html body.pojo-a11y-negative-contrast.page-template-template-home:not(#ts-a11y-a):not(#ts-a11y-b) .ts-header:not(.is-stuck),
html body.pojo-a11y-negative-contrast.page-template-template-home:not(#ts-a11y-a):not(#ts-a11y-b) .ts-header:not(.is-stuck) *,
html body.pojo-a11y-light-background.page-template-template-home:not(#ts-a11y-a):not(#ts-a11y-b) .ts-header:not(.is-stuck),
html body.pojo-a11y-light-background.page-template-template-home:not(#ts-a11y-a):not(#ts-a11y-b) .ts-header:not(.is-stuck) * {
    background: transparent !important;
}
/* the links sit on the photo – keep them white (like the default view) until sticky */
html body.pojo-a11y-high-contrast.page-template-template-home:not(#ts-a11y-a):not(#ts-a11y-b) .ts-header:not(.is-stuck) .ts-header__link,
html body.pojo-a11y-negative-contrast.page-template-template-home:not(#ts-a11y-a):not(#ts-a11y-b) .ts-header:not(.is-stuck) .ts-header__link,
html body.pojo-a11y-light-background.page-template-template-home:not(#ts-a11y-a):not(#ts-a11y-b) .ts-header:not(.is-stuck) .ts-header__link {
    color: #fff !important;
}

/* Big headings use a tight line-height (0.85–1), so the letters reach past
   each line box. The plugin paints every li / span / heading with a solid
   background, which then covers the bottom of the line above (cropped text).
   The section behind already has the mode colour, so these stay transparent.
   (The Architect / Developers labels keep their own background.) */
html body.pojo-a11y-high-contrast:not(#ts-a11y-a):not(#ts-a11y-b) .ts-partner,
html body.pojo-a11y-high-contrast:not(#ts-a11y-a):not(#ts-a11y-b) .ts-partner__name,
html body.pojo-a11y-high-contrast:not(#ts-a11y-a):not(#ts-a11y-b) .ts-partners__list,
html body.pojo-a11y-high-contrast:not(#ts-a11y-a):not(#ts-a11y-b) .ts-heading,
html body.pojo-a11y-high-contrast:not(#ts-a11y-a):not(#ts-a11y-b) .ts-intro__heading,
html body.pojo-a11y-negative-contrast:not(#ts-a11y-a):not(#ts-a11y-b) .ts-partner,
html body.pojo-a11y-negative-contrast:not(#ts-a11y-a):not(#ts-a11y-b) .ts-partner__name,
html body.pojo-a11y-negative-contrast:not(#ts-a11y-a):not(#ts-a11y-b) .ts-partners__list,
html body.pojo-a11y-negative-contrast:not(#ts-a11y-a):not(#ts-a11y-b) .ts-heading,
html body.pojo-a11y-negative-contrast:not(#ts-a11y-a):not(#ts-a11y-b) .ts-intro__heading,
html body.pojo-a11y-light-background:not(#ts-a11y-a):not(#ts-a11y-b) .ts-partner,
html body.pojo-a11y-light-background:not(#ts-a11y-a):not(#ts-a11y-b) .ts-partner__name,
html body.pojo-a11y-light-background:not(#ts-a11y-a):not(#ts-a11y-b) .ts-partners__list,
html body.pojo-a11y-light-background:not(#ts-a11y-a):not(#ts-a11y-b) .ts-heading,
html body.pojo-a11y-light-background:not(#ts-a11y-a):not(#ts-a11y-b) .ts-intro__heading {
    background: transparent !important;
}

/* Amenity + / – icons and the image-panel close button are SVG background
   images in cream – black versions for the light background. */
html body.pojo-a11y-light-background:not(#ts-a11y-a):not(#ts-a11y-b) .ts-amenity__icon::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M0 12H24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.5%27 vector-effect=%27non-scaling-stroke%27/%3E%3C/svg%3E") !important;
}
html body.pojo-a11y-light-background:not(#ts-a11y-a):not(#ts-a11y-b) .ts-amenity__icon::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M12 0V24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.5%27 vector-effect=%27non-scaling-stroke%27/%3E%3C/svg%3E") !important;
}
html body.pojo-a11y-light-background:not(#ts-a11y-a):not(#ts-a11y-b) .ts-amenities__close {
    border: 1px solid #000 !important;
}
html body.pojo-a11y-light-background:not(#ts-a11y-a):not(#ts-a11y-b) .ts-amenities__close::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M0 0L24 24M24 0L0 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.5%27 vector-effect=%27non-scaling-stroke%27/%3E%3C/svg%3E") !important;
}

/* Form fields: a visible border in every mode
   (high / negative already get a white border from the plugin). */
html body.pojo-a11y-light-background:not(#ts-a11y-a):not(#ts-a11y-b) .ts-form input:not([type="checkbox"]),
html body.pojo-a11y-grayscale:not(#ts-a11y-a):not(#ts-a11y-b) .ts-form input:not([type="checkbox"]) {
    border: 1px solid #000 !important;
}
html body.pojo-a11y-high-contrast:not(#ts-a11y-a):not(#ts-a11y-b) .ts-form input:not([type="checkbox"]),
html body.pojo-a11y-negative-contrast:not(#ts-a11y-a):not(#ts-a11y-b) .ts-form input:not([type="checkbox"]) {
    border: 1px solid #fff !important;
}
html body.pojo-a11y-light-background:not(#ts-a11y-a):not(#ts-a11y-b) .ts-form input::placeholder {
    color: #595959 !important;
}

/* Consent checkboxes: box + tick visible in every mode.
   The tick is a background image, which high / negative / light remove. */
html body.pojo-a11y-high-contrast:not(#ts-a11y-a):not(#ts-a11y-b) .ts-form input[type="checkbox"],
html body.pojo-a11y-negative-contrast:not(#ts-a11y-a):not(#ts-a11y-b) .ts-form input[type="checkbox"] {
    background: #000 !important;
    border: 1px solid #fff !important;
}
html body.pojo-a11y-high-contrast:not(#ts-a11y-a):not(#ts-a11y-b) .ts-form input[type="checkbox"]:checked,
html body.pojo-a11y-negative-contrast:not(#ts-a11y-a):not(#ts-a11y-b) .ts-form input[type="checkbox"]:checked {
    background: #ff0 url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 12%27%3E%3Cpath d=%27M2.5 6.2l2.3 2.3 4.7-5%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.8%27/%3E%3C/svg%3E") center / 100% 100% no-repeat !important;
    border-color: #ff0 !important;
}
html body.pojo-a11y-light-background:not(#ts-a11y-a):not(#ts-a11y-b) .ts-form input[type="checkbox"] {
    background: #fff !important;
    border: 1px solid #000 !important;
}
html body.pojo-a11y-light-background:not(#ts-a11y-a):not(#ts-a11y-b) .ts-form input[type="checkbox"]:checked {
    background: #000 url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 12%27%3E%3Cpath d=%27M2.5 6.2l2.3 2.3 4.7-5%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%271.8%27/%3E%3C/svg%3E") center / 100% 100% no-repeat !important;
}
html body.pojo-a11y-grayscale:not(#ts-a11y-a):not(#ts-a11y-b) .ts-form input[type="checkbox"]:checked {
    background-size: 100% 100% !important;
}

/* Submit button: visible edge on the white page */
html body.pojo-a11y-light-background:not(#ts-a11y-a):not(#ts-a11y-b) .ts-form .wpcf7-submit {
    border: 1px solid #000 !important;
}


/* =========================================================================
   C) COOKIE SETTINGS TOGGLES – on/off clearly different in every mode.
   style.css forces .cc-slider to #ababff with !important for every state
   (up to 1-3-1 in light mode), so these carry two :not(#id) as well.
   Off = light track, grey knob on the left.  On = filled track, white knob
   on the right. Track border keeps the switch visible on any background.
   ========================================================================= */
html body:not(#ts-a11y-a):not(#ts-a11y-b) .cc-toggle .cc-slider {
    box-sizing: border-box !important;
    background: #e5e7eb !important;
    border: 2px solid #6b7280 !important;
}
html body:not(#ts-a11y-a):not(#ts-a11y-b) .cc-toggle .cc-slider::before {
    width: 16px !important;
    height: 16px !important;
    left: 2px !important;
    top: 2px !important;
    background: #6b7280 !important;
    box-shadow: none !important;
}
html body:not(#ts-a11y-a):not(#ts-a11y-b) .cc-toggle input:checked + .cc-slider {
    background: #838771 !important;
    border-color: #838771 !important;
}
html body:not(#ts-a11y-a):not(#ts-a11y-b) .cc-toggle input:checked + .cc-slider::before {
    background: #fff !important;
    transform: translateX(20px) !important;
}
html body:not(#ts-a11y-a):not(#ts-a11y-b) .cc-rtl .cc-toggle .cc-slider::before {
    left: auto !important;
    right: 2px !important;
}
html body:not(#ts-a11y-a):not(#ts-a11y-b) .cc-rtl .cc-toggle input:checked + .cc-slider::before {
    transform: translateX(-20px) !important;
}
html body:not(#ts-a11y-a):not(#ts-a11y-b) .cc-toggle input:focus-visible + .cc-slider {
    outline: 2px solid #1f2937 !important;
    outline-offset: 2px !important;
}

/* Grayscale: the "on" colour turns into a mid grey – use a dark fill instead */
html body.pojo-a11y-grayscale:not(#ts-a11y-a):not(#ts-a11y-b) .cc-toggle input:checked + .cc-slider {
    background: #1f2937 !important;
    border-color: #1f2937 !important;
}

/* High contrast + negative contrast (black background) */
html body.pojo-a11y-high-contrast:not(#ts-a11y-a):not(#ts-a11y-b) .cc-toggle .cc-slider,
html body.pojo-a11y-negative-contrast:not(#ts-a11y-a):not(#ts-a11y-b) .cc-toggle .cc-slider {
    background: #000 !important;
    border-color: #fff !important;
}
html body.pojo-a11y-high-contrast:not(#ts-a11y-a):not(#ts-a11y-b) .cc-toggle .cc-slider::before,
html body.pojo-a11y-negative-contrast:not(#ts-a11y-a):not(#ts-a11y-b) .cc-toggle .cc-slider::before {
    background: #fff !important;
}
html body.pojo-a11y-high-contrast:not(#ts-a11y-a):not(#ts-a11y-b) .cc-toggle input:checked + .cc-slider,
html body.pojo-a11y-negative-contrast:not(#ts-a11y-a):not(#ts-a11y-b) .cc-toggle input:checked + .cc-slider {
    background: #ff0 !important;
    border-color: #ff0 !important;
}
html body.pojo-a11y-high-contrast:not(#ts-a11y-a):not(#ts-a11y-b) .cc-toggle input:checked + .cc-slider::before,
html body.pojo-a11y-negative-contrast:not(#ts-a11y-a):not(#ts-a11y-b) .cc-toggle input:checked + .cc-slider::before {
    background: #000 !important;
}
html body.pojo-a11y-high-contrast:not(#ts-a11y-a):not(#ts-a11y-b) .cc-toggle input:focus-visible + .cc-slider,
html body.pojo-a11y-negative-contrast:not(#ts-a11y-a):not(#ts-a11y-b) .cc-toggle input:focus-visible + .cc-slider {
    outline-color: #ff0 !important;
}

/* Light background */
html body.pojo-a11y-light-background:not(#ts-a11y-a):not(#ts-a11y-b) .cc-toggle .cc-slider {
    background: #fff !important;
    border-color: #000 !important;
}
html body.pojo-a11y-light-background:not(#ts-a11y-a):not(#ts-a11y-b) .cc-toggle .cc-slider::before {
    background: #000 !important;
}
html body.pojo-a11y-light-background:not(#ts-a11y-a):not(#ts-a11y-b) .cc-toggle input:checked + .cc-slider {
    background: #000 !important;
    border-color: #000 !important;
}
html body.pojo-a11y-light-background:not(#ts-a11y-a):not(#ts-a11y-b) .cc-toggle input:checked + .cc-slider::before {
    background: #fff !important;
}