/* ========================================================================== Canonical MOBILE header — CBS Business Solutions ONE shared definition for every page (EN root + HE /he/), both languages. Why this file exists: the mobile header/logo CSS had been copy-pasted inline into every inner page (3–20 drifted `.logo` rules each) plus separate copies in styles.css / styles-new.css / mobile-en.css. Sticky headers also broke because inner pages set `body{overflow-x:hidden}` (computed "hidden auto"), turning into its own scroll container so the sticky header rode off screen. This file replaces all of that at <=480px with a fixed 60px bar. Everything is scoped to @media (max-width: 480px) so DESKTOP IS UNTOUCHED. Selectors are `html[lang] .header ...` to tie the drifted inline rules' specificity; this file is linked LAST (before ) so it wins every tie by source order, and !important defeats the non-important base rules. ========================================================================== */ @media (max-width: 480px) { /* ---- Root cause 1: body must NOT be its own scroll container ---------- */ html { overflow-x: hidden !important; } body { overflow-x: visible !important; } /* Clear the fixed bar — only on pages that actually have the header (card pages / 404-style pages without a header are left untouched). */ body:has(header.header) { padding-top: 60px !important; } /* ---- The permanently pinned black bar --------------------------------- */ html[lang] header.header, html[lang] .header[role="banner"] { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; height: 60px !important; min-height: 60px !important; max-height: 60px !important; margin: 0 !important; padding: 0 !important; background: #1a1a1a !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) !important; z-index: 1000 !important; display: block !important; box-sizing: border-box !important; } html[lang] .header .nav-container { position: static !important; inset: auto !important; transform: none !important; width: 100% !important; max-width: 100% !important; height: 60px !important; min-height: 60px !important; margin: 0 !important; padding: 0 16px !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; overflow: visible !important; box-sizing: border-box !important; } /* ---- Canonical logo — identical on every page, LTR even on RTL --------- */ html[lang] .header .logo { position: static !important; inset: auto !important; transform: none !important; display: inline-block !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0.02em !important; line-height: 1 !important; text-transform: uppercase !important; color: #ffffff !important; white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; text-decoration: none !important; direction: ltr !important; unicode-bidi: isolate !important; flex: 0 1 auto !important; z-index: auto !important; } html[lang] .header .logo .cbs { display: inline !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; font-size: 1em !important; font-weight: 700 !important; letter-spacing: 0.02em !important; text-transform: uppercase !important; /* Brighter than the desktop #2563eb: at 14px on the #1a1a1a bar the CBS accent needs >=4.5:1 (this is ~4.6:1). Desktop keeps #2563eb (large text). */ color: #3b82f6 !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; } /* ---- Actions cluster (language selector + hamburger) on the bar ------- */ html[lang] .header .nav-actions { position: static !important; inset: auto !important; transform: none !important; display: flex !important; flex-direction: row !important; align-items: center !important; gap: 14px !important; margin: 0 !important; padding: 0 !important; flex: 0 0 auto !important; z-index: auto !important; } html[lang] .header .language-selector { display: inline-flex !important; align-items: center !important; gap: 6px !important; height: auto !important; margin: 0 !important; padding: 4px 6px !important; background: transparent !important; border: none !important; border-radius: 6px !important; color: #ffffff !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: 0.02em !important; cursor: pointer !important; } html[lang] .header .language-selector i, html[lang] .header .language-selector svg { font-size: 16px !important; color: #ffffff !important; } html[lang] .header .hamburger-menu { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; gap: 5px !important; width: 28px !important; height: 28px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; cursor: pointer !important; } html[lang] .header .hamburger-menu .hamburger-line { display: block !important; width: 24px !important; height: 2px !important; margin: 0 !important; background: #ffffff !important; border-radius: 2px !important; } /* ---- Desktop nav list hidden; hamburger drives the menu on mobile ----- */ html[lang] .header .nav-menu { display: none !important; } /* Opened mobile menu drops directly under the 60px bar. */ html[lang] .header .nav-menu.mobile-open, html[lang] .nav-menu.mobile-open { display: flex !important; position: fixed !important; top: 60px !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; width: calc(100vw - 24px) !important; max-width: 520px !important; max-height: calc(100vh - 76px) !important; overflow: auto !important; background: rgba(26, 26, 26, 0.96) !important; -webkit-backdrop-filter: blur(8px) !important; backdrop-filter: blur(8px) !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 0.5rem !important; padding: 1rem !important; border-radius: 0 0 14px 14px !important; z-index: 1001 !important; box-sizing: border-box !important; } html[lang] .nav-menu.mobile-open .nav-link { width: 100% !important; text-align: center !important; padding: 0.75rem 1rem !important; color: #ffffff !important; font-size: 1rem !important; } }