/*
 * ÖntözŐR — közös oldalkeret: tartalomszélesség, fejléc, márkajel, lábléc.
 *
 * Azért a megosztott könyvtárban, mert a `public` és a `demo` zóna ugyanazt a keretet
 * viseli. Zónánként lemásolva a két fejléc előbb-utóbb elcsúszna egymástól, és a
 * felhasználó ugyanannak a terméknek két különböző arcát látná két kattintásra.
 */

.kozep {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--wa-space-l);
}

.pub-fejlec {
  position: sticky;
  top: 0;
  z-index: 10;
  align-items: center;
  gap: var(--wa-space-m);
  padding-block: var(--wa-space-s);
  background-color: color-mix(in oklab, var(--wa-color-surface-default) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: var(--wa-border-width-s) solid var(--wa-color-surface-border);
}

.brand-link {
  display: inline-flex;
  align-items: center;
  gap: var(--wa-space-2xs);
  text-decoration: none;
  color: inherit;
  font-family: var(--wa-font-family-heading);
  font-weight: var(--wa-font-weight-heading);
  font-size: var(--wa-font-size-l);
  white-space: nowrap;
}

.brand-mark {
  color: var(--wa-color-brand-fill-loud);
  font-size: var(--wa-font-size-xl);
}

/* A téma-váltó két ikonja közül mindig csak az egyik látszik. */
.only-dark { display: none; }
.wa-dark .only-light { display: none; }
.wa-dark .only-dark  { display: inline-flex; }

.pub-lablec {
  padding-block: var(--wa-space-l);
  color: var(--wa-color-text-quiet);
  font-size: var(--wa-font-size-s);
}

[hidden] { display: none !important; }