/* THE site header (Karl 2026-10-01: one header; 2026-10-12: "you duplicated
   the code and thats why it drifts!"). Every rule of the public bar lives in
   this file and nowhere else; every page that carries the bar loads it:
   the public pages and the app views with the shared bar (after app.css and
   site.css — server/marketing.js headerStylesheet) and every card page
   (server/viewer.js siteHeader). The markup is
   server/marketing.js headerHtml, on every page.
   The bar carries the site palette itself, so it looks the same on a card
   page, whose :root holds the CARD's theme (card.css), as on the site pages
   (app.css). app.css keeps its own .topbar rules for the app's own bars
   (editor, responses, admin), which are not this header; on a site page
   they reach this bar too, and every property they set is set here again
   (same or higher specificity, later in the cascade), so this file alone
   decides how the bar looks. */

.topbar {
  --rose-1: #9d5a63;
  --rose-2: #7c4650;
  --cream: #f7f3ee;
  --gold: #b58a5a;
  --ink: #5c5854;
  --ink-soft: #8c8681;
  --line: #e3dad0;
  --script: "Dancing Script", cursive;
  --sans: "Jost", system-ui, sans-serif;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px clamp(18px, 5vw, 44px);
  border-bottom: 1px solid var(--line);
  font-family: var(--sans); color: var(--ink); line-height: 1.5; letter-spacing: normal; text-align: start;
  /* sticky (Karl 2026-09-30): the bar stays at the top while scrolling;
     nothing above it sets overflow, so sticky works; the shadow separates
     it from the content once the page has scrolled */
  position: sticky; top: 0; z-index: 50;
  background: #fff;
  box-shadow: 0 1px 0 var(--line), 0 6px 18px -12px rgba(60, 40, 45, 0.25);
}
.topbar .logo { font-family: var(--script); font-weight: 600; font-size: 24px; color: var(--rose-2); text-decoration: none; }
.topbar .who { font-size: 13px; color: var(--ink-soft); display: flex; align-items: center; gap: 14px; }
/* .who is the ☰ menu's popover on a narrow screen (marketing.js headerHtml):
   in the row it is a plain box — none of the browser's popover styles. */
.topbar .who {
  position: static; inset: auto; width: auto; height: auto; margin: 0;
  padding: 0; border: 0; overflow: visible; background: none;
}
.topbar .site-menu-btn { display: none; }

/* ---- top navigation ---- */
.site-nav { display: flex; align-items: center; gap: 20px; }
/* Registrieren · Anmelden are one visual unit: they wrap together and share a
   thin divider, so the five-item menu still reads as three groups. */
.site-nav .nav-auth { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.site-nav .nav-auth a + a::before,
.site-nav .nav-auth a + .nav-logout > button::before { content: "·"; color: var(--line); margin-inline-end: 10px; }
.site-nav a { font-family: var(--sans); font-size: 14px; color: var(--ink); text-decoration: none; }
.site-nav a:hover { color: var(--rose-2); }
/* Logged in the group is "Meine Karten · Abmelden"; the logout is a real form
   (marketing.js navAuthHtml) whose button must look exactly like the links. */
.site-nav .nav-logout { display: inline; margin: 0; }
.site-nav .nav-logout > button {
  font-family: var(--sans); font-size: 14px; color: var(--ink);
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer; line-height: inherit;
}
.site-nav .nav-logout > button:hover { color: var(--rose-2); }
/* Every item has the one link colour; the page the visitor is on
   (aria-current, marketing.js navCurrent) is rose (Karl 2026-10-22). */
.site-nav a[aria-current="page"] { color: var(--rose-2); font-weight: 500; }

/* ---- language switcher ----
   One dropdown (marketing.js langSwitcherHtml), the same control as the
   app's own switcher. */
.site-lang { margin-inline-start: 18px; }
.topbar .lang-switcher {
  pointer-events: auto; display: inline-flex; gap: 4px; padding: 4px;
  background: var(--cream); border: 1px solid var(--line); border-radius: 999px; box-shadow: none;
}
.topbar .lang-select {
  font-family: var(--sans); font-size: 13px; letter-spacing: 0.03em;
  color: var(--ink); background: transparent; border: none; border-radius: 999px;
  padding: 6px 14px; padding-inline-end: 30px; cursor: pointer; outline: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237c4650' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
/* Mirrored bar (Arabic, Hebrew, Persian …): the chevron at the left edge.
   :dir() — the bar's own direction: on a card page it can differ from the
   page's (a Persian card with English chrome). */
.topbar:dir(rtl) .lang-select { background-position: left 12px center; }
.topbar .lang-select:focus-visible { box-shadow: 0 0 0 2px var(--gold); }

/* ---- narrow screens: logo + ☰ (Karl 2026-10-22 #17) ----
   1120px: below it the member row (7 items + language) no longer fits on
   one line. The bar is the logo and the ☰ button, 52px; the button opens
   .who (#site-menu, a popover: above every page content, the card's
   sticky section bar included) — all menu items in their order, one per
   line, the current page rose, the language select at the bottom. */
@media (max-width: 1120px) {
  .topbar { height: 52px; padding-block: 0; padding-inline: 16px 6px; gap: 8px; flex-wrap: nowrap; align-items: center; }
  /* app.css hides the wordmark of the app's own bars on phones */
  .topbar .logo:not([data-i18n]) { display: block; font-size: 22px; white-space: nowrap; }
  .topbar .site-menu-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; margin: 0;
    background: none; border: 0; border-radius: 10px; cursor: pointer;
    font-family: var(--sans); font-size: 26px; line-height: 1; color: var(--rose-2);
  }
  .topbar .site-menu-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
  .topbar .who:not(:popover-open) { display: none; }
  .topbar .who:popover-open {
    position: fixed; inset: 52px 0 auto 0; width: auto; height: auto; max-height: calc(100vh - 52px); overflow: auto;
    margin: 0; padding: 4px 16px 16px; border: 0; border-top: 1px solid var(--line);
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; color: var(--ink); font-size: 16px;
    box-shadow: 0 14px 28px -14px rgba(60, 40, 45, 0.35);
  }
  .site-nav { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav .nav-auth { display: contents; }
  .site-nav .nav-auth a + a::before,
  .site-nav .nav-auth a + .nav-logout > button::before { content: none; }
  .site-nav a, .site-nav .nav-logout > button {
    display: block; width: 100%; padding: 12px 4px; font-size: 16px; text-align: start;
    border-bottom: 1px solid var(--line);
  }
  .site-nav .nav-logout { display: block; }
  .site-lang { margin: 14px 0 0; align-self: flex-start; }
  /* 16px: iOS Safari zooms in on focus of a smaller select
     (test/tools/editor/ios-input-zoom.test.js) */
  .topbar .lang-select { font-size: 16px; }
}

/* ---- a card page: the card below the bar ----
   --site-header-h is the bar's height, measured before the first paint by
   the inline script right after it (server/viewer.js) and kept current by a
   ResizeObserver. The card's two spreads, the front and the inside, fill
   the viewport BELOW the bar (the full-screen front with its "open card"
   hint stays whole) — the same two that fill a screen in card.css; the
   compact sections (reply form, photos) keep no minimum height. The
   card's own language bar sits under the bar, and in-page jumps stop
   below it. */
@media screen {
  html[data-site-header] { scroll-padding-top: var(--site-header-h, 0px); }
  html[data-site-header] :is(.card--front, .card--inside) { min-height: calc(100vh - var(--site-header-h, 0px)); }
  html[data-site-header] .lang-bar { top: var(--site-header-h, 0px); }
}
@media print { html[data-site-header] .topbar { display: none; } }