/** * PunjabiTime News — Mobile header layout (mobile / tablet only, <= 1024px). * * Theme-native. Enqueued by functions.php (handle: punjabitime-mobile-header) * AFTER the other header stylesheets so its mobile-only rules win. Every rule * is wrapped in a max-width media query, so the DESKTOP header (> 1024px) is * NOT changed in any way. * * v0.2.8-clean — SINGLE logo system. The round Site Icon logo is printed * exactly once, in the centre brand group (.pt-brand-logo inside * .pt-brand-wrap, see header.php), and the base brand-lockup rules live in * punjabitime-header-mobile-nav.css. On mobile the layout is: * * [ ◯ logo PunjabiTime ] (centred brand group) [ Original | EN ] * tagline * * - The logo sits beside the wordmark as one centred brand group (same * lockup as desktop, just smaller). There is NO separate left-cluster * logo and NO Customizer ::after pseudo-logo, so a duplicate is * impossible. * - The top hamburger + search icons live in the fixed bottom nav, so the * whole left icon cluster is hidden here. Hiding .pt-masthead__left also * removes the legacy Customizer ".pt-masthead__left::after" pseudo-logo * (a display:none element generates no pseudo-elements). * - The GTranslate Original / English pill is pinned right and shrunk * ("English" -> "EN") so it never overflows or causes horizontal scroll. * * Does NOT change: the desktop header, the fixed bottom nav + its Menu button, * the slide-in drawer, dark mode, posts, the homepage, the footer, SEO, the * sitemap, plugins, or AdSense. */ @media (max-width: 1024px) { /* ---- MOBILE STICKY HEADER (v0.2.8-clean) ---- * Keep the compact masthead pinned to the top while scrolling on mobile / * tablet (<= 1024px). We make the WHOLE .pt-site-header sticky (not an inner * div) so its solid cream background spans the full viewport width — a sticky * .pt-container child would leave transparent side gutters that show the page * scrolling through. position:sticky (NOT a fixed overlay) keeps the header in * normal flow, so it reserves its own space: no layout jump, and it never * covers the top of the page content on load. * * - top:0 pins it to the viewport top once the page scrolls up to it. * - The relocated Breaking ticker lives inside this header (after the hidden * category nav, moved there by punjabitime-breaking-move.js), so it stays * visible and intact while pinned — the breaking bar is not broken. * - z-index 900 sits BELOW the fixed bottom nav (1000), the drawer overlay * (1100) and the slide-in drawer (1200) defined in * punjabitime-header-mobile-nav.css, so the menu drawer still opens cleanly * OVER the header; it sits above page content. * - The header is at the TOP edge and the bottom nav is fixed at the BOTTOM * edge, so they occupy opposite edges and can never overlap. * - No width / transform is added, so it cannot introduce horizontal scroll. * - The Original/EN pill and the Dark toggle live inside the header, so they * stay pinned and keep working. * * Desktop (> 1024px) is unaffected: the header stays in normal flow there. */ .pt-header--ft.pt-site-header { position: -webkit-sticky; position: sticky; top: 0; z-index: 900; } /* ---- Masthead: centred brand group on the left/centre, language right ---- */ .pt-header--ft .pt-masthead { display: flex !important; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; overflow-x: clip; /* final guard: the header row can never cause h-scroll */ } /* ---- Hide BOTH icon clusters on mobile ---- * Menu/Search/Home all live in the fixed bottom nav. Hiding the left * cluster (display:none) also kills the legacy Customizer * ".pt-masthead__left::after" pseudo-logo at the source, since a * display:none element renders no ::before/::after. */ .pt-header--ft .pt-masthead__left, .pt-header--ft .pt-masthead__right { display: none !important; } /* ---- CENTER: the single brand group (round logo + wordmark + tagline). * display:flex / centring / ordering come from the base brand-lockup rules * in punjabitime-header-mobile-nav.css; here we only let it fill the row * (so it centres in the space left of the language pill) and trim sizes. */ .pt-header--ft .pt-brand-wrap { flex: 1 1 auto; min-width: 0; /* allow the centre group to shrink (no overflow) */ column-gap: 10px; text-align: center; justify-self: auto; } /* Tighter logo<->wordmark gap inside the brand link on mobile. */ .pt-header--ft .pt-brand-link { column-gap: 10px; } /* Mobile logo size (overrides the 60px desktop size from the base rules). */ .pt-header--ft .pt-brand-logo img { width: 46px; height: 46px; transform: translateY(2px); } .pt-header--ft .pt-brand { font-size: clamp(19px, 5.2vw, 26px); line-height: 1.05; white-space: nowrap; } .pt-header--ft .pt-tagline { margin-top: 4px; font-size: 9.5px; letter-spacing: 0.10em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---- RIGHT: compact Original / English pill, inline on the row ---- * * The base rule centres this pill BELOW the wordmark; override it to sit * inline on the right of the row instead. */ .pt-header--ft .pt-masthead .pt-lang-toggle--mobile { display: inline-flex !important; order: 3; flex: 0 0 auto; position: static; justify-self: auto; margin: 0; } .pt-header--ft .pt-lang-toggle--mobile .pt-lang-btn { height: auto; padding: 4px 9px; font-size: 11px; line-height: 1.2; } /* Shorten ONLY the English label to "EN" on mobile so the pill stays narrow. * The real