/* ---------------------------------------------------------------
The theme's block gap
---------------------------------------------------------------
Block themes put a gap above every top-level child of the page:
:where(.wp-site-blocks) > * { margin-block-start: 1.2rem; }
On a page template our block sits inside the post content, a level down,
and never picks it up. On a post-type template - a single lesson, the
deck archive - it is a direct child and does, which is why exactly those
two pages sat lower than the rest.
The gap is switched off for every top-level child, not only ours. That is
what was asked for, and it is worth being clear about the reach: it
applies to every page on the site, including ones this plugin has nothing
to do with, and any spacing those pages were getting from it goes too.
:where() carries no specificity, so a plain class selector beats it and
nothing here needs !important. Blocks that set their own margins keep
them; this only removes the one the theme adds. */
.wp-site-blocks > *{margin-block-start:0;}
/* ---------------------------------------------------------------
Empty paragraphs
---------------------------------------------------------------
wpautop leaves a bare behind wherever a shortcode sat on its own
line, and the theme gives every paragraph a bottom margin - so an element
with nothing in it still pushes the page down. It has no content, so
nothing is lost by taking it out of the flow.
Scoped to our own blocks rather than applied site-wide: an empty
paragraph elsewhere may be somebody's deliberate spacer. */
body:has(.tc-course) .wp-block-post-content > p:empty,
body:has(.tl-page) .wp-block-post-content > p:empty,
body:has(.tq-wrap) .wp-block-post-content > p:empty,
body:has(.ts-wrap) .wp-block-post-content > p:empty,
body:has(.th-wrap) .wp-block-post-content > p:empty,
body:has(.tc-course) .entry-content > p:empty,
body:has(.tl-page) .entry-content > p:empty,
body:has(.tq-wrap) .entry-content > p:empty,
body:has(.ts-wrap) .entry-content > p:empty,
body:has(.th-wrap) .entry-content > p:empty{display:none;}
/* Same thing one level in: a block that ends up wrapped in a paragraph of
its own leaves the empty one beside it, not above the content. */
.tc-course > p:empty,
.tl-page > p:empty,
.tq-wrap > p:empty,
.ts-wrap > p:empty,
.th-wrap > p:empty{display:none;}
/* ---------------------------------------------------------------
The gap the hidden page title leaves behind
---------------------------------------------------------------
Every block on this site prints its own heading and hides the theme's.
Hiding it is only half the job: the group the title sat in stays where it
was, empty, still holding its own padding - which is why the quiz, the
spreads, the practice hub and the course all began a long way down the
page while the card page, whose template has no such group, looked right.
The group is emptied of its spacing rather than hidden, because on some
templates that same group wraps the content and hiding it would take the
block with it.
!important is not decoration here. The block editor writes this padding
as an inline style on the element, and an inline style beats a stylesheet
rule however specific the selector.
The card page is deliberately not in this list: it is the one that was
already correct, so it is the reference rather than a patient. */
/* Three shapes, because themes wrap the title differently: a group holding
it directly, a group holding a group that holds it, and the classic
.entry-header. Only the shallow one was covered, which is why a gap
survived on some templates. */
body:has(.ta-wrap) .wp-block-group:has(> .wp-block-post-title),
body:has(.ta-wrap) .wp-block-group:has(> .wp-block-query-title),
body:has(.ta-wrap) .wp-block-group:has(> .wp-block-term-description),
body:has(.tc-course) .wp-block-group:has(> .wp-block-post-title),
body:has(.tl-page) .wp-block-group:has(> .wp-block-post-title),
body:has(.tq-wrap) .wp-block-group:has(> .wp-block-post-title),
body:has(.ts-wrap) .wp-block-group:has(> .wp-block-post-title),
body:has(.th-wrap) .wp-block-group:has(> .wp-block-post-title){
padding-top:0 !important;padding-bottom:0 !important;
margin-top:0 !important;margin-bottom:0 !important;
}
body:has(.ta-wrap) .wp-block-group:has(> .wp-block-group > .wp-block-post-title),
body:has(.tc-course) .wp-block-group:has(> .wp-block-group > .wp-block-post-title),
body:has(.tl-page) .wp-block-group:has(> .wp-block-group > .wp-block-post-title),
body:has(.tq-wrap) .wp-block-group:has(> .wp-block-group > .wp-block-post-title),
body:has(.ts-wrap) .wp-block-group:has(> .wp-block-group > .wp-block-post-title),
body:has(.th-wrap) .wp-block-group:has(> .wp-block-group > .wp-block-post-title){
padding-top:0 !important;padding-bottom:0 !important;
margin-top:0 !important;margin-bottom:0 !important;
}
body:has(.ta-wrap) .entry-header:has(.wp-block-post-title),
body:has(.tc-course) .entry-header:has(.wp-block-post-title),
body:has(.tl-page) .entry-header:has(.wp-block-post-title),
body:has(.tq-wrap) .entry-header:has(.wp-block-post-title),
body:has(.ts-wrap) .entry-header:has(.wp-block-post-title),
body:has(.th-wrap) .entry-header:has(.wp-block-post-title){
padding-top:0 !important;padding-bottom:0 !important;
margin-top:0 !important;margin-bottom:0 !important;
}
body:has(.ta-wrap) .page-header:has(.wp-block-post-title),
body:has(.tc-course) .page-header:has(.wp-block-post-title),
body:has(.tl-page) .page-header:has(.wp-block-post-title),
body:has(.tq-wrap) .page-header:has(.wp-block-post-title),
body:has(.ts-wrap) .page-header:has(.wp-block-post-title),
body:has(.th-wrap) .page-header:has(.wp-block-post-title){
padding-top:0 !important;padding-bottom:0 !important;
margin-top:0 !important;margin-bottom:0 !important;
}
body:has(.ta-wrap) .wp-block-post-content,
body:has(.tc-course) .wp-block-post-content,
body:has(.tl-page) .wp-block-post-content,
body:has(.tq-wrap) .wp-block-post-content,
body:has(.ts-wrap) .wp-block-post-content,
body:has(.th-wrap) .wp-block-post-content,
body:has(.ta-wrap) .entry-content,
body:has(.tc-course) .entry-content,
body:has(.tl-page) .entry-content,
body:has(.tq-wrap) .entry-content,
body:has(.ts-wrap) .entry-content,
body:has(.th-wrap) .entry-content{margin-top:0;padding-top:0;}
body:has(.ta-wrap) .wp-block-post-content > :first-child,
body:has(.tc-course) .wp-block-post-content > :first-child,
body:has(.tl-page) .wp-block-post-content > :first-child,
body:has(.tq-wrap) .wp-block-post-content > :first-child,
body:has(.ts-wrap) .wp-block-post-content > :first-child,
body:has(.th-wrap) .wp-block-post-content > :first-child,
body:has(.ta-wrap) .entry-content > :first-child,
body:has(.tc-course) .entry-content > :first-child,
body:has(.tl-page) .entry-content > :first-child,
body:has(.tq-wrap) .entry-content > :first-child,
body:has(.ts-wrap) .entry-content > :first-child,
body:has(.th-wrap) .entry-content > :first-child{margin-top:0;}
/* ---------------------------------------------------------------
Ad slot and site navigation
--------------------------------------------------------------- */
/* --- ad slot: centred, with air around it --- */
.ta-ad{
display:block;
margin:var(--ta-ad-gap,40px) auto;
padding:0 20px;
max-width:var(--ta-ad-width,970px);
text-align:center;
}
.ta-ad-label{
font-size:15px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
color:var(--ta-muted-light,#a8adb5);margin-bottom:8px;
}
/* Centre whatever the ad plugin puts inside, iframes and images included. */
/* Block layout, not flex: a responsive AdSense unit measures the width of
its parent, and as a flex item shrinks to its content - which is
nothing until the ad arrives. That is the "availableWidth=0" error. */
.ta-ad-inner{display:block;width:100%;text-align:center;}
.ta-ad-inner > *{margin-left:auto;margin-right:auto;}
.ta-ad-inner img,.ta-ad-inner iframe{max-width:100%;height:auto;display:block;}
.ta-ad-inner ins,
.ta-ad-inner ins.adsbygoogle{display:block;width:100%;max-width:100%;min-height:0;}
/* Nothing was served - AdSense says so on the element itself. Take the empty
space back rather than leaving a hole in the page. */
.ta-ad-inner ins.adsbygoogle[data-ad-status="unfilled"]{display:none;}
/* Slots that were told to keep to one kind of screen. */
@media(max-width:782px){.ta-ad-desktop{display:none;}}
@media(min-width:783px){.ta-ad-phone{display:none;}}
/* --- navigation ---------------------------------------------------------
Desktop: a row of pills on a grey track, the same shape as the language
switcher. Phone: a burger, and the menu opens as a sheet that slides up
from the bottom and fills the screen, language choice first.
Open and closed are a checkbox and a label, so all of this works with the
script blocked - nav.js only adds Escape, closing after a tap on a link,
and holding the page still underneath.
------------------------------------------------------------------------ */
.ta-nav{position:relative;font-family:var(--ta-font);}
/* Off screen but still focusable, so the burger can be reached by keyboard. */
.ta-nav-check{
position:absolute;width:1px;height:1px;margin:0;padding:0;
opacity:0;border:0;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;
}
/* On a desktop there is no burger and no sheet: the panel is simply a row. */
.ta-nav-toggle,
.ta-nav-panel-head,
.ta-nav-close{display:none;}
.ta-nav-panel{display:flex;align-items:center;gap:16px;}
.ta-nav-list{
order:1;
display:flex;align-items:center;flex-wrap:wrap;gap:6px;
list-style:none;margin:0;padding:0;
}
.ta-nav-lang{order:2;margin-left:auto;}
.ta-nav-lang-mobile{display:none;}
.ta-nav-logo{display:none;}
/* Sizing lives out here rather than inside the phone block on purpose: if
the phone rules are the part that goes missing, an unsized theme logo is
what wrecks the sheet. Harmless on a desktop, where the logo is hidden. */
.ta-nav-logo img{display:block;height:34px;width:auto;max-width:60vw;}
.ta-nav-item a{
display:inline-block;padding:9px 14px;border-radius:var(--ta-radius-pill,999px);
font-size:15px;font-weight:600;line-height:1;color:var(--ta-ink,#16181d);text-decoration:none;
transition:background .15s,color .15s;
}
.ta-nav-item a:hover{background:var(--ta-surface-alt,#f4f5f7);color:var(--ta-violet,#4f46e5);}
.ta-nav-here a{color:var(--ta-violet,#4f46e5);background:var(--ta-violet-soft,#f4f3ff);}
/* --- pills: the same segmented track as the language switcher --- */
.ta-nav-pills .ta-nav-list{
gap:4px;padding:4px;
border-radius:var(--ta-radius-pill,999px);
background:var(--ta-surface-alt,#f4f5f7);
}
.ta-nav-pills .ta-nav-item a{padding:8px 16px;color:var(--ta-muted,#8a8f98);}
.ta-nav-pills .ta-nav-item a:hover{background:none;color:var(--ta-ink,#16181d);}
.ta-nav-pills .ta-nav-here a{
background:var(--ta-surface,#fff);color:var(--ta-violet,#4f46e5);
box-shadow:0 1px 3px rgba(16,20,30,.14);
}
/* Items coming from a WordPress menu carry their own classes; give them the
same shape as ours so both sources look identical. */
.ta-nav-list li{list-style:none;margin:0;}
.ta-nav-list .menu-item a{
display:inline-block;padding:8px 16px;border-radius:var(--ta-radius-pill,999px);
font-size:15px;font-weight:600;line-height:1;text-decoration:none;
color:var(--ta-muted,#8a8f98);transition:background .15s,color .15s;
}
.ta-nav-list .menu-item a:hover{color:var(--ta-ink,#16181d);}
.ta-nav-pills .ta-nav-list .ta-nav-here a,
.ta-nav-pills .ta-nav-list .current-menu-item a,
.ta-nav-pills .ta-nav-list .current_page_item a{
background:var(--ta-surface,#fff);color:var(--ta-violet,#4f46e5);
box-shadow:0 1px 3px rgba(16,20,30,.14);
}
/* --- phones: burger + full screen sheet --- */
@media(max-width:782px){
.ta-nav{position:relative;}
/* Same button as the light/dark one: same padding, border, radius and
icon size, so the two of them read as a pair rather than as a labelled
pill next to a circle. The word "Menu" lives in the markup for screen
readers and is clipped there, not here. */
.ta-nav-toggle{
display:inline-flex;align-items:center;justify-content:center;
flex:0 0 auto;cursor:pointer;
padding:8px 11px;border-radius:var(--ta-radius-pill,999px);
border:1px solid var(--ta-line,#e6e7eb);background:var(--ta-surface,#fff);
font-size:15px;font-weight:600;line-height:1;color:var(--ta-violet,#4f46e5);
transition:border-color .15s,color .15s;
-webkit-tap-highlight-color:transparent;
}
.ta-nav-toggle:hover{border-color:var(--ta-violet,#4f46e5);}
.ta-nav-check:focus-visible + .ta-nav-toggle{outline:2px solid var(--ta-violet,#4f46e5);outline-offset:2px;}
.ta-nav-check:checked + .ta-nav-toggle,
.ta-nav.is-open .ta-nav-toggle{border-color:var(--ta-violet,#4f46e5);color:var(--ta-violet,#4f46e5);}
.ta-burger{display:inline-flex;flex-direction:column;justify-content:center;gap:4px;width:18px;height:18px;}
.ta-burger span{display:block;height:2px;border-radius:2px;background:currentColor;transition:transform .18s,opacity .18s;}
.ta-nav-check:checked + .ta-nav-toggle .ta-burger span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.ta-nav-check:checked + .ta-nav-toggle .ta-burger span:nth-child(2){opacity:0;}
.ta-nav-check:checked + .ta-nav-toggle .ta-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
/* The sheet itself: the whole screen, parked below it until asked for. */
.ta-nav-panel{
position:fixed;top:0;right:0;bottom:0;left:0;z-index:99990;
display:flex;flex-direction:column;align-items:stretch;gap:0;
padding:0 0 24px;
padding-bottom:calc(24px + env(safe-area-inset-bottom,0px));
background:var(--ta-surface,#fff);
overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
transform:translateY(100%);visibility:hidden;
transition:transform .26s ease,visibility .26s;
}
/* Two ways to be open. The sibling selector is the one that works with
the script blocked; the class is set by nav.js and survives wpautop
wrapping the checkbox and the panel into separate paragraphs, which
breaks ~ and used to leave the sheet stuck shut behind a cross. */
.ta-nav-check:checked ~ .ta-nav-panel,
.ta-nav.is-open .ta-nav-panel{transform:translateY(0);visibility:visible;}
/* [hidden] is on these in the markup so they stay out of a desktop
header even with no stylesheet at all. Here is where the phone
switches them back on. */
.ta-nav-panel-head,
.ta-nav-panel-head[hidden]{
display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:14px 20px;border-bottom:1px solid var(--ta-line,#e6e7eb);
}
.ta-nav-panel-title{
font-size:15px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
color:var(--ta-violet,#4f46e5);
}
/* The logo, however the theme provides it: an ![]()
, or the site name. */
.ta-nav-logo{display:block;min-width:0;line-height:0;}
.ta-nav-logo a{display:inline-block;line-height:0;text-decoration:none;}
.ta-nav-logo img{display:block;width:auto;height:34px;max-width:60vw;}
/* The site-name fallback, when the theme has no logo image. PHP puts the
class on it - :has() used to do this job, and a selector that new is
exactly the kind of thing a CSS optimiser trips over. */
.ta-nav-logo-text{
font-size:17px;font-weight:700;line-height:1.2;color:var(--ta-ink,#16181d);
}
.ta-nav-close{
display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
width:38px;height:38px;margin-right:-6px;border-radius:999px;
font-size:26px;line-height:1;color:var(--ta-muted,#8a8f98);
-webkit-tap-highlight-color:transparent;
}
.ta-nav-close:hover{background:var(--ta-surface-alt,#f4f5f7);color:var(--ta-ink,#16181d);}
/* Language at the foot of the sheet, where the thumb already is. */
.ta-nav-lang,
.ta-nav-lang-mobile,
.ta-nav-lang-mobile[hidden]{
display:block;order:2;margin-top:auto;
padding:16px 20px 4px;border-top:1px solid var(--ta-line,#e6e7eb);
}
.ta-nav-lang .tal-switch:not(.tal-globe-switch){display:flex;flex-wrap:wrap;width:100%;}
.ta-nav-lang .tal-switch-item{flex:1 1 auto;justify-content:center;padding:11px 14px;}
.ta-nav-lang .tal-switch-item span{display:inline;}
.ta-nav-lang .tal-globe-switch{display:block;}
.ta-nav-lang .tal-globe-btn{width:100%;justify-content:center;}
.ta-nav-lang .tal-menu{left:0;right:0;}
.ta-nav-list,
.ta-nav-pills .ta-nav-list{
order:1;flex-direction:column;align-items:stretch;gap:2px;
margin:8px 0 0;padding:8px 12px;background:none;border-radius:0;
}
.ta-nav-item a,
.ta-nav-list .menu-item a{
display:block;padding:15px 14px;border-radius:var(--ta-radius-tile,10px);
font-size:17px;color:var(--ta-ink,#16181d);
}
.ta-nav-pills .ta-nav-item a{padding:15px 14px;color:var(--ta-ink,#16181d);}
.ta-nav-pills .ta-nav-list .ta-nav-here a,
.ta-nav-pills .ta-nav-list .current-menu-item a,
.ta-nav-pills .ta-nav-list .current_page_item a{
background:var(--ta-violet-soft,#f4f3ff);color:var(--ta-violet,#4f46e5);box-shadow:none;
}
}
/* While the sheet is open the page underneath stays where it was. */
html.ta-nav-locked,
html.ta-nav-locked body{overflow:hidden;}
/* --- on paper ------------------------------------------------------------
Printing a card or a reading should give you the card or the reading.
Ads, the menu, the language switcher and the cross-link banners are all
things you tap - none of them mean anything on a sheet of paper, and the
ad slots in particular print as blank rectangles.
------------------------------------------------------------------------ */
@media print{
.ta-ad,
.ta-nav,
.ta-nav-panel,
.ta-nav-toggle,
.tal-switch,
.ta-theme-btn,
.ta-consent,
.ta-footer-manage,
.tp-crosslinks,
.ta-footer-legal{display:none !important;}
/* Nothing left holding the page hostage: let it flow and break freely. */
html.ta-nav-locked,
html.ta-nav-locked body{overflow:visible !important;}
}
/* --- footer text --- */
.ta-footer{max-width:var(--ta-container,1200px);margin:0 auto;padding:0 20px;text-align:center;}
.ta-footer-copy{font-size:15px;font-weight:600;color:var(--ta-ink,#16181d);margin:0 0 14px;}
.ta-footer-legal{max-width:820px;margin:0 auto;}
.ta-footer-legal p{font-size:15px;line-height:1.6;color:var(--ta-muted,#8a8f98);margin:0 0 10px;}
.ta-footer-legal p:last-child{margin-bottom:0;}
/* --- last, and on purpose ------------------------------------------------
:has() is recent enough that a CSS optimiser or an older parser can choke
on it, and a parser that chokes usually throws away everything after the
rule it could not read. Sitting at the very end, these two can only cost
themselves - the menu and the rest of the page above them are already
parsed by the time anything gets here. Nothing else in this file needs
that treatment; everything else is plain enough to survive.
What they do: take back the margins of an ad slot that was never filled. */
.ta-ad:has(ins.adsbygoogle[data-ad-status="unfilled"]),
.ta-ad:not(:has(*)){margin:0;padding:0;}
/* --- the light/dark button ----------------------------------------------
Built to match the language globe exactly - same height, same padding,
same border and radius, icon in the same violet at the same size. They sit
side by side in .tal-bar and should read as one pair of controls, not as a
pill next to a circle. The difference is what happens on a press: the
globe opens a menu because there are seven languages, this one has two
states and just flips. */
.tal-bar{display:inline-flex;align-items:center;gap:8px;}
.ta-theme-btn{
display:inline-flex;align-items:center;justify-content:center;
flex:0 0 auto;padding:8px 14px;
border:1px solid var(--ta-line,#e6e7eb);border-radius:var(--ta-radius-pill,999px);
background:var(--ta-surface,#fff);color:var(--ta-ink,#16181d);
font-size:15px;font-weight:600;line-height:1;cursor:pointer;
transition:border-color .15s,color .15s;
}
.ta-theme-btn:hover{border-color:var(--ta-violet,#4f46e5);color:var(--ta-violet,#4f46e5);}
.ta-theme-btn:focus-visible{outline:2px solid var(--ta-violet,#4f46e5);outline-offset:2px;}
.ta-theme-btn svg{display:block;width:19px;height:19px;color:var(--ta-violet,#4f46e5);}
/* Hidden by default rather than shown: if this file never arrives, one icon
is a stray glyph in the header, not two. */
.ta-theme-btn .ta-theme-sun,
.ta-theme-btn .ta-theme-moon{display:none;}
html[data-ta-theme="light"] .ta-theme-btn .ta-theme-moon{display:block;}
html[data-ta-theme="dark"] .ta-theme-btn .ta-theme-sun{display:block;}
@media(max-width:520px){
.ta-theme-btn{padding:9px 12px;}
}
/* --- the cookie bar ------------------------------------------------------
Fixed to the bottom, above everything, and narrow enough to read. The bar
itself carries the hidden attribute and the script takes it off, so a
visitor who already answered never sees it flash past - and nothing here
sets a display on .ta-consent, which would override that attribute and
pin the bar open. */
.ta-consent{
position:fixed;left:0;right:0;bottom:0;z-index:99992;
background:var(--ta-surface,#fff);
border-top:1px solid var(--ta-line,#e6e7eb);
box-shadow:0 -8px 24px -18px rgba(16,20,30,.4);
padding:14px 20px;
padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));
}
.ta-consent-inner{
max-width:var(--ta-container,1200px);margin:0 auto;
display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.ta-consent-copy{flex:1 1 320px;font-size:15px;line-height:1.5;color:var(--ta-ink,#16181d);}
.ta-consent-title{font-weight:700;}
.ta-consent-text{color:var(--ta-muted,#8a8f98);}
.ta-consent-link{color:var(--ta-violet,#4f46e5);text-decoration:underline;}
.ta-consent-btns{display:flex;gap:10px;flex:0 0 auto;flex-wrap:wrap;}
/* Both answers are the same size and weight on purpose. A refusal made
quieter than an acceptance is the thing regulators single out. */
.ta-consent-btn{
font-size:15px;font-weight:600;line-height:1;
padding:12px 20px;border-radius:var(--ta-radius-pill,999px);
border:1px solid var(--ta-line,#e6e7eb);
background:var(--ta-surface,#fff);color:var(--ta-ink,#16181d);
cursor:pointer;
}
.ta-consent-btn:hover{border-color:var(--ta-violet,#4f46e5);color:var(--ta-violet,#4f46e5);}
.ta-consent-yes{background:var(--ta-violet,#4f46e5);border-color:var(--ta-violet,#4f46e5);color:#fff;}
.ta-consent-yes:hover{background:var(--ta-violet-dark,#4338ca);border-color:var(--ta-violet-dark,#4338ca);color:#fff;}
.ta-footer-manage{margin-top:14px;}
.ta-consent-manage{
font-size:15px;color:var(--ta-muted,#8a8f98);
background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;
}
.ta-consent-manage:hover{color:var(--ta-violet,#4f46e5);}
@media(max-width:640px){
.ta-consent{padding:14px;}
.ta-consent-inner{gap:12px;}
.ta-consent-btns{width:100%;}
.ta-consent-btn{flex:1 1 0;text-align:center;}
}
/* --- the two round controls on a phone -----------------------------------
The language globe and the light/dark button are usually placed in the
theme's header, as separate blocks, in a row that also holds the logo and
the menu button. On a narrow screen that row runs out of width and the two
of them wrap onto a line of their own underneath, which reads as them
having fallen off rather than belonging anywhere.
Making them smaller buys the row enough width to hold together on most
phones. It does not guarantee it - that row belongs to the theme, not to
us - so [tarotall_nav switcher="bar" theme="yes"] is the way to be sure:
both controls then sit inside our own bar, next to the burger. */
@media(max-width:782px){
.tal-globe-btn,
.ta-theme-btn{padding:8px 11px;}
.tal-globe-code{display:none;}
.tal-globe-caret{display:none;}
.tal-globe,
.ta-theme-btn svg{width:18px;height:18px;}
.tal-bar{gap:6px;}
}
/* Both controls inside the nav bar, when the nav is asked to carry them. */
.ta-nav-bar-lang{display:inline-flex;align-items:center;flex:0 0 auto;}
@media(max-width:782px){
.ta-nav .ta-theme-btn,
.ta-nav-bar-lang{order:2;}
.ta-nav-toggle{order:3;}
}