/*-------------------------------------------------------------------------------------------------------------------------------*/
/* FOOTER V2 (footer_v2.php)                                                                                                     */
/*-------------------------------------------------------------------------------------------------------------------------------*/
/*
   Port of the approved mockup (footer-mockup/index.html). Mobile first; the mockup's container
   queries are media queries here, with the same breakpoints: 768px (tablet), 1024px (bottom bar
   in one row), 1200px (desktop).

   Scope: every rule starts with .ft. The old footer CSS (global-custom14.css, style-new15.css,
   header.php inline styles) targets .footer, which this footer keeps for the cookie notice and
   the keymaster hide rule, so:
   - the root uses .footer.ft, and .footer.ft.ft (0,3,0) for its padding: header.php sets
     "body:not(:has(form.woocommerce-checkout)) .footer { padding-top: 80px; padding-bottom: 60px }"
     at >= 1024px and global-custom14.css "body:has(form.woocommerce-checkout) .footer { padding-top: 30px }",
     both (0,2,2). The cookie notice reserve "body:has(#cookieConsent.active...) .footer
     { padding-bottom: 124px }" (1,3,1) still wins, as it should, except on SalesMax pages
     (footer.ft--salesmax), which never show the notice (see "SalesMax pages" near the end);
   - rules for links name the <a> (.ft .x a, .ft a.x) to beat ".footer a:hover { color: blue }" (0,2,1).

   Fonts: the site registers Archia and Basier-circle at 400 and 600 only (600 = the Medium files),
   so the mockup's Basier Circle 500 is 600 here.

   Back-to-top (#back-top: fixed, right 30px, 46x46): from 768px the footer keeps a right gutter of
   88px (30 + 46 + 12px gap), so the button never sits over a link or icon at any scroll position.
   On phones the footer ends with the copyright row, whose right side is empty. Up to 1250px
   header.php adds 64px of body padding below the footer (for the logged-in mobile panel); the
   "navy under the footer" section paints it, so the button never sits on white.

   Link groups: the markup has plain h2 headings and every link visible (no JS, and all widths from
   768px). On phones the inline script in footer_v2.php puts a <button aria-expanded> in each h2.

   Contrast on navy #0D102A: white 18.4:1, links #C5C9DF 11.4:1, muted #9499B8 6.7:1,
   white on the #2962FF button 4.9:1, focus ring #8FB0FF 8.7:1.
*/

/* ---------- Root, tokens ---------- */
.footer.ft {
    --ft-navy: #0D102A;
    --ft-navy-2: #141838;
    --ft-white: #FFFFFF;
    --ft-link: #C5C9DF;
    --ft-muted: #9499B8;
    --ft-rule: rgba(255, 255, 255, .10);
    --ft-rule-strong: rgba(255, 255, 255, .18);
    --ft-blue: #2962FF;
    --ft-blue-hover: #1F51E0;
    --ft-focus: #8FB0FF;
    --ft-head: var(--et-heading-font, "Archia", system-ui, sans-serif);
    --ft-body: var(--et-text-font, "Basier-circle", system-ui, sans-serif);
    --et-link-underline-effect-display: none; /* the theme's animated underline on ".footer a:after" */
    position: relative;
    color: var(--ft-link);
    background: radial-gradient(420px 240px at 100% 0%, rgba(41, 98, 255, .13), transparent 70%), var(--ft-navy);
    font: 400 16px/1.5 var(--ft-body);
    text-align: left;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.footer.ft.ft {
    padding: 40px 20px 32px;
}

/* ---------- Old footer and generic theme rules that would leak in ---------- */
.ft a {
    position: static;
    color: inherit;
    text-decoration: none;
    text-decoration-skip-ink: auto; /* style-new15.css sets none on every link */
    transition: none;
}

.ft a::after {
    content: none;
}

.ft ul,
.ft li {
    margin: 0; /* ".footer ul { margin: 15px 0 }", "nav > ul > li { margin-right: 30px }" from 1200px */
    padding: 0;
    list-style: none;
}

.ft p,
.ft h2,
.ft h3 {
    margin: 0;
    padding: 0;
    text-transform: none;
}

.ft img {
    max-width: none;
}

.ft :focus-visible {
    outline: 2px solid var(--ft-focus);
    outline-offset: 3px;
}

.ft .ft-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.ft .ft-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.ft .ft-ico {
    display: inline-block;
    flex: none;
    width: 16px;
    height: 16px;
}

.ft .ft__inner {
    max-width: 1280px;
    margin: 0 auto;
}

/* ---------- Brand and primary action ---------- */
.ft .ft-brand {
    display: grid;
    gap: 20px;
    justify-items: start;
    padding-bottom: 32px;
}

.ft a.ft-brand__logo {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    border-radius: 4px;
    color: var(--ft-white);
}

.ft .ft-brand__logo img {
    display: block;
    width: 106px; /* 240x77 at 34px tall */
    height: 34px;
}

/* SalesMax pages (?plugin_type=salesmax): white SalesMax logo, same height as the 8theme one */
.ft .ft-brand__logo--salesmax img {
    width: 196px; /* 207x36 at 34px tall */
    height: 34px;
}

.ft .ft-statement {
    font: 600 19px/1.32 var(--ft-head);
    letter-spacing: -.005em;
    color: var(--ft-white);
}

.ft .ft-statement span {
    display: block;
}

.ft .ft-statement__lead {
    text-wrap: balance;
}

.ft .ft-statement__soft {
    font-weight: 400;
    color: var(--ft-link);
}

.ft .ft-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 20px;
}

.ft a.ft-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 22px;
    border-radius: 5px;
    font: 600 15px/1 var(--ft-body);
    white-space: nowrap;
    color: var(--ft-white);
    background: var(--ft-blue);
    transition: background-color .15s ease;
}

.ft a.ft-btn:hover {
    color: var(--ft-white);
    background: var(--ft-blue-hover);
}

.ft .ft-btn .ft-ico {
    transition: transform .2s ease;
}

.ft .ft-btn:hover .ft-ico {
    transform: translateX(2px);
}

.ft .ft-hint {
    font-size: 14px;
    color: var(--ft-muted);
}

.ft .ft-hint a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    border-radius: 3px;
    font-weight: 600;
    color: var(--ft-white);
}

.ft .ft-hint a .ft-ico {
    width: 14px;
    height: 14px;
    color: var(--ft-muted);
}

.ft .ft-hint a:hover {
    color: var(--ft-white);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ---------- Link groups: accordions on phones, headed columns from 768px ---------- */
.ft .ft-nav__groups {
    border-top: 1px solid var(--ft-rule);
}

.ft .ft-group {
    border-bottom: 1px solid var(--ft-rule);
}

/* Phones: each heading is a 56px row (also without JS, when it is plain text and its links show) */
.ft .ft-group__title {
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 0 2px;
    font: 600 18px/1.25 var(--ft-head);
    letter-spacing: .003em;
    color: var(--ft-white);
}

/* The accordion button the inline script adds on phones; it fills the heading row */
.ft .ft-group__toggle {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 4px;
    font: inherit;
    letter-spacing: inherit;
    text-align: left;
    text-transform: none;
    color: inherit;
    background: none;
    box-shadow: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.ft .ft-group__chev {
    flex: none;
    width: 20px;
    height: 20px;
    color: var(--ft-muted);
    transition: transform .2s ease;
}

.ft .ft-group__toggle[aria-expanded="true"] .ft-group__chev {
    transform: rotate(180deg);
}

.ft .ft-group__body[hidden] {
    display: none;
}

.ft .ft-group__body {
    padding: 0 2px 14px;
}

.ft .ft-links a {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    border-radius: 3px;
    color: var(--ft-link);
    white-space: nowrap;
    transition: color .15s ease;
}

.ft .ft-links a:hover {
    color: var(--ft-white);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.ft .ft-ext {
    flex: none;
    width: 12px;
    height: 12px;
    color: var(--ft-muted);
}

/* Secondary rows under a hairline: classic themes, support renewal */
.ft .ft-sub {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--ft-rule);
}

.ft .ft-eyebrow {
    display: block;
    font: 400 12px/1.4 var(--ft-head);
    letter-spacing: .09em;
    color: var(--ft-muted);
}

/* Capitals on the visible (aria-hidden) copy only; the .ft-sr copy keeps "Classic themes" for screen readers */
.ft .ft-eyebrow__caps {
    text-transform: uppercase;
}

.ft .ft-classic ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.ft .ft-classic li {
    display: inline-flex;
    align-items: center;
}

.ft .ft-classic li:not(:last-child)::after {
    content: "·";
    content: "·" / "";
    padding: 0 8px;
    color: var(--ft-muted);
}

/* No min-width: it made "Royal" a 44px box and pushed its dot further out (the row is 44px tall,
   and Royal is still wider than the 24px minimum target) */
.ft .ft-classic a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    border-radius: 3px;
    font-size: 15px;
    color: var(--ft-muted);
}

.ft .ft-classic a:hover {
    color: var(--ft-white);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.ft .ft-links .ft-renew {
    display: block;
}

.ft .ft-renew .ft-hint-label {
    display: block;
    margin-bottom: -4px;
    font-size: 13.5px;
    color: var(--ft-muted);
}

/* ---------- Recognition badges and social links ---------- */
.ft .ft-meta {
    display: grid;
    gap: 24px;
    padding: 28px 0;
    border-bottom: 1px solid var(--ft-rule);
}

.ft .ft-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 20px;
}

.ft .ft-badges li {
    display: flex;
    align-items: center;
}

.ft .ft-badges li + li {
    padding-left: 20px;
    border-left: 1px solid var(--ft-rule-strong);
}

.ft .ft-badges img {
    display: block;
    height: 28px;
}

.ft .ft-badges .ft-badge--wp {
    width: 132px; /* 363x77 at 28px */
}

.ft .ft-badges .ft-badge--env {
    width: 143px; /* 491x96 at 28px */
}

.ft .ft-social {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.ft .ft-social a {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--ft-rule-strong);
    border-radius: 50%;
    color: var(--ft-white);
    transition: background-color .15s ease, border-color .15s ease;
}

.ft .ft-social a:hover {
    color: var(--ft-white);
    background: var(--ft-navy-2);
    border-color: rgba(255, 255, 255, .34);
}

.ft .ft-social__icon {
    display: grid;
    place-items: center;
}

.ft .ft-social__icon .ft-ico {
    width: 20px;
    height: 20px;
}

.ft .ft-social__name {
    display: none;
}

/* ---------- Bottom bar: legal links, copyright ---------- */
/* It also has the old .footer--copyright class (cookie notice CSS). That class's centring and its
   back-to-top padding are undone here: the whole footer keeps the back-to-top lane free. */
.ft .ft-bottom {
    display: grid;
    gap: 4px;
    justify-content: normal;
    padding: 16px 0 0;
    font-size: inherit;
    text-align: left;
}

/* Phone: three links in a 2 + 1 grid, each a 44px target */
.ft .ft-legal ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
}

.ft .ft-legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    border-radius: 3px;
    font: 400 15px/1.3 var(--ft-body);
    color: var(--ft-link);
    /* Phones may wrap a label (with enlarged text spacing "App privacy policy" no longer fits its
       column at 320px); from 768px every label stays on one line. */
    white-space: normal;
}

.ft .ft-legal a:hover {
    color: var(--ft-white);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.ft .ft-copy {
    display: flex;
    align-items: center;
    justify-self: start;
    min-height: 44px;
    font-size: 14px;
    color: var(--ft-muted);
}

@media (max-width: 359px) {
    .ft .ft-badges li + li {
        padding-left: 0;
        border-left: 0;
    }
}

/* ---------- Tablet and up (>= 768px) ---------- */
@media (min-width: 768px) {
    .footer.ft {
        font-size: 15px;
        background: radial-gradient(640px 320px at 100% 0%, rgba(41, 98, 255, .12), transparent 70%), var(--ft-navy);
    }

    .footer.ft.ft {
        padding: 64px 88px 32px 72px; /* right: back-to-top lane */
    }

    .ft .ft-brand {
        padding-bottom: 48px;
    }

    /* Three columns (.ft-col); the first holds AI tools with Themes under it */
    .ft .ft-nav__groups {
        display: grid;
        grid-template-columns: repeat(3, minmax(min-content, 1fr));
        column-gap: 24px;
        border-top: 0;
    }

    .ft .ft-group {
        border-bottom: 0;
    }

    .ft .ft-col > .ft-group + .ft-group {
        margin-top: 32px;
    }

    /* Plain column headings (the inline script adds no button from 768px).
       No gap under the title: the approved render has none (the mockup's margin there never applied). */
    .ft .ft-group__title {
        display: block;
        min-height: 0;
        padding: 0;
    }

    .ft .ft-group__body {
        padding: 0;
    }

    .ft .ft-links a {
        min-height: 36px;
    }

    .ft .ft-sub {
        margin-top: 10px;
        padding-top: 14px;
    }

    .ft .ft-classic a {
        min-height: 30px;
        font-size: 13.5px;
    }

    .ft .ft-classic li:not(:last-child)::after {
        padding: 0 7px;
    }

    .ft .ft-renew .ft-hint-label {
        margin-bottom: 0;
    }

    .ft .ft-meta {
        grid-template-columns: auto 1fr;
        align-items: center;
        margin-top: 56px;
        padding: 24px 0;
        border-top: 1px solid var(--ft-rule);
    }

    .ft .ft-badges img {
        height: 32px;
    }

    .ft .ft-badges .ft-badge--wp {
        width: 151px; /* 363x77 at 32px */
    }

    .ft .ft-badges .ft-badge--env {
        width: 164px; /* 491x96 at 32px */
    }

    .ft .ft-social {
        justify-self: end;
        gap: 10px;
    }

    .ft .ft-social a {
        width: 44px;
        height: 44px;
    }

    .ft .ft-bottom {
        gap: 2px;
        padding-top: 16px;
    }

    .ft .ft-copy {
        min-height: 36px;
        white-space: nowrap;
    }

    .ft .ft-legal ul {
        display: flex;
        flex-wrap: wrap;
        column-gap: 28px;
    }

    .ft .ft-legal a {
        min-height: 36px;
        font-size: 14px;
        white-space: nowrap;
    }
}

/* 768-1199px: the three columns as a wrapping flex row instead of the grid. Normally it looks the same
   (equal columns that never get narrower than their longest label, which stays on one line), but when
   a visitor enlarges letter and word spacing (WCAG 1.4.12) a column that no longer fits moves to a
   second row, instead of the labels running past the viewport and under the back-to-top button. */
@media (min-width: 768px) and (max-width: 1199px) {
    .ft .ft-nav__groups {
        display: flex;
        flex-wrap: wrap;
        row-gap: 32px;
    }

    .ft .ft-col {
        flex: 1 1 0;
    }
}

/* ---------- >= 1024px: copyright and legal links in one row ---------- */
@media (min-width: 1024px) {
    .ft .ft-bottom {
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: 24px;
    }

    .ft .ft-copy {
        grid-row: 1;
        grid-column: 1;
        min-height: 0;
    }

    .ft .ft-legal {
        justify-self: end;
    }
}

/* ---------- Desktop (>= 1200px) ---------- */
@media (min-width: 1200px) {
    .footer.ft {
        background: radial-gradient(760px 360px at 96% 0%, rgba(41, 98, 255, .12), transparent 70%), var(--ft-navy);
    }

    .footer.ft.ft {
        padding: 80px 88px 32px 80px; /* right: back-to-top lane */
    }

    /* 4/8 split; link columns never narrower than their longest label */
    .ft .ft-top {
        display: grid;
        grid-template-columns: minmax(0, 4fr) minmax(min-content, 8fr);
        column-gap: 24px;
        align-items: start;
    }

    .ft .ft-brand {
        gap: 22px;
        padding: 0 8px 0 0; /* mockup 16px; 8px keeps the statement on two lines at 1440px beside the lane */
    }

    .ft a.ft-brand__logo {
        min-height: 0;
    }

    .ft .ft-statement {
        font-size: 20px;
    }

    .ft .ft-cta {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        margin-top: 4px;
    }

    .ft .ft-badges {
        column-gap: 24px;
    }

    .ft .ft-badges li + li {
        padding-left: 24px;
    }

    .ft .ft-badges img {
        height: 34px;
    }

    .ft .ft-badges .ft-badge--wp {
        width: 160px; /* 363x77 at 34px */
    }

    .ft .ft-badges .ft-badge--env {
        width: 174px; /* 491x96 at 34px */
    }

    /* Labelled community links */
    .ft .ft-social {
        gap: 8px 28px;
    }

    .ft .ft-social a {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        width: auto;
        height: 44px;
        padding-right: 10px;
        border: 0;
        border-radius: 22px;
        font-size: 14px;
        color: var(--ft-link);
    }

    .ft .ft-social li:last-child a {
        padding-right: 0; /* the last label ends on the content edge, like the legal row */
    }

    .ft .ft-social a:hover {
        color: var(--ft-white);
        background: none;
    }

    .ft .ft-social__icon {
        width: 36px;
        height: 36px;
        border: 1px solid var(--ft-rule-strong);
        border-radius: 50%;
        color: var(--ft-white);
        transition: border-color .15s ease, background-color .15s ease;
    }

    .ft .ft-social a:hover .ft-social__icon {
        background: var(--ft-navy-2);
        border-color: rgba(255, 255, 255, .34);
    }

    .ft .ft-social__icon .ft-ico {
        width: 18px;
        height: 18px;
    }

    .ft .ft-social__name {
        display: inline;
    }
}

/* ---------- Checkout: as with the old footer, only the logo and the bottom bar ---------- */
/* (The old footer's payment strip, img/checkout-payments-icons-dark-version.png, is dark artwork that
   barely shows on navy, so it is not carried over.) */
body:has(form.woocommerce-checkout) .ft .ft-statement,
body:has(form.woocommerce-checkout) .ft .ft-cta,
body:has(form.woocommerce-checkout) .ft .ft-nav,
body:has(form.woocommerce-checkout) .ft .ft-meta {
    display: none;
}

body:has(form.woocommerce-checkout) .footer.ft.ft {
    padding-top: 32px;
}

body:has(form.woocommerce-checkout) .ft .ft-top {
    display: block;
}

body:has(form.woocommerce-checkout) .ft .ft-brand {
    padding: 0 0 16px;
    border-bottom: 1px solid var(--ft-rule);
}

/* ---------- Up to 1250px: navy under the footer ---------- */
/* header.php gives body 64px of padding-bottom up to 1250px for the logged-in mobile panel
   (.et-mobile-panel-wrapper: fixed, 64px, white). Where that panel is not on the page (logged out,
   product pages) or is hidden (checkout, global-custom14.css), the padding showed as a white strip
   under the footer. The page background paints it navy instead: html has no background, so the
   body's is drawn on the canvas and positioned against the root box, whose last 64px are exactly
   that padding. Nothing moves, and nothing can clip it (on some templates the footer sits in
   #content-block, overflow: hidden, which rules out a box-shadow or ::after on the footer).
   With the panel on the page the panel covers the strip; bbPress keymasters also have it there,
   and on forum pages footer.php hides their footer, where a navy band would hang under the page. */
@media (max-width: 1250px) {
    html body:has(footer.ft):not(:has(.et-mobile-panel-wrapper)),
    html body:has(footer.ft):has(form.woocommerce-checkout) {
        background-image: linear-gradient(#0D102A, #0D102A);
        background-repeat: no-repeat;
        background-position: 0 100%;
        background-size: 100% 64px;
    }
}

/* ---------- Keyboard focus never behind the logged-in mobile panel ---------- */
/* Up to 1250px logged-in visitors have the fixed 64px .et-mobile-panel-wrapper at the bottom; scrolling
   a focused link into view keeps it above the panel (64px + the 5px focus ring + 3px). Specificity
   (0,2,2): the cookie notice rules below (1,4,2) take over with their larger values while it shows. */
@media (max-width: 1250px) {
    html:has(footer.ft):has(.et-mobile-panel-wrapper) {
        scroll-padding-bottom: 72px;
    }
}

/* ---------- Keyboard focus never behind the cookie notice ---------- */
/* While the fixed notice is shown (from 993px, rules 7/7b in global-custom14.css: 78px tall, 24px
   from the bottom, 88px at 993-1250px), scrolling a focused link into view keeps it above the card. */
@media (min-width: 993px) {
    html:has(footer.ft:not(.ft--salesmax)):has(#cookieConsent.active:not([style*="display: none"])) {
        scroll-padding-bottom: 124px;
    }
}

@media (min-width: 993px) and (max-width: 1250px) {
    html:has(footer.ft:not(.ft--salesmax)):has(#cookieConsent.active:not([style*="display: none"])) {
        scroll-padding-bottom: 188px;
    }
}

/* SalesMax pages (?plugin_type=salesmax, footer.ft--salesmax) never show the notice: header_home.php
   hides it with display: none !important, but the cookie script still marks it .active, so rules 7/7b
   in global-custom14.css would keep its reserve, an empty 124px navy band under the copyright row and
   the back-to-top button lifted to 40/104px. Here both go back to their values without the notice:
   footer padding 32px, back-top 30px (style-new15.css), or 80px over the logged-in mobile panel at
   768-1250px (header.php). Specificity 1,4,1 / 1,3,2 / 1,4,2 beats the reserve's 1,3,1. */
@media (min-width: 993px) {
    body:has(#cookieConsent) .footer.ft.ft.ft--salesmax {
        padding-bottom: 32px;
    }

    body:has(#cookieConsent):has(footer.ft--salesmax) .back-top.back-top {
        bottom: 30px;
    }
}

@media (min-width: 993px) and (max-width: 1250px) {
    body:has(#cookieConsent):has(footer.ft--salesmax):has(.et-mobile-panel-wrapper) .back-top.back-top {
        bottom: 80px;
    }
}

/* ---------- Keyboard focus never under the fixed site header ---------- */
/* Shift+Tab scrolls each newly focused stop to the very top of the viewport, where the fixed header
   (header.header--fixed, 61-76px tall) covers it. A top scroll margin on the footer's own links and
   buttons keeps them below the header (76px + the 5px focus ring + 3px); nothing outside the footer
   is affected. The bottom margin keeps the whole focus ring (2px outline at 3px offset) on screen
   when a stop is scrolled to the bottom edge with no panel or cookie reserve below it. */
.ft a,
.ft button {
    scroll-margin-top: 84px;
    scroll-margin-bottom: 8px;
}

/* ---------- Back-to-top out of the way of keyboard focus on phones ---------- */
/* Below 768px the focused stop lands in the back-to-top lane (right 15-30px, bottom 15-80px) and the
   button would cover a toggle's chevron, i.e. its open/closed state. The button is a <div> keyboard
   users cannot reach, so it fades out (the theme's own hidden state, .back-top:not(.backIn)) while
   a footer element has keyboard focus; mouse and touch focus never match :focus-visible. */
@media (max-width: 767px) {
    body:has(footer.ft :focus-visible) .back-top {
        opacity: 0;
        visibility: hidden;
    }
}

/* ---------- Forced colours (Windows contrast themes) ---------- */
/* The white logos and badges keep a navy backing so they stay visible on a light Canvas; the button
   keeps its outline; the small icons follow the link or button colour instead of the muted grey. */
@media (forced-colors: active) {
    .ft .ft-brand__logo img,
    .ft .ft-badges img {
        forced-color-adjust: none;
        background: var(--ft-navy);
        border-radius: 4px;
        box-shadow: 0 0 0 4px var(--ft-navy);
    }

    .ft a.ft-btn {
        border: 1px solid LinkText;
    }

    .ft .ft-ext,
    .ft .ft-hint a .ft-ico {
        color: LinkText;
    }

    .ft .ft-group__chev {
        color: ButtonText;
    }
}

/* ---------- No motion for people who turned it off ---------- */
@media (prefers-reduced-motion: reduce) {
    .ft *,
    .ft *::before,
    .ft *::after {
        transition: none !important;
        animation: none !important;
    }

    .ft .ft-btn:hover .ft-ico {
        transform: none;
    }
}