/* ==========================================================================
   obars.css  (Opodal BAR + Socials)  — minimalny pakiet dla navbaru
   Wrzucić do: /css/navbar/obars.css
   Ładować PO main.css, żeby zawsze wygrywał konflikty.
   ========================================================================== */

/* --- brand background (Opodal orange) --- */
.navbar.bg-jumpers{
  background-color: #f0a500;
  display: flex;
  color: #efefef;
  font-family: 'Open Sans', sans-serif;
  font-size: 17px;
  text-align: center;
}

/* upewniamy się że linki w tej belce są jasne */
.navbar.bg-jumpers .nav-link,
.navbar.bg-jumpers .navbar-brand{
  color: #efefef;
}

.navbar.bg-jumpers .nav-link:hover{
  color: #ffffff;
}

.mr-auto, .mx-auto {
  margin-right: auto !important;
  margin-top: 0;
}

/* (opcjonalnie) żeby treść nie wchodziła pod stały navbar */
body { padding-top: 150px; }

/* --- NAVBAR: baza (bootstrap-like, ale lokalnie) --- */
.navbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  width: 100%;
  min-height: 57px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .5rem 1rem;
  flex-wrap: wrap;
  z-index: 5000;
}

/* jeśli masz klasy typu navbar-dark w HTML (masz w Twoim css) */
.navbar.navbar-dark .navbar-brand{ color:#fff; }
.navbar.navbar-dark .navbar-nav .nav-link{ color: rgba(255,255,255,.75); }

/* brand */
.navbar .navbar-brand{
  /*display: inline-block;*/
  padding-top: .3000rem;
  padding-bottom: .3200rem;
  margin-right: 1rem;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  line-height: inherit;
  white-space: nowrap;
  text-decoration: none;
  color: #fff;
  
}

/* linki menu — UWAGA: celowo .navbar .nav-link (większa specyficzność niż a.nav-link z main.css) */
.navbar .nav-link{
  display: block;
  padding: .5rem 1rem;
  text-decoration: none;
  text-align: center;
  color: rgba(255,255,255,.75);
}

/* menu list */
.navbar .navbar-nav{
  display: flex;
  flex-direction: column;
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}
.navbar .navbar-nav .nav-link{
  padding-right: 1rem;
  padding-left: 1rem;
}

/* collapse */
.collapse:not(.show){ display:none; }

.navbar .navbar-collapse{
  flex-basis: 100%;
  flex-grow: 1;
  align-items: center;
  margin-bottom: 5px;
}

/* toggler (hamburger) */
.navbar .navbar-toggler{
  padding: .05rem .05rem;
  font-size: 1.25rem;
  line-height: 1;
  background-color: transparent;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: .25rem;
  color: rgba(255,255,255,.5);
}
.navbar .navbar-toggler:not(:disabled):not(.disabled){ cursor:pointer; }

.navbar .navbar-toggler-icon{
  display:inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  content:"";
  background: no-repeat center center;
  background-color: #f0a500;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* dropdown hover (jeśli używasz dropdown-menu bez JS) */
.navbar .navbar-nav li:hover > .dropdown-menu{ display:block; }

/* --- desktop >= 1000px --- */
@media (min-width: 1000px){
  .navbar.navbar-expand-lg{
    flex-flow: row nowrap;
    justify-content: flex-start;
  }
  .navbar.navbar-expand-lg .navbar-nav{
    flex-direction: row;
  }
  .navbar.navbar-expand-lg .navbar-nav .nav-link{
    padding-right: .5rem;
    padding-left: .5rem;
  }
  .navbar.navbar-expand-lg .navbar-toggler{ display:none; }
  .navbar.navbar-expand-lg .navbar-collapse{
    display:flex !important;
    flex-basis:auto;
  }
  .navbar{
    justify-content: space-between;
  }
}

/* --- SOCIALS + ZEGAR --- */
#zegar{
  color: rgba(255,255,255,.75);
  padding: 10px 15px;
}

.socials{
  position: relative;
  padding: 0 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  font-size: 30px;
}

/* ikonki (klasy na <a>) */
.socials .twit, .socials .fb, .socials .ln, .socials .is, .socials .yt{
  position: relative;
  float: left;
  margin: 0 4px;
}

/* domyślny kolor */
.socials a.twit:link, .socials a.twit:visited,
.socials a.fb:link,   .socials a.fb:visited,
.socials a.ln:link,   .socials a.ln:visited,
.socials a.is:link,   .socials a.is:visited,
.socials a.yt:link,   .socials a.yt:visited{
  color: rgba(255,255,255,.75);
  text-decoration: none;
}

/* hover */
.socials a.twit:hover, .socials a.twit:active{ color: rgba(0,0,0,.75); }
.socials a.fb:hover,   .socials a.fb:active{ color: #3b5998; }
.socials a.ln:hover,   .socials a.ln:active{ color: #0e76a8; }

.socials a.is:hover, .socials a.is:active{
  background: linear-gradient(to top right, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.socials a.yt:hover{
  color: #FF0000;
  background: linear-gradient(to bottom, white, #FF0000, #FF0000, #FF0000, white);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.socials a.yt:active{ color:#FF0000; }

/* ====== FORCE FIX dla globalnego html/body * ====== */

.navbar .socials a,
.navbar .socials a i,
.navbar .socials a svg {
  color: inherit !important;
  fill: currentColor !important;
}

/* Domyślny kolor */
.navbar .socials a {
  color: rgba(255,255,255,.75) !important;
}

/* Hover kolory */
.navbar .socials a.twit:hover { color: #000000 !important; }
.navbar .socials a.fb:hover   { color: #3b5998 !important; }
.navbar .socials a.ln:hover   { color: #0e76a8 !important; }

.navbar .socials a.is:hover {
  background: linear-gradient(to top right,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.navbar .socials a.yt:hover { color: #FF0000 !important; }

/* ===== Logo navbar ===== */

.navbar .obars-logo {
  display: inline-block;
  vertical-align: middle;
  transition: all 0.2s ease;
}

/* >= 1000px (desktop) */
@media (min-width: 1000px) {
  .navbar .obars-logo {
    width: 30px;
    height: 30px;
    margin-right: .35rem;
  }
}

/* < 1000px (tablet / mobile) */
@media (max-width: 999px) {
  .navbar .obars-logo {
    width: 45px;
    height: 45px;
    margin-right: .35rem;
  }
  .navbar .navbar-nav{
    margin-bottom: 20px;
  }
  .socials{
    margin-bottom: 10px;
  }
}