/* ════════════════════════════════════════════════════════════════════════════ WaterWiseKids mobile v4 — WWK-MOBILE-FULL-019 (r1) Requested by /assets/js/main.js at <=768px (on load, or when a wider session narrows). Every layout rule is inside @media (max-width:768px) AND scoped to html.wwk-v4. That class is added only by wwk-v4.js, and only after this stylesheet has applied and the v4 navigation is built; until then (or if a file fails) the existing navigation stays. No HTML file changes: v4 chrome and task blocks are added by /assets/js/wwk-v4.js; page text, links, JSON-LD, data-cta hooks, school contacts and the near-me panel stay as served. While active on phones it hides (never deletes) the injected search pill, the sticky category-icon bar (it sat at top:48px under the 72px sticky header, half-clipping the icons while scrolling), the stats chips and the 5-link injected bottom bar; replaced by a non-sticky topic row, a 56px app bar, a tab bar and a modal More sheet. html.wwk-v4.v4-full (set only when v4 activates before the first contentful paint) also enables the content restyles (home task cards, stats chips hidden, article prose, related rows, school cards). When v4 arrives after the page has painted, those wait for the next page view so content on screen never jumps; the chrome and the retirement of the clipped category bar still apply. ════════════════════════════════════════════════════════════════════════════ */ /* Load probe read by wwk-v4.js: the layer activates only once this rule has applied. */ :root { --wwk-v4-css: 1; } /* Anything v4 built stays out of the page whenever the layer is not active. */ html:not(.wwk-v4) .v4-tabbar, html:not(.wwk-v4) .v4-appbar-search, html:not(.wwk-v4) .v4-block, html:not(.wwk-v4) .v4-home-states, html:not(.wwk-v4) .v4-toc, html:not(.wwk-v4) .v4-lessons-card, html:not(.wwk-v4) dialog.v4-sheet { display: none !important; } @media (max-width: 768px) { html.wwk-v4 { --v4-brand-900: #0c4a6e; --v4-brand-700: #0369a1; --v4-brand-600: #0284c7; --v4-brand-100: #dbeffe; --v4-brand-50: #eff8ff; --v4-teal-700: #0f766e; --v4-ink: #111827; --v4-text: #1f2937; --v4-muted: #4b5563; --v4-line: #e5e7eb; --v4-surface-2: #f6f8fa; --v4-tap: 44px; --v4-r: 12px; --v4-r-pill: 999px; --v4-appbar-h: 56px; --v4-tabbar-h: 60px; --v4-safe-b: env(safe-area-inset-bottom, 0px); --v4-header-h: 56px; /* measured by wwk-v4.js */ scroll-padding-top: calc(var(--v4-header-h) + 8px); scroll-padding-bottom: calc(var(--v4-tabbar-real, calc(var(--v4-tabbar-h) + var(--v4-safe-b))) + 8px); /* A8: focus never lands under the tab bar */ } /* ── retired injected elements: hidden only while v4 is active, so they return on fallback. The category-icon bar is never sticky under v4 (it was clipped under the header); with the full design it and the search pill are hidden. When v4 arrived after paint they stay in place, un-stuck, until the next page view, so removing them does not jump the page. */ html.wwk-v4 .mobile-category-bar { position: static !important; top: auto !important; } html.wwk-v4 .mobile-bottom-nav, html.wwk-v4.v4-full .mobile-category-bar, html.wwk-v4.v4-full .mobile-app-search-header, html.wwk-v4.v4-full .stats-bar { display: none !important; } /* ── App bar: same

, 56px, logo + search + menu ───────────────────────── */ html.wwk-v4 header > .container > nav, html.wwk-v4 header > nav { height: var(--v4-appbar-h) !important; min-height: var(--v4-appbar-h) !important; gap: 4px !important; } html.wwk-v4 header .nav-logo { font-size: 1.0625rem !important; font-weight: 700 !important; margin-right: auto !important; } html.wwk-v4 .v4-appbar-search { display: inline-flex; align-items: center; justify-content: center; width: var(--v4-tap); height: var(--v4-tap); flex: none; border: 0; background: transparent; color: var(--v4-ink); border-radius: var(--v4-r-pill); padding: 0; cursor: pointer; } html.wwk-v4 .v4-appbar-search:focus-visible, html.wwk-v4 .hamburger:focus-visible { outline: 3px solid var(--v4-brand-700); outline-offset: 2px; } /* the old dropdown never opens under v4: the hamburger opens the More sheet instead */ html.wwk-v4 nav.mobile-open .nav-links { display: none !important; } /* ── Tab bar ─────────────────────────────────────────────────────────────────── */ html.wwk-v4 body { padding-bottom: var(--v4-tabbar-real, calc(var(--v4-tabbar-h) + var(--v4-safe-b))) !important; } /* measured by wwk-v4.js */ html.wwk-v4 .v4-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 210; display: grid; grid-template-columns: repeat(5, 1fr); min-height: var(--v4-tabbar-h); padding: 0 0 var(--v4-safe-b); margin: 0; background: rgba(255,255,255,.98); border-top: 1px solid var(--v4-line); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); } html.wwk-v4 .v4-tabbar a, html.wwk-v4 .v4-tabbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: var(--v4-tabbar-h); padding: 6px 2px; margin: 0; border: 0; border-radius: 0; background: transparent; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.2; letter-spacing: 0; color: var(--v4-muted) !important; text-decoration: none !important; white-space: nowrap; } html.wwk-v4 .v4-tabbar svg { width: 24px; height: 24px; flex: none; } html.wwk-v4 .v4-tabbar [aria-current="page"] { color: var(--v4-brand-700) !important; } html.wwk-v4 .v4-tabbar [aria-current="page"] span { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; } html.wwk-v4 .v4-tabbar a:focus-visible, html.wwk-v4 .v4-tabbar button:focus-visible { outline: 3px solid var(--v4-brand-700); outline-offset: -3px; } html.wwk-v4 .v4-tabbar .lbl-short { display: none; } @media (max-width: 374px) { html.wwk-v4 .v4-tabbar .lbl-long { display: none; } html.wwk-v4 .v4-tabbar .lbl-short { display: inline; } } @media (max-height: 480px) and (orientation: landscape) { html.wwk-v4 .v4-tabbar { display: none; } html.wwk-v4 body { padding-bottom: 0 !important; } html.wwk-v4 { scroll-padding-bottom: 0; } } /* ── Sheets (native