/* Kontener i sekcje ---------------------------------------------------- */
.kontener {
  width: min(100% - 2 * var(--odstep-3), var(--szerokosc-tresci));
  margin-inline: auto;
}
.kontener--waski { width: min(100% - 2 * var(--odstep-3), var(--szerokosc-tekstu)); }

.sekcja { padding-block: var(--odstep-5); }
.sekcja--alt { background: var(--kolor-tlo-alt); }

/* Oddech nad tytulem podstrony. <main> zaczyna sie tuz pod przyklejonym
   naglowkiem, wiec bez tego <h1> przykleja sie do jego obramowania.
   Strona glowna tego nie potrzebuje - hero ma wlasny padding. */
.strona { padding-block-start: var(--odstep-4); }

.pomijacz {
  position: absolute;
  left: -9999px;
  background: var(--kolor-tlo);
  padding: var(--odstep-2);
  z-index: 100;
}
.pomijacz:focus { left: var(--odstep-2); top: var(--odstep-2); }

/* Naglowek ------------------------------------------------------------- */
.naglowek {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--kolor-tlo);
  border-block-end: 1px solid var(--kolor-obramowanie);
}
.naglowek__wnetrze {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--odstep-3);
  min-height: 72px;
}
.naglowek__logo img { width: 160px; height: auto; }

.menu-glowne {
  display: flex;
  gap: var(--odstep-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu-glowne a {
  color: var(--kolor-tekst);
  text-decoration: none;
  font-weight: 700;
  padding-block: var(--odstep-1);
  display: inline-block;
}
.menu-glowne a:hover,
.menu-glowne .current-menu-item > a { color: var(--kolor-akcent); }

/* Podmenu "Powierzchnie" */
.menu-glowne li { position: relative; }
.menu-glowne .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: var(--kolor-tlo);
  border: 1px solid var(--kolor-obramowanie);
  border-radius: var(--promien);
  padding: var(--odstep-1);
  list-style: none;
  margin: 0;
  display: none;
}
.menu-glowne li:hover > .sub-menu,
.menu-glowne li:focus-within > .sub-menu { display: block; }
.menu-glowne .sub-menu a { padding: var(--odstep-1) var(--odstep-2); font-weight: 400; }

/* Menu mobilne --------------------------------------------------------- */
.menu-mobilne { display: none; }
.menu-mobilne__przycisk {
  list-style: none;
  cursor: pointer;
  padding: var(--odstep-2);
  margin-inline-end: calc(-1 * var(--odstep-2));
}
.menu-mobilne__przycisk::-webkit-details-marker { display: none; }
.menu-mobilne__ikona,
.menu-mobilne__ikona::before,
.menu-mobilne__ikona::after {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--kolor-tekst);
  content: "";
}
.menu-mobilne__ikona::before { transform: translateY(-8px); }
.menu-mobilne__ikona::after { transform: translateY(6px); }

.menu-mobilne__panel {
  position: absolute;
  inset-inline: 0;
  background: var(--kolor-tlo);
  border-block-end: 1px solid var(--kolor-obramowanie);
  padding: var(--odstep-2) var(--odstep-3) var(--odstep-4);
}
.menu-mobilne__lista,
.menu-mobilne__lista .sub-menu { list-style: none; margin: 0; padding: 0; }
.menu-mobilne__lista a {
  display: block;
  padding: var(--odstep-2) 0;
  color: var(--kolor-tekst);
  text-decoration: none;
  font-weight: 700;
  border-block-end: 1px solid var(--kolor-obramowanie);
}
.menu-mobilne__lista .sub-menu a { padding-inline-start: var(--odstep-3); font-weight: 400; }

@media (max-width: 900px) {
  .naglowek__nawigacja { display: none; }
  .menu-mobilne { display: block; }
}

/* Stopka --------------------------------------------------------------- */
.stopka {
  background: var(--kolor-tekst);
  color: var(--kolor-tlo);
  padding-block: var(--odstep-5) var(--odstep-3);
  margin-block-start: var(--odstep-6);
}
.stopka a { color: var(--kolor-tlo); }
.stopka__wnetrze {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--odstep-4);
}
.stopka__naglowek { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.04em; }
.stopka__lista, .stopka__social { list-style: none; margin: 0; padding: 0; }
.stopka__lista li, .stopka__social li { margin-block-end: var(--odstep-1); }
.stopka__social { display: flex; gap: var(--odstep-2); }
.stopka__prawne {
  margin-block-start: var(--odstep-4);
  padding-block-start: var(--odstep-2);
  border-block-start: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 0.9rem;
}
.stopka__prawne p { max-width: none; }