/* ========================================================================== Currency selector in the mobile hamburger menu ========================================================================== Companion to customirish_mobile_currency_menu_item() in functions.php, which appends Aelia's currency widget to the burger panel as the last menu item. Everything here is scoped to `#primary_menu--mob .ci-currency-mobile`. The desktop switcher in the top utility bar is a second, separate instance of the same widget and must not move: it is styled by an Elementor Custom Code snippet (post 10518, `header .wc_aelia_cs_currency_selector …`) plus the "Currency switcher" block in theme-type.css, and both of those are written for a dark green bar. The id in every selector below is what keeps the two apart, and is also what wins against theme-type.css's `!important` rules without needing a higher !important of its own — an id beats two classes. MEASURED BASELINE (staging, 390 x 844, panel open, before this file): burger panel .......... ul.elementor-nav-menu, 300px wide, white, padding 100px 20px, overflow-y: auto, height 100vh top-level menu link ... 19.2px EB Garamond 400, #5E7775, padding 0 0 21px menu row height ....... 50px last row ("Blog") ..... ends at y=349, so ~495px of empty panel below it -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- The row itself -------------------------------------------------------------------------- Every other item in this menu is an , and the panel's spacing all hangs off `#primary_menu--mob nav ul li a { padding: 0 0 21px }` in snippet 10518. This item has no , so it would collapse to its line box and sit tight under "Blog" with no rhythm. The margin and the rule above it are what make it read as a related-but-separate control rather than a sixth nav link. -------------------------------------------------------------------------- */ #primary_menu--mob .ci-currency-mobile { margin-top: 8px; padding-top: 20px; border-top: 1px solid #C9DCD1; /* the header's own hairline colour */ list-style: none; } /* Announced as "Currency", not shown — the closed label already says which currency is active, and a visible caption would be the only non-link text in the panel. Standard clip pattern rather than display:none, which would take it away from screen readers too. */ #primary_menu--mob .ci-currency-mobile .ci-currency-mobile__label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Aelia's own `padding: 10px 0` on the root would double up with the row spacing above. */ #primary_menu--mob .ci-currency-mobile .wc_aelia_cs_currency_selector { padding: 0; width: 100%; max-width: 100%; } /* -------------------------------------------------------------------------- Closed state — match the menu links it sits under -------------------------------------------------------------------------- Snippet 10518 paints this widget for the dark green utility bar: header … .selected_currency .currency_name { color: #fff } header … .selected_currency:before { border-color: #fff } The burger panel is WHITE, and this instance is inside
too, so without the two overrides below the label and the caret are white on white — invisible, not merely mis-styled. This is the single most load-bearing thing in this file. 19.2px, not the 19.6px theme-type.css sets for the desktop switcher: in the bar it is matching "Help" and the account link, here it is matching the menu links beside it, which measure 19.2px (--fs-body). The 12px block padding takes the row from a 31px line box to ~55px, which clears the 44px minimum tap target. `padding-right` keeps clear of the caret, which snippet 10518 parks 12px in from the right edge. -------------------------------------------------------------------------- */ #primary_menu--mob .ci-currency-mobile .wc_aelia_cs_currency_selector .selected_currency { padding: 12px 32px 12px 0; border: 0; width: 100%; max-width: 100%; } #primary_menu--mob .ci-currency-mobile .wc_aelia_cs_currency_selector .selected_currency .currency_name { color: #5E7775; font-size: var(--fs-body, 1.2rem) !important; line-height: 1.6; } #primary_menu--mob .ci-currency-mobile .wc_aelia_cs_currency_selector .selected_currency:before { border-color: #5E7775; } /* The flag is `display: none` everywhere under
, but `.currency_name` still ships `margin-left: 10px` to clear it — which pushed the label 10px right of every menu link above it. */ #primary_menu--mob .ci-currency-mobile .wc_aelia_cs_currency_selector .currency_name { margin-left: 0; } /* -------------------------------------------------------------------------- Open state — in flow, not absolutely positioned -------------------------------------------------------------------------- THIS IS THE CHANGE THAT MAKES IT WORK AT EVERY SCREEN SIZE, and it is worth knowing why before anyone "restores" the plugin's positioning. Aelia ships `.dropdown { position: absolute; top: calc(100%) }` and its JS (src/js/frontend/common/build/index.js, set_dropdown_position) measures the panel against `window.innerHeight` and flips it above the trigger when it would fall off the bottom of the WINDOW. That logic knows nothing about the burger panel, which is a fixed, full-height overlay whose
    is its own scroll container (`overflow-y: auto`, snippet 10518) inside a `nav { overflow: hidden }`. At 390 x 844 an absolute panel has ~495px of empty white below the last item and looks fine. Rotate the same phone to 844 x 390 and the list ends 41px from the bottom of the scroll box: the panel either flips up over the menu or is clipped by the nav, depending on which measurement wins. Static positioning sidesteps all of it. The panel becomes the last block in a list that already scrolls, so it can never be clipped and never needs to flip, at any viewport. The plugin's slideDown/slideUp still animate height normally; the inline top/bottom its JS writes are simply inert on a static box. The three width declarations undo theme-type.css's `width: max-content !important; min-width: 100% !important` — sizing to the longest row is right for a shrink-to-fit trigger in the desktop bar, and wrong for a full-width row in a 260px panel. -------------------------------------------------------------------------- */ #primary_menu--mob .ci-currency-mobile .wc_aelia_cs_currency_selector .dropdown { position: static; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin-top: 4px; padding: 4px 0; border: 0; background-color: #F6F6F4; box-shadow: none; } /* 190px of rows at ~48px each is under four, and there are exactly four currencies — so let the list run its full height and leave the scrolling to the panel itself. */ #primary_menu--mob .ci-currency-mobile .wc_aelia_cs_currency_selector .dropdown .currencies { max-height: none; margin: 0; overflow: visible; } /* `.option`, not `li.option`: the rows are
    s by the time they reach the page — functions.php renames every ul/li in this widget so SmartMenus does not walk off the top of the document on the nested list. The note there has the detail. 12px block padding for the same 44px tap-target reason as the closed row. The 3px left border is transparent here so the selected row below can turn it gold without the text shifting sideways. */ #primary_menu--mob .ci-currency-mobile .wc_aelia_cs_currency_selector .dropdown .option { padding: 12px 12px 12px 9px; border-left: 3px solid transparent; font-size: var(--fs-body, 1.2rem) !important; line-height: 1.6; color: #5E7775; } #primary_menu--mob .ci-currency-mobile .wc_aelia_cs_currency_selector .dropdown .option.selected { border-left-color: #C7A550; background-color: #FFFFFF; } /* The plugin's hover tint is #f5f5f5, which is invisible against the #F6F6F4 panel this file gives the open list. */ #primary_menu--mob .ci-currency-mobile .wc_aelia_cs_currency_selector .dropdown .option:hover { background-color: #FFFFFF; }