/* JollyHeap language bubble - WPML custom template "jh-lang" (WPML enqueues this file in , before the theme's inlined header.css). One quiet control in the grey top bar; all 17 languages live in a
panel that is always in the HTML. Tokens from the JollyHeap style note. No !important: no theme rule targets these classes; the theme-side overrides (.widgettitle, phone columns) are appended to css/header.css. */ .jh-lang{ --jh-ink:#1C2950; --jh-denim:#3E5BAE; --jh-denim-dark:#2C3F7E; --jh-mist:#EAEDF7; --jh-mist-300:#BAC5E8; --jh-text-2:#54607A; --jh-white:#fff; position:relative; display:block; margin:0; padding:0; font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; font-size:.875rem; line-height:1.2; color:var(--jh-ink); text-align:left; letter-spacing:normal; } .jh-lang-nav{display:flex; align-items:center; justify-content:flex-end; padding:0; margin:0} /* trigger (): globe + native name + chevron. 28px tall = one row of the old code list, so the grey bar is 47px again (9.5 + 28 + 9.5) and the theme's .site-header.nav-up{top:-47px} hides exactly the bar. */ .jh-lang__btn{ position:relative; display:inline-flex; align-items:center; gap:6px; box-sizing:border-box; height:28px; margin:0; padding:0 8px 0 9px; border:1px solid transparent; border-radius:8px; background:transparent; color:inherit; font:inherit; font-weight:500; white-space:nowrap; cursor:pointer; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; list-style:none; } .jh-lang__btn::-webkit-details-marker{display:none} .jh-lang__btn::marker{content:""} .jh-lang__btn:hover{background:var(--jh-white); border-color:var(--jh-mist-300)} .jh-lang[open]>.jh-lang__btn{background:var(--jh-white); border-color:var(--jh-mist-300); color:var(--jh-denim-dark)} .jh-lang__btn:focus{outline:none} .jh-lang__btn:focus-visible{outline:2px solid var(--jh-denim); outline-offset:2px} .jh-lang__globe{flex:none; width:16px; height:16px; color:var(--jh-denim)} .jh-lang__chev{flex:none; width:12px; height:12px; color:var(--jh-text-2); transition:transform .15s ease} .jh-lang[open] .jh-lang__chev{transform:rotate(180deg)} .jh-lang__code{display:none; font-weight:600; letter-spacing:.02em} .jh-lang__sr{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} /* the bubble: white card, border in the style note's dotted-border colour, tip under the chevron. position:absolute = out of flow, the bar never changes height (CLS 0); z-index above the blue nav and above the off-canvas menu (20000) inside the fixed header's stacking context. */ .jh-lang__panel{ position:absolute; top:calc(100% + 10px); right:0; z-index:20001; box-sizing:border-box; width:530px; max-width:calc(100vw - 32px); margin:0; padding:10px; background:var(--jh-white); border:1px solid var(--jh-mist-300); border-radius:12px; box-shadow:0 12px 32px -8px rgba(28,41,80,.22), 0 2px 6px rgba(28,41,80,.06); } .jh-lang__panel::before{ content:""; position:absolute; top:-7px; right:26px; width:12px; height:12px; box-sizing:border-box; background:var(--jh-white); border-left:1px solid var(--jh-mist-300); border-top:1px solid var(--jh-mist-300); transform:rotate(45deg); } /* 17 native names, filled column by column: 3 columns x 6 rows on desktop (DOM order = visual order = Tab order) */ .jh-lang__list{ list-style:none; margin:0; padding:0; display:grid; grid-auto-flow:column; grid-template-rows:repeat(6, auto); grid-template-columns:repeat(3, minmax(0,1fr)); gap:2px 6px; } .jh-lang__item{margin:0; padding:0; list-style:none} .jh-lang__link{ display:flex; align-items:center; gap:8px; box-sizing:border-box; min-height:36px; padding:6px 10px 6px 8px; border-radius:8px; color:var(--jh-ink); font-weight:400; text-decoration:none; white-space:nowrap; } .jh-lang__link:hover{background:var(--jh-mist); color:var(--jh-denim-dark); text-decoration:none} .jh-lang__link:focus{outline:none} .jh-lang__link:focus-visible{outline:2px solid var(--jh-denim); outline-offset:-2px; background:var(--jh-mist)} .jh-lang__link[aria-current="page"]{color:var(--jh-denim); font-weight:600} .jh-lang__check{flex:none; width:16px; height:16px; color:var(--jh-denim); visibility:hidden} .jh-lang__link[aria-current="page"] .jh-lang__check{visibility:visible} @keyframes jh-lang-in{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none}} @keyframes jh-lang-up{from{opacity:0; transform:translateY(24px)} to{opacity:1; transform:none}} .jh-lang[open] .jh-lang__panel{animation:jh-lang-in .16s ease-out} /* phones and small tablets: compact trigger (globe + code), the same
opens as a bottom sheet, 2 columns x 9 rows, 44px rows. The trigger is 36px tall (bar 46px) and ::before stretches its tap area to 44px. */ @media (max-width:767px){ .jh-lang__btn{height:36px; padding:0 6px 0 7px; gap:5px} .jh-lang__btn::before{content:""; position:absolute; left:0; right:0; top:-4px; bottom:-4px} .jh-lang__code{display:inline} .jh-lang__name{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} /* backdrop drawn by the itself: a tap on it is a click on the summary = native close, no JS needed */ .jh-lang[open]>.jh-lang__btn::after{content:""; position:fixed; inset:0; z-index:20000; background:rgba(28,41,80,.35)} .jh-lang__panel{ position:fixed; top:auto; right:0; bottom:0; left:0; width:auto; max-width:none; max-height:min(70vh, calc(100vh - 56px)); overflow-y:auto; -webkit-overflow-scrolling:touch; padding:8px 12px calc(12px + env(safe-area-inset-bottom, 0px)); border-radius:16px 16px 0 0; border-bottom:0; box-shadow:0 -12px 32px rgba(28,41,80,.25); } .jh-lang__panel::before{ /* the tip becomes the sheet's grab handle */ position:static; display:block; width:36px; height:4px; margin:0 auto 10px; border:0; border-radius:2px; background:var(--jh-mist-300); transform:none; } .jh-lang__list{grid-template-rows:repeat(9, auto); grid-template-columns:repeat(2, minmax(0,1fr)); gap:2px 8px} .jh-lang__link{min-height:44px; padding:10px 10px 10px 8px} .jh-lang[open] .jh-lang__panel{animation:jh-lang-up .2s ease-out} html.jh-lang-open, html.jh-lang-open body{overflow:hidden} /* CookieYes' round "cookie settings" button is fixed bottom-left above the header's stacking context, so it covered the last language of the sheet ("Lietuvių"); it comes back when the sheet closes. */ html.jh-lang-open .cky-btn-revisit-wrapper{display:none} } @media (prefers-reduced-motion:reduce){ .jh-lang[open] .jh-lang__panel{animation:none} .jh-lang__chev{transition:none} }