so it only catches prose links - the pill CTAs are in
s and keep their button styling. */
:is(main, footer) :is(p, li) a[href] {
text-decoration: underline;
text-underline-offset: 0.16em;
text-decoration-thickness: from-font;
}
input, textarea, button, select { font: inherit; color: inherit; }
input::placeholder, textarea::placeholder { color: #6b7080; opacity: 1; }
svg { max-width: 100%; }
/* Safety net for WCAG 1.4.10 Reflow. Several CTAs are grid or flex items with
justify-self:start, which sizes them to max-content: at 320px, or at 320px
with text zoomed to 200%, max-content is wider than the track and the whole
page gets a horizontal scrollbar. Capping every descendant at the width of
its containing block is a no-op for ordinary block elements, which are
already 100% wide, and only bites on the max-content ones. Verified against
a full element-geometry snapshot of all 16 pages at 1280px: every visible box
is unchanged. The one difference is the honeypot input, which narrows inside
its own 1px clip container and is invisible either way. */
main *, header *, footer * { max-width: 100%; }
/* At 320px with text zoomed to 200% a single long word ("administration,",
"serviosupport.com") is wider than its grid track, and no amount of capping
the box helps because a grid item's min-width:auto resolves to min-content
and outranks max-width. Letting words break is the only thing that keeps the
page to one scroll direction at that combination. It changes nothing at
normal text sizes, where no word is ever wider than its column. */
:is(main,header,footer) :is(h1,h2,h3,p,li,dt,dd,span,a,legend,label) { overflow-wrap: break-word; }
/* Grid and flex items must also be allowed below their min-content width. */
:is(main,header,footer) :is(div,a,p,span,ul,dl,fieldset) { min-width: 0; }
/* Long unbroken strings (email addresses) must be allowed to wrap, or they
push the layout wider than 320px. max-width caps a mailto CTA that is a
grid item: justify-self:start sizes it to max-content, which never wraps,
and no amount of overflow-wrap helps until the box itself is capped. It is
inert on the inline links, where max-width does not apply. */
a[href^="mailto:"] { overflow-wrap: break-word; max-width: 100%; }
/* A single brand-coloured ring is invisible on the dark bar and footer
(measured 1.83:1) and on the brand panels (1.00:1), which is most of the
site's calls to action. The white box-shadow sits in the 2px gap that
outline-offset opens up, so the indicator is always two rings and at least
one of them clears 3:1 against whatever is behind it. */
:focus-visible {
outline: 3px solid oklch(0.40 0.10 265);
outline-offset: 2px;
box-shadow: 0 0 0 2px #ffffff;
}
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: #fff; color: #1a1c24; padding: 13px 20px; border: 2px solid oklch(0.40 0.10 265); border-radius: 0 0 12px 0; font-weight: 500; text-decoration: none; }
.skip-link:focus { left: 0; }
/* The policy sidebar is sticky on desktop only. On a short viewport a sticky
sidebar taller than the screen strands its lower links out of reach. */
@media (max-width: 760px) {
[data-policy-nav] { position: static; top: auto; }
}
/* WCAG 2.2 Target Size, taken at 44x44 rather than the 24x24 minimum.
An overlay pseudo-element, not padding offset by a negative margin: the
padding has to be derived from each element's own line box to land on
exactly 44px, and the nav, the top bar and the policy sidebar have three
different font sizes — the first attempt produced 42px, 39px and 44px from
the same intent. The overlay is centred on the link and is exactly 44px
whatever the text does, and being absolutely positioned it cannot move the
layout by construction. Desktop is untouched: this is inside the query. */
@media (max-width: 760px) {
.tap { position: relative; }
.tap::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
min-width: 44px;
height: 44px;
}
/* Stacked or wrapping link lists need the gap opened up too, otherwise the
44px hit areas overlap each other. */
.tapstack { row-gap: 26px; }
}