/*  THE TRANSLATE BAR'S OWN STYLESHEET.

    MOVED OUT OF site.css, NOT COPIED -- the same decision toolkit.css got,
    for the same reason: the bar now renders on universalbrain.net, a page
    this app does not serve, and loading the Brain's whole site.css there
    would restyle somebody else's site. Every rule below is scoped to .tbar,
    which no other page uses.
*/
/* ── TRANSLATE / TRANSLITERATE BAR ─────────────────────────────────────────
   Links and a plain form, not dropdowns: they work with no script and wrap
   to any width. Quiet, because it sits above every page's own content. */
.tbar { border-bottom: 1px solid rgba(0,0,0,.1); background: #fbfaf8;
        padding: .35rem .7rem .45rem; font-size: .8rem; }
.tbar-row, .tbar-tl { display: flex; flex-wrap: wrap; align-items: center;
                      gap: .25rem .45rem; }
.tbar-label { color: #555; font-weight: 600; }
.tbar-lang, .tbar-more { color: #24506e; text-decoration: none;
                         white-space: nowrap; }
.tbar-lang:hover, .tbar-more:hover { text-decoration: underline; }
.tbar-note { margin: .2rem 0 .3rem; color: #666; font-size: .74rem; }
.tbar-tl { margin-top: .2rem; }
.tbar-tl input[type="text"] { padding: .15rem .35rem; min-width: 9rem; }
.tbar-pair { color: #555; white-space: nowrap; }
@media (max-width: 520px) {
  .tbar { font-size: .76rem; }
  .tbar-tl input[type="text"] { min-width: 100%; }
}


/* Little flags, then one full dropdown. */
.tbar-flag { padding: 1px; border: 1px solid rgba(0,0,0,.18); border-radius: 3px;
             background: #fff; cursor: pointer; line-height: 0; }
.tbar-flag:hover, .tbar-flag:focus-visible { border-color: #24506e;
                                             box-shadow: 0 0 0 2px #eaf1f6; }
/* TINY, because there are 58 of them now and the row has to stay a row
   rather than becoming a wall. */
.tbar-flag img { display: block; width: 16px; height: 16px; }
.tbar select { font-size: .78rem; max-width: 14rem; }

.tbar-row { row-gap: .2rem; }

/* The language currently on screen, marked in its own row. */
.tbar-flag--on { outline: 2px solid #24506e; outline-offset: 1px; }

/* THE LANGUAGE MENU WITH FLAGS IN IT.
 *
 * Greg, 2026-09-19: "all languages need flags shown and in the javascript
 * menu". A native <option> cannot hold an image, so the select is replaced
 * by this listbox — same values, same order — and the select stays in the
 * DOM, hidden, as the control for a reader with no JavaScript.
 */
.gtm { position: relative; display: inline-block; }

.gtm-button {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .15rem .4rem; font: inherit; font-size: .85rem;
  background: var(--card, #fff); border: 1px solid var(--rule, #d8d3c8);
  border-radius: 3px; cursor: pointer; max-width: 14rem;
}
.gtm-button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gtm-caret { opacity: .6; }

/* ⚠ FIFTY-EIGHT ROWS SCROLL INSIDE THE MENU. A list that runs past the
 * bottom of the window cannot be closed without scrolling the page. */
.gtm-list {
  position: absolute; z-index: 40; top: calc(100% + 2px); left: 0;
  margin: 0; padding: .2rem; list-style: none;
  max-height: 60vh; overflow-y: auto; min-width: 12rem;
  background: var(--card, #fff); border: 1px solid var(--rule, #d8d3c8);
  border-radius: 3px; box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}
.gtm-item {
  display: flex; align-items: center; gap: .45rem;
  padding: .2rem .4rem; font-size: .85rem; cursor: pointer;
  border-radius: 2px;
}
.gtm-item:hover, .gtm-item:focus {
  background: var(--hover, #f0ece3); outline: none;
}
.gtm-item img { flex: 0 0 auto; }

/* ⚠ THE FLAGS LIVE INSIDE A DROPDOWN NOW.
 *
 * Greg: "gtranslate still is showing one open thing on the main page ... it
 * needs to be a drop down thing under search." 104 flags across the top of
 * every page is a wall a reader looks past. All 104 are still offered —
 * that instruction stands — behind one control that names the language the
 * page is in.
 */
.tbar-pick { position: relative; display: inline-block; }

.tbar-trigger {
  display: inline-flex; align-items: center; gap: .35rem;
  font: inherit; font-size: .85rem; padding: .2rem .5rem;
  border: 1px solid var(--rule, #d8d3c8); border-radius: 3px;
  background: var(--card, #fff); cursor: pointer;
}
.tbar-trigger:hover { background: var(--hover, #f0ece3); }
.tbar-trigger__flag { display: block; }
.tbar-caret { opacity: .6; font-size: .8em; }

.tbar-panel {
  position: absolute; z-index: 60; top: calc(100% + 3px); left: 0;
  min-width: 17rem; max-width: 92vw;
  padding: .5rem; border-radius: 4px;
  background: var(--card, #fff); border: 1px solid var(--rule, #d8d3c8);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
}

/* ⚠ A GRID, NOT A ROW. 104 flags wrapped across a line is the wall this
 * replaced; in a fixed grid they are a palette a reader can scan. */
.tbar-flags {
  display: grid; grid-template-columns: repeat(13, 1fr); gap: .15rem;
  max-height: 9rem; overflow-y: auto; margin-bottom: .4rem;
}
.tbar-flags .tbar-flag {
  padding: .1rem; border: 0; background: none; cursor: pointer;
  line-height: 0; border-radius: 2px;
}
.tbar-flags .tbar-flag:hover { background: var(--hover, #f0ece3); }

@media (max-width: 34rem) {
  .tbar-flags { grid-template-columns: repeat(8, 1fr); }
  .tbar-panel { min-width: 0; width: 88vw; }
}

/* ── AS A JOOMLA HEADER MODULE ─────────────────────────────────────────────
   Added for mod_meridiantranslate. The rules above dress a full-width bar
   across the top of a Brain page; in a logo or menu position that cream
   band with a bottom rule cuts the header in half. `.tbar--compact` is the
   same control with the band taken off.

   ⚠ THE PANEL IS RIGHT-ALIGNED IN A HEADER. A 17rem panel opening leftward
   from a control that already sits at the right edge of the page opens off
   the screen. */
.tbar--compact { border: 0; background: none; padding: 0; font-size: inherit; }
.tbar--compact .tbar-row { gap: .35rem; }
.tbar--compact .tbar-panel { left: auto; right: 0; }

/* ⚠⚠ ...BUT NOT WHEN THE SAME CONTROL SITS UNDER AN ARTICLE.
 *
 * Greg, 2026-09-23: "the translate button on each individual prayer at the
 * bottom where it says read this in - its cut off on the left on a computer -
 * it might be a bug in articles plus everywhere". It was, and everywhere is
 * right: com_articlesplus renders this same `tbar--compact` control under every
 * post on every site.
 *
 * The rule above right-aligns the panel because in a HEADER the trigger sits at
 * the right edge of the page, and a 17rem panel opening rightward would leave
 * the screen. Under an article the trigger sits at the LEFT of the content
 * column, so right-aligning it anchors the panel's right edge to the trigger
 * and opens it leftward - straight off the left edge of the content, which is
 * exactly the clipping Greg saw.
 *
 * The context decides, so the article's own wrapper puts it back. */
.ap-extra--translate .tbar--compact .tbar-panel { left: 0; right: auto; }
.tbar--compact .tbar-trigger { max-width: 12rem; }
.tbar--compact .tbar-trigger span[data-gt-current] {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ⚠ THE PANEL MUST ESCAPE THE HEADER. Helix header columns are flex
   containers and several of these templates clip them; a dropdown drawn
   inside one is invisible below the header's own height. */
.tbar--compact .tbar-panel { z-index: 1000; }

/* ── GOOGLE'S OWN BANNER IS SUPPRESSED ─────────────────────────────────────
   Greg, 2026-09-20: "the translation button begins to open another new
   target link that crashes keep it on the pages only ... it translates
   within the pages".

   ⚠ THE BANNER IS A DIRECT CHILD OF <body>, NOT NESTED. The first attempt
   at this rule was `.skiptranslate iframe.skiptranslate`, a DESCENDANT
   selector, and Google's bar is `<iframe class="skiptranslate
   goog-te-banner-frame">` sitting directly in the body - so the rule matched
   nothing, the bar appeared across the top of every translated page, pushed
   the whole site down by 40px, and its "Show original" and Google links open
   translate.google.com in a NEW TAB. That bar is the new target window; the
   translation itself always happened in place.

   Our own control already says which language the page is in and carries a
   "Show original" button, so nothing is lost by removing theirs. */
iframe.goog-te-banner-frame,
iframe.skiptranslate,
.goog-te-banner-frame,
#goog-gt-tt,
.goog-te-balloon-frame { display: none !important; visibility: hidden !important; }

/* ⚠ AND THE OFFSET GOOGLE ADDS WITH IT. The widget sets an inline
   `top: 40px` on <body> to make room for the bar; with the bar gone that is
   40px of white above the header, so it is overridden here. */
body { top: 0 !important; position: static !important; }

/* Google marks translated runs with a yellow highlight and a hover balloon.
   On a site with its own design that reads as a rendering fault. */
.goog-text-highlight { background: none !important; box-shadow: none !important; }


/* ── COLOURS ARE STATED, NEVER INHERITED ───────────────────────────────────
   Greg, 2026-09-20: "some of the gtranslates have white text with white
   background for language selector fix that too ... black text for white
   background".

   ⚠ THE BUG WAS AN INHERITED `color`. Every control below sets its own
   background but took its text colour from whatever it was dropped into -
   and in a header position that is a dark bar with white text, so a white
   panel got white writing on it. A control that can be placed on any
   template cannot inherit either half of a contrast pair.

   `!important` because several of these templates colour `#sp-top2 a` and
   `.sp-module button` from the template style, with an id, which no amount
   of classes can outrank. */
.tbar--compact .tbar-trigger,
.tbar .tbar-trigger,
.tbar .gtm-button,
.tbar .tbar-more {
  background: #ffffff !important;
  color: #1a1a1a !important;
  border: 1px solid rgba(0, 0, 0, .25) !important;
  text-shadow: none !important;
}

.tbar .tbar-trigger:hover,
.tbar .gtm-button:hover,
.tbar .tbar-more:hover { background: #f2f0ea !important; color: #1a1a1a !important; }

.tbar .tbar-panel,
.tbar .gtm-list {
  background: #ffffff !important;
  color: #1a1a1a !important;
  border: 1px solid rgba(0, 0, 0, .25) !important;
}

.tbar .gtm-item,
.tbar .tbar-panel label,
.tbar .tbar-panel span { color: #1a1a1a !important; }

.tbar .gtm-item:hover, .tbar .gtm-item:focus { background: #f0ece3 !important; }

/* The fallback <select> is a form control the template also restyles. */
.tbar select {
  background: #ffffff !important;
  color: #1a1a1a !important;
  border: 1px solid rgba(0, 0, 0, .25) !important;
}

/* The flag buttons sit on the white panel, so their own backgrounds must be
   light too - on a dark template they were inheriting a dark button style. */
.tbar .tbar-flags .tbar-flag { background: transparent !important; }
.tbar .tbar-flags .tbar-flag:hover { background: #f0ece3 !important; }

/* ⚠ AND THE CARET, which is a text glyph and was disappearing with the rest. */
.tbar .tbar-caret, .tbar .gtm-caret { color: #1a1a1a !important; opacity: .65; }

/* ── THE CARET IS DRAWN, NOT TYPED ─────────────────────────────────────────
   ⚠ U+25BE IS NOT IN EVERY FONT. These templates load Karla, Roboto and
   Libre Baskerville, none of which carry the small triangle, so the browser
   fell back to the tofu box - a control whose only affordance is "this
   opens" was showing a rectangle. A border triangle needs no font at all. */
.tbar .tbar-caret, .tbar .gtm-caret {
  font-size: 0 !important; line-height: 0;
  width: 0; height: 0; display: inline-block;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  color: #1a1a1a !important;
  margin-left: .15rem;
}

/* ── ONE ROW, NEVER TWO ────────────────────────────────────────────────────
   "Show original" appears only once a translation is running, and in a
   header position its arrival was pushing the row to a second line and
   shoving the logo. It stays on the line, small and quiet. */
.tbar--compact .tbar-row { flex-wrap: nowrap; }
.tbar--compact .tbar-more {
  font-size: .72rem !important; padding: .15rem .45rem !important;
  border-radius: 3px; white-space: nowrap; cursor: pointer;
}

/* The language name is the label: truncating it to "Fra..." tells a reader
   less than the flag beside it already does. */
.tbar--compact .tbar-trigger { max-width: none; }
.tbar--compact .tbar-trigger span[data-gt-current] { max-width: 10rem; }

/* ⚠ THE COMPACT CONTROL IS INLINE, NOT A BLOCK. `.tbar` was written as a
   full-width bar, and a block-level element dropped into a header's flex row
   takes the whole line - which pushed the language picker onto a second row
   and over the top of the page content. As a header control it is one item
   among several on the same line. */
.tbar--compact { display: inline-flex; align-items: center; vertical-align: middle; }

/* ── WHEN THE HEADER SLOT IS A NARROW COLUMN ───────────────────────────────
   Travelia (universalbrain.net, universalhumanknowledge.org) gives `top2`
   two of twelve columns, and each module inside it is a block - so five
   header modules become five stacked rows running down over the page.

   ⚠ THIS RULE IS SCOPED TO THE HEADER SLOTS, NOT TO `.sp-module`. A bare
   `.sp-module { display: inline-flex }` would re-lay-out every module on
   every page of the site, including the sidebars and the footer. Only the
   two header columns are touched, and only to put their contents on a line. */
#sp-top1 > .sp-column,
#sp-top2 > .sp-column {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: flex-end; gap: .35rem .5rem;
}
#sp-top1 > .sp-column > .sp-module,
#sp-top2 > .sp-column > .sp-module { margin: 0; }

/* On a header slot under ~18rem the language name is dropped and the flag
   carries the meaning on its own - the name is still in the panel, and in
   the title attribute for a screen reader. */
@media (min-width: 62rem) {
  .tbar--narrow .tbar-trigger span[data-gt-current] { display: none; }
  .tbar--narrow .tbar-trigger { padding: .2rem .35rem; }
}

/* ── WHERE THE HEADER SLOT IS FIXED AT TWO TWELFTHS ────────────────────────
   universalbrain.net's template style has no "Header" row in its layout at
   all, so its header columns are the template's hardcoded 8/2 and cannot be
   widened the way the other travelia site's could. Two twelfths is about
   195px, and the row needs about 210 - so in that case, and only that case,
   the donate button is set in a smaller size. Keyed on the column class, so
   a site whose slot IS wide is untouched. */
#sp-top2.col-lg-2 a#mcDonateBtn,
#sp-top1.col-lg-2 a#mcDonateBtn {
  padding: .35rem .75rem !important;
  font-size: .72rem !important;
  letter-spacing: 0 !important;
}
#sp-top2.col-lg-2 > .sp-column,
#sp-top1.col-lg-2 > .sp-column { gap: .2rem .3rem; }

/* The left-hand header slot is one twelfth on universalbrain.net so the menu
   can keep all its items on one line; four social icons fit in it only if
   they are not carrying a default flex gap. */
#sp-top1 > .sp-column { gap: .1rem .25rem; }
#sp-top1 > .sp-column .sp-module { margin: 0; }