/* ===========================================================
   Sailingo – ribbon under logo that ends just after logo (45° cut)
   Load this after master.css
   =========================================================== */

/* Ustawienia – łatwo zmienisz wysokość paska i „dodatkowy” margines za logo */
:root{
  --logo-bar-h: 122px;
  --logo-cut: var(--logo-bar-h);
  --logo-ribbon-extra: 120px;  /* było 16px — pasek sięgnie dalej za logo */
  --logo-bg: rgba(255,255,255,0.85);
  --logo-ribbon-w: 0px;       /* tu nic nie zmieniaj */
}

/* Trzymaj header w 1 linii na desktopie */
@media (max-width: 767.98px){
  :root{ --logo-ribbon-extra: 70px; }
}


/* Brand – bez zmiany display (żeby nie dublować light/dark) */
.header-main .navbar-brand{
  max-width:360px!important;
  padding-right:10px;
  flex:0 0 auto;
  position:relative;
  z-index:2;               /* ponad wstęgą */
}

/* LOGO: bez tła – zostaje tylko wstęga */
.header-main .navbar-brand .normal-logo{
  display:block;
  max-height:calc(var(--logo-bar-h) - 12px);
  height:auto;
  width:auto;
  /* usuwamy białe tło spod logo: */
  background:transparent;
  padding:0;               /* bez „ramki” – teraz robi to pasek */
  border-radius:0;
  box-sizing:border-box;
}

/* WSTĘGA pod logo: start od lewej krawędzi headera, koniec tuż za logo */
.header-main{position:relative; z-index:1;}
.header-main::before{
  content:"";
  position:absolute;
  left:0;
  top:calc(50% - var(--logo-bar-h)/2);
  /* KONIEC PASKA: dokładnie do prawej krawędzi logo */
  width:var(--logo-ribbon-w);
  min-width:var(--logo-cut);              /* bezpieczeństwo przy bardzo wąskich zakresach */
  height:var(--logo-bar-h);
  background:var(--logo-bg);

  /* ZAMIAST grota (→) robimy trapez z pojedynczym ukośnym ścięciem “/” */
clip-path: polygon(
  0 0,
  100% 0,
  calc(100% - var(--logo-cut)) 100%,
  0 100%
);

  z-index:0;
  pointer-events:none;
}


/* Upewnij się, że menu i przyciski są nad wstęgą */
.header-main nav,
.header-main .header-main__link,
.header-main .header-main__btn{position:relative; z-index:2;}

/* Responsywność */
@media (max-width:1199.98px){
  :root{ --logo-bar-h:92px; --logo-cut:var(--logo-bar-h); }
  .header-main .navbar-brand{max-width:280px!important;}
}
@media (max-width:767.98px){
  :root{ --logo-bar-h:80px; --logo-cut:var(--logo-bar-h); }
}

/* Delikatne wyrównanie pionowe */
.header-main .row.align-items-center,
.header-main .row.align-items-center > [class*="col-"]{align-items:center;}
/* === TOP BAR: wyrównanie ikon i przełącznika języków === */

/* Prawa kolumna top-bara: ikony + przełącznik w jednej linii, centrowane pionowo */
.header .top-bar .row > .col-auto:last-child{
  display: flex;
  align-items: center;
  gap: 16px; /* odstęp między social a language-switcher */
}

/* Sama lista sociali jako rząd ikon */
.header .top-bar .header-soc{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;              /* usuń ewentualne marginesy ul */
  padding: 0;
}

/* Każda pozycja i link – bez łamania linii i z pionowym centrowaniem ikony */
.header .top-bar .header-soc__item{
  display: inline-flex;
}
.header .top-bar .header-soc__link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3px;
  height: 32px;
  line-height: 1;
  text-decoration: none;
}
.header .top-bar .header-soc__link .ic{
  display: block;         /* usuwa wpływ linii bazowej */
  line-height: 1;
  font-size: 16px;        /* dopasuj w razie potrzeby */
}

/* Przełącznik języków jako rząd elementów, wyśrodkowanych pionowo */
.header .top-bar .language-switcher{
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
}
.header .top-bar .language-switcher .lang-label,
.header .top-bar .language-switcher .lang-link,
.header .top-bar .language-switcher .separator{
  display: inline-block;
  line-height: 1.2;
  vertical-align: middle;
}
.header .top-bar .language-switcher .separator{
  opacity: .55;
}

/* Drobne doszlifowanie całego top-bara, żeby nic nie „ciągnęło” ikon do góry */
.header .top-bar{
  line-height: 1.2;
}
.header .top-bar .top-bar__item{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Bezpiecznik: wstęga pod logo nie może wpływać na top-bar */
.header .top-bar{ position: relative; z-index: 3; }