/*
Theme Name: Blockskit-child
Theme URI: [Adres URL Twojej strony internetowej]
Author: Radek
Author URI: [Adres URL Twojej strony internetowej]
Template: blockskit-base
Description: Motyw potomny dla Blockskit na potrzeby mojej strony
Version: 1.1.2
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 5.6
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: blockskit-child

*/

**,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
}

header {
  width: 100%;
  position: fixed;
  z-index: 1000; /* Wyższy z-index dla bezpieczeństwa */
  top: 0;
  left: 0;
  box-shadow: 0 0 5px 0 var(--wp--preset--color--primary);
}

.icon-bg {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1d243c;
  padding: 5px;
  width: 45px; /* Ustalona szerokość okręgu */
  height: 45px; /* Ustalona wysokość okręgu */
  border-radius: 25%; /* Zaokrąglenie do okręgu */
  flex-shrink: 0;
  flex-grow: 0;
}

.hero-tiles {
  justify-content: center;
}

.hero-tile {
  position: relative;
  z-index: 99;
  flex: 1;
}

.flex-wrap {
  display: flex;
  justify-content: center;
  flex-wrap: wrap !important;
}

.flex-wrap > * {
  flex: 1;
}

.column-space-between {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.our-services--service p {
  font-size: var(--wp--preset--font-size--small);
}

i {
  color: var(--wp--preset--color--accent);
}

.hide {
  display: none !important;
}

/* CTA */
#sticky-cta-buttons {
  position: fixed;
  bottom: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  z-index: 999;
}

#sticky-cta-buttons.show {
  opacity: 1;
  visibility: visible;
}

.cta-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  text-decoration: none;
}

.telefon-button {
  background-color: var(--wp--preset--color--accent);
}

.whatsapp-button {
  background-color: #25d366;
}

.cta-button i {
  margin-right: 0; /* Usunięto margines, bo nie ma tekstu */
  color: var(--wp--preset--color--accent-text); /* Biały kolor ikon */
  font-size: 2em; /* Możesz dostosować rozmiar ikon */
  font-weight: bold;
  text-decoration: none;
}
/* End CTA */

/* form */
.wpcf7 label {
  font-size: 14px;
  font-weight: 700;
}

.wpcf7 p {
  margin: 0;
}

input[type="text"],
input[type="email"],
input[type="tel"] {
  height: 30px !important;
}

textarea {
  height: 150px;
}

.wpcf7-list-item {
  margin: 10px 0;
  line-height: 1;
}
.wpcf7-list-item-label {
  font-size: 10px;
  line-height: 1;
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 200px;
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 14px;
  margin: 5px 0;
}

/* Wiersze formularza */
.form-row {
  display: flex;
  flex-wrap: wrap;
  column-gap: 20px;
  padding: 5px 0;
}

/* Kolumny w wierszu */
.form-column {
  flex: 1 1;
}
/* end form */

/* breadcrumbs */
.custom-breadcrumbs {
  font-size: var(--wp--preset--font-size--medium);
  color: var(--wp--preset--color--neutral);
  font-weight: bold;
  line-height: var(--wp--custom--line-height--xx-small);
  letter-spacing: -0.5px;
}

.custom-breadcrumbs .current-page-title {
  color: var(--wp--preset--color--heading);
}

.custom-breadcrumbs > *:not(:last-child)::after {
  content: ""; /* Usuń znak separatora "»" */
  display: inline-block; /* Ważne dla wymiarów i pozycjonowania */
  width: 30px; /* Szerokość poziomej kreski (20px) */
  height: 0; /* Wysokość elementu separatora, ustawiamy na 0, bo grubość definiuje border */
  border-top: 2px solid var(--wp--preset--color--accent); /* Pozioma kreska: 3px grubości, solid, kolor akcentu */
  margin: 0 10px; /* Marginesy po bokach kreski (dostosuj odstęp) */
  vertical-align: middle; /* Wyśrodkuj kreskę pionowo względem tekstu */
}
/* end breadcrumbs */

@media (max-width: 781px) {
  .hide-on-mobile {
    display: none !important; /* Ukryj element na mobile, !important zwiększa priorytet */
  }

  .hero-tile {
    max-width: 40%;
  }

  .why-outsourcing--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .flex-reverse {
    flex-direction: column-reverse;
  }
}

@media (max-width: 599px) {
  /* Stylowanie kontenera menu mobilnego */
  .wp-block-navigation__responsive-container.is-menu-open {
    top: 0;
    right: 0; /* Wysuwa menu z prawej strony */
    left: auto;
    bottom: auto;
    width: 250px; /* Szerokość menu - dostosuj do potrzeb */
    overflow-x: hidden;
    padding: 0;
    background: transparent !important;
    box-sizing: border-box;
  }

  .wp-block-navigation__responsive-container-content {
    background-color: var(--wp--preset--color--background) !important;
    padding: 10px;
    padding-top: 40px !important;
    box-shadow: inset 0 0 5px 0 var(--wp--preset--color--primary);
    overflow-y: auto; /* Dodaje scrollbar, jeśli menu jest za długie */
  }

  .wp-block-navigation__responsive-container-close {
    top: 10px;
    right: 10px;
  }
}

.it-price-table {
  gap: 0px;
  border: 2px solid var(--wp--preset--color--primary);
  min-width: 700px;
  /* overflow-x: scroll; */
}

.it-price-table > * {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  border-left: 1px solid var(--wp--preset--color--primary);
  border-right: 1px solid var(--wp--preset--color--primary);
  border-bottom: 1px solid var(--wp--preset--color--primary);
}

.it-price-table > *:nth-child(5n + 1) {
  justify-content: left;
}