has a min-content width driven by its cells
(e.g. the Typography demo table ≈360px), which can't shrink below the ~335px
mobile content band → it spills ~5px past the viewport (horizontal scroll on
the whole page). Mirror the §5.9 treatment: at mobile let the table
scroll horizontally WITHIN its column (display:block + overflow-x:auto) instead
of pushing the page. Desktop keeps display:table / width:100% untouched. Covers
the Typography demo AND any table an owner adds to a normal article. */
@media (max-width: 767.98px) {
.voy-typography table,
.voy-article-prose table,
.item-page .article-body table {
display: block;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
/* ===== Safari megamenu PAINT fix (JA Voyara) — the real root cause =====
`.voy-header` is `position:sticky` and carries `overflow-x:clip` (shared with
.voy-section/.voy-footer-inner to kill horizontal bleed). On Safari, an
element with `overflow-x:clip` + `overflow-y:visible` clips on BOTH axes, so
the desktop megamenu dropdown — absolutely positioned BELOW the 76px header —
is cropped to nothing: it stays in the DOM and is still clickable (you can see
the cursor and navigate), it just never paints. Chrome does not clip the
visible axis, so it only breaks on Safari. The header contains the dropdown,
so it must not clip: let it overflow on desktop (where the dropdown lives).
Mobile keeps the off-canvas menu + original clip. */
@media (min-width: 992px) {
.voy-header { overflow: visible !important; }
}
/* ── Megamenu active state: active dropdown/mega item styled like the parent ──
The active/current item inside an open dropdown should read like the top-level
parent's active state — the brand active colour (orange), NOT a muted/washed
tone (a fixed link-colour goes dark-on-dark inside the dark megamenu and looks
faded). Uses the same active var the parent uses, so it matches in light+dark. */
#t4-megamenu-mainmenu .mega-nav li.active > a,
#t4-megamenu-mainmenu .mega-nav li.current > a,
#t4-megamenu-mainmenu .dropdown-menu li.active > a,
#t4-megamenu-mainmenu .dropdown-menu li.current > a {
color: var(--mainnav-link-active-color) !important;
}