/*
 Theme Name:   Bootscore Child
 Description:  Bootscore Child Theme
 Author:       Bootscore
 Author URI:   https://bootscore.me
 Template:     bootscore
 Version:      6.0.0
 Requires at least: 5.0
 Tested up to: 6.6
 Requires PHP: 7.4
 License: MIT License
 License URI: https://github.com/bootscore/bootscore-child/blob/main/LICENSE
 Text Domain:  bootscore
*/

/* 
All style editing is done via /assets/scss/_bootscore_custom.scss
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css");

h1, h2, h3, h4, h5, h6, .fw-bold{
font-family: 'Inter', sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em; /* Fonty typu Inter wyglądają lepiej z lekkim ujemnym światłem */
}

#cf_desc{max-height: 100px;}

p, ul, li span, div{
  font-family: "Inter", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
  line-height: 1.6em;  
  color: #505050;
}

a{color: #b98f52; text-decoration: underline;}
a:hover{color:#704b04;}

/* Główny kontener sekcji */
.hero-section {
    position: relative;
    height: 500px;
    background-color: #051129; /* Kolor bazowy */
    overflow: hidden;
    color: #ffffff !important; /* Wymuszenie bieli dla całej sekcji */
}

/* Granatowy pasek na samej górze */
.hero-top-bar {
    background-color: rgba(3, 10, 24, 0.8); /* Jeszcze ciemniejszy granat */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    height: 50px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 10;
}

/* Kontener treści pod paskiem */
.hero-content {
    height: calc(400px - 50px); /* Wysokość Hero minus wysokość paska */
}

/* Dekoracyjna niebieska linia */
.hero-line-decorator {
    height: 2px;
    width: 120px;
    background-color: #0d6efd;
    box-shadow: 0 0 10px rgba(13, 110, 253, 0.5);
}

/* Pomocnicze klasy */
.extra-small {
    font-size: 0.8rem;
}

.hover-opacity-100:hover {
    opacity: 1 !important;
}

/* Responsywność */
@media (max-width: 991px) {
    .hero-section {
        height: auto;
    }
    .hero-content {
        height: auto;
        padding: 50px 0;
        text-align: center;
    }
    .hero-content .d-flex {
        justify-content: center;
    }
    .hero-line-decorator {
        display: none; /* Ukrywamy linię na mobile dla czystości */
    }
}




/* Kontener kroku */
.step-item {
    position: relative;
    text-align: center;
    padding-top: 10px;
}

.step-item p {
    font-size: 0.8rem;
    line-height: 1.3;
    margin-top: 5px;
}

/* Badge względem kontenera */
.step-badge {
    position: absolute;
    top: 0;
    left: 30px; 
    width: 24px;
    height: 24px;
    background-color: #0d6efd;
    color: white;
    border-radius: 50%;
    font-size: 13px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

/* Ikona */
.step-icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    position: relative;
}

/* SKRÓCONA I WYCENTROWANA LINIA */
.step-connector {
    position: absolute;
    top: 50%;
    /* Wycentrowanie linii o szerokości 50% między środkami kolumn */
    left: 75%; 
    width: 35%; 
    border-top: 1px dashed #dee2e6;
    z-index: 1;
}

/* Ukrycie linii w ostatnim kroku i na mobile */
.last-step .step-connector { 
    display: none; 
}

@media (max-width: 767px) {
    .step-connector { display: none; }
    .step-item { margin-bottom: 40px; }
}


#why_us .extra-small {
    font-size: 0.75rem;
    line-height: 1.4;
}

#why_us .feature-item i {
    /* Opcjonalnie: jeśli chcesz precyzyjnie dopasować kolor ikon do marki */
    color: #0d6efd; 
}

/* Wygładzenie przejścia na mobile */
@media (max-width: 575px) {
    #why_us .feature-item {
        padding: 15px;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
}


/* Ciemny granat dla paska statystyk */
.bg-navy {
    background-color: #051129; /* Bardzo ciemny granat */
}

/* Pomocnicze rozmiary tekstu */
.extra-small {
    font-size: 0.75rem;
    line-height: 1.4;
}

/* Zaokrąglenia obrazków w kartach */
.industries-section .card {
    border-radius: 12px;
    transition: transform 0.3s ease;
}

.industries-section .card:hover {
    transform: translateY(-5px);
}

.industries-section .card-img-top {
    height: 160px;
    object-fit: cover;
}

/* Pionowe linie separatorów na desktopie */
@media (min-width: 768px) {
    .border-start-md {
        border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
        padding-left: 1.5rem;
    }
}

/* Dopasowanie kolorów tekstu statystyk */
.stats-bar .text-primary {
    color: #3b82f6 !important; /* Jaśniejszy niebieski dla kontrastu na ciemnym tle */
}


/* Styl dla kart oferty */
.offer-card {
    border-radius: 8px;
    overflow: visible; /* Ważne, aby ikona mogła wystawać */
}

.offer-card img {
    border-radius: 8px 8px 0 0;
    height: 180px;
    object-fit: cover;
}

/* Niebieskie kółko z ikoną (Overlap) */
.icon-overlap {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -22px; /* Połowa wysokości kółka */
    position: relative;
    z-index: 10;
    margin-left: 10px; /* Przesunięcie lekko od lewej krawędzi */
    border: 3px solid #fff; /* Biała obwódka jak na zdjęciu */
}

.icon-overlap i {
    font-size: 1.2rem;
}

/* Teksty */
.extra-small {
    font-size: 0.8rem;
    line-height: 1.5;
}

/* Linki "Zapytaj o..." na dole karty */
.offer-card .card-body {
    display: flex;
    flex-direction: column;
}

.offer-card .card-body a:last-child {
    margin-top: auto; /* Pcha link na sam dół karty przy różnej ilości tekstu */
}

/* Hover efekt */
.offer-card {
    transition: transform 0.2s ease-in-out;
}
.offer-card:hover {
    transform: translateY(-5px);
}


/* Styl dla kwadratowych kart */
.company-card {
    border-radius: 12px;
    transition: all 0.3s ease;
    min-height: 220px; /* Zapewnia wysokość zbliżoną do szerokości */
}

.company-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08) !important;
}

/* Wyrównanie ikony */
.company-card i {
    display: block;
    line-height: 1;
}

/* Specyficzne mniejsze fonty dla opisów */
.for-companies .extra-small {
    font-size: 0.65rem;
    line-height: 1.4;
    color: #6c757d;
}

/* Dostosowanie dla bardzo małych ekranów */
@media (max-width: 575px) {
    .company-card {
        min-height: auto;
    }
}


/* Głębia koloru i separatory */
.bg-navy { background-color: #051129 !important; }

.border-white-10 {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Zapobiega "skakaniu" szerokości cyfr podczas odliczania */
.counter {
    font-variant-numeric: tabular-nums;
    display: inline-block;
}

@media (min-width: 768px) {
    .border-start-md {
        border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
        padding-left: 1.5rem;
    }
}

.extra-small {
    font-size: 0.7rem;
    letter-spacing: 0.5px;
}



/* Tło dla dolnego paska CTA */
.bg-light-blue {
    background-color: #f0f5ff; /* Bardzo jasny błękit */
}

/* Stylizacja przycisku "sklepowego" */
.shop-card-link {
    min-width: 250px;
    display: block;
}

.shop-icon-box {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Efekt uniesienia dla przycisków */
.hover-lift {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.hover-lift:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08) !important;
}

/* Placeholder dla formularza */
.dashed-placeholder {
    border: 2px dashed #dee2e6 !important;
}

/* Responsywność dla obrazków */
.realizations-contact img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

@media (max-width: 991px) {
    .cta-bar {
        text-align: center;
    }
    .cta-bar .d-flex {
        justify-content: center;
    }
}


/* Tło stopki - taki sam granat jak w sekcji Hero/Stats */
footer.bg-navy {
    background-color: #051129 !important;
}

/* Stylizacja linków w menu */
.footer-menu li {
    margin-bottom: 8px;
}

.footer-menu a {
    color: #ffffff;
    text-decoration: none;
    opacity: 0.75;
    transition: opacity 0.2s ease, padding-left 0.2s ease;
}

.footer-menu a:hover {
    opacity: 1;
    padding-left: 5px;
    color: #0d6efd;
}

/* Ikony kontaktu */
.footer-contact i {
    font-size: 1.1rem;
    margin-top: 2px;
}

/* Klasy pomocnicze */
.extra-small {
    font-size: 0.75rem;
}

.hover-opacity-100:hover {
    opacity: 1 !important;
}

/* Linia pozioma */
hr.opacity-10 {
    border-top-color: rgba(255, 255, 255, 0.1);
}


/* Stylizacja przycisku Wyślij w Contact Form 7 */
.wpcf7-form input[type="submit"] {
    width: 100%;            /* Pełna szerokość */
    display: block;         /* Upewnia się, że element zachowuje się jak blok */
    padding: 12px 24px;     /* Odstępy wewnętrzne */
    font-size: 1rem;        /* Rozmiar czcionki */
    font-weight: 700;       /* Grubość czcionki */
    color: #ffffff;         /* Kolor tekstu */
    background-color: #0d6efd; /* Kolor tła (niebieski Bootstrap) */
    border: none;           /* Usunięcie obramowania */
    border-radius: 4px;     /* Zaokrąglenie rogów */
    cursor: pointer;        /* Zmiana kursora na rączkę */
    transition: background-color 0.3s ease; /* Płynna zmiana koloru */
    margin-top: 10px; margin-bottom: 10px;
}

/* Efekt po najechaniu myszką */
.wpcf7-form input[type="submit"]:hover {
    background-color: #0b5ed7; /* Ciemniejszy odcień przy najechaniu */
}

/* Opcjonalnie: Stylizacja ikony ładowania (spinnera) */
.wpcf7 .ajax-loader {
    display: block;
    margin: 10px auto; /* Centrowanie ikonki ładowania pod przyciskiem */
}


/* Kolor linków w menu */
#bootscore-navbar .nav-link {
    color: #111 !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* Wyróżnienie aktywnego lub pierwszego elementu (opcjonalnie) */
#bootscore-navbar .nav-link.active, 
#bootscore-navbar .nav-item:first-child .nav-link {
    color: #0d6efd !important; /* Ten niebieski ze screena */
}

/* Ukrycie kropek z listy widgetu jeśli motyw je dodaje */
#top-bar-widget-custom ul {
    list-style: none;
    margin: 0;
    padding: 0;
}


/* Stylizacja kafli stron */
.page-tile-link {
    display: block;
    text-decoration: none !important;
    transition: all 0.3s ease-in-out;
    background-color: #000; /* Tło dla obrazków z przezroczystością */
}

/* Efekt powiększenia zdjęcia po najechaniu */
.page-tile-link:hover .card-img {
    transform: scale(1.1);
}

.page-tile-link .card-img {
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Apla u dołu - gradient zapewnia czytelność na każdym zdjęciu */
.title-overlay {
    background: linear-gradient(
        to top, 
        rgba(0, 0, 0, 0.9) 0%, 
        rgba(0, 0, 0, 0.4) 70%, 
        rgba(0, 0, 0, 0) 100%
    );
    width: 100%;
}

/* Wyśrodkowanie tekstu i poprawa czytelności */
.page-tile-link .h5 {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    letter-spacing: -0.02em;
}

/* Zapewnienie, że obrazek wypełnia przestrzeń (Object Fit) */
.object-fit-cover {
    object-fit: cover;
}

/* Subtelny cień przy hover */
.page-tile-link:hover {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}