/* =========================================================
   SYSTECH — REDESIGN 2026 / ETAP 1
   Fundament wizualny + nagłówek.
   Celowo ograniczony do headera, aby nie ingerować jeszcze
   w kolejne sekcje strony.
   ========================================================= */

:root{
  --systech-red:#ef1717;
  --systech-red-dark:#c90f0f;
  --systech-graphite:#20282e;
  --systech-graphite-deep:#182026;
  --systech-header-text:#f3f5f6;
  --systech-header-muted:#aeb8bf;
  --systech-border-light:#e4e8eb;
  --systech-radius:8px;
  --systech-content-width:1280px;
}

html{
  scroll-padding-top:106px;
}

/* ===============================
   HEADER — desktop
   =============================== */

.site-header{
  background:linear-gradient(180deg,#252e35 0%,#1e272d 100%);
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:0 5px 18px rgba(0,0,0,.16);
  min-height:80px;
  overflow:visible;
}

.site-header .container.nav{
  width:100%;
  max-width:var(--systech-content-width);
  min-height:80px;
  margin:0 auto;
  padding:0 22px;
  gap:24px;
  overflow:visible;
}

.site-header .logo{
  flex:0 0 auto;
  align-items:center;
  gap:13px;
  position:relative;
  z-index:2;
}

.site-header .logo a{
  line-height:0;
}

.site-header .logo-main{
  width:auto;
  height:96px;
  margin:0;
  transform:translateY(10px);
  border-radius:6px;
  box-shadow:0 4px 10px rgba(0,0,0,.16);
}

.site-header .logo-award{
  width:auto;
  height:86px;
  margin:0;
  transform:translateY(15px);
  border-radius:6px;
  box-shadow:0 4px 10px rgba(0,0,0,.12);
}

.site-header .nav-right{
  min-width:0;
  margin-left:auto;
  gap:24px;
}

.site-header .menu{
  min-width:0;
  gap:27px;
}

.site-header .menu a{
  position:relative;
  margin:0;
  padding:33px 0 28px;
  color:var(--systech-header-text);
  font-size:13px;
  line-height:1;
  font-weight:600;
  letter-spacing:.015em;
  white-space:nowrap;
  border:0;
  transition:color .18s ease;
}

.site-header .menu a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:20px;
  height:2px;
  border-radius:2px;
  background:var(--systech-red);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .18s ease;
}

.site-header .menu a:hover,
.site-header .menu a.active{
  color:#fff;
}

.site-header .menu a:hover::after,
.site-header .menu a.active::after{
  transform:scaleX(1);
}

/* Telefon */

.site-header .header-phone{
  flex:0 0 auto;
  white-space:nowrap;
}

@media(min-width:901px){
  .site-header .header-phone{
    order:3;
    margin-left:2px;
    padding-left:22px;
    border-left:1px solid rgba(255,255,255,.16);
  }
}

.site-header .header-phone-link{
  display:flex;
  align-items:center;
  gap:10px;
  color:inherit;
  text-decoration:none;
}

.site-header .header-phone-link:hover{
  text-decoration:none;
}

.site-header .header-phone-icon{
  width:34px;
  height:34px;
  fill:var(--systech-red);
  flex:0 0 auto;
}

.site-header .header-phone-number{
  color:#ff1a1a;
  font-size:23px;
  font-weight:600;
  letter-spacing:.025em;
}


/* Przełącznik motywu jak we wzorcu: mały, poziomy suwak.
   Na desktopie theme.js przenosi go z menu do prawej części headera. */
@media(min-width:901px){
  .site-header .nav-right > .theme-toggle{
    order:2;
    position:relative;
    width:39px;
    height:22px;
    min-width:39px;
    margin:0;
    padding:0;
    border:0;
    border-radius:999px;
    background:#cfd5d9;
    color:#687178;
    box-shadow:inset 0 1px 2px rgba(0,0,0,.18);
    overflow:hidden;
    transform:none;
  }

  .site-header .nav-right > .theme-toggle::before{
    content:"";
    position:absolute;
    z-index:2;
    left:3px;
    top:3px;
    width:16px;
    height:16px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 1px 3px rgba(0,0,0,.28);
    transition:transform .2s ease;
  }

  .site-header .nav-right > .theme-toggle:hover{
    background:#d8dde0;
    transform:none;
  }

  .site-header .nav-right > .theme-toggle .theme-icon{
    position:absolute;
    z-index:1;
    width:10px;
    height:10px;
  }

  .site-header .nav-right > .theme-toggle .theme-icon-moon{
    display:block;
    right:4px;
    left:auto;
    color:#656e74;
  }

  .site-header .nav-right > .theme-toggle .theme-icon-sun{
    display:none;
    left:4px;
    right:auto;
    color:#656e74;
  }

  .site-header .nav-right > .theme-toggle .theme-toggle-text{
    display:none;
  }

  html.theme-dark .site-header .nav-right > .theme-toggle{
    background:#cfd5d9;
    color:#687178;
  }

  html.theme-dark .site-header .nav-right > .theme-toggle::before{
    transform:translateX(17px);
  }

  html.theme-dark .site-header .nav-right > .theme-toggle .theme-icon-moon{
    display:none;
  }

  html.theme-dark .site-header .nav-right > .theme-toggle .theme-icon-sun{
    display:block;
  }

  html.theme-dark .site-header .nav-right > .theme-toggle:hover{
    background:#d8dde0;
  }
}

/* Header ma ten sam charakter w obu motywach. */
html.theme-dark .site-header{
  background:linear-gradient(180deg,#20282e 0%,#182026 100%);
  border-bottom-color:rgba(255,255,255,.06);
  box-shadow:0 5px 18px rgba(0,0,0,.35);
}

html.theme-dark .site-header .menu a{
  color:var(--systech-header-text);
}

html.theme-dark .site-header .menu a:hover,
html.theme-dark .site-header .menu a.active{
  color:#fff;
}

html.theme-dark .site-header .header-phone-number{
  color:#ff2a2a;
}


/* ===============================
   Mniejsze desktopy / laptopy
   =============================== */

@media (min-width:901px) and (max-width:1180px){
  .site-header .container.nav{
    padding-left:14px;
    padding-right:14px;
    gap:15px;
  }

  .site-header .logo{
    gap:9px;
  }

  .site-header .logo-main{
    height:86px;
    transform:translateY(9px);
  }

  .site-header .logo-award{
    height:78px;
    transform:translateY(13px);
  }

  .site-header .nav-right{
    gap:14px;
  }

  .site-header .menu{
    gap:16px;
  }

  .site-header .menu a{
    font-size:11.5px;
  }

  .site-header .header-phone-icon{
    width:28px;
    height:28px;
  }

  .site-header .header-phone-number{
    font-size:18px;
  }

}

/* ===============================
   MOBILE
   =============================== */

@media(max-width:900px){
  html{
    scroll-padding-top:82px;
  }

  .site-header{
    min-height:72px;
  }

  .site-header .container.nav{
    min-height:72px;
    padding:0 12px;
    gap:8px;
  }

  .site-header .logo{
    gap:8px;
  }

  .site-header .logo-main{
    height:66px;
    transform:translateY(4px);
    border-radius:5px;
  }

  .site-header .logo-award{
    height:58px;
    transform:translateY(3px);
    border-radius:5px;
  }

  .site-header .nav-right{
    gap:6px;
  }

  .site-header .header-phone-link{
    gap:6px;
  }

  .site-header .header-phone-icon{
    width:19px;
    height:19px;
  }

  .site-header .header-phone-number{
    font-size:14px;
    letter-spacing:0;
  }


  .site-header .menu-toggle{
    width:48px;
    height:52px;
    padding:8px;
    gap:6px;
  }

  .site-header .menu-toggle span{
    width:30px;
    height:3px;
    margin:0 auto;
    border-radius:3px;
    background:#f1f4f6;
  }

  .site-header .menu{
    top:100%;
    background:#20282e;
    border-bottom:1px solid rgba(255,255,255,.08);
    box-shadow:0 10px 20px rgba(0,0,0,.22);
  }

  .site-header .menu a{
    width:100%;
    margin:0;
    padding:17px 20px;
    border-top:1px solid rgba(255,255,255,.07);
    color:#f1f4f6;
    font-size:13px;
  }

  .site-header .menu a::after{
    display:none;
  }

  .site-header .menu a:hover,
  .site-header .menu a.active{
    color:#fff;
    background:rgba(255,255,255,.05);
  }

  html.theme-dark .site-header .menu{
    background:#182026;
    border-bottom-color:rgba(255,255,255,.08);
  }
}

@media(max-width:470px){
  .site-header .logo-award{
    height:49px;
  }

  .site-header .header-phone-icon{
    display:none;
  }

  .site-header .header-phone-number{
    font-size:13px;
  }
}

@media(max-width:390px){
  .site-header .logo-award{
    display:none;
  }

  .site-header .header-phone-number{
    font-size:14px;
  }
}