/* WordPress integration, part 2 of 2. Split from wp-chrome.css only because the host refuses a single FTP write past ~13,600 bytes and leaves a ZERO-BYTE file when it does. Same purpose as part 1: bridges our markup to what WordPress or a plugin renders. Hand-maintained; extract.py does not generate either file. */ /* TranslatePress renders its own switcher markup, which we cannot restyle at source. These rules sit it into the footer's Contact column. It lives there rather than in the bottom bar because TRP opens its list downwards, and at the very bottom of the page that list ran off the viewport with no way to reach the languages. Selectors are TRP's public shortcode output (.trp-ls-shortcode-*). The pill is drawn on the ANCHOR, not on TRP's wrapper. Drawing it on the wrapper is what made it look wrong: TRP gives the anchor `margin-bottom:11px`, so a 36px label sat at the top of a 49px box and the bubble read as too tall and not centred. On the anchor the pill is exactly the size of what is in it. */ .foot-contact .trp_language_switcher_shortcode, .foot-contact .trp-language-switcher { display: inline-block; } /* TRP writes an inline `style="width:184px"` onto the current-language wrapper, and an inline style beats any author rule without !important — the competing declaration is in the markup, not in a stylesheet we can outrank. */ .foot-contact .trp-language-switcher-container .trp-ls-shortcode-current-language { width: auto !important; height: auto !important; padding: 0; background: none; border: 0; display: inline-block; } .foot-contact .trp-language-switcher, .foot-contact .trp-language-switcher-container { height: auto; width: auto; } .foot-contact .trp-language-switcher-container a { color: #cfcec9; font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .04em; margin: 0; /* TRP's 11px bottom margin is the off-centre bug */ padding: 8px 15px; display: inline-flex; align-items: center; gap: 8px; line-height: 1; } /* TranslatePress ships `.trp-language-switcher:hover .trp-ls-shortcode-current-language { visibility:hidden }` — it hides the CURRENT language while the menu is open, because its stock design drops the list on top of the trigger and the two would overlap. Ours opens ABOVE the pill instead, so hiding it just made "English" vanish the moment you moved the mouse onto it. Specificity 40 against their 30, so it wins on its own. */ .foot-contact .trp-language-switcher:hover .trp-ls-shortcode-current-language, .foot-contact .trp-language-switcher:focus .trp-ls-shortcode-current-language, .foot-contact .trp-language-switcher:focus-within .trp-ls-shortcode-current-language { visibility: visible; } .foot-contact .trp-ls-shortcode-current-language > a { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; } .foot-contact .trp-language-switcher-container a:hover { color: #fff; } .foot-contact .trp-language-switcher-container .trp-flag-image { width: 17px; height: auto; margin: 0; border-radius: 2px; display: block; } /* The expanded list. TRP's own `.trp-language-switcher:hover .trp-ls-shortcode-language` is specificity 30, the same as this was, and its stylesheet loads after ours — so the padding and max-height here were being silently overruled. The extra wrapper class lifts this to 40 and makes it stick. */ .foot-contact .trp_language_switcher_shortcode .trp-language-switcher-container .trp-ls-shortcode-language { background: #211d18; border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; padding: 6px; width: auto !important; min-width: 148px; max-height: 320px; overflow-y: auto; } .foot-contact .trp-ls-shortcode-language > a { border-radius: 8px; width: 100%; } .foot-contact .trp-ls-shortcode-language > a:hover { background: rgba(255, 255, 255, .08); } /* THE SWITCHER DOES NOT OPEN, and neither TRP's CSS nor ours could ever make it. TranslatePress writes `style="display:none; width:1969px"` INLINE onto the language list and relies on its own JavaScript to flip that display. That script is not enqueued on this site at all (document.scripts contains no trp file), so the list is permanently display:none. TRP's hover rule only sets `visibility` and `max-height`, which cannot beat an inline `display:none` — that is why every previous fix here looked correct and changed nothing. So open it from CSS alone, with !important, which is the only thing that outranks an inline declaration. No dependency on TRP's JS ever loading. */ .foot-contact .trp-language-switcher:hover .trp-ls-shortcode-language, .foot-contact .trp-language-switcher:focus-within .trp-ls-shortcode-language { /* a column, not a block: the anchors are inline-flex (so the flag and the label sit on one line together), which laid all 19 of them side by side in a 1667px strip 14px tall the moment the list became visible */ display: flex !important; flex-direction: column; visibility: visible !important; opacity: 1 !important; width: auto !important; /* TRP measured 1969px, which is the page, not the list */ min-width: 190px; /* An EXPLICIT height, not auto. With TRP's `height:1px` on the closed state the box refused to resolve auto against its own content — measured 14px tall with scrollHeight 525 — so the panel opened and showed one clipped row. A stated height plus overflow-y is immune to whatever is collapsing auto here. */ overflow-y: auto; position: absolute; /* TRP's own sheet sets `.trp-language-switcher .trp-ls-shortcode-language{left:0;top:0}` at specificity 20. This rule is 40, so it wins every property it DECLARES — and it never declared `top`. With top, height and bottom all non-auto the box is over-constrained and CSS drops `bottom`, so the panel opened DOWNWARD out of the footer: measured 62px past the footer's bottom edge, and document.scrollHeight 10813 -> 10875 the moment you hover, which is the white strip Siim saw. It never opened upward, despite what the comment above has always claimed. `top:auto` is the entire fix for the direction. */ top: auto !important; bottom: calc(100% + 8px); /* upward: the switcher sits at the foot of the page */ /* Capped to the measured budget: the smallest gap between the footer's top edge and the top of the pill is 274px at 1440x900, and it only grows as the footer grid stacks. 248 + the 8px offset leaves the panel inside the footer at every width, so it can never extend the page again. 19 languages: 9 visible, the rest scroll. */ height: auto !important; max-height: min(248px, 40vh) !important; left: 0; z-index: 60; padding: 6px !important; } /* the anchor is the positioning context for the list above it */ .foot-contact .trp_language_switcher_shortcode { position: relative; } /* a hover menu needs the gap between trigger and list to be part of the trigger, the same bug the mega menu had */ .foot-contact .trp-language-switcher::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; } .foot-contact .trp-ls-shortcode-language > a { display: flex; /* one language per row */ width: auto; white-space: nowrap; padding: 7px 12px; } /* Give it air from the opening hours line above it. */ .foot-contact .trp_language_switcher_shortcode { margin-top: 16px; } /* The footer stopped short of the bottom on any page without enough content, and the strip beneath it was white. Two facts combine: the footer is the LAST in-flow child of , so body's box ends where the footer ends, and hello-elementor's reset paints `body{background-color:#fff}`. Measured on /locations/ at 1440x900: footer bottom 615, viewport 900, 285px of white. The anchor is `margin-top:auto` on the FOOTER, not the textbook `main{flex:1}`. On the empty stubs Elementor renders no
and no wrapper at all — on /locations/, /about/, /pricing/, /contact/ and /faq/ there is literally nothing between the mobile scrim and