#tpa-toolbar {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 9999;
}

#tpa-toolbar button {
    position: relative;
    padding: 0.5rem;
    width: 3rem;
    height: 3rem;
    border: none;
    background: #000;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

#tpa-toolbar svg {
    width: 1.5rem;
    height: 1.5rem;
}

#tpa-toolbar button.tpa-active {
    background: #fff;
    color: #000;
    outline: 2px solid #000;
}

#tpa-toolbar .tpa-tooltip {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    background: #000;
    color: #fff;
    padding: 0.25rem 0.5rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    margin-left: 0.5rem;
    font-size: 0.875rem;
}

#tpa-toolbar button:hover .tpa-tooltip,
#tpa-toolbar button:focus .tpa-tooltip {
    opacity: 1;
}

body.tpa-high-contrast,
body.tpa-high-contrast * {
    background-color: #000 !important;
    color: #fff !important;
}

body.tpa-high-contrast a {
    color: #0ff !important;
}

body.tpa-high-contrast #tpa-toolbar button.tpa-active {
    background: #fff !important;
    color: #000 !important;
}

body.tpa-dyslexic,
body.tpa-dyslexic *:not(i):not(svg):not([class*="icon"]):not([class*="dashicon"]):not(.fa):not([class*="fa-"]) {
    font-family: 'OpenDyslexic', sans-serif !important;
}

body.tpa-dyslexic #tpa-toolbar,
body.tpa-dyslexic #tpa-toolbar * {
    font-family: initial !important;
    font-size: initial !important;
}

body.tpa-dyslexic {
    font-size: 18px !important;
}

body.tpa-dyslexic div:not(#tpa-toolbar):not([class*="icon"]):not([class*="dashicon"]):not(.fa):not([class*="fa-"]) {
    font-size: 18px !important;
}

body.tpa-dyslexic h1 {
    font-size: 40px !important;
}

body.tpa-dyslexic h2 {
    font-size: 34px !important;
}

body.tpa-dyslexic h3 {
    font-size: 24px !important;
}

body.tpa-dyslexic h4 {
    font-size: 20px !important;
}

body.tpa-dyslexic h5 {
    font-size: 18px !important;
}

body.tpa-dyslexic h6 {
    font-size: 16px !important;
}

body.tpa-dyslexic h1,
body.tpa-dyslexic h2,
body.tpa-dyslexic h3,
body.tpa-dyslexic h4,
body.tpa-dyslexic h5,
body.tpa-dyslexic h6,
body.tpa-dyslexic strong,
body.tpa-dyslexic b {
    font-weight: 700 !important;
}

body.tpa-dyslexic a {
    font-style: italic !important;
}

/*
 * The toolbar sits inside an <aside> so that its buttons live in a landmark
 * (axe "region" flags any content outside one). The toolbar itself is
 * position: fixed, so the wrapper must not contribute a box of its own —
 * it would otherwise pick up the theme's default aside margins and push the
 * footer down. display: contents is deliberately avoided: some browsers drop
 * elements with it from the accessibility tree, which would undo the point.
 */
.tpa-landmark {
    margin: 0;
    padding: 0;
    border: 0;
}

/*
 * Visually hidden, but still read aloud. Used for the corner cell of a
 * converted document's header row: the page has to keep looking like the
 * original PDF, while a screen reader still gets a name for the column.
 */
.tpa-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/*
 * Links inside the cookie policy inherit the site link colour, which on the
 * policy's near-white panels measures 3.2-3.5:1 — under the 4.5:1 AA minimum
 * for body-size text. It affects the contents list, the service notes and the
 * cookiedatabase.org references. Darken them here, scoped to that page,
 * rather than changing the site-wide link colour and every other page with it.
 */
.tpcc-policy a,
.tpcc-policy a:visited {
    color: #1e3a8a;
}

/*
 * WooCommerce's info notice ships as #0ea5e9 on #e0f2fe — 2.6:1, well under
 * the 4.5:1 AA minimum. It is the box a shopper sees when a search returns
 * nothing, so it is exactly the message that must be readable.
 */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error {
    /* The theme's own rule is more specific, so match it and win on order. */
    color: #075985 !important;
}

/*
 * TP External Link Notice marks outbound links with .tpeln-external. The site
 * link colour is usually a light blue that lands at 3.7:1 on white, under the
 * 4.5:1 AA minimum for body text (measured on Whicham's planning applications
 * table, 14px #3b82f6 on #fff). Darken just these rather than changing the
 * site-wide link colour.
 *
 * 0.5.7 used #1d4ed8, which is 6.7:1 on white but only 3.42:1 on Askam's
 * #5fcf80 footer - so the fix for white backgrounds BECAME the contrast error
 * on every page of a site with a coloured footer, 251 of them. #1e3a8a is
 * 10.4:1 on white and 5.3:1 on that green, so it passes on any light panel,
 * and repairs.js measures the real background and overrides this where the
 * panel is dark. Re-check both if you change it.
 */
.tpeln-external,
.tpeln-external:visited {
    color: #1e3a8a;
}

/*
 * repairs.js makes any sideways-scrolling box keyboard focusable (WCAG 2.1.1).
 * Anything focusable needs a visible focus indicator (WCAG 2.4.7, 2.4.13), and
 * these boxes have no styling of their own to carry one.
 */
[data-tpa-scroll]:focus-visible {
    outline: 3px solid #0b2447;
    outline-offset: 2px;
}

[data-tpa-scroll]:focus:not(:focus-visible) {
    outline: none;
}

/*
 * Breakdance's skip link inherits the site link colour. On these sites that is
 * #3b82f6, which WAVE flags as a contrast error even while the link is clipped,
 * and which would be genuinely unreadable the moment a keyboard user tabs to it.
 * Give it a solid high-contrast treatment and make it properly visible on focus.
 */
.bde-skip-link {
    color: #ffffff !important;
    background-color: #0b2447 !important;
}

.bde-skip-link:focus {
    position: fixed !important;
    top: 8px !important;
    left: 8px !important;
    z-index: 100000 !important;
    width: auto !important;
    height: auto !important;
    padding: 12px 20px !important;
    clip: auto !important;
    clip-path: none !important;
    overflow: visible !important;
    border-radius: 4px !important;
    outline: 3px solid #ffd60a !important;
    outline-offset: 2px !important;
    text-decoration: underline !important;
}