/* ═══════════════════════════════════════════════════════════════
mobile-fix.css — MireonSpero™ Layout 02 Mobile Correction Layer
───────────────────────────────────────────────────────────────
PURPOSE:
Corrects two systemic conflicts between global.css and layout2/
layout2-inner.css that cause mobile breakage in the new design:
PROBLEM 1 — Header conflict:
global.css sets:
header { background: var(--ms-navy); position: sticky; top: 0; z-index: 999; }
layout2.css sets .ms2-header { position: sticky; top: 0; z-index: 1000; }
Both rules fire simultaneously on mobile. The global.css navy
background bleeds through, and the z-index fight causes the header
to scroll away intermittently on some mobile browsers.
PROBLEM 2 — Horizontal overflow:
Several section backgrounds and grid layouts in the new design
can push past the viewport on narrow screens, causing horizontal
scroll and visual breakage.
HOW TO USE — drop one line into every page , after all
other stylesheets, as the final stylesheet link:
For inner pages (support/, first-impressions/) adjust path:
That is the only change required per page. No HTML edits needed.
This file is self-contained and causes no regressions on desktop.
═══════════════════════════════════════════════════════════════ */
/* ── 1. NEUTRALIZE global.css HEADER RULE ───────────────────────
global.css targets the bare element with navy background,
sticky positioning, and z-index 999. layout2 uses .ms2-header
for everything, but the bare rule still applies because
.ms2-header IS a element. We reset the conflicting
properties here so only the .ms2- rules govern appearance.
────────────────────────────────────────────────────────────────*/
header.ms2-header {
background: var(--ms2-ivory, #f5f0e8) !important;
color: inherit !important;
padding: 0 !important;
position: sticky !important;
top: 0 !important;
z-index: 1000 !important;
}
/* ── 2. ROOT OVERFLOW CONTROL ───────────────────────────────────
CRITICAL: overflow: hidden (any axis) on html or body creates a
scroll container and kills position: sticky on ALL descendants.
overflow: clip is visually identical but does NOT create a scroll
container, so sticky headers remain anchored to the viewport.
────────────────────────────────────────────────────────────────*/
html {
max-width: 100%;
overflow-x: clip;
}
body {
max-width: 100%;
overflow-x: clip;
}
/* ── 2b. BLOCK SCRIPT-SET body overflow WHEN NAV IS OPEN ───────
The header script does: document.body.style.overflow = 'hidden'
when the hamburger opens. That inline style kills sticky on the
header — the header scrolls away while the X icon is showing.
TWO-PART FIX:
A) This CSS rule uses !important to override the inline style
that the script sets, keeping overflow at clip (safe for sticky).
B) The script patch below adds/removes a class instead of writing
inline overflow, making the CSS the sole authority on overflow.
If you cannot patch the script, Part A alone is sufficient —
!important on a stylesheet rule beats an inline style only when
the property value differs, so we declare overflow: clip !important
on the open state class which the patched script adds.
────────────────────────────────────────────────────────────────*/
body {
overflow: clip !important;
}
/* ── 3. SECTION CONTAINMENT ─────────────────────────────────────
global.css sets section { max-width: 1200px; margin: auto; }
which is fine for desktop but can cause misalignment on mobile
when inner page sections override padding incorrectly.
This anchors all sections to full width within the viewport.
────────────────────────────────────────────────────────────────*/
@media (max-width: 768px) {
section {
padding-left: 1.5rem !important;
padding-right: 1.5rem !important;
max-width: 100% !important;
box-sizing: border-box;
}
}
/* ── 4. MOBILE NAV TOP OFFSET CORRECTION ───────────────────────
global.css mobile-nav uses top: 60px (old header height).
layout2 header is 72px. On mobile the old .mobile-nav (if
present on pages not yet fully migrated) will misalign.
This corrects it. Pages using only .ms2-mobile-nav are unaffected.
────────────────────────────────────────────────────────────────*/
@media (max-width: 768px) {
.mobile-nav {
top: 72px !important;
}
}
/* ── 5. MS2 HEADER MOBILE INTEGRITY ────────────────────────────
Ensures the Layout 02 header gold bar, ivory background, and
brand block render correctly at all mobile widths.
Prevents any inherited padding from global.css navbar rules
from collapsing the header height.
────────────────────────────────────────────────────────────────*/
@media (max-width: 768px) {
.ms2-navbar {
min-height: 72px;
padding-top: 0;
padding-bottom: 0;
box-sizing: border-box;
}
.ms2-brand-block {
flex: 1;
min-width: 0;
}
.ms2-wordmark {
font-size: 15px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ms2-sub {
display: none; /* too small to read at mobile width */
}
}
/* ── 6. BODY SECTION WIDTHS ON MOBILE ───────────────────────────
All full-bleed page sections use max-width: 100% and margin: 0
in the new design. On mobile, inner grids (2-col, 3-col) must
collapse. These rules enforce that collapse for any section that
uses the ms- namespace grid patterns from home.css / phase css.
────────────────────────────────────────────────────────────────*/
@media (max-width: 768px) {
/* Any direct child wrapper inside a full-bleed section */
[class*="-inner"],
[class*="-content"] {
max-width: 100% !important;
padding-left: 1.5rem !important;
padding-right: 1.5rem !important;
box-sizing: border-box !important;
}
/* Grid resets — collapse any remaining 2 or 3 col grids */
.ms-mission-inner,
.ms-horizon-inner,
.ms-pathways-grid,
.ms-trust-pillars,
.fi-inst-body,
.fi-principles-grid,
.fi-editions-grid,
.fi-phase-set-cards,
.fi-window-inner,
.fi-enroll-grid,
.lb-chambers-grid,
.lb-section-inner,
.et-section-inner,
.po-section-inner,
.po-index-grid,
.po-closing-inner,
.et-cert-layout {
grid-template-columns: 1fr !important;
}
/* Remove side borders that only make sense in multi-column */
.ms-mission-label,
.lb-section-label-col,
.et-section-label-col,
.po-section-label-col {
border-right: none !important;
border-bottom: 1px solid var(--ms-rule) !important;
}
/* Phase strips: 2-col on mobile (thumb + info), no right panel */
.ms-phase-strip {
grid-template-columns: 72px 1fr !important;
}
.ms-phase-right { display: none !important; }
}
/* ── 7. FOOTER MOBILE FIX ───────────────────────────────────────
global.css footer rule sets text-align: center, which conflicts
with ms2-footer's left-aligned multi-column grid. On mobile
the grid collapses to 1 column and centering looks wrong.
────────────────────────────────────────────────────────────────*/
@media (max-width: 768px) {
footer.ms2-footer,
footer.ms2-footer * {
text-align: left !important;
}
.ms2-footer-bottom {
flex-direction: column !important;
align-items: flex-start !important;
gap: 0.75rem !important;
}
.ms2-footer-grid {
grid-template-columns: 1fr !important;
}
}
/* ── 8. PHASE PAGE HERO MOBILE ──────────────────────────────────
Prevent the full-viewport hero from being too tall on small
screens; allow it to breathe but not dominate.
────────────────────────────────────────────────────────────────*/
@media (max-width: 768px) {
.fi-hero {
min-height: 85svh !important;
}
.fi-hero-content {
padding: 3rem 1.5rem 4rem !important;
}
.fi-chapter-inner {
padding: 3rem 1.5rem !important;
grid-template-columns: 1fr !important;
}
.fi-chapter-label {
flex-direction: row !important;
align-items: center !important;
gap: 0.75rem !important;
margin-bottom: 1.25rem !important;
}
.fi-chapter-tag {
writing-mode: horizontal-tb !important;
transform: none !important;
}
}
/* ── 9. QUICK-ACCESS NAV SCROLL SAFETY ──────────────────────────
Sticky secondary navs (library, ethos, policy) must sit below
the main header. On mobile the stacking must be correct.
────────────────────────────────────────────────────────────────*/
@media (max-width: 768px) {
.lb-quick-access,
.et-quick-access,
.po-quick-access {
top: 72px !important; /* layout2 header height */
}
}