/*
[_spis]
  [_header]
    [_logo]
    [_menu]
  [_footer]
  [_cta]  

*/

/*[_header]*/



#header{
  align-items:center;
}


.top{
     display: grid;
     grid-template-columns: var(--grid-2);
     height: 7rem;     
     gap:var(--s64);
     width: var(--min-width);
     max-width: var(--min-width);
    margin-left: auto;
    margin-right: auto;
}

.top__first{
  align-items:flex-start;
  height:100%;
  justify-content: center;
}

.top__second{
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: flex-end;
}


/*[_logo][_4]*/

:root{
  --c-logo-sygnet: var(--c-p-bialy);
  --c-logo-napis_gora: var(--c-p-bialy);
  --c-logo-napis_dol: var(--c-p-accent);
}

.logo{
  position: relative;
  z-index: 1000;
  display: flex;
}

#logo_svg{
  width:190px;
  height: auto;
  position: relative;
  z-index: 1000;
}

#logo_symbol path{
  fill: var(--c-logo-sygnet);
}

#logo_hydraulik path{
  fill: var(--c-logo-napis_gora);
}

#logo_bydgoszcz{
  fill: var(--c-logo-napis_dol);
}

/*[_menu][_5]*/

:root{
  --c-menu-desktop-link-poz1-normal: var(--c-p-bialy);
  --c-menu-desktop-link-poz1-active: var(--c-p-accent);
  --c-menu-desktop-submenu-bg: var(--c-p-primary);
  --c-menu-desktop-link-poz2-normal: var(--c-p-bialy);
  --c-menu-desktop-link-poz2-active: var(--c-p-accent);
  
  --c-menu-mobile-bg: var(--c-p-primary);
  --c-menu-mobile-hamburger: var(--c-p-bialy);
  --c-menu-mobile-hamburger-close:  var(--c-p-bialy);
  --c-menu-mobile-link-poz1-normal: var(--c-p-tekst-na-ciemnym);
  --c-menu-mobile-link-poz1-active: var(--c-p-accent);
  --c-menu-mobile-link-poz2-normal: var(--c-p-tekst-na-ciemnym);		
  --c-menu-mobile-link-poz2-active: var(--c-p-accent);
  --c-menu-mobile-border: var(--c-p-border);

}


.hamburger-box{
  top: 2px;
}

.hamburger-inner, .hamburger-inner::after, .hamburger-inner::before {
  width: 34px;
  height: 2px;
}

.hamburger-inner::before {
  top: -8px;
}

.hamburger-inner::after{
  bottom: -8px;
}

/* RESET MENU */
.nav__list,
.nav__submenu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* KONTENER */
.site-nav {
}

.site-nav--open{

}


/* HAMBURGER – domyślnie ukryty na desktopie */
.nav-toggle {
  display: none;
  border: 0;
  background: none;
}




/* ===== DESKTOP (min-width: 768px) ===== */



@media (min-width: 768px) {

        .nav__list {
          display: flex;
          align-items: center;
          gap: var(--s32);
        }

        .nav__item {
          position: relative;
        }

        .nav__link {
          display: inline-flex;
          align-items: center;
          text-decoration: none;
        }

        /* kolor linka desktop */
        a.nav__link{
          color: var(--c-menu-desktop-link-poz1-normal);
        }

        /* kolor aktywnej podstrony */
        .current_page_item  a.nav__link,
        .nav__link[aria-current="page"]{
          color: var(--c-menu-desktop-link-poz1-active);
        }

        /* Ikonka strzałki przy rodzicu (desktop) */
        .nav__item--has-children > .nav__link::after {
          content: "";
          display: inline-block;
          margin-left: 0.35rem;
          border: .5rem solid transparent;
          border-top-color: currentColor;
          transform-origin: center;
          transition: transform 0.2s ease;
          position: relative;
          top: 0.4rem;
        }

        .nav__item--has-children:hover > .nav__link::after,
        .nav__item--has-children:focus-within > .nav__link::after {
          transform: rotate(180deg);
          top:-0.2rem;
        }

        /* Przyciski do submenu widoczne tylko na mobile, więc na desktopie chowamy */
        .nav__submenu-toggle {
          display: none;
        }

        
        /* Submenu – domyślnie ukryte */
        /* kolor submenu desktop */
        .nav__submenu {
          position: absolute;
          top: 100%;
          left: 0;
          /* min-width: 200px; */
          display: none;
          background: var(--c-menu-desktop-submenu-bg);
          box-shadow: var(--shadow);
          border-radius: var(--radius);
          z-index: 999;
          padding: var(--s12);
        }

        .nav__submenu-item {
          width: 100%;
        }

        /* link submenu */
        .nav__submenu-link {
          display: block;
          padding: var(--s4) var(--s12);
          text-decoration: none;
          white-space: nowrap;
          font-size: 1.6rem;
        }

        a.nav__submenu-link{
          color: var(--c-menu-desktop-link-poz2-normal);
        }

        /* Pokaż submenu na hover i focus-within (klawiatura) */
        .nav__item--has-children:hover > .nav__submenu,
        .nav__item--has-children:focus-within > .nav__submenu {
          display: block;
        }

        .current-menu-item.nav__submenu-item .nav__submenu-link{
          color: var(--c-menu-desktop-link-poz2-active);
        }


        /* ostatni przycisk w menu dekstop zrobiony jako przycisk */
       /*
        .primary .nav__list > li.nav__item:nth-last-child(1)  a{
          border-radius: var(--radius-box);
          background-color: var(--c-accent);
          -webkit-box-shadow: 0px 0px 0px clamp(0.2rem, calc(0.2rem + ((1vw - 0.32rem) * 0.4167)), 0.6rem) var(--primary-button-box-shadow);
          -moz-box-shadow: 0px 0px 0px clamp(0.2rem, calc(0.2rem + ((1vw - 0.32rem) * 0.4167)), 0.6rem) var(--primary-button-box-shadow);
          box-shadow: 0px 0px 0px clamp(0.2rem, calc(0.2rem + ((1vw - 0.32rem) * 0.4167)), 0.6rem) var(--primary-button-box-shadow);
          font-size: var(--buttonFontSize);
          transition-property: color .35s cubic-bezier(.374, .176, .25, 1), border-color .35s cubic-bezier(.368, .182, .25, 1), background-color .35s cubic-bezier(.386, .188, .25, 1);
          letter-spacing: 1px;
          color: var(--c-primary);
          text-decoration:none;
      }
      */

}

/* ===== MOBILE (max-width: 767px) ===== */

@media (max-width: 767px) {

      /* usawienie kontenera rozwijanego menu mobilnego - jest to ul*/
      .site-nav--open .nav__list{
        position: absolute;
        left: 0;
        top:0;
        margin-top: 7rem;
        width: 100%;
        /* height: calc(100% - 7rem); */
        background-color: var(--c-menu-mobile-bg);
      }

      /* wyglad hamburgera - kreski */  
        .hamburger-inner, 
        .hamburger-inner:after, 
        .hamburger-inner:before{
          background-color: var(--c-menu-mobile-hamburger);
        }

        /* wyglad krzyzyka, do zamkniecia  */
        .hamburger.is-active .hamburger-inner, 
        .hamburger.is-active .hamburger-inner::after, 
        .hamburger.is-active .hamburger-inner::before{
          background-color: var(--c-menu-mobile-hamburger-close);
        }

      /* polozenie hamburgera */  
        .nav-toggle {
          display: inline-flex;
          padding-right: 0;
        }

        /* krzyzyk, zeby byl z index wiekszy niz tlo, to zostaje widoczny */
        .site-nav--open .nav-toggle{
          position: relative;
          z-index: 1000;
        }

      
        /* Domyślnie menu schowane */
        .nav__list {
          position: relative;
          z-index: 999;
          display: none;
          flex-direction: column;
          gap: 0;
          justify-content: center;
          align-items: center;
          width: 100%;
        }

        
        .site-nav.site-nav--open .nav__list {
          display: flex;
          overflow-y: scroll;
          padding-bottom: 5rem;
          padding-top: 5rem;
        }

        .nav__item {
          border-top: 1px solid var(--c-menu-mobile-border);
          display: grid;
          grid-template-columns: 1fr 1fr;
          align-items: stretch;
          /* flex-direction: column; */
          padding-left: 2rem;
          padding-right: 0;
          width: 100%;
        }

       
        a.nav__link {
          flex: 1;
          padding: 0.75rem 0;
          text-decoration: none;
          color: var(--c-menu-mobile-link-poz1-normal);
        }

        .current_page_item  a.nav__link,
         .nav__link[aria-current="page"]{
           color: var(--c-menu-mobile-link-poz1-active);
        }
        

        /* przycisk submenu obok tekstu */
        .nav__submenu-toggle {
          display: inline-flex;
          align-items: center;
          justify-content: flex-end;
          padding: 0 3rem;
          border: 0;
          background: none;
          cursor: pointer;
        }

        .nav__submenu-toggle-icon {
          display: inline-block;
          width: 0;
          height: 0;
          border-left: 0.5rem solid transparent;
          border-right: 0.5rem solid transparent;
          border-top: 0.6rem solid var(--c-menu-mobile-link-poz1-normal);
          transition: transform 0.2s ease;
        }

        .nav__item--open > .nav__submenu-toggle .nav__submenu-toggle-icon {
          transform: rotate(180deg);
        }

        .nav__submenu {
          grid-column: 1 / -1; 
          display: none;
          flex-direction: column;
          width: 100%;
          padding-left: 1rem;  
        }

        .nav__submenu-link {
          display: block;
          padding: 0.5rem 0;
          text-decoration: none;
        }

        /* Rodzic otwarty – pokaż submenu */
        .nav__item--open > .nav__submenu {
          display: flex;
        }

        
        a.nav__submenu-link{
          color: var(--c-menu-mobile-link-poz2-normal);
        }

        .current-menu-item.nav__submenu-item .nav__submenu-link{
          color: var(--c-menu-mobile-link-poz2-active);
        }
        


}


/*[_footer] */

footer{
  margin-top: auto;
  padding-top: var(--s128);
  padding-bottom: var(--s128);
  background-color: var(--c-bg);
}

.footer_inner{
  width: var(--min-width);
  max-width: var(--min-width);
  margin-left: auto;
  margin-right: auto;
}

.footer_left{
  color: var(--c-p-bialy);
}

.footer_right{
  text-align:right;
  justify-content:flex-end;
}

.footer_right a{
  color: var(--c-p-bialy);
}

@media (max-width: 767px) {
  .footer_inner{
    grid-template-columns: var(--grid1);
  }
  .footer_left{
    justify-self:center;
    order:2;
  }

  .footer_left div{
    width:100%;
    text-align:center;
  }
  
  .footer_right{
    justify-self:center;
    order:1;
  }
  
}

/*[_cta]*/

.cta{
    display: grid;
    grid-template-columns: var(--grid-2);
    width:100%;
    gap:var(--s32);
}

.cta__desc{
    text-align: left;
    display: flex;
    flex: 1;
    justify-content: center;
    flex-direction: column;
}

.cta__buttons{
  
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    /* flex-wrap: wrap; */
    height: 100%;
    align-items: center;

}

.cta__buttons > * + * { 
   margin-left: var(--s32);
}


@media (max-width: 992px) {
  .cta{
     grid-template-columns: var(--grid-1);
  }

  .cta__buttons{
    justify-content: flex-start;      
  }
  
}

@media (max-width: 380px) {
  .cta__buttons{
    flex-direction:column;
    justify-content:flex-start;
    align-content:flex-start;
  }

  .cta__buttons .button{
     width:100%;
     text-align: center;
  }
  
  .cta__buttons > * + * {   
     margin-top: var(--s24);
     margin-left:0;
  }
}