/* ============================================================================ header-mobile.css — centred brand stack on small screens ---------------------------------------------------------------------------- Loaded last in by CustomOutputRenderer::ThemeStylesheetLinks(), so it lands after res/style/layout-centered.css and can correct it without !important. What the theme does below 1000px (layout-centered.css): header padding: 1.2rem 36px 1.2rem 0 background: menu icon, center right header div.title-container display:flex; justify-content:space-between header span.website-tagline display:none The hamburger is a BACKGROUND IMAGE on
, not an element — the 36px right padding is what keeps the title clear of it. So there is nothing to re-position here: the icon stays exactly where the theme puts it, and the only thing needed is to stop the title sitting flush left and to bring the tagline back. Every rule is scoped to the mobile media query and prefixed with `body`, so the desktop layout is untouched and specificity beats the theme's own selectors without resorting to !important. ========================================================================= */ @media (max-width: 999px) { /* The theme reserves 36px on the right for the menu icon and 0 on the left. Centring inside that box would sit 18px left of the true centre, so the left side is given the same reserve. Longhand, to leave the theme's vertical padding alone. */ body header { padding-left: 36px; } /* From a single row (title flush left) to a centred stack. */ body header div.title-container { flex-direction: column; align-items: center; justify-content: center; text-align: center; } /* Back from display:none. Sized for a small screen rather than inheriting: the theme only ever gives the tagline a size in its desktop block. */ body header span.website-tagline { display: block; margin-top: 0.4rem; font-size: 0.62rem; line-height: 1.35; /* The font flavor sets 0.1em on span.website-tagline site-wide, which is tuned for the desktop size. At this size it reads loose and pushes the line toward wrapping, so it is eased off here only. Uppercase is left alone. */ letter-spacing: 0.06em; } /* A long tagline wraps rather than pushing the header wider. */ body header div.title-container, body header span.website-tagline { max-width: 100%; overflow-wrap: break-word; } }