:root {
    --black: #222;
    --white: #fff;
    --primary: #dd0000;
}

html {
    -webkit-text-size-adjust: 100%; /* sizes on horizontal mobile */
}

body {
    color: var(--black);
    background-color: var(--white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.no-scroll {
    overflow: hidden;
}

p, blockquote, ul, table, div {
    font-family: "Hanken Grotesk", sans-serif;
}

h1, h2, h3, h4, h5, h6,
button, a.shps-btn-primary,

.shps-navbar-1-link,
.shps-opening-1-tagline,
.shps-numbers-1-number {
    font-family: "Satoshi-Bold", sans-serif !important;
}






















/* czerwona linia pod naglowkiem */

.header-with-line {
    position: relative; /* Umożliwia pozycjonowanie ::after względem h2 */
    display: inline-block; /* Aby h2 dopasowało się do szerokości tekstu */
    padding-bottom: 1.5rem; /* Odstęp między tekstem a linią (np. 8px) */
}

.header-with-line::after {
    content: ''; /* Wymagane dla pseudoelementów */
    display: block; /* Sprawia, że linia jest blokiem */
    position: absolute; /* Pozycjonowanie względem rodzica (.header-with-line) */
    bottom: 0; /* Przykleja linię do dołu elementu rodzica */
    left: 0; /* Przykleja linię do lewej krawędzi */
    width: 3rem; /* Szerokość linii (np. 64px, czyli 4 * 16px). Dostosuj! */
    height: 0.4rem; /* Wysokość linii (np. 4px, czyli 0.25 * 16px). Dostosuj! */
    background-color: var(--primary); /* Konkretny kolor czerwony */
}




















/* pagnacja na stronie kategorii */

nav .page-numbers li {
    display: inline-block;
}
















/* Contact Form 7 */

/* Styl dla pól tekstowych i textarea po skupieniu (focus) */
input[type="tel"]:focus,
input[type="email"]:focus,
textarea:focus {
    outline: none; /* Usuwa domyślne obramowanie przeglądarki */
    border-color: var(--black); /* Zmienia kolor ramki na czarny */
    box-shadow: none; /* Usuwa ewentualny cień, jeśli był wcześniej ustawiony */
}

.wpcf7-submit {
    /* Ustawienia rozmiaru i odstępów */
    width: fit-content; /* Szerokość dopasowana do zawartości */
    padding: 0 24px; /* px-6 w Tailwind = 24px padding poziomy */
    height: 56px; /* h-14 w Tailwind = 3.5rem = 56px wysokości */

    /* Kolory i czcionka */
    background-color: var(--primary); /* bg-[#dd0000] */
    color: var(--white); /* text-white */
    font-size: 1.125rem; /* text-lg w Tailwind = 18px */
    font-family: "Satoshi-Bold", sans-serif;

    /* Kształt i układ */
    border-radius: 8px; /* rounded-lg w Tailwind = 8px */
    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px;
    display: flex; /* flex */
    align-items: center; /* items-center */
    justify-content: center; /* justify-center */
    border: none; /* Upewnij się, że nie ma domyślnych ramek */
    cursor: pointer; /* Zmienia kursor na wskaźnik */
    text-decoration: none; /* Usuwa podkreślenie, jeśli button jest linkiem */

    /* Efekty przejścia */
    transition: transform 300ms ease-in-out; /* Połączenie transition-property, transition-duration, transition-timing-function w jedną właściwość */
}

/* Efekt hover (najechanie myszką) */
.wpcf7-submit:hover {
    transform: scale(1.05); /* hover:scale-105 */
}

/* Contact Form 7 */
.wp-block-button__link { /* button w tresci wpisu */
    color: var(--white);
    background-color: var(--primary);
    box-shadow: none;
    text-decoration: none;
    font-family: "Satoshi-Bold", sans-serif !important;
    font-size: 1.125rem;
    line-height: 2rem;
    padding: 0 1.5rem; /* Połączenie padding-left i padding-right */
    border-radius: 8px; 
    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px;
    justify-content: center;
    align-items: center;
    width: fit-content;
    display: flex;
    height: 3.5rem;
}

.wp-block-button__link,
#prev-btn-myTestimonialCarousel,
#next-btn-myTestimonialCarousel {
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); /* Połączenie transition-duration, transition-property, transition-timing-function w jedną właściwość */
}

.wp-block-button__link:hover,
#prev-btn-myTestimonialCarousel:hover,
#next-btn-myTestimonialCarousel:hover {
    transform: scale(1.05);
}

.wpcf7-list-item {
    margin: 0;
}

.wpcf7 form .wpcf7-response-output {
    margin: 0;
    padding: 1em 1.4em;
    border-radius: 8px; 
    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px;
}

.wpcf7-not-valid-tip {
    margin-top: 8px;
}

/* for 600px or less */
@media screen and (max-width: 600px) {
    .shps-submit-form > p { /* Ustawia szerokość paragrafu na 100% tylko na mobile */
        width: 100%;
    }

    .shps-submit-form > p .wpcf7-submit { /* Ustawia szerokość przycisku submit na 100% tylko na mobile */
        width: 100%;
    }
}



















/* duzy czerwony link w rozmiarze nagłówka */

.wp-block-heading a {
    border-bottom: 2px solid var(--white);
}
.wp-block-heading a:hover {
    border-bottom: 2px solid var(--primary);
}



/* pierwszy element we wpisie bez górnego marginesu */
.shps-the-content figure:first-child,
.shps-the-content h2:first-child,
.shps-the-content meta + figure,
.shps-the-content meta + h2 { 
    margin-top: 0;
}



/* zapobiega rozpychaniu strony */
.size-full {
    height: auto;
}




/* radius na zdjeciach w tresci wpisu */
figure.wp-block-image img {
    border-radius: 12px; 
    -webkit-border-radius: 12px; 
    -moz-border-radius: 12px;
}

/* radius na zdjeciach galerii w tresci wpisu */
.wp-block-gallery.has-nested-images:not(.is-cropped) figure.wp-block-image:not(#individual-image) {
    border-radius: 12px; 
    -webkit-border-radius: 12px; 
    -moz-border-radius: 12px;
}
/* radius na figcaption zdjec galerii w tresci wpisu */
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
    border-radius: 12px; 
    -webkit-border-radius: 12px; 
    -moz-border-radius: 12px;
}
/* radius na :before figure galerii w tresci wpisu */
.wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption):before {
    border-radius: 12px; 
    -webkit-border-radius: 12px; 
    -moz-border-radius: 12px;
}








/* dwa zdjecia w galerii wpisu */

.wp-block-gallery.wp-block-gallery-1 {
    --wp--style--unstable-gallery-gap: var(--wp--style--gallery-gap-default, var(--gallery-block--gutter-size, var(--wp--style--block-gap, 1.5em))) !important;
    gap: var(--wp--style--gallery-gap-default, var(--gallery-block--gutter-size, var(--wp--style--block-gap, 1.5em))) !important;
}






/* linki w tresci wpisu */

.shps-the-content p a,
.shps-the-content li a,
.shps-the-content ol a,
.shps-the-content table a {
    color: var(--primary);
    font-weight: 600;
}

.shps-the-content p a:hover,
.shps-the-content li a:hover,
.shps-the-content ol a:hover,
.shps-the-content table a:hover {
    border-bottom: 2px solid var(--primary);
}






/* listy uporzadkowane w tresci wpisu */

.wp-block-list {
    list-style-type: disc;
}

.wp-block-list li {
    margin-left: 24px;
    padding-bottom: 16px;
    padding-left: 12px;
}












/* jednokolumnowa galeria artykułowa na mobile */

@media (max-width: 640px) {

    .wp-block-gallery.is-layout-flex {
        flex-direction: column !important;
        align-items: center !important;
    }


    .wp-block-gallery.has-nested-images figure.wp-block-image {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        flex-basis: 100% !important;
        max-width: 100% !important;
    }


    .wp-block-gallery.has-nested-images figure.wp-block-image img {
        width: 100% !important;
        height: auto !important;
        object-fit: contain;
    }

    /* Nadpisuje wszelkie inline'owe style, które mogłyby ustawiać szerokość na figure */
    .wp-block-gallery figure.wp-block-image[style] {
        width: 100% !important;
    }
}