/* ===================================================================== Ad Agentur — Mobile App Navigation Ported from the approved interactive mockup. - Shows only at <= 1024px (tablet/phone). Desktop is untouched. - Uses transform/opacity/height only for animation (compositor-friendly). - Respects safe-area insets and prefers-reduced-motion. Icons: Font Awesome 4.7 (fas/fa-) + theme "Happy Icons" (hm hm-) — authors pick icons in the WP menu CSS-class field (see guide). ===================================================================== */ :root{ /* Brand core — the neutral, WCAG-AA default palette. Kept identical to AAMENU_Settings::neutral_mobile_colors() (and to the desktop surface's tokens.css) on purpose, so a fresh install looks coordinated with nothing configured. This block is a static fallback only: the plugin always prints an inline :root override with the effective values (neutral defaults, a preset, or per-site overrides) later in the document — see class-aamenu-mobile-render.php — so these exact values are what a visitor sees only if that inline override is ever blocked (e.g. a strict CSP with no 'unsafe-inline'), which is exactly why they must already be generic rather than any one site's brand colors. */ --aa-blue:#2a5f9e; --aa-blue-ink:#1d4877; --aa-blue-sub:#cfe0ef; --aa-blue-tint:#eef3f9; /* Semantic accents — deliberately narrow: green = "live / available right now" (status dot only) star = rating gold (trust line only) */ --aa-green:#4caf50; --aa-star:#c47f18; --aa-ink:#1f2933; --aa-muted:#52606d; --aa-line:#e3e6ea; --aa-bg:#f4f6f8; --aa-white:#fff; /* Bar/button theming — all overridable per-site from Appearance -> AA Menu -> Branding; these are just the shipped defaults. */ --aa-bar-bg:#ffffff; --aa-pill-text:#ffffff; --aa-hover-bg:#eceff1; --aa-radius-tile:16px; --aa-radius-pill:50px; --aa-btn-size:44px; --aa-ease:cubic-bezier(.16,1,.3,1); --aa-bar-h:84px; --aa-safe-b:env(safe-area-inset-bottom,0px); } /* Hide entire component at/above the breakpoint — the desktop mega menu takes over from there, so the two are never shown together. (The per-page inline #aa-mnav-bp style tracks a filtered breakpoint; this static default is 900.) */ @media (min-width:900px){ #aa-mnav-root{ display:none !important; } } /* The fixed .aa-bar sits on top of normal document flow, so without this the last ~84px of every page (footer content, last section) renders underneath it. Reserve that space at the same breakpoint the bar itself appears at. */ @media (max-width:899px){ body{ padding-bottom:calc(var(--aa-bar-h) + var(--aa-safe-b)); } } /* Borlabs Cookie's persistent "reopen consent settings" icon (shown after a choice is made, not just during the dialog) defaults to bottom:0;left:0 — a 72x72px hit area that lands almost exactly on top of our 44px menu button underneath it. This isn't a stacking-order problem (unlike the consent-blocking overlay handled above): the two occupy the same physical corner, so no z-index value fixes it, only moving one of them does. Floating it just above our bar (same corner, so it stays recognisable) rather than hiding it — a persistent way to reopen cookie settings is generally expected to stay reachable. .brlbs-cmpnt-widget.brlbs-bottom-0 (two classes) is needed to outrank Borlabs' own single-class .brlbs-bottom-0 utility, which loads after this stylesheet. */ @media (max-width:899px){ .brlbs-cmpnt-widget.brlbs-bottom-0{ bottom:calc(var(--aa-bar-h) + var(--aa-safe-b) + 8px) !important; } } /* That repositioned spot sits right where our sheet's bottom edge lands when open — and Borlabs' widget (z-index 999998) is still above our sheet (999991), so it would float on top of the open sheet's content. While the sheet is open it should sit behind it instead, same as any other page content would. A CSS :has()-based override here (matching the pattern above) reliably failed to take effect even with !important against a single non-important Borlabs rule — behaviour that shouldn't happen on plain cascade rules, so something about how/when Borlabs applies this specific style resists a static CSS override. Handled in JS instead (see openNav()/closeNav()), which sets this only exactly when needed and can be verified immediately rather than relying on cascade timing. */ /* Root wrapper is fixed and does not affect page layout (no CLS) */ /* Inherits the theme's own body font by default -- matches whatever site this is installed on with zero configuration. A per-site override (if one is set in Appearance -> Mobile Nav -> Branding -> Typography) is printed as a later, equal-specificity #aa-mnav-root rule and wins. */ #aa-mnav-root{ font-family:inherit; } #aa-mnav-root *{ box-sizing:border-box; } /* ---- RESET BOUNDARY ---- Themes (Kadence) and page builders (Elementor) ship blanket `button {}` / `a {}` rules that bleed into this component (e.g. a blue button background making the back-chevron invisible). Neutralise every interactive element here, then rebuild only what we style below. CRITICAL: the reset must carry ZERO specificity so every component class wins. `#aa-mnav-root :where(button, a)` still resolves to specificity (1,0,0) — the `#aa-mnav-root` ID sits outside the :where() — which still outranks single-class component rules like `.aa-morph` (0,1,0) and flattens them to display:inline/position:static. Wrapping `#aa-mnav-root` itself in :where() too drops the whole selector to (0,0,0) so component classes win. */ :where(#aa-mnav-root) :where(button, a){ all:unset; box-sizing:border-box; -webkit-tap-highlight-color:transparent; cursor:pointer; font-family:inherit; } :where(#aa-mnav-root) :where(button){ background:transparent; } /* all:unset resolves `appearance` to its initial value (auto), not none — it does NOT strip native OS widget chrome. Kadence explicitly ships `button{ appearance:button }` (specificity 0,0,1), which beats the zero-specificity :where() reset above, so iOS Safari kept rendering every