/**
 * Style nagłówka i stopki WordPressa (js/wp-layout/).
 * Źródło dla CSS: dealers_vue — public/css/naviWP.css + <style scoped> z WordPressHeader.vue, public/css/footer.css + <style scoped> z WordPressFooter.vue.
  * Fonty: volvoNovumR = volvoCentumR, volvoNovumM = volvoCentumSB (te same pliki VolvoCentum_Rg / _SBd).
 */

/* ===================== NAGŁÓWEK ===================== */

#wp-header-container {
  font-family: volvoCentumR;
}

/* --- Zasłona pod boczną nawigacją --- */
#wp-header-container .blackcurtainSlideNavi {
  width: 100%;
  height: 100%;
  background: #141414;
  opacity: 0;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1001;
  transition: 0.4s;
}

/* --- Główny pasek --- */
#wp-header-container .mainHeaderSectionContainer {
  width: 100%;
  height: 64px;
  background: #fafafa;
}
#wp-header-container .mainHeaderSectionMainRow {
  width: 100%;
  height: 100%;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 1.1rem 0 1.5rem;
  border-bottom: solid 1px #f5f4f4;
  display: flex;
  align-items: center;
}
#wp-header-container .logoMainColumn {
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
#wp-header-container .logoHref {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
}
#wp-header-container .logoHref .logoContainer {
  width: 98px;
  height: 100%;
}
#wp-header-container .logoContainer svg {
  width: 100%;
}

/* Nazwa dealera z pionową kreską — w pasku i w bocznej nawigacji */
#wp-header-container .dealerNameContainer {
  position: relative;
  margin-left: 24px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
#wp-header-container .dealerNameContainer::before {
  content: "";
  height: 8px;
  width: 1px;
  background-color: #141414;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
#wp-header-container .dealerNameContainer p {
  position: relative;
  margin-bottom: 0;
  margin-left: 24px;
  font-family: volvoCentumR;
  font-size: 12px;
  color: #141414;
  text-transform: uppercase;
}

/* --- Menu w pasku --- */
#wp-header-container .navigationMainColumn {
  height: 64px;
}
#wp-header-container .navigationLinksContainer {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
}
#wp-header-container .navigationUl {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: -2px 0 0 0;
  padding: 0;
}
#wp-header-container .navigationLi {
  margin: 0 2.001rem 0 0;
}
#wp-header-container .navigationLi:last-child {
  margin-right: 0;
}
#wp-header-container .navigationLi a {
  font-family: volvoCentumSB;
  font-size: 14px;
  font-weight: 500;
  color: #141414;
  text-decoration: none;
  padding: 10px 0;
  border-bottom: solid 1px transparent;
  transition: border-bottom-color .2s ease-in-out;
}
#wp-header-container .navigationLi:hover a {
  border-bottom-color: #141414;
}

/* Lupa */
#wp-header-container .searchBtn {
  margin-right: 1.5rem;
}
#wp-header-container .searchBtn:hover a {
  border-bottom-color: transparent;
}
#wp-header-container .searchBtn img {
  position: relative;
  top: -1px;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Hamburger */
#wp-header-container .hamburgerIcon {
  position: relative;
  top: -1px;
  left: 1px;
  width: 30px;
}
#wp-header-container .a-hamburger__lines {
  position: relative;
  display: block;
  width: 23px;
  height: 17px;
  cursor: pointer;
}
#wp-header-container .a-hamburger__lines::before,
#wp-header-container .a-hamburger__lines::after {
  content: "";
  position: absolute;
  right: 0;
  height: 1px;
  border-radius: 2px;
  background-color: #141414;
  transition: all .2s ease-in-out;
}
#wp-header-container .a-hamburger__lines::before {
  top: 0;
  width: 100%;
}
#wp-header-container .a-hamburger__lines::after {
  bottom: 0;
  width: 20px;
}
#wp-header-container .a-hamburger__lines-inner {
  position: absolute;
  right: 0;
  top: 8px;
  width: 18px;
  height: 1px;
  border-radius: 2px;
  background-color: #141414;
  transition: opacity .2s ease-in-out;
}

/* --- Boczna nawigacja --- */
#wp-header-container .sideNavMainContainer {
  width: 100%;
  max-width: 445px;
  height: 100vh;
  position: fixed;
  top: 0;
  right: -100%;
  left: auto;
  z-index: 1001;
  background: #fff;
  transition: 0.4s;
}
#wp-header-container .sideNavTop {
  height: 64px;
  padding: 0 17px 0 24px;
  border-bottom: 1px solid #d5d5d5;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #fff;
}
#wp-header-container .logoSideNav {
  width: 400px;
  height: 100%;
}
#wp-header-container .sideNavHref {
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
}
#wp-header-container .sideNavHref .logoContainer {
  width: 98px;
  height: 100%;
  display: flex;
  align-items: center;
}

/* Przycisk zamknięcia (X) */
#wp-header-container .closeBtnContainer {
  width: 70px;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
#wp-header-container .closeBtn {
  width: 30px;
  cursor: pointer;
}
#wp-header-container .a-hamburger__linesClose {
  position: relative;
  display: block;
  width: 23px;
  height: 17px;
}
#wp-header-container .a-hamburger__linesClose::before,
#wp-header-container .a-hamburger__linesClose::after {
  content: "";
  position: absolute;
  right: 0;
  width: 100%;
  height: 1px;
  border-radius: 2px;
  background-color: #141414;
  transition: all .2s ease-in-out;
}
#wp-header-container .a-hamburger__linesClose::before {
  top: 8px;
  transform: rotate(-45deg);
}
#wp-header-container .a-hamburger__linesClose::after {
  bottom: 8px;
  transform: rotate(45deg);
}

/* Lista linków */
#wp-header-container .navigationSlideMainContainer {
  flex: 1 1 auto;
  overflow-y: auto;
  max-height: calc(100vh - 193px); /* nadpisywane z JS przez recalcNavHeight() */
  padding: 0.48rem 0;
  background: #fff;
}
#wp-header-container .navigationSlideUl {
  list-style: none;
  padding-left: 10px;
  margin-bottom: 0;
}
#wp-header-container .navigationSlideLi {
  padding: 9.5px 13.4px;
  background: transparent;
  transition: 0.3s;
}
#wp-header-container .navigationSlideLi:hover {
  background: #fafafa;
}
#wp-header-container .navigationSlideLi a {
  display: block;
  font-family: volvoCentumSB;
  font-size: 20px;
  font-weight: 500;
  color: #141414;
  text-decoration: none;
}

/* Dół bocznej nawigacji: link do Volvo Car Poland + social media */
#wp-header-container .slideNavigationfooterContainer {
  width: 100%;
  position: absolute;
  bottom: 1px;
  padding-bottom: 24px;
  background: #fff;
}
#wp-header-container .slideNavigationFooterUl {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}
#wp-header-container .slideNavigationFooterLi {
  position: relative;
  width: 100%;
  height: 56px;
  padding: 0 24px;
}
#wp-header-container .slideNavigationFooterLi::before,
#wp-header-container .slideNavigationFooterLi::after {
  content: "";
  position: absolute;
  left: 50%;
  width: calc(100% - 50px);
  height: 1px;
  background-color: #d5d5d5;
  transform: translateX(-50%);
}
#wp-header-container .slideNavigationFooterLi::after {
  bottom: 0;
}
#wp-header-container .slideNavigationFooterLi a {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: volvoCentumR;
  font-size: 14px;
  color: #707070;
  text-decoration: none;
}
#wp-header-container .slideNavigationFooterLi .arrowIcon {
  width: 10px;
  transform: none;   /* form.css obraca globalne .arrowIcon o 180° (strzałka klauzuli prywatności) */
  transition: none;
}
#wp-header-container .slideNavigationFooterLi .a-arrow {
  display: block;
  position: relative;
  width: 8px;
  height: 8px;
  margin-left: auto;
  margin-right: 0;
}
#wp-header-container .slideNavigationFooterLi .a-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border: 1px solid transparent;
  border-top-color: #141414;
  border-right-color: #141414;
  transform: translate(-75%, -50%) rotate(45deg);
}
#wp-header-container .socialMediaContainer {
  width: 100%;
  padding-top: 16px;
}
#wp-header-container .socialMediaUl {
  list-style: none;
  display: flex;
  justify-content: flex-start;
  padding-left: 16px;
  margin-bottom: 0;
}
#wp-header-container .socialMediaLi {
  padding: 7px 16px;
}
#wp-header-container .socialMediaLi:first-child {
  padding-left: 8px;
}
#wp-header-container .socialMediaLi svg {
  width: 100%;
  object-fit: contain;
}
#wp-header-container .socialMediaLi svg path {
  fill: #141414;
}

@media only screen and (max-width: 991px) {
  #wp-header-container .mainHeaderSectionMainRow {
    padding: 0 0.5rem 0 0.8rem;
  }
  #wp-header-container .dealerNameContainer p {
    font-size: 10px;
  }
  #wp-header-container .navigationLi {
    margin-right: 0.43rem;
  }
}

/* ===================== STOPKA ===================== */

#wp-footer-container {
  font-family: volvoCentumR;
}

#wp-footer-container .footerMainContainer {
  width: 100%;
  background: #fafafa;
}

/* --- Menu stopki --- */
#wp-footer-container .footerNavigationMainRow {
  width: 100%;
  padding-top: 40px;
  padding-bottom: 20px;
  margin-bottom: 36px;
}
#wp-footer-container .footerNavigationMainColumn {
  width: 100%;
}
#wp-footer-container .footerNavigation {
  width: 100%;
  max-width: 1016px;
  margin-left: auto;
  margin-right: auto;
}
#wp-footer-container .footerMainUl {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
}
#wp-footer-container .footerMainLi {
  margin: 0 4px;
}
#wp-footer-container .footerMainLi a {
  display: block;
  padding: 0 0.5rem;
  font-family: volvoCentumSB;
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  text-transform: uppercase;
  color: #000;
  text-decoration: none;
}

/* --- Adresy salonów --- */
#wp-footer-container .dealersContactMainRow {
  width: 100%;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
}
#wp-footer-container .dealersContactMainColumn {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}
#wp-footer-container .dealersContactcontainer {
  display: flex;
  margin-bottom: 20px;
  margin-right: 20px;
}
#wp-footer-container .dealersInfoMap {
  width: 30px;
  height: 100%;
  background: #141414;
  border-radius: 4px 0 0 4px;
  transition: 0.4s;
}
#wp-footer-container .dealersInfoMap:hover {
  background: #1c6bba;
}
#wp-footer-container .dealersInfoMap a {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#wp-footer-container .dealersInfoMap svg {
  width: 16px;
  height: 16px;
}
#wp-footer-container .dealersInfoMap svg path {
  fill: #fff;
}
#wp-footer-container .dealersContactDetails {
  margin-left: 12px;
}
#wp-footer-container .dealersContactDetails p {
  margin-bottom: 0;
  font-family: volvoCentumR;
  font-size: 12px;
  font-weight: 300;
  color: #707070;
}
#wp-footer-container .dealersContactDetails p:first-child {
  font-family: volvoCentumSB;
  font-size: 14px;
  font-weight: 600;
}
#wp-footer-container .dealersContactDetails p a {
  color: #000;
  text-decoration: none;
}

/* --- Social media --- */
#wp-footer-container .socialMediaFooter {
  width: 100%;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 62px;
}
#wp-footer-container .socialMediaMainColumn {
  width: 100%;
}
#wp-footer-container .soiaclMediaContainer {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#wp-footer-container .socialBox {
  width: 24px;
  height: 24px;
  margin: 16px;
}
#wp-footer-container .socialBox a {
  width: 100%;
  height: 100%;
}
#wp-footer-container .socialBox svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#wp-footer-container .socialBox svg path {
  fill: #141414;
}

/* --- Copyright --- */
#wp-footer-container .copyRightMainRow {
  width: 100%;
  max-width: 1600px;
  margin: 30px auto 0;
  padding-top: 16px;
  padding-bottom: 40px;
}
#wp-footer-container .copyRightMainColumn,
#wp-footer-container .copyRightContainer {
  width: 100%;
}
#wp-footer-container .copyRightContainer p {
  display: block;
  margin: 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  color: #707070;
}

@media only screen and (max-width: 700px) {
  #wp-footer-container .dealersContactMainColumn {
    justify-content: flex-start;
  }
  #wp-footer-container .dealersContactcontainer {
    width: 100%;
  }
}
@media only screen and (max-width: 575px) {
  #wp-footer-container .socialMediaFooter {
    padding-top: 30px;
  }
}

/* ===================== PRZYCISK FORMULARZA NAD STOPKĄ ===================== */

/* Do 768px przycisk "dalej" jest position: fixed (mainStyle.css). Gdy stopka wjeżdża na ekran
   (klasa ustawiana w js/wp-layout/main.js), wraca do pozycji z desktopu — na dół formularza, nad stopkę. */
@media only screen and (max-width: 768px) {
  .wp-footer-in-view .formServiceMainContainer .formServiceMainRow .formServiceLeftColumn .stepsBox .buttonStepsContainer {
    position: absolute;
    bottom: 0;
  }
  .wp-footer-in-view .formServiceMainContainer .formServiceMainRow .formServiceLeftColumn .stepsBox .buttonStepsContainer .buttonSteps {
    width: 100%;
  }
}

/* Strona podziękowania nie ma dolnego odstępu — bez niego przyciski stykają się ze stopką */
.endServicesStepsMainContainer {
  padding-bottom: 80px;
}