/* ============================================================================
YOTA HUB — Sitewide mobile safety patches
----------------------------------------------------------------------------
Two fixes baked into one tiny stylesheet, loaded on every page:
1) iOS Safari auto-zoom prevention
iOS Safari zooms the viewport when the user taps an whose
font-size < 16px, and the zoom STICKS across navigations. We force
every text-style input to >= 16px on small screens. Real users never
see the change because most form CSS already targets >= 16px on mobile.
2) Horizontal overflow lock
Any single child element that's even 1px wider than the viewport will
cause the entire page to shift right and the fixed nav to appear
"inset" with content bleeding off the right edge. Defense in depth:
lock body to its viewport width and prevent horizontal scroll.
Loaded BEFORE other styles so any page-specific CSS can override.
============================================================================ */
/* iOS Safari quirks: 100vw sometimes exceeds visible width due to scrollbar
accounting, and overflow-x:hidden on body alone doesn't always clamp.
Set it on BOTH html and body, use 100% (parent-relative) instead of 100vw,
and add position:relative so the constraint actually applies. */
html, body {
width: 100%;
max-width: 100%;
overflow-x: hidden;
position: relative;
}
/* Belt-and-suspenders: any direct child of body that tries to escape gets
clamped. Common offenders: long-text headers, wide hero cards. */
body > * {
max-width: 100%;
}
/* ============================================================================
CSS Grid / Flex intrinsic-sizing fix (the BIG one)
----------------------------------------------------------------------------
The default minimum size of a grid or flex item is `min-content` — the
width of its widest unbreakable child. When JS injects a long URL, a wide
image, or an Orbitron-font number, that child forces the grid TRACK to
widen past `1fr`'s intended size, which pushes the entire page wider than
the viewport. `overflow-x: hidden` only masks the visual scroll; the
layout is still oversized internally, which makes fixed elements look
inset and content cards extend past the right edge.
The cure: force every element to allow itself to shrink to zero. This is
a well-known fix and doesn't break anything intentional — buttons, inputs,
and images all keep their explicit dimensions.
============================================================================ */
@media (max-width: 1080px) {
body * {
min-width: 0;
}
/* Allow long unbroken strings (URLs, model numbers, hex codes) to wrap
instead of forcing a wider parent. */
body {
overflow-wrap: break-word;
word-wrap: break-word;
}
/* Images, videos, embeds: never wider than container. */
img, video, iframe, svg, canvas {
max-width: 100%;
height: auto;
}
}
@media (max-width: 760px) {
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input:not([type]),
textarea,
select {
font-size: 16px !important;
}
/* =====================================================================
SLIM MOBILE NAV — match the homepage's top-bar dimensions exactly.
---------------------------------------------------------------------
Lives in this render-blocking stylesheet (not in mobile-nav.js) so
the styles apply BEFORE first paint. Otherwise users see a brief flash
of the original taller nav before defer'd JS runs and shrinks it.
===================================================================== */
/* Outer