/* ============================================================ P.E.STYLE — header CSS fix v1.8.7 Bundled with the P.E.STYLE Site plugin. Loads on EVERY page (the Elementor header template is global, unlike site.css/editorial.css which are split by page type). Deploy: WP.com GitHub Deployments (push to main -> prod). ------------------------------------------------------------ Mobile audit 2026-09-15: 1. The mobile header was 3 stacked full-width rows (social icons / logo / nav-toggle), each an Elementor column that auto-stacks on mobile — an oversized band before content, and the toggle row was `position:fixed` with a transparent background so it overlapped article text/photos on scroll. 2. Kava's `.screen-reader-text` (post-navigation prev/next links) wasn't actually clipped off-screen -> its text rendered as a second, duplicate visible label. Follow-up A (Sum, comparing against ELLE): merge social icons + logo onto ONE row instead of two, move the hamburger to the top-left corner of that row, scroll away with the page instead of staying sticky/fixed. Follow-up B (Sum, design-balance pass — measured popbee.com's mobile header for proportion): sized every icon consistently (~20px), dropped the hamburger's background pill/shadow, and collapsed doubled section+container padding down to ~90px total. Follow-up C (Sum, still not happy — logo was off-centre and smaller than the social icons, and the hamburger sat on a different vertical line): logo now `position:absolute` at left:50% (true screen-centre, independent of how wide the side content is — flexbox space-between can't do this once the two sides are unequal width), social icons moved to the right (justify-content:flex-end) mirroring the hamburger's left slot, logo bumped to 24px (was tied at 20px with the icons, read as undersized), and the toggle re-measured against row1's actual content box (not the header wrapper's, which still had ~10px of dead space baked in) so all three sit on the same baseline. Follow-up D (Sum — mobile should read like desktop, where the logo is clearly the dominant mark, not level with the social icons): logo up again to 34px (desktop's own logo:icon ratio is ~2.7x; 24px against 20px icons only read 1.2x), social icons and the hamburger both dropped to 16px so the contrast holds, toggle's `top` re-measured to row1's new taller centre (29px). ============================================================ */ /* ---- 1 — mobile-only: single-row header, balanced against a real editorial reference (popbee.com) and precisely aligned. a) collapse the doubled section+container padding. b) logo: true screen-centre via absolute positioning, sized up slightly (24px) so it doesn't read as smaller than the 20px social icons. c) social icons: pushed to the right edge, sized to match the hamburger (20px) — mirrors the hamburger's left slot. d) neutralize every positioned ancestor between the nav section and the toggle button so `position:absolute` on the toggle resolves against the header wrapper (normal in-flow placement, scrolls away with the page), then pin its `top` to row1's actual measured content centre (22px) rather than 50% of the header wrapper, whose box still has ~10px of collapsed-menu dead space the toggle's own 50% doesn't account for. ---- */ @media (max-width:768px){ .elementor-9{ position:relative !important; } .elementor-element-7d089f95{ padding:0 !important; } .elementor-element-7d089f95 > .elementor-container{ position:relative !important; flex-wrap:nowrap !important; align-items:center !important; justify-content:flex-end !important; padding:12px 16px 12px 44px !important; min-height:0 !important; } .elementor-element-7d089f95 > .elementor-container > .elementor-column{ width:auto !important; flex:0 0 auto !important; min-width:0 !important; } /* logo column: true centre, independent of the side content's width */ .elementor-element-7d089f95 > .elementor-container > .elementor-column:nth-child(2){ position:absolute !important; left:50% !important; top:50% !important; transform:translate(-50%,-50%) !important; } .elementor-element-7d089f95 img{ max-width:none !important; width:auto !important; height:34px !important; } .elementor-element-7d089f95 .elementor-icon-list-items, .elementor-element-7d089f95 .elementor-social-icons-wrapper{ flex-wrap:nowrap !important; } .elementor-element-7d089f95 .elementor-social-icon{ width:16px !important; height:16px !important; font-size:16px !important; } .elementor-element-705d84eb{ position:static !important; padding:0 !important; min-height:0 !important; border:none !important; background:transparent !important; box-shadow:none !important; } .elementor-element-705d84eb .elementor-container, .elementor-element-705d84eb .elementor-column, .elementor-element-705d84eb .elementor-widget-wrap, .elementor-element-705d84eb .elementor-widget-container, .elementor-element-705d84eb .elementor-nav-menu--toggle{ position:static !important; } .elementor-element-705d84eb .elementor-menu-toggle{ position:absolute !important; top:29px !important; left:16px !important; right:auto !important; margin:0 !important; z-index:20 !important; width:auto !important; height:auto !important; padding:0 !important; background:transparent !important; box-shadow:none !important; } .elementor-element-705d84eb .elementor-menu-toggle svg{ width:16px !important; height:16px !important; } } /* ---- 2 — restore the standard WP core screen-reader-text clip. Site-wide: this a11y class is used in several theme templates, not just post-navigation. ---- */ .screen-reader-text{ position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }