/* ==========================================================================
   Anna Jaworowska — layout wspólny (nagłówek + nawigacja).
   Wymaga: tokens.css, components.css. Wczytywać na KAŻDEJ podstronie.
   Stopka nie ma tu reguł — .aj-footer jest już w components.css (system).

   Standalone vs Elementor:
   - Standalone (ten plik + partials/header.html + partials/footer.html
     wklejone w każdej podstronie): tak działa bieżący prototyp — każda
     podstrona jest samodzielnym plikiem HTML.
   - Elementor: te same znaczniki (partials/header.html, partials/footer.html)
     wchodzą raz do Header / Footer w Theme Builderze; z podstron wtedy
     wycina się <header> i <footer>, zostaje tylko <main>. layout.css ładuje
     się globalnie (Custom CSS motywu), nie per-podstrona.
   ========================================================================== */

.aj-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(15,14,13,.92); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--aj-line-dark-soft);
}
.aj-header__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--aj-s-3); padding-block: var(--aj-s-2);
}
.aj-header .aj-logo { font: italic 400 1.375rem/1 var(--aj-font-display); color: var(--aj-gold); text-decoration: none; }
.aj-header .aj-logo:hover { color: var(--aj-gold-hover); }
.aj-header .aj-btn--ghost { --_fg: var(--aj-on-dark); --_bd: var(--aj-line-dark); }
.aj-header .aj-btn--ghost:hover { --_bd: var(--aj-gold); --_fg: var(--aj-gold-hover); }
.aj-nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.aj-burger {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  border: 1px solid var(--aj-line-dark); color: var(--aj-on-dark); cursor: pointer;
}
.aj-burger span { display: block; width: 20px; height: 1px; background: currentColor; position: relative; }
.aj-burger span::before, .aj-burger span::after { content: ""; position: absolute; left: 0; width: 20px; height: 1px; background: currentColor; }
.aj-burger span::before { top: -6px; } .aj-burger span::after { top: 6px; }

.aj-nav { display: flex; align-items: center; gap: var(--aj-s-4); }
.aj-header .aj-social--header { color: var(--aj-on-dark-body); gap: 0; }
.aj-header .aj-social--header a { width: 30px; height: 30px; }
.aj-header .aj-social--header svg { width: 16px; height: 16px; }
.aj-nav__list { display: flex; align-items: center; gap: var(--aj-s-3); margin: 0; padding: 0; list-style: none; }
.aj-nav__list a {
  color: var(--aj-on-dark-body); text-decoration: none;
  font: 500 var(--aj-fs-eyebrow)/1 var(--aj-font-body); letter-spacing: .06em; text-transform: uppercase;
}
.aj-nav__list a:hover { color: var(--aj-gold); }
.aj-nav__item--drop { position: relative; }
/* Most niewidocznego "mostka" nad przerwą top:100%+margin-top — bez niego
   kursor jadący w dół z linku "Oferta" do rozwinięcia opuszczał hoverowalny
   obszar w połowie drogi i menu znikało, zanim dało się kliknąć pozycję. */
.aj-nav__item--drop::after {
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: var(--aj-s-2);
}
.aj-nav__sub {
  position: absolute; top: 100%; left: 0; margin-top: var(--aj-s-2); min-width: 220px;
  display: grid; gap: 2px; padding: var(--aj-s-2); background: var(--aj-bg-dark-raised);
  border: 1px solid var(--aj-line-dark); opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity var(--aj-dur) var(--aj-ease), transform var(--aj-dur) var(--aj-ease);
}
.aj-nav__item--drop:hover .aj-nav__sub,
.aj-nav__item--drop:focus-within .aj-nav__sub { opacity: 1; visibility: visible; transform: translateY(0); }
.aj-nav__sub a { display: block; padding: var(--aj-s-1) var(--aj-s-2); text-transform: none; letter-spacing: normal; font: 400 var(--aj-fs-small)/1.3 var(--aj-font-body); }

@media (max-width: 767px) {
  .aj-nav { display: none; }
  .aj-burger { display: flex; }
  .aj-nav-toggle:checked ~ .aj-header__row .aj-nav {
    display: flex; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0; padding: var(--aj-s-2) var(--aj-gutter) var(--aj-s-3);
    background: var(--aj-bg-dark); border-bottom: 1px solid var(--aj-line-dark-soft);
  }
  .aj-nav-toggle:checked ~ .aj-header__row .aj-nav__list { flex-direction: column; align-items: flex-start; gap: 0; width: 100%; }
  .aj-nav-toggle:checked ~ .aj-header__row .aj-nav__list li { width: 100%; border-top: 1px solid var(--aj-line-dark-soft); }
  .aj-nav-toggle:checked ~ .aj-header__row .aj-nav__list a { display: block; padding: var(--aj-s-2) 0; }
  .aj-nav-toggle:checked ~ .aj-header__row .aj-nav__sub { position: static; opacity: 1; visibility: visible; transform: none; margin-top: 0; border: 0; padding-left: var(--aj-s-2); }
  .aj-nav-toggle:checked ~ .aj-header__row .aj-nav__cta { margin-top: var(--aj-s-2); }
  .aj-nav-toggle:checked ~ .aj-header__row .aj-social--header { margin-top: var(--aj-s-2); margin-left: -7px; }
}

/* --- Breadcrumb (wspólny — na każdej wewnętrznej podstronie, w ciemnym hero) --
   Przeniesione z page-oferta.css przy podstronie #2, żeby się nie rozjechało.  */
.aj-breadcrumb {
  margin: 0 0 var(--aj-s-3);
  font: 500 var(--aj-fs-eyebrow)/1.5 var(--aj-font-body);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--aj-on-dark-muted);
}
.aj-breadcrumb a { color: var(--aj-on-dark-muted); text-decoration: none; }
.aj-breadcrumb a:hover { color: var(--aj-gold); }
.aj-breadcrumb span[aria-hidden] { margin: 0 var(--aj-s-1); opacity: .6; }
.aj-breadcrumb .aj-breadcrumb__current { color: var(--aj-on-dark-body); }