/* ====== PROSTY, CZYTELNY HEADER: topbar #ffcc03 + biały mainbar ====== */
:root{
  --brand:#ffcc03;
  --text:#0b0f14;
  --muted:#2b3240;
  --line:#e8eef5;
}

/* Layout / utilities */
.custom-hdr *{ box-sizing:border-box; }
.custom-hdr .container{ max-width:1240px; margin:0 auto; padding:0 22px; }
.custom-hdr .header-shape{ display:none; }  /* bez ozdobników */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ================= TOPBAR (ŻÓŁTY) ================= */
.custom-hdr .topbar{
  background:var(--brand); color:var(--text); font-size:14px;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.custom-hdr .topbar .container{
  display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:46px;
}
.custom-hdr .topbar__contacts,
.custom-hdr .topbar__social{
  display:flex; align-items:center; gap:22px; margin:0; padding:0; list-style:none;
}

/* kontakty */
.custom-hdr .topbar .i{ width:16px; height:16px; color:var(--text); opacity:.8; flex:0 0 16px; }
.custom-hdr .topbar__contacts li{ display:flex; align-items:center; gap:9px; color:var(--text); }
.custom-hdr .topbar__contacts a{
  color:var(--text); text-decoration:none; font-weight:600;
  transition:opacity .18s ease, transform .18s ease;
}
.custom-hdr .topbar__contacts a:hover{ opacity:.85; transform:translateY(-1px); }

/* SOCIAL – ciemne na żółtym, widoczne */
.custom-hdr .topbar__social a.soc{
  --size:34px;
  width:var(--size); height:var(--size);
  display:grid; place-items:center;
  color:#111; background:transparent; border:1px solid rgba(0,0,0,.32);
  border-radius:8px; text-decoration:none;
  transition:transform .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}
.custom-hdr .topbar__social a.soc svg{ width:18px; height:18px; display:block; }
.custom-hdr .topbar__social a.soc svg path{ fill:currentColor !important; }
.custom-hdr .topbar__social a.soc:hover{
  transform:translateY(-1px);
  background:#111; color:#fff; border-color:#111;
}

/* ================= MAINBAR (BIAŁY) ================= */
.custom-hdr .mainbar{
  position:sticky; top:0; z-index:30;
  background:#fff; color:var(--text);
  border-bottom:1px solid var(--line);
}
.custom-hdr .mainbar .container{
  display:flex; align-items:center; column-gap:16px; min-height:76px;
}

/* logo */
.custom-hdr .logo{ flex:0 0 auto; line-height:0; }
.custom-hdr .logo img{ height:46px; width:auto; display:block; }

/* burger (mobile) */
.custom-hdr .nav-toggle{
  display:none; margin-left:auto; background:none; border:0; color:var(--text);
  cursor:pointer; width:44px; height:44px; border-radius:8px;
}
.custom-hdr .nav-toggle:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.custom-hdr .nav-toggle__bar{
  width:22px; height:2px; background:currentColor; display:block; position:relative; border-radius:2px; margin:0 auto;
  transition:transform .2s ease, background-color .2s ease;
}
.custom-hdr .nav-toggle__bar::before,
.custom-hdr .nav-toggle__bar::after{
  content:""; position:absolute; left:0; width:22px; height:2px; background:currentColor; border-radius:2px;
  transition:transform .2s ease, opacity .2s ease, top .2s ease, bottom .2s ease;
}
.custom-hdr .nav-toggle__bar::before{ top:-7px } 
.custom-hdr .nav-toggle__bar::after{ top:7px }
/* animacja w "X" */
.custom-hdr .nav-toggle.is-active .nav-toggle__bar{ background:transparent; }
.custom-hdr .nav-toggle.is-active .nav-toggle__bar::before{ top:0; transform:rotate(45deg); }
.custom-hdr .nav-toggle.is-active .nav-toggle__bar::after{ top:0; transform:rotate(-45deg); }

/* NAV – desktop */
.custom-hdr nav.nav{ flex:1 1 auto; margin-left:auto; }
.custom-hdr nav.nav .menu{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; justify-content:flex-end;
  gap: clamp(18px, 2.4vw, 38px);
}

/* wyłącz stare pseudo-underline */
.custom-hdr nav.nav .menu > li > a::after{ content:none !important; }

/* Linki: tylko podkreślenie (hover + aktywna) */
.custom-hdr nav.nav .menu > li{ position:relative; white-space:nowrap; }
.custom-hdr nav.nav .menu > li > a{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--muted); text-decoration:none; font-weight:800; letter-spacing:.25px;
  line-height:1; padding:26px 0;
  background-image:linear-gradient(var(--brand),var(--brand));
  background-repeat:no-repeat; background-size:0% 3px; background-position:0 100%;
  transition: background-size .18s ease, color .18s ease;
}
.custom-hdr nav.nav .menu > li > a:hover{
  color:#0c121a; background-size:100% 3px;
}

/* AKTYWNA BEZ TŁA – tylko podkreślona */
.custom-hdr nav.nav .menu > li.current-menu-item > a,
.custom-hdr nav.nav .menu > li.current-menu-ancestor > a{
  color:#0c121a; background-size:100% 3px;
}

/* Submenu – czysto, biało */
.custom-hdr nav.nav .menu > li > ul{
  position:absolute; top:100%; left:0; min-width:230px; padding:12px;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  display:none; box-shadow:0 18px 38px rgba(16,24,40,.12); z-index:50;
}
.custom-hdr nav.nav .menu > li:hover > ul{ display:block; }
.custom-hdr nav.nav .menu > li > ul > li > a{
  display:block; padding:10px 12px; color:#0c121a; text-decoration:none; border-radius:8px;
  background-image:linear-gradient(var(--brand),var(--brand));
  background-repeat:no-repeat; background-size:0% 2px; background-position:0 100%;
  transition: background-size .18s ease, background-color .18s ease, color .18s ease;
}
.custom-hdr nav.nav .menu > li > ul > li > a:hover{
  background-color:#fafafa; background-size:100% 2px;
}

/* ================= RWD ≤ 992px ================= */
@media (max-width: 992px){
  /* TOPBAR */
  .custom-hdr .topbar .container{ flex-wrap:wrap; gap:10px; }
  .custom-hdr .topbar__contacts{ flex:1 1 100%; gap:14px; font-size:13px; }
  .custom-hdr .topbar__social{ margin-left:auto; gap:10px; }

  /* MAINBAR */
  .custom-hdr .mainbar .container{ min-height:64px; }
  .custom-hdr .logo img{ height:40px; }
  .custom-hdr .nav-toggle{ display:block; } /* pokaż burgera */

  /* OFF-CANVAS: kontener */
  .custom-hdr nav.nav{
    position:fixed; top:0; right:0; bottom:0; left:auto;
    width:min(86vw,420px); background:#fff;
    transform:translateX(100%); transition:transform .25s ease;
    z-index:9999; padding:0; /* padding przejmie lista, bo mamy nagłówek nav__head */
    border-left:1px solid var(--line);
    box-shadow:-24px 0 64px rgba(16,24,40,.22);
  }
  .custom-hdr nav.nav.is-open{ transform:none; }

  /* Główka panelu z przyciskiem zamykania */
  .custom-hdr .nav__head{
    display:flex; align-items:center; justify-content:space-between;
    position:sticky; top:0; z-index:2;
    height:56px; padding:0 12px 0 16px;
    background:var(--brand); color:var(--text);
    border-bottom:1px solid rgba(0,0,0,.08);
  }
  .custom-hdr .nav__title{ font-weight:800; letter-spacing:.2px; }

  .custom-hdr .nav-close{
    display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px; border-radius:10px;
    background:#fff; color:#111; border:1px solid rgba(0,0,0,.15);
    cursor:pointer;
  }
  .custom-hdr .nav-close span{ font-size:22px; line-height:1; }
  .custom-hdr .nav-close:hover{ background:#111; color:#fff; border-color:#111; }

  /* Lista w panelu */
  .custom-hdr nav.nav .menu{
    flex-direction:column; align-items:flex-start; gap:12px;
    padding:16px 20px 24px;   /* odstęp pod belką nav__head */
  }
  .custom-hdr nav.nav .menu > li{ width:100%; }
  .custom-hdr nav.nav .menu > li > a{
    padding:12px 0; font-size:18px; background-size:0% 3px;
  }

  /* Submenu w panelu – proste listy, bez cieni */
  .custom-hdr nav.nav .menu > li > ul{
    position:static; display:none; border:none; box-shadow:none; padding:6px 0 0 12px; margin-top:2px;
  }
  .custom-hdr nav.nav .menu > li.open > ul{ display:block; }

  /* Blokada przewijania tła przy otwartym menu (dodaje JS) */
  html.nav-lock, html.nav-lock body{ overflow:hidden; }
}

/* ================= RWD ≤ 768px – doprecyzowanie topbaru ================= */
@media (max-width: 768px){
  /* Topbar: 1 rząd – tel + mail po lewej, social po prawej */
  .custom-hdr .topbar .container{
    display:flex; align-items:center; justify-content:space-between;
    padding:8px 12px; gap:12px;
  }
  .custom-hdr .topbar__contacts{
    display:flex; align-items:center; gap:14px;
    flex-wrap:nowrap; flex:1 1 auto; font-size:13px;
  }
  .custom-hdr .topbar__contacts a{
    white-space: nowrap;
  }
  /* ukryj adres na XS */
  .custom-hdr .topbar__contacts li:nth-child(3){ display:none; }

  .custom-hdr .topbar__social{ margin-left:12px; gap:8px; flex:0 0 auto; }
  .custom-hdr .topbar__social a.soc{ --size:32px; border-radius:8px; }

  /* Mainbar: logo lewo, burger prawo */
  .custom-hdr .mainbar .container{
    justify-content:space-between; padding:8px 14px; min-height:60px; column-gap:12px;
  }
  .custom-hdr .logo img{ height:38px; }
  .custom-hdr .nav-toggle{ width:42px; height:42px; }
  .custom-hdr .nav-toggle__bar,
  .custom-hdr .nav-toggle__bar::before,
  .custom-hdr .nav-toggle__bar::after{ width:22px; }
}

/* Dostępność – focus ring */
.custom-hdr a:focus-visible, .custom-hdr button:focus-visible{
  outline:2px solid var(--brand); outline-offset:2px;
}
/* --- HIDE CLOSE ON DESKTOP, SHOW ONLY ON MOBILE --- */
.custom-hdr .nav__head,
.custom-hdr .nav-close{
  display:none !important;    /* desktop: ukryte */
}

/* mobile/off-canvas */
@media (max-width: 992px){
  .custom-hdr .nav__head{
    display:flex !important;  /* żółta belka „Menu” */
    align-items:center; justify-content:space-between;
  }
  .custom-hdr .nav-close{
    display:inline-flex !important; /* przycisk × */
  }
}