/* * ASTA Primary Menu — presentational styles. * * Mobile-first. Single desktop breakpoint at --asta-breakpoint (default * 1100px). All colors come from CSS custom properties emitted inline by * the renderer; fluid phone sizing via clamp(); zero !important except * where Elementor's own reset demands it (marked inline). */ /* ───────── Elementor wrapper normalisation ───────── * Force the asta_site_header Elementor widget to fill its container * row-width, regardless of whether the container happens to be * boxed vs full-width. Prevents the 8-items-wrapping-vertically case * we saw when e-con-boxed capped the content area too narrow. */ .elementor-widget-asta_site_header, .elementor-widget-asta_site_header > .elementor-widget-container { width: 100%; max-width: none; padding: 0; margin: 0; } /* * Break out of every Elementor/theme wrapper so the header spans the * full viewport width on mobile/tablet (prev: visible black strips on * left/right edges below the header because the outer * `

` had padding/constraint * from Elementor's theme-builder CSS that my :has() rule didn't reach). * `margin: 0 calc(50% - 50vw)` pushes the element outward by half the * viewport minus half its containing block, guaranteeing it touches * the viewport edges regardless of parent padding. */ header.elementor-location-header:has(.elementor-widget-asta_site_header) { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 0; } /* Also neutralise column-width caps + default padding on any parent * container rendering this widget — the migrator sets layout:full_width, * but older theme builder versions still emit `e-con-boxed` with its * own horizontal padding (visible as gaps at the viewport edges on * mobile/tablet). Force flush-to-edge. */ .elementor-element:has(> .e-con-inner > .elementor-widget-asta_site_header), .e-con:has(> .e-con-inner > .elementor-widget-asta_site_header) { --width: 100%; --content-width: 100%; width: 100%; max-width: none; padding: 0; margin: 0; } .elementor-element:has(> .e-con-inner > .elementor-widget-asta_site_header) > .e-con-inner, .e-con:has(> .e-con-inner > .elementor-widget-asta_site_header) > .e-con-inner { max-width: none; width: 100%; padding: 0; margin: 0; } /* ───────── Reset scoped to the header so we don't leak anywhere ───────── */ #asta-site-header, #asta-site-header *, .asta-mobile-drawer, .asta-mobile-drawer * { box-sizing: border-box; } #asta-site-header ul, .asta-mobile-drawer ul { margin: 0; padding: 0; list-style: none; } #asta-site-header a, .asta-mobile-drawer a { color: inherit; text-decoration: none; } /* * Button reset — covers BOTH the header and the drawer. The drawer * is re-parented to at runtime (to escape Elementor's fixed- * positioning containing blocks), so a selector scoped to * `#asta-site-header button` alone misses drawer buttons and they * pick up native browser chrome (blue focus fill, default padding). */ #asta-site-header button, .asta-mobile-drawer button { font: inherit; color: inherit; background: transparent; border: 0; padding: 0; cursor: pointer; -webkit-appearance: none; appearance: none; } /* * Suppress the browser-default focus outline on MOUSE/TOUCH clicks — * Chromium paints a blue ring on