/* Zend shared styles, loaded by every page after its own stylesheet.

   The site is dark only. Each page carries its own copy of the base
   stylesheet; this file holds the pieces they share: the footer bottom bar
   and the language menus. */

/* ---------- FOOTER BOTTOM BAR ----------
   The copyright on the left and the footer preferences on the right. On a
   phone the bar stacks, left-aligned. */
footer .foot-legal{
  flex-direction:row; justify-content:space-between; align-items:center;
  flex-wrap:wrap; text-align:left;
}
footer .foot-bottom{ width:auto; }
@media (max-width:560px){
  footer .foot-legal{ flex-direction:column; align-items:flex-start; }
}

/* ---------- LANGUAGE MENUS ----------
   Two copies of the one menu: a tab in the header pill on a wide screen,
   and a row in the phone menu below 860px, where the pill is hidden.
   Both are drawn after bleap.finance's language dropdown: a solid #1A1A1A
   panel with a 24px radius, 8px inset and a 7% white hairline, holding
   pill-shaped rows - a 24px flag, 12px gap, white at 500 - that take a 7%
   white tint on hover, on focus and for the language in force. */
.lang-opt{
  gap:12px; padding:8px; border-radius:24px;
  font-size:16px; font-weight:500; line-height:1.5; letter-spacing:-0.02em;
  color:#FFFFFF;
  transition:background-color .2s, transform .1s;
}
.lang-opt .lang-flag{ width:24px; height:24px; }
.lang-opt:hover,
.lang-opt:focus-visible,
.lang-opt[aria-selected="true"]{ background:rgba(255,255,255,0.07); color:#FFFFFF; font-weight:500; }
.lang-opt:focus-visible{ outline:none; }
.lang-opt:active{ transform:scale(0.98); }

.lang-chev{
  width:14px; height:14px; flex:none; margin-left:2px;
  fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
  opacity:.7; transition:transform .18s var(--ease);
}
.lang-select.is-open .lang-chev{ transform:rotate(180deg); }

/* Header: as Bleap draws it, a tab with nothing but the flag and the
   code - no arrow - in the pill's own muted ink, white on hover.
   The pill clips its contents, since it grows to open Product, so the menu
   cannot simply hang below the tab. It is position:fixed instead: .nav-links
   carries a transform, which makes it the containing block for fixed
   children, so the menu sits under the pill's right end and the pill's
   overflow does not clip it. 52px is the tab's foot (4 + 40) plus Bleap's
   8px drop. It opens Bleap's way too: up from 8px above at 95%, 0.2s. */
.nav-lang{ position:static; }
.nav-lang .lang-btn{
  height:40px; padding:0 16px; gap:8px; border-radius:20px;
  background:none; border:0;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  color:var(--muted); transition:color .2s;
}
.nav-lang .lang-btn:hover,
.nav-lang .lang-btn[aria-expanded="true"]{ background:none; color:#fff; }
.nav-lang .lang-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:-4px; }
.nav-lang .lang-btn .lang-flag{ width:24px; height:24px; }
.nav-lang .lang-btn .lang-flag::after{ display:none; }
.nav-lang .lang-code{ font-size:var(--t-sm); letter-spacing:0.03em; }
.nav-lang .lang-chev{ display:none; }
.nav-lang .lang-menu{
  position:fixed; top:52px; right:0; left:auto;
  display:flex; flex-direction:column; gap:4px;
  min-width:200px; padding:8px;
  background:#1A1A1A; border:1px solid rgba(255,255,255,0.07); border-radius:24px;
  box-shadow:none;
  -webkit-backdrop-filter:blur(64px); backdrop-filter:blur(64px);
  opacity:0; transform:translateY(-8px) scale(0.95); transform-origin:center;
  transition:opacity .2s ease-out, transform .2s ease-out, visibility .2s;
}
.nav-lang.is-open .lang-menu{ opacity:1; transform:translateY(0) scale(1); }

/* Header bar, every width: the flag and code sit on the bar beside Get the
   app (and the menu button on phones), in a small pill of the header pill's
   own fill, so the nav pill holds only Product, About and Support. The tab
   inside the pill above stays in the markup but is hidden. Its panel is the
   header one, hung from the button's right edge. */
.nav-lang{ display:none; }
.bar-lang{ display:inline-flex; }
.bar-lang .lang-btn{
  height:36px; padding:0 12px 0 6px; gap:8px; border-radius:18px;
  background:#1A1A1A; border:0;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  color:var(--muted); transition:color .2s;
}
.bar-lang .lang-btn:hover,
.bar-lang .lang-btn[aria-expanded="true"]{ background:#1A1A1A; color:#fff; }
.bar-lang .lang-flag{ width:24px; height:24px; }
.bar-lang .lang-flag::after{ display:none; }
.bar-lang .lang-code{ font-size:var(--t-sm); letter-spacing:0.03em; }
.bar-lang .lang-menu{
  top:calc(100% + 8px); right:0;
  display:flex; flex-direction:column; gap:4px;
  min-width:200px; padding:8px;
  background:#1A1A1A; border:1px solid rgba(255,255,255,0.07); border-radius:24px;
  box-shadow:none;
  opacity:0; transform:translateY(-8px) scale(0.95); transform-origin:top right;
  transition:opacity .2s ease-out, transform .2s ease-out, visibility .2s;
}
.bar-lang.is-open .lang-menu{ opacity:1; transform:translateY(0) scale(1); }
/* The 420px rule in each page closes the pill to a ring around the flag;
   on the bar there is room for the code, so it stays. */
@media (max-width:420px){
  .bar-lang .lang-btn{ height:36px; padding:0 12px 0 6px; gap:8px; }
  .bar-lang .lang-code{ display:inline; }
  .bar-lang .lang-flag{ width:24px; height:24px; }
}

/* Phone menu: a row like Product's - the flag and the language named in
   its own words, the arrow at the far end - and the list opens in place
   under it on the same 0fr/1fr grid track Product uses, its rows Bleap's
   pills. The 12px inset plus the row's own 8px lines each flag up under
   the row's at 20px, the phone gutter. The name is swapped by <html lang> the way the flags
   are, since the translator leaves everything inside .lang-select alone. */
.mobile-lang{
  display:grid; grid-template-rows:auto 0fr;
  border-top:1px solid var(--line);
  transition:grid-template-rows .35s var(--ease-soft);
}
.mobile-lang.is-open{ grid-template-rows:auto 1fr; }
.mobile-lang .lang-btn{
  width:100%; height:auto; padding:16px 20px; gap:12px;
  border:0; border-radius:0; background:none;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  font-family:var(--body); font-size:16px; font-weight:600; color:var(--paper);
  text-align:left;
}
.mobile-lang .lang-btn:hover{ background:none; border:0; }
.mobile-lang .lang-btn:focus-visible{ outline-offset:-4px; }
.mobile-lang .lang-flag{ width:24px; height:24px; }
.mobile-lang .lang-chev{ width:16px; height:16px; margin-left:auto; stroke-width:2; opacity:1; transition:transform .3s var(--ease); }
.lang-name{ display:none; }
html:not([lang="fr"]):not([lang="es"]) .name-en,
[lang="fr"] .name-fr,
[lang="es"] .name-es{ display:inline; }
.mobile-lang .lang-menu{
  position:static; min-width:0; min-height:0; overflow:hidden;
  display:flex; flex-direction:column; gap:4px;
  padding:0 12px; border:0; border-radius:0;
  background:none; box-shadow:none;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  opacity:1; transform:none;
}
.mobile-lang.is-open .lang-menu{ padding-bottom:12px; }
.mobile-lang .lang-opt{ color:var(--paper); }

.foot-prefs{ display:inline-flex; align-items:center; gap:12px; }