/* ==========================================================================
   GX Accessibility Toolbar
   --------------------------------------------------------------------------
   Two halves:
     1. the widget's own chrome (.gxa-*)
     2. the preference classes it puts on <html> (.gxa-scale-*, .gxa-contrast,
        .gxa-links, .gxa-readable, .gxa-no-motion)

   The preference rules lean on !important throughout. That is deliberate: they
   have to beat GenerateBlocks' per-block generated CSS, which is authored with
   high-specificity generated class selectors and loaded after the theme. A user
   who has asked for high contrast has to get it on every block on the site, not
   only on the ones the theme happens to control.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Widget chrome
   -------------------------------------------------------------------------- */

.gxa-root {
    /* The fixed notices bar owns the bottom 55px, and the Translate tab owns
       the bottom-left corner, so the launcher lives bottom-right above it. */
    position: fixed;
    right: 16px;
    bottom: calc(55px + 16px);
    z-index: 200003;
    display: flex;
    /* column-reverse keeps the launcher pinned to the bottom corner and grows
       the panel upward from it; plain column pushes the launcher up the screen
       as the panel opens, so the control moves out from under the pointer. */
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 11px;
    /* Own stacking context; the panel must not be clipped by the page. */
    isolation: isolate;
}

.gxa-launcher {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    min-height: 48px;
    min-width: 48px;
    padding: 0.55em 1.1em;
    border: 2px solid #fff;
    border-radius: 33px;
    /* 12.96:1 for white on this. */
    background-color: #003740;
    font-family: var(--gp-font--gotham), system-ui, sans-serif;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 6px 22px rgba(38, 37, 37, 0.33);
}

.gxa-launcher:hover,
.gxa-launcher[aria-expanded="true"] {
    background-color: #016778;
}

.gxa-launcher__icon {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.gxa-launcher__icon path {
    fill: none;
}

.gxa-panel {
    width: min(21rem, calc(100vw - 32px));
    max-height: min(32rem, calc(100vh - 160px));
    overflow-y: auto;
    padding: 18px;
    border: 2px solid #003740;
    border-radius: 16px;
    background-color: #fff;
    color: #262525;
    text-align: left;
    box-shadow: 0 18px 44px rgba(38, 37, 37, 0.3);
}

.gxa-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 11px;
    margin-bottom: 6px;
}

.gxa-panel__title {
    margin: 0;
    font-family: var(--gp-font--myriad-pro), Georgia, serif;
    font-weight: 900;
    font-style: italic;
    font-size: 1.25rem;
    line-height: 1.1;
    color: #003740;
}

.gxa-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 2px solid #003740;
    border-radius: 50%;
    background: none;
    color: #003740;
    cursor: pointer;
}

.gxa-close svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
}

.gxa-close:hover {
    background-color: #003740;
    color: #fff;
}

.gxa-panel__intro {
    margin: 0 0 14px;
    font-size: 0.875rem;
    line-height: 1.45;
    /* 7.4:1 on white. */
    color: #4a4a4a;
}

.gxa-group {
    margin: 0 0 14px;
    padding: 0;
    border: 0;
}

.gxa-group__label {
    display: block;
    margin: 0 0 8px;
    padding: 0;
    font-family: var(--gp-font--gotham), system-ui, sans-serif;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #016778;
}

.gxa-sizes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.gxa-size {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-height: 60px;
    padding: 8px 4px;
    border: 2px solid #8b8178;
    border-radius: 11px;
    background-color: #fff;
    font-family: var(--gp-font--gotham), system-ui, sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    color: #262525;
    cursor: pointer;
}

.gxa-size__a {
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
}

.gxa-size__a--md { font-size: 1.375rem; }
.gxa-size__a--lg { font-size: 1.75rem; }

.gxa-size[aria-pressed="true"] {
    border-color: #003740;
    background-color: #003740;
    color: #fff;
}

.gxa-toggles {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gxa-root .gxa-toggle {
    position: relative;
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 10px 52px 10px 12px;
    border: 2px solid var(--base);
    border-radius: 11px;
    background-color: var(--base-3);
    text-align: left;
    font-family: var(--gp-font--gotham), system-ui, sans-serif;
    color: var(--accent);
    cursor: pointer;
}

.gxa-toggle__name {
    display: block;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.2;
}

.gxa-toggle__hint {
    display: block;
    margin-top: 2px;
    font-size: 0.75rem;
    line-height: 1.35;
    color: #4a4a4a;
}

/* The switch is decorative — aria-pressed on the button is what is announced. */
.gxa-toggle__state {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 34px;
    height: 20px;
    margin-top: -10px;
    border: 2px solid #4a4a4a;
    border-radius: 11px;
    background-color: #fff;
}

.gxa-toggle__state::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #4a4a4a;
    transition: transform 150ms ease;
}

.gxa-toggle[aria-pressed="true"] {
    border-color: #003740;
    background-color: #eef4f4;
}

.gxa-toggle[aria-pressed="true"] .gxa-toggle__state {
    border-color: #003740;
    background-color: #003740;
}

.gxa-toggle[aria-pressed="true"] .gxa-toggle__state::after {
    background-color: #fff;
    transform: translateX(14px);
}

.gxa-reset {
    display: block;
    width: 100%;
    min-height: 44px;
    margin-bottom: 14px;
    padding: 11px;
    border: 2px solid #aa272f;
    border-radius: 11px;
    background-color: #fff;
    font-family: var(--gp-font--gotham), system-ui, sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
    /* 6.9:1 on white. */
    color: #aa272f;
    cursor: pointer;
}

.gxa-reset:hover {
    background-color: #aa272f;
    color: #fff;
}

.gxa-links-out {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(139, 129, 121, 0.45);
    font-size: 0.875rem;
}

.gxa-links-out a {
    color: #016778;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.gxa-root :focus-visible {
    outline: 3px solid #aa272f;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.9);
}

@media (max-width: 768px) {
    .gxa-root {
        /* Clear of the notices bar once its copy wraps, plus the iOS home bar. */
        bottom: calc(82px + env(safe-area-inset-bottom, 0px));
    }

    .gxa-launcher__text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .gxa-launcher {
        padding: 0.6em;
    }
}

/* The open mobile menu covers the page; the launcher must not float over it. */
body[data-gb-menu-open] .gxa-root {
    display: none;
}

/* --------------------------------------------------------------------------
   2. Preference classes on <html>
   -------------------------------------------------------------------------- */

/* Text size.
   `zoom` rather than a root font-size change: most type on this site is set in
   px or in clamp() with a vw term inside GenerateBlocks' generated CSS, and
   neither responds to a root font-size. zoom scales the layout the way browser
   zoom does, which is what people expect from a text-size control, and it keeps
   line lengths and the grid intact instead of breaking them. */
html.gxa-scale-1 { zoom: 1.15; }
html.gxa-scale-2 { zoom: 1.32; }

/* Browsers without `zoom` (Firefox before 126) fall back to a root font-size
   change. It only moves the rem-based type, which is most of the body copy and
   all of the headings, so the control still does something useful. */
@supports not (zoom: 1) {
    html.gxa-scale-1 { font-size: 115%; }
    html.gxa-scale-2 { font-size: 132%; }
}

/* Root zoom shrinks the initial containing block, so percentage widths follow
   it — but vw units do not. The full-bleed sections are sized in vw, so at 132%
   they stay 100vw wide, render a third wider than the viewport and give the
   whole page a horizontal scrollbar (1.4.10 Reflow). The content column on this
   theme is already full width, so 100% is the same geometry without the vw. */
html[class*="gxa-scale-"] .alignfull,
html[class*="gxa-scale-"] .alignwide {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Same story for the hero video, which gx-videobg sizes at 100vw. */
html[class*="gxa-scale-"] .gx-videobg,
html[class*="gxa-scale-"] .gx-videobg__video {
    width: 100% !important;
    max-width: 100% !important;
}

/* High contrast.
   Step one flattens the brand palette so anything painted from a custom
   property lands on black or white without a per-element rule. */
html.gxa-contrast {
    --darkblue: #000000;
    --contrast: #000000;
    --lightblue: #000000;
    --darkgreen: #000000;
    --contrast-2: #000000;
    --lightgreen: #ffffff;
    --darkred: #000000;
    --contrast-3: #000000;
    --base-2: #ffffff;
    --base-3: #ffffff;
    --base: #000000;
    --accent: #000000;
}

/* Every element, not a hand-written list of them. An earlier version named
   body/section/div/li/td and so on, which missed the <p> that GenerateBlocks
   paints dark in the footer — the link inside it kept a dark background while
   the link colour turned blue, landing at 1.8:1. The toolbar's own subtree is
   excluded because it is the control the person uses to leave this mode. */
html.gxa-contrast *:not(.gxa-root):not(.gxa-root *) {
    background-color: #ffffff !important;
    background-image: none !important;
    color: #000000 !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

/* The `:not()` pair is repeated verbatim from the universal rule so this lands
   at the same specificity and wins on source order. Written any shorter it
   loses, and every link turns plain black — legible, but no longer telling the
   reader what is clickable by anything except the underline. */
html.gxa-contrast a:not(.gxa-root):not(.gxa-root *) {
    /* 12.4:1 on white, and still reads as a link beside black body text. */
    color: #00308f !important;
    text-decoration: underline !important;
}

html.gxa-contrast a:not(.gxa-root):not(.gxa-root *) :is(span, strong, em, b, i) {
    color: #00308f !important;
}

html.gxa-contrast :is(button, input, select, textarea, .gb-button, .wp-block-button__link):not(.gxa-root):not(.gxa-root *) {
    border: 2px solid #000000 !important;
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* Decorative video and the wave dividers carry no information and only reduce
   the contrast of the text sitting on them. */
html.gxa-contrast video,
html.gxa-contrast .gx-videobg,
html.gxa-contrast .gb-shape--divider {
    display: none !important;
}

html.gxa-contrast svg:not(.gxa-root):not(.gxa-root *) {
    fill: #000000 !important;
    stroke: #000000 !important;
}

/* The toolbar itself keeps its own colours — it is the control surface the
   person is using to get out of a state they cannot read. */
html.gxa-contrast .gxa-root *,
html.gxa-contrast .gxa-root {
    background-image: none !important;
}

html.gxa-contrast .gxa-launcher {
    background-color: #000000 !important;
    color: #ffffff !important;
}

html.gxa-contrast .gxa-launcher svg {
    fill: none !important;
    stroke: #ffffff !important;
}

/* Highlight links. */
html.gxa-links a,
html.gxa-links a span,
html.gxa-links .gb-text[href] {
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    text-decoration-thickness: 2px !important;
}

html.gxa-links a:not(.gxa-root a) {
    outline: 2px dashed currentColor;
    outline-offset: 2px;
}

/* Readable type.
   The brand face is Myriad Pro 900 italic with -0.05em tracking, which is the
   hardest combination in the design for a reader with dyslexia or low vision.
   This swaps in an upright, generously spaced stack and drops the italic. */
html.gxa-readable,
html.gxa-readable body,
html.gxa-readable h1,
html.gxa-readable h2,
html.gxa-readable h3,
html.gxa-readable h4,
html.gxa-readable h5,
html.gxa-readable h6,
html.gxa-readable p,
html.gxa-readable li,
html.gxa-readable a,
html.gxa-readable span,
html.gxa-readable button,
html.gxa-readable input,
html.gxa-readable label,
html.gxa-readable td,
html.gxa-readable th,
html.gxa-readable .gb-text,
html.gxa-readable .gb-menu-link {
    font-family: Verdana, Tahoma, "Trebuchet MS", system-ui, sans-serif !important;
    font-style: normal !important;
    letter-spacing: 0.02em !important;
    word-spacing: 0.06em !important;
}

html.gxa-readable h1,
html.gxa-readable h2,
html.gxa-readable h3,
html.gxa-readable h4 {
    font-weight: 700 !important;
    line-height: 1.25 !important;
}

html.gxa-readable p,
html.gxa-readable li {
    line-height: 1.7 !important;
}

/* Stop animation. Mirrors what the theme already does under
   prefers-reduced-motion, so the two paths cannot drift apart. */
html.gxa-no-motion *,
html.gxa-no-motion *::before,
html.gxa-no-motion *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
}

/* Every GP Scroll Motion element, matched by the class prefix rather than by a
   list of effects. The list version missed `.sm-block-content` — the inner
   wrapper the plugin actually writes its inline `opacity: 0` to — so with the
   plugin's own ticker stopped that content stayed invisible instead of just
   still. Anything the plugin owns has to be forced to its finished pose. */
html.gxa-no-motion [class^="sm-"],
html.gxa-no-motion [class*=" sm-"] {
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
    scale: none !important;
    rotate: none !important;
    filter: none !important;
    clip-path: none !important;
}

/* The child theme's reveal effects are scroll-driven CSS animations
   (`animation-timeline: view()`). Their clock is the scroll position, not time,
   so the animation-duration override above does nothing to them — that is why
   "stop animation" left them running. They also move with the individual
   `translate` / `scale` properties rather than `transform`, and their resting
   state is `opacity: 0`, so the animation cannot simply be cancelled: the
   finished pose has to be asserted too, or the content disappears. */
html.gxa-no-motion .reveal,
html.gxa-no-motion .reveal-left,
html.gxa-no-motion .reveal-right,
html.gxa-no-motion .reveal-top,
html.gxa-no-motion .reveal-bottom,
html.gxa-no-motion .reveal-fade,
html.gxa-no-motion .zoomin,
html.gxa-no-motion .reveal-now {
    animation: none !important;
    animation-timeline: auto !important;
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
    scale: none !important;
    rotate: none !important;
    filter: none !important;
}

/* The type-in caret blinks forever on its own keyframes. */
html.gxa-no-motion .typein.is-typing::after,
html.gxa-no-motion .typein::after {
    display: none !important;
}

/* High-contrast exemptions.
   The blanket rules above are what make the mode work, but they also repaint
   the toolbar — and the toolbar is the only way back out of the mode, so it has
   to stay legible. These selectors carry an extra class each so they outrank
   the element-level rules above. */
html.gxa-contrast .gxa-launcher,
html.gxa-contrast .gxa-launcher .gxa-launcher__text {
    background-color: #000000 !important;
    color: #ffffff !important;
}

html.gxa-contrast .gxa-panel .gxa-panel__title,
html.gxa-contrast .gxa-panel .gxa-panel__intro,
html.gxa-contrast .gxa-panel .gxa-group__label,
html.gxa-contrast .gxa-panel .gxa-toggle__name,
html.gxa-contrast .gxa-panel .gxa-toggle__hint {
    color: #000000 !important;
}

html.gxa-contrast .gxa-panel .gxa-size[aria-pressed="true"],
html.gxa-contrast .gxa-panel .gxa-size[aria-pressed="true"] span {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* The weather strip paints itself #aa272f with !important from the theme's
   Additional CSS, which leaves black-on-red once the text rules land — 3.0:1.
   Flatten it like everything else. */
html.gxa-contrast .gxw-block,
html.gxa-contrast .gxw-block.has-contrast-3-background-color,
html.gxa-contrast .gxw-block .gxw-temp,
html.gxa-contrast .gxw-block .gxw-time,
html.gxa-contrast .gxw-time {
    background-color: #ffffff !important;
    color: #000000 !important;
}