:root{
  --hdr-topbar-h: 34px;
  --hdr-main-h: 78px;

  --header-height: var(--hdr-main-h);
  --header-offset: calc(var(--hdr-topbar-h) + var(--hdr-main-h));

  --hdr-inner-gap: 1.6rem;
  --hdr-nav-gap: 1.6rem;

  --hdr-topbar-font: 0.72rem;
  --hdr-nav-font: 0.96rem;

  --hdr-logo: 54px;
  --hdr-logo-text: 1.05rem;
  --hdr-logo-track: 0.22em;
}

@media (max-width: 960px){
  :root{
    --hdr-topbar-h: 32px;
    --hdr-main-h: 70px;
    --hdr-inner-gap: 1.1rem;
    --hdr-nav-gap: 0.9rem;
    --hdr-topbar-font: 0.70rem;
    --hdr-nav-font: 1.02rem;
    --hdr-logo: 50px;
    --hdr-logo-text: 0.98rem;
    --hdr-logo-track: 0.18em;
  }
}

@media (max-width: 520px){
  :root{
    --hdr-topbar-h: 30px;
    --hdr-main-h: 64px;
    --hdr-topbar-font: 0.68rem;
    --hdr-logo: 46px;
    --hdr-logo-text: 0.92rem;
  }
}

@media (min-width: 1280px){
  :root{
    --hdr-topbar-h: 36px;
    --hdr-main-h: 86px;
    --hdr-inner-gap: 2.0rem;
    --hdr-nav-gap: 2.0rem;
    --hdr-topbar-font: 0.76rem;
    --hdr-nav-font: 1.02rem;
    --hdr-logo: 62px;
    --hdr-logo-text: 1.15rem;
  }
}

@media (min-width: 1600px){
  :root{
    --hdr-topbar-h: 38px;
    --hdr-main-h: 92px;
    --hdr-inner-gap: 2.3rem;
    --hdr-nav-gap: 2.3rem;
    --hdr-nav-font: 1.08rem;
    --hdr-logo: 68px;
    --hdr-logo-text: 1.22rem;
  }
}

@media (min-width: 1920px){
  :root{
    --hdr-topbar-h: 40px;
    --hdr-main-h: 98px;
    --hdr-inner-gap: 2.6rem;
    --hdr-nav-gap: 2.6rem;
    --hdr-nav-font: 1.12rem;
    --hdr-logo: 72px;
    --hdr-logo-text: 1.26rem;
  }
}

.site-header{
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  background: transparent;
  border-bottom: 1px solid transparent;
  transform: translateY(0);
  transition: transform .22s ease-out, background-color .25s ease, box-shadow .25s ease, border-color .25s ease, color .25s ease;
}

.site-header--hidden{ transform: translateY(-100%); box-shadow: none; }

.site-header--transparent{
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(12px);
  border-color: rgba(15,23,42,0.10);
  color: var(--sk-ink, #0f172a);
}

.site-header--solid{
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(18px);
  border-color: var(--sk-border, rgba(15,23,42,0.12));
  box-shadow: var(--sk-shadow-header, 0 18px 40px rgba(15,23,42,0.16));
  color: var(--sk-ink, #0f172a);
}

/* topbar */
.topbar{
  font-size: var(--hdr-topbar-font);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--sk-border-2, rgba(15,23,42,0.08));
  color: rgba(15,23,42,0.62);
}

.topbar-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  min-height: var(--hdr-topbar-h);
}

.topbar-contacts{
  display: flex;
  align-items: center;
  gap: 1.15rem;
  flex-wrap: wrap;
  opacity: 0.92;
}

.topbar-link{ text-decoration: none; color: inherit; letter-spacing: 0.04em; }
.topbar-link:hover{ color: rgba(15,23,42,0.86); }

.site-header--transparent .topbar{
  border-bottom-color: rgba(148,163,184,0.10);
  color: rgba(15,23,42,0.55);
}

.site-header--solid .topbar{
  background: rgba(248,250,252,0.96);
  color: rgba(15,23,42,0.62);
}

.topbar-lang{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
}

.topbar-actions{
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.topbar-link--client{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(37,99,235,0.18);
  background: rgba(37,99,235,0.08);
  color: rgba(15,23,42,0.86);
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.topbar-link--client:hover,
.topbar-link--client.is-active{
  background: rgba(37,99,235,0.14);
  border-color: rgba(37,99,235,0.30);
  color: var(--sk-accent, #2563eb);
  transform: translateY(-1px);
}

.nav-link--client{
  color: var(--sk-accent, #2563eb);
}

.lang-flag{
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.55);
  cursor: pointer;
  width: 34px;
  height: 22px;
  padding: 2px;
  border-radius: 9px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.72;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease, border-color .15s ease;
}
.site-header--solid .lang-flag{ background: #fff; }

.lang-flag img{ width: 100%; height: 100%; object-fit: contain; display: block; }
.lang-flag:hover{ transform: translateY(-1px); opacity: 0.92; }

.lang-flag.is-active{
  opacity: 1;
  border-color: rgba(15,23,42,0.24);
  box-shadow: 0 10px 22px rgba(15,23,42,0.12);
}

.lang-flag:focus-visible{
  outline: 2px solid rgba(37,99,235,0.55);
  outline-offset: 2px;
}

/* main row */
.header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hdr-inner-gap);
  min-height: var(--hdr-main-h);
}

.header-brand{ display: flex; align-items: center; flex-shrink: 0; }

.logo{
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  text-decoration: none;
  color: inherit;
}

.logo-mark{
  width: var(--hdr-logo);
  height: var(--hdr-logo);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.logo-mark img{ width: 100%; height: 100%; object-fit: cover; display: block; }

.logo-text{
  font-size: var(--hdr-logo-text);
  font-weight: 850;
  letter-spacing: var(--hdr-logo-track);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

.header-nav-wrapper{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2rem;
  flex: 1 1 auto;
  min-width: 0;
}

.main-nav{
  display: flex;
  align-items: center;
  gap: var(--hdr-nav-gap);
  min-width: 0;
}

.nav-link{
  position: relative;
  text-decoration: none;
  color: inherit;
  font-size: var(--hdr-nav-font);
  font-weight: 650;
  opacity: 0.90;
  padding: 0.55rem 0.15rem;
  transition: opacity .18s ease, color .18s ease;
}

.nav-link:hover{ opacity: 1; color: var(--sk-accent, #2563eb); }

.nav-link::after{
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0.20rem;
  height: 2px;
  border-radius: 999px;
  opacity: 0;
  transform: scaleX(0.65);
  transform-origin: center;
  background: linear-gradient(90deg,
    rgba(56,189,248,0.00),
    rgba(56,189,248,0.75),
    rgba(37,99,235,0.55),
    rgba(56,189,248,0.00)
  );
  transition: transform .22s ease, opacity .18s ease;
}

.nav-link:hover::after,
.nav-link.is-active::after{
  opacity: 1;
  transform: scaleX(1);
}

.nav-link:focus-visible{
  outline: 2px solid rgba(37,99,235,0.55);
  outline-offset: 4px;
  border-radius: 10px;
}

/* burger */
.nav-toggle{
  display: none;
  border: none;
  background: transparent;
  padding: 0.45rem;
  cursor: pointer;
  color: inherit;
  border-radius: 999px;
  transition: background-color .18s ease, box-shadow .18s ease, transform .16s ease;
}

.nav-toggle:hover{
  background: rgba(148,163,184,0.16);
  box-shadow: 0 10px 20px rgba(15,23,42,0.20);
  transform: translateY(-1px);
}

.nav-toggle__box{
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 24px;
  height: 20px;
}

.nav-toggle__bar{
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: transform .18s ease, opacity .18s ease;
}

.site-header--menu-open .nav-toggle__bar--top{ transform: translateY(6px) rotate(45deg); }
.site-header--menu-open .nav-toggle__bar--middle{ opacity: 0; }
.site-header--menu-open .nav-toggle__bar--bottom{ transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 680px){
  .topbar-link--phone,
  .topbar-link--email{ display: none; }
  .topbar-contacts{ gap: 0.9rem; }
  .topbar-link--client{ padding-inline: 0.65rem; }
}

@media (max-width: 960px){
  .nav-toggle{ display: inline-flex; align-items: center; justify-content: center; }

  .header-nav-wrapper{
    position: fixed;
    inset-inline: 0;
    top: var(--header-offset);
    display: none;
    padding: 1rem 1.25rem 1.25rem;
    background: var(--sk-nav-bg, rgba(11,22,48,0.98));
    box-shadow: var(--sk-nav-shadow, 0 18px 40px rgba(11,22,48,0.70));
    color: #f8fafc;
    z-index: 99;
    overflow-y: auto;
    max-height: calc(100dvh - var(--header-offset));
  }

  .site-header--menu-open .header-nav-wrapper,
  .header-nav-wrapper.is-open{ display: block; }

  .main-nav{
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .topbar-actions{
    gap: 0.55rem;
  }

  .nav-link{
    width: 100%;
    padding: 0.7rem 0.4rem;
    border-radius: 12px;
  }

  .nav-link:hover{
    background: rgba(37,99,235,0.18);
    color: #fff;
  }

  .nav-link::after{
    left: 0.4rem;
    right: 0.4rem;
    bottom: 0.35rem;
  }
}

body.is-nav-open{ overflow: hidden; }
/* =========================================
   MOBILE MENU: białe jak header (spójne)
   ========================================= */

@media (max-width: 960px){
  .header-nav-wrapper{
    background: rgba(255,255,255,0.96) !important;
    color: var(--sk-ink, #0f172a) !important;

    border-top: 1px solid rgba(15,23,42,0.10);
    box-shadow: 0 18px 40px rgba(15,23,42,0.16) !important;
  }

  .nav-link{
    color: rgba(15,23,42,0.90) !important;
  }

  .nav-link:hover{
    background: rgba(37,99,235,0.08) !important;
    color: var(--sk-accent, #2563eb) !important;
  }

  /* burger (X) ma zostać w kolorze headera, nie biały */
  .site-header--menu-open .nav-toggle{
    color: var(--sk-ink, #0f172a) !important;
  }

  .site-header--menu-open .nav-toggle:hover{
    background: rgba(148,163,184,0.18) !important;
    box-shadow: 0 10px 20px rgba(15,23,42,0.20) !important;
  }
}