/* The Anony Labs public footer (owner 2026-10-13: "the footers are different across all apps … the footer should
   match"). ONE file, byte-identical in anonyvpn (static/footer.css), anonymail-app (static/footer.css), anonymail-site
   (site/assets/footer.css) and anonylabs-site (assets/css/footer.css): change it in one, copy it to the other three.

   Structure (same order everywhere): link groups under small mono headings (Product where a site has product links —
   on anonylabs.com Company: About, Our Projects — then Legal, Contact), then a bar: the family link ("AnonyVPN by Anony Labs", on anonylabs.com "Anony Labs"), the company
   line (Anony Labs · address · KvK) and the language picker (flags, AnonyChat's Flagpack). Two placements:
     .foot--page      a full-width footer under the page (legal pages, About, …)
     .foot--register  the landings' compact register in the bottom-right corner (desktop); from 999 px down the same
                      footer under the content
   Each site maps its own colours and faces onto the --foot-* tokens (its stylesheet); spacing, type sizes and
   behaviour come from here only.

   The picker's list must never be behind anything: the footer is its own stacking context above the page
   (z-index 20, the list 60 inside it), a container that wraps it must not trap it (no transform / overflow / lower
   z-index around it — see each site's stylesheet), the list opens upwards, its height is capped to the room above the
   button (langsw.js; without script this file's cap) and it scrolls inside. */

.foot {
  position: relative; z-index: 20; margin: 0; color: var(--foot-fg-3); text-align: start;
  font: 400 14px/1.5 var(--foot-sans); letter-spacing: normal; text-transform: none;
}
.foot--page {
  padding: 28px var(--foot-pad-x, 24px) max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--foot-rule);
}
.foot--page > .foot__groups, .foot--page > .foot__bar { width: 100%; max-width: var(--foot-max, 1100px); margin-inline: auto; }

.foot__groups { display: flex; flex-wrap: wrap; gap: 20px 56px; }
.foot__group { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.foot__h { margin: 0; font: 400 11px/1.4 var(--foot-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--foot-fg-3); }
.foot__links { display: flex; flex-wrap: wrap; margin: 0 -10px; padding: 0; list-style: none; }
.foot__links a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 10px; color: var(--foot-fg-2); text-decoration: none;
  white-space: nowrap; transition: color 0.15s ease;
}
.foot__links a:hover { color: var(--foot-fg); }

/* The bar: the family link and the picker on one line, the company line under them. */
.foot__bar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "labs lang" "company company";
  align-items: center; gap: 2px 16px; margin-top: 20px; padding-top: 8px; border-top: 1px solid var(--foot-rule);
}
.foot__labs {
  grid-area: labs; justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 40px;
  font: 400 11px/1.4 var(--foot-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--foot-fg-3); text-decoration: none;
  transition: color 0.15s ease;
}
.foot__labs:hover { color: var(--foot-fg); }
.foot__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--foot-accent); flex: none; }
.foot__company {
  grid-area: company; display: flex; flex-wrap: wrap; gap: 0 0.7em; margin: 0 0 4px; padding: 0;
  font: normal 400 11px/1.7 var(--foot-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--foot-fg-3);
}
.foot__company > span { white-space: nowrap; unicode-bidi: isolate; }
.foot__sep { opacity: 0.6; }

/* ---- the language picker: flag + name on the button, a flag beside every name in the list ---- */
.langsw { grid-area: lang; justify-self: end; position: relative; min-width: 0; }
.langsw__btn {
  list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 10px;
  border: 1px solid var(--foot-rule); border-radius: 8px; color: var(--foot-fg-2); cursor: pointer; white-space: nowrap;
  font: 400 13.5px/1.3 var(--foot-sans); letter-spacing: normal; text-transform: none; user-select: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.langsw__btn::-webkit-details-marker { display: none; }
.langsw__btn::marker { content: ""; }
.langsw__btn:hover, .langsw[open] > .langsw__btn { color: var(--foot-fg); border-color: var(--foot-rule-strong); }
.langsw__caret { width: 12px; height: 12px; flex: none; transition: rotate 0.15s ease; }
.langsw[open] .langsw__caret { rotate: 180deg; }
.langsw--down .langsw__caret { rotate: 180deg; }
.langsw--down[open] .langsw__caret { rotate: 0deg; }
.langsw__flag {
  display: block; flex: none; width: 20px; height: 15px; border-radius: 1.5px; object-fit: cover;
  box-shadow: 0 0 0 1px var(--foot-rule);
}
.langsw__list {
  position: absolute; z-index: 60; bottom: calc(100% + 6px); inset-inline-end: 0; margin: 0; padding: 6px; list-style: none;
  display: grid; grid-template-columns: repeat(2, max-content); gap: 2px;
  max-height: min(560px, calc(100vh - 32px)); max-height: min(560px, calc(100dvh - 32px));
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--foot-panel); border: 1px solid var(--foot-rule); border-radius: 10px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
.langsw--down .langsw__list { bottom: auto; top: calc(100% + 6px); }
.langsw__list li { min-width: 0; }
.langsw__item {
  display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 10px; border-radius: 6px;
  color: var(--foot-fg-2); text-decoration: none; white-space: nowrap; text-align: start;
  font: 400 13.5px/1.3 var(--foot-sans); letter-spacing: normal; text-transform: none;
}
.langsw__item:hover, .langsw__item:focus-visible { background: var(--foot-hover); color: var(--foot-fg); }
.langsw__item[aria-current] { color: var(--foot-fg); background: var(--foot-current); }

/* ---- the landings' register: compact rows in the one-viewport desktop layout ---- */
.foot--register { font-size: 13.5px; }
.foot--register .foot__groups { gap: 10px 36px; }
.foot--register .foot__group { gap: 0; }
.foot--register .foot__links a, .foot--register .foot__labs { min-height: 32px; }
.foot--register .foot__bar { margin-top: 6px; padding-top: 4px; }
.foot--register .langsw__btn { min-height: 32px; }
@media (min-width: 1000px) {
  .foot--register { font-size: 13px; }
  .foot--register .foot__groups { gap: 6px 36px; }
  .foot--register .foot__h { line-height: 1.3; }
  .foot--register .foot__links { margin: 0 -6px; }
  .foot--register .foot__links a { padding: 0 6px; }
  .foot--register .foot__links a, .foot--register .foot__labs { min-height: 26px; }
  .foot--register .foot__bar { margin-top: 4px; padding-top: 3px; }
  .foot--register .foot__company { line-height: 1.6; margin-bottom: 0; }
  .foot--register .langsw__btn { min-height: 28px; }
}
/* short desktop screens: the group headings go to screen readers only */
@media (min-width: 1000px) and (max-height: 680px) {
  .foot--register .foot__h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---- phones: both placements are the same footer, stacked, 40 px rows ---- */
@media (max-width: 767.98px) {
  .foot--page { padding: 24px var(--foot-pad-x-phone, 16px) max(8px, env(safe-area-inset-bottom)); }
  .foot--register { padding-top: 20px; border-top: 1px solid var(--foot-rule); }
  .foot__groups { flex-direction: column; gap: 14px; }
  .foot--register .foot__links a, .foot--register .foot__labs, .foot--register .langsw__btn { min-height: 40px; }
  .foot--register .foot__group { gap: 4px; }
  .foot--register .foot__bar { margin-top: 20px; padding-top: 8px; }
  .langsw__btn { min-height: 40px; }
  .langsw__list { width: min(calc(100vw - 32px), 360px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .langsw__item { white-space: normal; min-height: 40px; }
}

/* Scripts where tracking and upper case do not apply (Arabic's joined letters, Devanagari, CJK). */
.foot:is(:lang(ar), :lang(hi), :lang(ja), :lang(ko), :lang(zh-Hans)) :is(.foot__h, .foot__labs, .foot__company) { letter-spacing: 0; }

@media (prefers-reduced-motion: reduce) {
  .foot__links a, .foot__labs, .langsw__btn, .langsw__caret { transition: none; }
}