/* ==========================================================================
   Affido nav - premium glass bar
   Gorne menu dla publicznej strony Affido bv. Plik samowystarczalny:
   korzysta z tokenow bald.css, ale ma bezpieczne fallbacki.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Zmienne lokalne
   -------------------------------------------------------------------------- */
.anav{
  --anav-ink: var(--ink, #0e1013);
  --anav-ink-2: var(--ink-2, #161a20);
  --anav-ink-3: var(--ink-3, #1f242c);
  --anav-line: var(--line, #2b323c);
  --anav-bone: var(--bone, #f4f1ea);
  --anav-muted: var(--mute, #8d95a1);
  --anav-brand: var(--amber, #f5911e);
  --anav-signal: var(--signal, #e8481c);
  --anav-green: var(--kas, #4a9e2f);
  --anav-radius: var(--radius, 14px);
  --anav-font: var(--font, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  --anav-ease: var(--ease, cubic-bezier(.2, .7, .2, 1));
  --anav-on-brand: var(--on-accent, #111);
  --pill-x: 0px;
  --pill-w: 0;
  --pill-h: 38px;
}

/* --------------------------------------------------------------------------
   Pasek glowny
   -------------------------------------------------------------------------- */
.anav{
  position: sticky;
  top: 0;
  z-index: 100;
  color: var(--anav-bone);
  font-family: var(--anav-font);
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.015)),
    rgba(14,16,19,.72);
  border-bottom: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 34px rgba(0,0,0,.18);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  transition:
    background-color .22s var(--anav-ease),
    box-shadow .22s var(--anav-ease),
    border-color .22s var(--anav-ease);
}

.anav.is-stuck{
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.01)),
    rgba(14,16,19,.9);
  border-bottom-color: rgba(255,255,255,.16);
  box-shadow: 0 18px 46px rgba(0,0,0,.34);
}

.anav__in{
  position: relative;
  z-index: 101;
  width: min(100% - 32px, 1460px);
  min-height: 76px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding-block: 12px;
  transition:
    min-height .22s var(--anav-ease),
    padding-block .22s var(--anav-ease);
}

.anav.is-stuck .anav__in{
  min-height: 62px;
  padding-block: 8px;
}

.anav a,
.anav button{
  -webkit-tap-highlight-color: transparent;
}

.anav a:focus-visible,
.anav button:focus-visible{
  outline: 2px solid var(--anav-brand);
  outline-offset: 3px;
  border-radius: 10px;
}

/* --------------------------------------------------------------------------
   Marka i akcje
   -------------------------------------------------------------------------- */
.anav__brand{
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  color: var(--anav-bone);
  text-decoration: none;
}

.anav__brand img,
.anav__brand svg{
  max-height: 42px;
  width: auto;
}

.anav__act{
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto;
  margin-left: 4px;
}

.anav__act a,
.anav__act button{
  min-height: 44px;
}

/* --------------------------------------------------------------------------
   Pigułki desktopowe
   -------------------------------------------------------------------------- */
.anav__links{
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 4px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 999px;
  background: rgba(255,255,255,.045);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.anav__links a{
  position: relative;
  z-index: 1;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 15px;
  border-radius: 999px;
  color: rgba(244,241,234,.82);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  transition:
    color .2s var(--anav-ease),
    background-color .2s var(--anav-ease);
}

.anav__links a:hover{
  color: #fff;
  background: rgba(255,255,255,.08);
}

.anav__links a[aria-current="page"]{
  color: var(--anav-on-brand);
  background:
    linear-gradient(135deg, var(--anav-brand), var(--anav-signal));
}

/* JS przejmuje tlo aktywnej pigułki przez transformowany wskaznik. */
.anav__links.has-pill-ind a[aria-current="page"]{
  background: transparent;
}

.anav__links.has-pill-ind a[aria-current="page"]:not(.is-pill-target){
  color: rgba(244,241,234,.82);
}

.anav__links.has-pill-ind a.is-pill-target{
  color: var(--anav-on-brand);
  background: transparent;
}

.pill-ind{
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 0;
  width: 1px;
  height: var(--pill-h);
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, var(--anav-brand), var(--anav-signal) 76%),
    var(--anav-brand);
  box-shadow:
    0 10px 24px rgba(245,145,30,.28),
    inset 0 1px 0 rgba(255,255,255,.24);
  transform: translate3d(var(--pill-x), -50%, 0) scaleX(var(--pill-w));
  transform-origin: left center;
  transition:
    transform .32s var(--anav-ease),
    height .32s var(--anav-ease),
    opacity .16s ease;
}

.anav__links.has-pill-ind .pill-ind{
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Hamburger
   -------------------------------------------------------------------------- */
.anav__burger{
  position: relative;
  display: none;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  color: var(--anav-bone);
  font-size: 0;
  line-height: 0;
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  cursor: pointer;
  transition:
    background-color .2s var(--anav-ease),
    border-color .2s var(--anav-ease),
    transform .2s var(--anav-ease);
}

.anav__burger::before,
.anav__burger::after{
  content: "";
  position: absolute;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition:
    transform .22s var(--anav-ease),
    box-shadow .22s var(--anav-ease);
}

.anav__burger::before{
  transform: translateY(-5px);
  box-shadow: 0 5px 0 currentColor;
}

.anav__burger::after{
  transform: translateY(5px);
}

.anav__burger:hover{
  border-color: rgba(245,145,30,.52);
  background: rgba(245,145,30,.16);
}

.anav.is-open .anav__burger::before{
  transform: rotate(45deg);
  box-shadow: 0 0 0 transparent;
}

.anav.is-open .anav__burger::after{
  transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Panel mobilny
   -------------------------------------------------------------------------- */
.anav__panel{
  position: fixed;
  inset: 0;
  z-index: -1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: calc(92px + env(safe-area-inset-top)) 22px calc(28px + env(safe-area-inset-bottom));
  color: var(--anav-bone);
  background:
    radial-gradient(circle at 18% 18%, rgba(245,145,30,.22), transparent 34%),
    radial-gradient(circle at 82% 74%, rgba(74,158,47,.22), transparent 30%),
    rgba(14,16,19,.94);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px);
  transition:
    opacity .24s var(--anav-ease),
    visibility .24s var(--anav-ease),
    transform .24s var(--anav-ease);
}

.anav.is-open .anav__panel,
.anav__panel.is-open{
  z-index: 99;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.anav__panel a{
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100%, 560px);
  margin-inline: auto;
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--anav-radius);
  color: rgba(244,241,234,.9);
  font-size: clamp(20px, 6vw, 34px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: 0;
  text-decoration: none;
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
  transform: translateY(8px);
  opacity: 0;
  transition:
    color .2s var(--anav-ease),
    background-color .2s var(--anav-ease),
    border-color .2s var(--anav-ease),
    transform .24s var(--anav-ease),
    opacity .24s var(--anav-ease);
}

.anav__panel a::after{
  content: "";
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  margin-left: 18px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

.anav.is-open .anav__panel a,
.anav__panel.is-open a{
  opacity: 1;
  transform: translateY(0);
}

.anav.is-open .anav__panel a:nth-of-type(1),
.anav__panel.is-open a:nth-of-type(1){ transition-delay: .04s; }
.anav.is-open .anav__panel a:nth-of-type(2),
.anav__panel.is-open a:nth-of-type(2){ transition-delay: .08s; }
.anav.is-open .anav__panel a:nth-of-type(3),
.anav__panel.is-open a:nth-of-type(3){ transition-delay: .12s; }
.anav.is-open .anav__panel a:nth-of-type(4),
.anav__panel.is-open a:nth-of-type(4){ transition-delay: .16s; }
.anav.is-open .anav__panel a:nth-of-type(5),
.anav__panel.is-open a:nth-of-type(5){ transition-delay: .20s; }
.anav.is-open .anav__panel a:nth-of-type(6),
.anav__panel.is-open a:nth-of-type(6){ transition-delay: .24s; }
.anav.is-open .anav__panel a:nth-of-type(7),
.anav__panel.is-open a:nth-of-type(7){ transition-delay: .28s; }
.anav.is-open .anav__panel a:nth-of-type(8),
.anav__panel.is-open a:nth-of-type(8){ transition-delay: .32s; }

.anav__panel a:hover,
.anav__panel a[aria-current="page"]{
  color: var(--anav-on-brand);
  border-color: transparent;
  background: linear-gradient(135deg, var(--anav-brand), var(--anav-signal));
}

body.anav-lock{
  overflow: hidden;
  touch-action: none;
}

/* --------------------------------------------------------------------------
   Responsywnosc
   -------------------------------------------------------------------------- */
@media (max-width: 1120px){
  .anav__links a{
    padding-inline: 12px;
    font-size: 13px;
  }
}

@media (max-width: 900px){
  .anav__in{
    width: min(100% - 24px, 1460px);
    min-height: 70px;
    gap: 12px;
  }

  .anav.is-stuck .anav__in{
    min-height: 60px;
  }

  .anav__links,
  .anav__act{
    display: none;
  }

  .anav__burger{
    display: inline-flex;
    margin-left: auto;
  }
}

@media (min-width: 901px){
  .anav__panel{
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Ograniczony ruch
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .anav,
  .anav *,
  .anav *::before,
  .anav *::after{
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .pill-ind{
    opacity: 0 !important;
  }

  .anav__links.has-pill-ind a[aria-current="page"]{
    color: var(--anav-on-brand);
    background: linear-gradient(135deg, var(--anav-brand), var(--anav-signal));
  }

  .anav__links.has-pill-ind a.is-pill-target:not([aria-current="page"]){
    color: rgba(244,241,234,.82);
  }
}

/* ==========================================================================
   Przelacznik jezyka: globus + lista. Rzad pieciu kodow zjadal pol paska,
   a na 375 px rozwalal uklad — dlatego jedno kolo i rozwijana lista.
   ========================================================================== */
.anav__lang{position:relative}
.anav__lang > summary{
  list-style:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
  min-height:40px;padding:8px 12px;
  border:1px solid rgba(255,255,255,.16);border-radius:999px;
  color:var(--bone,#f4f1ea);font-size:12.5px;font-weight:600;
  transition:border-color .18s ease,background .18s ease;
}
.anav__lang > summary::-webkit-details-marker{display:none}
.anav__lang > summary svg{width:17px;height:17px}
.anav__lang > summary:hover{background:rgba(255,255,255,.07)}
.anav__lang[open] > summary{border-color:var(--amber,#f5911e);color:#fff}
.anav__lang .langs{
  position:absolute;right:0;top:calc(100% + 8px);z-index:60;
  display:flex;flex-direction:column;gap:2px;min-width:190px;padding:6px;
  background:rgba(14,16,19,.96);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.14);border-radius:14px;
  box-shadow:0 18px 40px rgba(0,0,0,.4);
}
.anav__lang .langs button{
  display:flex;align-items:center;gap:10px;width:100%;
  min-height:40px;padding:8px 10px;
  background:none;border:0;border-radius:10px;cursor:pointer;
  color:var(--mute,#b9c1cc);font:inherit;font-size:13.5px;text-align:left;
  transition:background .16s ease,color .16s ease;
}
.anav__lang .langs button:hover{background:rgba(255,255,255,.08);color:#fff}
.anav__lang .langs button[aria-pressed="true"]{color:var(--amber,#f5911e)}
.anav__lang .langs .code{min-width:26px;font-weight:700;font-size:11.5px;letter-spacing:.04em}
.anav__lang--panel{margin:10px 0}
.anav__lang--panel .langs{position:static;min-width:0}

/* Pasek postepu czytania (site-motion.js). Cienka kreska u gory, bez wplywu na uklad. */
.read-bar{
  position:fixed;left:0;top:0;z-index:200;
  width:100%;height:2px;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--amber,#f5911e),var(--signal,#e8481c));
  pointer-events:none;
}
@media (prefers-reduced-motion:reduce){.read-bar{display:none}}

/* CTA w panelu mobilnym: reguly `.anav__panel a` zrownaly go z pozostalymi pozycjami menu,
   a to jedyna akcja, ktora ma sie wyroznic. */
.anav__panel a.btn-primary{
  justify-content:center;
  margin-top:6px;
  border-color:transparent;
  color:#14100b;
  font-size:clamp(17px,4.4vw,20px);
  background:linear-gradient(135deg,var(--anav-brand,#f5911e),var(--anav-signal,#e8481c));
  box-shadow:0 12px 28px rgba(232,72,28,.3);
}
.anav__panel a.btn-primary::after{content:none}