/* =========================================
   FOOTER BASE
   ========================================= */
#footer, 
#footer *, 
#footer *::before, 
#footer *::after {
  box-sizing: border-box;
}

#footer { 
  background-color: var(--footer-bg); 
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

#footer a { 
  color: var(--footer-link); 
  background-color: var(--footer-link-bg); 
  border-radius: var(--footer-border-radius); 
}

#footer a.special { 
  color: var(--footer-highlight-link); 
  background-color: var(--footer-highlight-bg-hover); 
  border-radius: var(--footer-highlight-border-radius); 
}

#footer a.special:hover { 
  color: var(--footer-highlight-link-hover); 
  background-color: var(--footer-highlight-bg-hover); 
}

#footer a:hover { 
  color: oklch(0.54 0.19 27); 
  transition: 0s; 
  background-color: transparent; 
}

/* =========================================
   BOTTOM FOOTER
   ========================================= */
#footer .bottom-footer { 
  padding: 0 0 28px 0; 
  overflow-y: hidden; 
  background-color: var(--bottom-bar-bg); 
}

#footer .bottom-footer .container-fluid { 
  padding: 0 72px; 
}

#footer .bottom-footer .wrapper { 
  display: flex; 
  flex-wrap: wrap; 
  align-items: center; 
  justify-content: space-between; 
}

#footer .bottom-footer p { 
  color: var(--bottom-bar-text); 
  display: flex; 
  flex-wrap: wrap; 
  justify-content: space-between; 
  font-family: 'Chivo Mono', monospace; 
  font-size: 12px; 
  font-feature-settings: "tnum"; 
  line-height: 1.55; 
  margin-bottom: 0; 
}

#footer .bottom-footer a { 
  color: var(--bottom-bar-link); 
  font-family: 'Chivo Mono', monospace; 
  font-size: 12px; 
  line-height: 1.55; 
}

#footer .bottom-footer a:hover { 
  color: var(--bottom-bar-link-hover); 
}

#footer .bottom-footer .socials a { 
  background-color: var(--bottom-bar-social-bg); 
}

#footer .bottom-footer .socials a:hover { 
  background-color: var(--bottom-bar-social-bg-hover); 
}

#footer .bottom-footer .copyright,
#footer .bottom-footer .author { 
  text-align: center; 
}

/* =========================================
   FOOTER INFORMATION
   ========================================= */
.footer-information { 
  padding-bottom: 0; 
}

.footer-information .one-information { 
  max-width: 100%; 
  margin-bottom: 30px; 
}

.footer-information .foto { 
  min-width: 60px; 
  width: 60px; 
  height: 60px; 
}

.footer-information .text { 
  padding: 0 15px; 
}

.footer-information a img { 
  display: none; 
}

/* =========================================
   UPPER MENU
   ========================================= */
.upper-menu { 
  padding: clamp(36px, 5vw, 56px) clamp(20px, 5vw, 72px); 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 
  gap: 32px 24px; 
  margin: 0; 
  list-style: none; 
  border-top: 1px solid #cfd3e5; 
}

.upper-menu > .company-name { 
  margin: 0; 
  font-family: 'Chivo Mono', monospace; 
  font-weight: 500; 
  font-size: 20px; 
  letter-spacing: -0.01em; 
}

.upper-menu > .company-name span { 
  color: oklch(0.63 0.21 27); 
}

.upper-menu > .my-dropdown { 
  display: grid; 
  gap: 10px; 
  align-content: start; 
  list-style: none; 
  min-width: 0; 
}

.upper-menu > .my-dropdown > .my-dropdown-toggle { 
  margin: 0; 
  padding: 0; 
  font-size: 13px; 
  letter-spacing: 0.14em; 
  text-transform: uppercase; 
  color: #75798c; 
  display: flex; 
  align-items: center; 
  gap: 12px; 
  text-decoration: none; 
}

.upper-menu > .my-dropdown > .my-dropdown-toggle::before { 
  content: ""; 
  width: 6px; 
  height: 6px; 
  background: oklch(0.63 0.21 27); 
  display: inline-block; 
  flex: 0 0 auto; 
}

.upper-menu > .my-dropdown > .my-dropdown-toggle > span { 
  text-transform: uppercase; 
}

.upper-menu .caret,
.upper-menu .my-dropdown-mini { 
  display: none; 
}

.upper-menu .dropdown-menu, 
.upper-menu .submenu-permanent { 
  position: static; 
  display: grid; 
  width: 100%; 
  min-width: 0; 
  padding: 0; 
  margin: 0; 
  border: 0; 
  background: transparent; 
  box-shadow: none; 
  list-style: none; 
  gap: 10px; 
}

.upper-menu .dropdown-menu li, 
.upper-menu .submenu-permanent li { 
  list-style: none; 
  margin: 0; 
  padding: 0; 
}

.upper-menu .dropdown-menu li::before, 
.upper-menu .submenu-permanent li::before { 
  display: none; 
}

.upper-menu .dropdown-menu li a, 
.upper-menu .submenu-permanent li a { 
  text-decoration: none; 
  display: flex; 
  align-items: center; 
  gap: 7px; 
}

.upper-menu .dropdown-menu li a span, 
.upper-menu .submenu-permanent li a span { 
  margin: 0; 
  font-size: 13px; 
  text-transform: uppercase; 
  letter-spacing: 0.06em; 
  color: #595d6c; 
  font-weight: 400; 
  line-height: 1.55; 
  font-family: 'Chivo Mono', monospace; 
}

.upper-menu .dropdown-menu li a:hover span, 
.upper-menu .dropdown-menu li a:hover, 
.upper-menu .submenu-permanent li a:hover span, 
.upper-menu .submenu-permanent li a:hover { 
  color: var(--color-accent); 
}

.upper-menu .special a.my-dropdown-toggle span { 
  color: #75798c; 
  margin: 0; 
  font-family: 'Chivo Mono', monospace; 
}

.upper-menu .special a.my-dropdown-toggle span::before { 
  display: none; 
}

/* =========================================
   MEDIA QUERIES
   ========================================= */

/* Desktop */
@media (min-width: 992px) {
  .upper-menu { 
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 
    gap: 32px 24px; 
  }
  .upper-menu > .my-dropdown { 
    display: grid; 
  }
  .upper-menu .my-dropdown-mini { 
    display: none !important; 
  }
  .upper-menu .dropdown-menu, 
  .upper-menu .submenu-permanent { 
    display: grid !important; 
    position: static; 
    width: 100%; 
    min-width: 0; 
    padding: 0; 
    margin: 0; 
    border: 0; 
    background: transparent; 
    box-shadow: none; 
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991px) {
  .upper-menu { 
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 
    gap: 28px 20px; 
  }
  .upper-menu > .my-dropdown { 
    display: grid; 
  }
  .upper-menu .my-dropdown-mini { 
    display: none !important; 
  }
  .upper-menu .dropdown-menu, 
  .upper-menu .submenu-permanent { 
    display: grid !important; 
    position: static; 
    width: 100%; 
    min-width: 0; 
    padding: 0; 
    margin: 0; 
    border: 0; 
    background: transparent; 
    box-shadow: none; 
  }
  #footer .bottom-footer .wrapper { 
    align-items: center; 
  }
  .footer-information .one-information { 
    max-width: calc(50% - 10px); 
    margin-bottom: 30px; 
  }
  .footer-information .foto { 
    min-width: 60px; 
    width: 60px; 
    height: 60px; 
  }
  .footer-information .text { 
    padding: 0 15px; 
  }
  .footer-information a img { 
    display: none; 
  }
}

/* Mobile */
@media (max-width: 767px) {
  .upper-menu { 
    display: flex; 
    flex-direction: column; 
    gap: 0; 
    padding: 31px 15vw; 
    border-top: 1px solid #cfd3e5; 
  }
  .upper-menu > .company-name { 
    order: 10; 
    padding: 29px 0 0; 
    margin-top: 13px; 
  }
  .upper-menu > .my-dropdown { 
    position: relative; 
    padding: 5px 0; 
    border-bottom: none; 
    display: block; 
  }
  .upper-menu > .my-dropdown > .my-dropdown-toggle { 
    margin: 0; 
    padding: 0; 
    letter-spacing: 0.14em; 
    color: #3f424d; 
    display: flex; 
    align-items: center; 
  }
  .upper-menu > .my-dropdown > .my-dropdown-toggle::before, 
  .upper-menu .special a.my-dropdown-toggle span::before { 
    display: none !important; 
  }
  .upper-menu > .my-dropdown > .my-dropdown-mini { 
    position: absolute; 
    right: 2px; 
    top: 3px; 
    width: 30px; 
    height: 30px; 
    margin: 0; 
    padding: 0; 
    border: 0; 
    background: transparent; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer; 
  }
  .upper-menu > .my-dropdown > .my-dropdown-mini .line1, 
  .upper-menu > .my-dropdown > .my-dropdown-mini .line2 { 
    display: none; 
  }
  .upper-menu > .my-dropdown > .my-dropdown-mini::after { 
    content: "+"; 
    font-size: 17px; /* Ten element istnieje tylko na mobile, potrzebuje swojej czcionki */
    color: #75798c; 
    font-weight: 300; 
  }
  .upper-menu > .my-dropdown > .my-dropdown-mini[aria-expanded="true"]::after { 
    content: "\2212"; 
  }
  .upper-menu > .my-dropdown > .dropdown-menu, 
  .upper-menu > .my-dropdown > .submenu-permanent { 
    display: none; 
    position: static; 
    width: 100%; 
    min-width: 0; 
    padding: 12px 0 0 0; 
    margin: 0; 
    border: 0; 
    background: transparent; 
    box-shadow: none; 
  }
  .upper-menu > .my-dropdown > .dropdown-menu li a, 
  .upper-menu > .my-dropdown > .submenu-permanent li a { 
    display: flex; 
    padding: 5px 0; 
  }
  .upper-menu > .my-dropdown > .dropdown-menu li a span, 
  .upper-menu > .my-dropdown > .submenu-permanent li a span { 
    line-height: 1.55; 
  }
  
  /* Link-171 specific exceptions */
  #link-171 { 
    padding: 14px 0 0; 
  }
  #link-171 > .my-dropdown-toggle, 
  #link-171 > .my-dropdown-mini { 
    display: none !important; 
  }
  #link-171 > .dropdown-menu { 
    display: block !important; 
    padding: 0; 
  }
  #link-171 > .dropdown-menu li a { 
    padding: 7px 0; 
  }
  #link-171 > .dropdown-menu li a i { 
    color: oklch(0.63 0.21 27); 
    margin-right: 8px; 
    font-size: 16px; /* Ikona dostępna tylko w rozwijanym linku */
  }
  
  /* Footer Mobile */
  #footer .bottom-footer { 
    padding: 0 15vw 28px; 
  }
  #footer .bottom-footer .container-fluid { 
    padding: 0; 
  }
  #footer .bottom-footer .wrapper { 
    flex-direction: column; 
    align-items: flex-start; 
    text-align: left; 
    gap: 8px; 
  }
  #footer .bottom-footer .copyright, 
  #footer .bottom-footer .author { 
    text-align: left; 
    margin: 0; 
  }
  
  /* Footer Information Mobile */
  .footer-information { 
    padding-bottom: 0; 
  }
  .footer-information .one-information { 
    max-width: 100%; 
    margin-bottom: 30px; 
  }
  .footer-information .foto { 
    min-width: 60px; 
    width: 60px; 
    height: 60px; 
  }
  .footer-information .text { 
    padding: 0 15px; 
  }
}