/* Nagłówek: fale (images/header-ribbons.svg) + napis (tekst SVG) + pasek menu.
   Scena ma proporcje 960×130; wszystko w niej w %, a szerokość sceny to --w:
   960px na desktopie, na telefonie ~148vw (pokazujemy lewe ~650 px sceny —
   fale i napis — a reszta paska ucieka za krawędź ekranu, tam siedzi hamburger). */

@font-face {
  font-family: 'Archivo Black';
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/archivo-black-latin-400-normal.woff2') format('woff2'); }
@font-face {
  font-family: 'Archivo';
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/archivo-latin-800-normal.woff2') format('woff2'); }

.header_hook { --w: 960px; --u: calc(var(--w) / 960); }

/* Ciemny pasek: prosty prostokąt przez całą szerokość okna, pod falami */
.header_hook::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: calc(480px - 50vw);
  right: calc(480px - 50vw);
  top: calc(var(--u) * 36);
  height: calc(var(--u) * 53);
  background: var(--bar); }

.header__art {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  pointer-events: none; }
.header__scene {
  position: relative;
  width: var(--w);
  height: calc(var(--w) * 130 / 960); }
/* SVG jest szerszy od sceny: fale wchodzą z góry na lewo od niej (x od -150 do 960) */
.header__ribbons {
  position: absolute;
  left: calc(var(--u) * -150);
  top: 0;
  width: calc(var(--u) * 1110);
  height: 100%;
  max-width: none; }

.logo {
  position: absolute;
  left: 0; top: 36.92%;
  width: 39.58%; height: 58.46%;
  margin: 0; padding: 0;
  pointer-events: auto; }
.logo a { display: block; width: 100%; height: 100%; }
.logo svg { display: block; width: 100%; height: 100%; overflow: visible; }
.logo__spa    { font: 400 70px 'Archivo Black', 'Arial Black', Arial, sans-serif; }
.logo__korona { font: 800 38px 'Archivo', Arial, sans-serif; }

.nav-toggle { display: none; }

@media (min-width: 1001px) {
  html { overflow-x: hidden; } /* pasek wystaje poza kolumnę do krawędzi okna */
}

@media (max-width: 1000px) {
  .header_hook {
    --w: min(147.7vw, 960px);
    position: relative;
    float: none;
    height: calc(var(--w) * 130 / 960);
    background: none; }
  .header {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%; }
  .header__art { overflow: hidden; }
  .header_hook::before { left: 0; right: 0; }

  .nav-toggle {
    position: absolute;
    z-index: 3;
    right: 10px;
    top: calc(var(--w) * 62.5 / 960 - 18px);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 36px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: rgba(255,255,255,.1);
    color: var(--sky);
    cursor: pointer; }
  .nav-toggle:hover,
  .nav-open .nav-toggle { background: rgba(255,255,255,.2); }
  .nav-toggle__label {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0); }
  /* trzy kreski z jednego elementu; po otwarciu zamieniają się w krzyżyk */
  .nav-toggle__bars,
  .nav-toggle__bars::before,
  .nav-toggle__bars::after {
    display: block;
    width: 20px; height: 2px;
    border-radius: 1px;
    background: currentColor;
    transition: transform .2s, background .2s; }
  .nav-toggle__bars { position: relative; }
  .nav-toggle__bars::before,
  .nav-toggle__bars::after { content: ''; position: absolute; left: 0; }
  .nav-toggle__bars::before { top: -6px; }
  .nav-toggle__bars::after  { top: 6px; }
  .nav-open .nav-toggle__bars { background: transparent; }
  .nav-open .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
  .nav-open .nav-toggle__bars::after  { transform: translateY(-6px) rotate(-45deg); }
}

/* Menu: do 1000 px lista rozwijana hamburgerem pod paskiem, od 1001 px w linii na pasku */
.header ul.menu {
  display: none;
  position: absolute;
  z-index: 2;
  left: 0; right: 0; top: 100%;
  margin: 0; padding: 6px 0 10px;
  list-style: none;
  background: var(--bar);
  box-shadow: 0 8px 16px rgba(0,0,0,.3); }
.nav-open .header ul.menu { display: block; }
.header ul.menu a {
  display: block;
  padding: 12px 20px;
  font-size: 16px;
  color: var(--sky);
  text-decoration: none; }
.header ul.menu a:hover,
.header ul.menu a:focus { background: rgba(255,255,255,.08); }

@media (min-width: 1001px) {
  .header ul.menu,
  .nav-open .header ul.menu {
    display: flex;
    z-index: auto;
    left: auto; right: 20px; top: 55px;
    padding: 0;
    font-size: 11px;
    background: none;
    box-shadow: none; }
  /* separator: kropkowana kreska 1×11 px przy prawej krawędzi pozycji (dawniej obrazek PNG) */
  .header ul.menu li { padding: 0 10px; }
  .header ul.menu li:not(:last-child) {
    background: right 1px center / 1px 13px no-repeat
      repeating-linear-gradient(transparent 0 1px, var(--menu-dots) 1px 2px); }
  .header ul.menu a { padding: 0 10px; font-size: inherit; }
  .header ul.menu a:hover { text-decoration: underline; }
  .header ul.menu a:hover,
  .header ul.menu a:focus { background: none; }
}