/* Neo Translate family bar and footer (proposals/shared-nav/SPEC.md, 2026-10-03).
   The same file on every site. Self-contained: own colours (ntf- prefix), inherits only the site's font.
   Theme: follows [data-theme] on <html>, else the system setting. No JavaScript needed. */

.ntf-bar, .ntf-foot {
  --ntf-bg: #FFFFFF; --ntf-soft: #F4F8F6; --ntf-ink: #12201B; --ntf-ink-2: #4B5B55; --ntf-line: #DCE5E1;
  --ntf-mint: #3E9E7C; --ntf-focus: #1D6FD1;
  --ntf-t-translate: #2E7D5B; --ntf-t-studio: #2A6F9A; --ntf-t-connect: #9A6A12; --ntf-t-developers: #5A5FB0;
  font-family: inherit; line-height: 1.4; -webkit-font-smoothing: antialiased;
}
:root[data-theme="dark"] .ntf-bar, :root[data-theme="dark"] .ntf-foot {
  --ntf-bg: #0B1311; --ntf-soft: #13201C; --ntf-ink: #E7F1ED; --ntf-ink-2: #A3B5AE; --ntf-line: #22322C;
  --ntf-mint: #7DD3B5; --ntf-focus: #7DB5FF;
  --ntf-t-translate: #7DD3B5; --ntf-t-studio: #86C3EA; --ntf-t-connect: #E3B65A; --ntf-t-developers: #A9ADF0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .ntf-bar, :root:not([data-theme]) .ntf-foot {
    --ntf-bg: #0B1311; --ntf-soft: #13201C; --ntf-ink: #E7F1ED; --ntf-ink-2: #A3B5AE; --ntf-line: #22322C;
    --ntf-mint: #7DD3B5; --ntf-focus: #7DB5FF;
    --ntf-t-translate: #7DD3B5; --ntf-t-studio: #86C3EA; --ntf-t-connect: #E3B65A; --ntf-t-developers: #A9ADF0;
  }
}
.ntf-bar [data-p="translate"]  { --ntf-tint: var(--ntf-t-translate); }
.ntf-bar [data-p="studio"]     { --ntf-tint: var(--ntf-t-studio); }
.ntf-bar [data-p="connect"]    { --ntf-tint: var(--ntf-t-connect); }
.ntf-bar [data-p="developers"] { --ntf-tint: var(--ntf-t-developers); }

/* Lining up with the site's own content: a site may set, on :root,
   --ntf-site-max (its content width, padding included) and --ntf-site-pad (its side padding). */

/* ---------- top bar ---------- */
.ntf-bar { background: var(--ntf-bg); border-bottom: 1px solid var(--ntf-line); position: relative; z-index: 40; }
.ntf-bar .ntf-wrap { max-width: var(--ntf-site-max, 1200px); margin: 0 auto; padding: 0 var(--ntf-site-pad, 16px); min-height: 48px;
  display: flex; align-items: center; gap: 12px; }
.ntf-logo { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ntf-ink);
  text-decoration: none; font-weight: 700; font-size: 15px; white-space: nowrap; }
.ntf-logo svg { width: 24px; height: 24px; flex: none; }
.ntf-links { display: none; list-style: none; margin: 0 0 0 8px; padding: 0; gap: 2px; }
.ntf-links a, .ntf-menu-list a { display: flex; align-items: center; gap: 8px; color: var(--ntf-ink-2);
  text-decoration: none; font-size: 14px; padding: 0 12px; min-height: 44px; border-radius: 8px; }
.ntf-links a:hover, .ntf-menu-list a:hover { color: var(--ntf-ink); background: var(--ntf-soft); }
.ntf-links a::before, .ntf-menu-list a::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ntf-tint); flex: none; }
.ntf-links a[aria-current="page"] { color: var(--ntf-tint); font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--ntf-tint); border-radius: 0; }
.ntf-menu-list a[aria-current="page"] { color: var(--ntf-tint); font-weight: 600; background: var(--ntf-soft); }
.ntf-bar a:focus-visible, .ntf-bar summary:focus-visible, .ntf-foot a:focus-visible {
  outline: 2px solid var(--ntf-focus); outline-offset: 2px; }

/* phone: the links fold into a "Platforms" menu */
.ntf-menu { margin-left: auto; position: relative; }
.ntf-menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 12px; border: 1px solid var(--ntf-line); border-radius: 8px;
  color: var(--ntf-ink); font-size: 14px; background: var(--ntf-bg); }
.ntf-menu summary::-webkit-details-marker { display: none; }
.ntf-menu summary svg { width: 16px; height: 16px; transition: transform .15s; }
.ntf-menu[open] summary svg { transform: rotate(180deg); }
.ntf-menu-list { position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; list-style: none;
  margin: 0; padding: 6px; background: var(--ntf-bg); border: 1px solid var(--ntf-line); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
@media (min-width: 760px) {
  .ntf-links { display: flex; }
  .ntf-menu { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ntf-menu summary svg { transition: none; } }

/* ---------- footer ---------- */
.ntf-foot { background: var(--ntf-bg); border-top: 1px solid var(--ntf-line); color: var(--ntf-ink-2); font-size: 14px; }
.ntf-foot .ntf-wrap { max-width: var(--ntf-site-max, 1200px); margin: 0 auto; padding: 20px var(--ntf-site-pad, 16px);
  display: flex; flex-direction: column; gap: 4px; }
.ntf-foot .ntf-logo { font-size: 14px; }
.ntf-foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.ntf-foot a { color: var(--ntf-ink-2); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.ntf-foot a:hover { color: var(--ntf-ink); text-decoration: underline; text-underline-offset: 4px; }
.ntf-foot .ntf-meta a { color: var(--ntf-ink-2); }
@media (min-width: 760px) {
  .ntf-foot .ntf-wrap { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* printed pages (receipts) don't need them */
@media print { .ntf-bar, .ntf-foot { display: none !important; } }