/* ========================================================================= RESPONSIVE LAYER - Uny WordPress Theme ========================================================================= Additive override layer. It never edits main.css or woocommerce.css - those are treated as read-only. This file is enqueued LAST, so equal-specificity rules here win the cascade. ------------------------------------------------------------------------- BREAKPOINT CONTRACT - the only tiers allowed in this file ------------------------------------------------------------------------- T1 <=1200 laptop, large tablet landscape T2 <=1024 tablet: iPad Pro portrait 1024, Air 820, mini 744, iPad 810 ^ BURGER MENU STARTS HERE T3 <=768 large phone, phone landscape, classic iPad portrait T4 <=576 phone T5 <=380 narrow phone: iPhone SE 375, Galaxy S 360 Why max-width rather than Bootstrap's mobile-first min-width: the existing base is desktop-first - base rules describe desktop and narrowing happens through max-width. Flipping that would mean rewriting the base, which is not allowed here. Mixing min-width tiers into a max-width base also creates dead zones where neither rule applies. Why whole pixels rather than 991.98px or em: the base already uses whole px (1024, 768, 576, 480). A 991.98 boundary next to the existing 1024 would leave 992-1024 covered by neither the old nor the new rule. ORDER OF MEDIA BLOCKS IS LOAD-BEARING: 1200 -> 1024 -> 768 -> 576 -> 380. Equal specificity means the last matching rule wins, so a wider block placed after a narrower one would silently override it on small screens. ------------------------------------------------------------------------- ON !important ------------------------------------------------------------------------- Used only where the base already uses !important (layout-critical width / height / display), and every occurrence names the rule it defeats. Nowhere else. ========================================================================= */ /* ------------------------------------------------------------------------- Gutter token ------------------------------------------------------------------------- One variable drives container padding, mirroring Bootstrap's --bs-gutter-x. Held at 24px on every tier, per the user's instruction: the side inset should not shrink on narrow screens. The token previously stepped 24 -> 20 -> 16 -> 12, which made the theme's pages sit at a different inset than the plugin's sections (those use `var(--ewub-inset)`, a flat 24px), so a page mixing theme chrome with builder sections had two different left edges. One value removes that. The token is only read by `.ewut-container` and `.ewut-container-fluid` below, so editing the ladder here is the whole change - nothing else depends on the smaller values. */ :root { --ewut-gutter: 24px; } @media (max-width: 1024px) { :root { --ewut-gutter: 24px; } } @media (max-width: 768px) { :root { --ewut-gutter: 24px; } } @media (max-width: 380px) { :root { --ewut-gutter: 24px; } } /* ------------------------------------------------------------------------- Stepped container ------------------------------------------------------------------------- The base container is single-step: max-width 1200px with a fixed padding and one media block for narrow screens. Below the widest tier the cap is dropped so the container is full width plus gutter - the same thing Bootstrap does below its smallest tier. */ .ewut-container { --ewut-container-max: 1200px; width: 100%; max-width: var(--ewut-container-max); margin-inline: auto; padding-inline: var(--ewut-gutter); } @media (max-width: 1200px) { .ewut-container { --ewut-container-max: 100%; } } /* Always full width with the same gutter. No bare .container-fluid: that name belongs to Bootstrap, WooCommerce themes and many plugins, and shipping it in a marketplace product creates collisions the buyer cannot debug. */ .ewut-container-fluid { width: 100%; max-width: none; margin-inline: auto; padding-inline: var(--ewut-gutter); } .ewut-container-fluid--flush { padding-inline: 0; } /* ------------------------------------------------------------------------- Images never exceed their box ------------------------------------------------------------------------- Checked: main.css has no global img rule, so an image whose intrinsic width is wider than the viewport pushes the document out and creates horizontal scroll. This is an addition, not a replacement. */ img { max-width: 100%; height: auto; } /* ========================================================================= BURGER MENU ========================================================================= Two confirmed defects in the theme, both verified by reading the code: 1. The button is INVISIBLE. main.css contains exactly two rules for .ewut-site-header__burger: .ewut-site-header__burger { display: none } @media (max-width: 1024px) { .ewut-site-header__burger { display: flex } } and nothing else - no width, no height, no flex-direction, no background reset, and not a single rule for the three empty elements the markup puts inside it. The bars were never drawn, so even when display:flex kicked in the visitor saw an empty button. Geometry below is taken from the plugin's working burger so the two look identical. 2. The button carries a second class, .ewut-nav__burger, which is not styled anywhere in the theme - but main.js binds a delegated handler to it that looks for a .ewut-nav ancestor. The site header has no .ewut-nav, so that handler found nothing while still toggling .is-open on the button, fighting the real handler. The real one (fixed separately in main.js to use closest() instead of a mismatched id) is now the single working path; this file styles only .ewut-site-header__burger, so the stray class has no visual effect. The submenu accordion markup (.ewut-submenu-toggle) is injected by assets/js/ewut-nav-mobile.js - submenus open on :hover in the base, which never fires on a touch device, leaving second and third level items unreachable. ========================================================================= */ .ewut-site-header__burger { flex-direction: column; justify-content: space-between; align-items: stretch; width: 24px; height: 18px; background: none; border: none; cursor: pointer; padding: 0; flex-shrink: 0; margin-left: auto; position: relative; } /* Touch target: the visible box is 24x18, but the tappable area has to be at least 44x44. A pseudo-element grows the hit area without changing the bars. */ .ewut-site-header__burger::after { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } .ewut-site-header__burger span { display: block; width: 100%; height: 2px; background: var(--ewut-uny-dark); border-radius: 2px; transition: transform 0.25s, opacity 0.25s; } .ewut-site-header__burger.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .ewut-site-header__burger.is-open span:nth-child(2) { opacity: 0; } .ewut-site-header__burger.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* Dark header: dark bars on a dark background are invisible. */ .ewut-site-header.ewut-bg-dark .ewut-site-header__burger span, .ewut-site-header--dark .ewut-site-header__burger span { background: var(--ewut-uny-white); } /* The chevron injected into each submenu link only belongs to the mobile panel, so it is hidden by default and switched on inside the burger tier. Order is deliberate: media queries add no specificity, so a `display: none` written AFTER the tier would silently kill it on mobile. */ .ewut-nav__chevron { display: none; } @media (max-width: 1024px) { /* The header must be a containing block, otherwise the absolutely positioned panel escapes to . .ewut-site-header is already sticky, which creates one, but relative is stated explicitly so the panel does not depend on a Customizer setting that might change position. */ .ewut-site-header { position: relative; } .ewut-site-header__nav { display: none; } /* Brand: icon only. The site name is dropped because the header row has to fit the mark, both action buttons and the burger; with the text in place the "Demo" button was overlapping it. Same breakpoint as the burger, so the text disappears exactly when the row switches to its compact arrangement. `display: none` rather than a visually-hidden clip: the name is still in the logo's alt text and in the

markup, so nothing is lost for screen readers or for SEO. */ .ewut-site-header__logo-text { display: none; } /* Without the text the flex gap between icon and name is dead space that shifts the mark off the container's left edge. */ .ewut-site-header__logo--icon-text { gap: 0; } /* ── Action buttons sit next to the burger, not next to the logo ── The row is `justify-content: space-between` (main.css:7829) over three visible boxes on mobile: brand, actions, burger (the nav is display:none here, so it takes no space). Space-between spreads the free room BETWEEN the boxes, and on top of that the burger carries `margin-left: auto` (:156 in this file) which eats whatever is left. Result measured at 425px: "Demo"/"Buy Now" started at x=92 - only 32px off the 36px logo - while the gap to the burger was 72px. The pair read as belonging to the logo instead of to the burger. Pushing the actions block right with `margin-left: auto` moves all the free space to the left of it, so the group lands beside the burger. The burger's own auto margin then has nothing left to claim. The 30px comes from the row's own `gap`, NOT from a margin on the actions block: the parent gap already sits between the two boxes, so a margin adds to it rather than replacing it (first attempt with `margin-right: 30px` measured 62px = 32 gap + 30 margin). Setting the gap itself keeps a single source for that distance. It also applies between brand and actions, which is harmless - the auto margin there is far wider than 30px anyway. */ .ewut-site-header__inner { gap: 30px; } .ewut-site-header__actions { margin-left: auto; } .ewut-site-header__burger { margin-left: 0; } /* Panel anchored to the bottom of the header rather than a hard-coded 64px: a taller header (bigger logo, .has-actions row) would otherwise leave a gap or overlap the content. Full height and opaque: a short menu used to leave the page showing through underneath, which reads as a broken overlay. dvh comes after vh so browsers without dvh keep the vh value and the mobile address bar does not make the panel jump. No padding of its own - the rows carry their 24px, and panel padding would push the first row's border away from the header edge. */ .ewut-site-header.is-open .ewut-site-header__nav { display: block; position: absolute; top: 100%; left: 0; right: 0; background: var(--ewut-uny-white); padding: 0; height: calc(100vh - 100%); height: calc(100dvh - 100%); /* Scrolling belongs to the list inside, not to this box: two nested scroll boxes mean the inner one only starts moving after the outer one bottoms out. */ overflow: hidden; z-index: 100; /* The base (main.css:8137) closes the panel with a bottom border and a drop shadow, which made sense for a short dropdown. A full-height panel has no bottom edge on screen, so both would only show up as a line and a smudge at the fold. */ border-bottom: 0; box-shadow: none; } .ewut-site-header.ewut-bg-dark.is-open .ewut-site-header__nav, .ewut-site-header--dark.is-open .ewut-site-header__nav { background: var(--ewut-uny-dark); } /* ── Row geometry ────────────────────────────────────────────────────── Four boxes and nothing else. Every earlier attempt failed because padding was spread across the