/* ============================================================
* Mobile + PWA enhancements
* ============================================================
* Loaded from every page via includes/components/pwa_head.php.
*
* The goal isn't to redo the site's responsive work — each
* section already has its own breakpoints in home.css and
* home-index.css — it's to patch the cross-cutting issues
* that become visible when the site is installed to the
* home screen and launched as a standalone app:
*
* - iPhone notch / status-bar overlap
* - iOS auto-zoom on input focus
* - touch targets smaller than Apple's 44px guideline
* - horizontal-scroll strips that clip on very narrow
* phones (stats-strip, sections-nav, feed-tabs)
* - tap-highlight flashing on interactive elements
* ========================================================== */
:root {
--nf-safe-top: env(safe-area-inset-top, 0px);
--nf-safe-bottom: env(safe-area-inset-bottom, 0px);
--nf-safe-left: env(safe-area-inset-left, 0px);
--nf-safe-right: env(safe-area-inset-right, 0px);
}
/* iOS Safari inflates text on landscape rotation. Disable that so
fonts stay the size we designed them at. */
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
/* Match the themed background so back-navigation never shows a
white canvas between the cached paint and the style bundle. */
background-color: var(--bg, #faf6ec);
}
[data-theme="dark"] html,
html[data-theme="dark"] {
background-color: var(--bg, #0f1220);
}
/* Neutralise the blue tap-flash so interactions feel native. */
* {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
/* Allow the header's dark gradient to reach the notch, but pad
any full-bleed bottom bar so it clears the iPhone home line. */
padding-bottom: var(--nf-safe-bottom);
}
/* ---- iOS input auto-zoom guard --------------------------------
Safari on iPhone zooms any /