/* Projekt: Cech Rzemieślników i Przedsiębiorców w Radomiu - strona WWW
   Autor: KamikStudio - Patryk Dariusz Kowalski (ps. Kamik)
   Web: https://kamikstudio.pl, Email: biuro@kamikstudio.pl
   Data: 2026-09-28, Wersja: 1.1
   Opis: Pasek górny, nagłówek z logo i menu, stopka.
   Menu przechodzi w wysuwany panel przy 1260 px: siedem pozycji, logo z nazwą i przycisk
   nie mieszczą się w jednym rzędzie na węższych ekranach. */

.pasek { background: var(--zielen-ciemna); color: var(--tlo); font-size: 0.9rem; }
.pasek .srodek { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 40px; }
.pasek a { display: inline-flex; align-items: center; gap: 8px; color: var(--tlo); text-decoration: none; }
.pasek a:hover { color: var(--tlo); text-decoration: underline; }
.pasek .ikona { width: 16px; height: 16px; }
.pasek__kontakt { display: flex; align-items: center; gap: 24px; }
.pasek__krotki { display: none; }
.pasek__godziny { display: inline-flex; align-items: center; gap: 8px; }

.logo { display: inline-flex; align-items: center; gap: 12px; color: var(--atrament); text-decoration: none; }
.logo:hover { color: var(--atrament); }
.logo__nazwa { display: grid; font-family: var(--naglowki); font-weight: 700; font-size: 1.15rem; line-height: 1.05; text-transform: uppercase; letter-spacing: 0.01em; white-space: nowrap; }
.logo__nazwa span + span { color: var(--zielen); }

.naglowek { position: sticky; top: 0; z-index: 40; background: var(--tlo); border-bottom: 1px solid var(--linia); }
.naglowek .srodek { display: flex; align-items: center; gap: 20px; min-height: 84px; }
.naglowek .logo { flex: none; }
.nawigacja { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.nawigacja ul { display: flex; align-items: center; }
.nawigacja ul a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 8px; color: var(--atrament); font-weight: 600; white-space: nowrap; text-decoration: none; border-bottom: 3px solid transparent; }
.nawigacja ul a:hover { color: var(--zielen); }
.nawigacja ul a[aria-current="page"] { color: var(--zielen); border-bottom-color: var(--zielen); }
.nawigacja__akcja { min-height: 44px; padding: 8px 16px; white-space: nowrap; }
.nawigacja__telefon { display: none; }
.ikona-przycisk { width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: var(--r); background: none; color: var(--atrament); cursor: pointer; }
.ikona-przycisk:hover { background: var(--tlo-szare); }
.ikona-przycisk .ikona { width: 26px; height: 26px; }
.hamburger, .zamknij-menu { display: none; }

@media (max-width: 1260px) {
  .hamburger { display: grid; margin-left: auto; }
  .zamknij-menu { display: grid; position: absolute; right: 16px; top: 16px; }
  .nawigacja { position: fixed; inset: 0 0 0 auto; z-index: 50; width: min(380px, 100%); flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 80px 20px 32px; background: var(--tlo); overflow-y: auto; visibility: hidden; transform: translateX(100%); transition: transform 0.2s ease, visibility 0s linear 0.2s; }
  .nawigacja.otwarta { visibility: visible; transform: none; transition: transform 0.2s ease, visibility 0s; box-shadow: -16px 0 40px rgb(0 0 0 / 18%); }
  /* Nagłówek ponad nakładką - panel menu jest w jego kontekście warstw */
  body.menu-otwarte .naglowek { z-index: 55; }
  .nawigacja ul { flex-direction: column; align-items: stretch; }
  .nawigacja ul a { width: 100%; min-height: 52px; padding: 8px 4px; font-size: 1.1rem; border-bottom: 1px solid var(--linia); }
  .nawigacja ul a[aria-current="page"] { border-bottom-color: var(--linia); font-weight: 700; }
  .nawigacja__akcja { margin-top: 24px; }
  .nawigacja__telefon { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; margin-top: 12px; font-weight: 600; text-decoration: none; }
  body.menu-otwarte::after { content: ""; position: fixed; inset: 0; z-index: 45; background: rgb(0 0 0 / 40%); }
}

@media (max-width: 560px) {
  .pasek__pelny, .pasek__godziny { display: none; }
  .pasek__krotki { display: inline; }
  :root { --wys-naglowka: 73px; }
  .naglowek .srodek { min-height: 72px; gap: 8px; }
  .naglowek .logo { flex: 1 1 auto; min-width: 0; }
  .naglowek .logo__znak { width: 48px; height: auto; }
  .logo { gap: 10px; }
  .logo__nazwa { font-size: 0.98rem; white-space: normal; }
}

.stopka { background: var(--tlo-szare); border-top: 4px solid var(--zielen); padding-block: 56px 0; font-size: 0.97rem; }
.stopka a { color: var(--atrament); text-decoration: none; }
.stopka a:hover { color: var(--zielen); text-decoration: underline; }
.stopka__siatka { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: 40px; }
.stopka__opis { margin-top: 18px; color: var(--tekst-cichy); max-width: 38ch; }
.stopka__rejestr { margin-top: 14px; font-size: 0.9rem; line-height: 1.7; color: var(--tekst-cichy); }
.stopka__tytul { margin-bottom: 14px; font-size: 1.2rem; font-weight: 700; text-transform: uppercase; color: var(--zielen); }
.stopka__kolumna li + li { margin-top: 8px; }
.stopka address { line-height: 1.7; }
.stopka__kontakt { margin-top: 10px; }
.stopka__kontakt a { font-weight: 600; }
.stopka__dol { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 48px; padding-block: 18px; border-top: 1px solid var(--linia); font-size: 0.9rem; color: var(--tekst-cichy); }
.stopka__dol ul { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.stopka__dol a { color: var(--tekst-cichy); text-decoration: underline; }
.stopka__cookies { padding: 0; border: 0; background: none; color: inherit; text-decoration: underline; cursor: pointer; }

@media (max-width: 960px) {
  .stopka__siatka { grid-template-columns: 1fr 1fr; }
  .stopka__marka { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .stopka__siatka { grid-template-columns: 1fr; gap: 28px; }
}

.stopka .logo__nazwa { white-space: normal; max-width: 18ch; }