/* ==========================================================================
   FIBROMAT 2026 — style nowych szablonów (Bootstrap 5)
   Kolory marki: czerwień #AF272F, granat #211747 / #020c26, szarość #5c5c5c
   Obrazy: /wp-content/themes/fibromat/assets/img/old-version/
   ========================================================================== */

:root {
    --fib-red: #b80033;
    --fib-dark: #211747;
    --fib-navy: #020c26;
    --fib-gray: #5c5c5c;
    --fib-light: #f9f9ff;
}

/* --------------------------------------------------------------------------
   Nawigacja — uzupełnienia do przywróconego układu .headernav:
   hamburger i menu mobilne (desktopowy wygląd stylowany w fibromat.css)
   -------------------------------------------------------------------------- */

a {
    color: var(--fib-navy);
    text-decoration: none;
}

.headernav__toggler {
    background: transparent;
    border: 1px solid #2c2c62;
    border-radius: 0;
    padding: 8px 12px;
    color: #2c2c62;
    font-size: 20px;
}

.headernav__mobile {
    background: #fff;
    padding: 10px 0 20px;
}

.headernav__mobile ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.headernav__mobile ul li {
    display: block;
    text-align: center;
    padding: 8px 0;
}

.headernav__mobile ul li a {
    color: #3c3c3b;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
}

.headernav__mobile ul li a:hover {
    color: #bb0b39;
}

.headernav__mobile .sub-menu li a {
    font-weight: 400;
    text-transform: none;
}

/* desktopowe podmenu (WP .sub-menu) rozwijane na hover */
@media (min-width: 576px) {
    .headernav__menu .menu-item-has-children {
        position: relative;
    }

    .headernav__menu .sub-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 320px;
        background: #fff;
        box-shadow: 0 10px 24px rgba(2, 12, 38, 0.12);
        list-style: none;
        padding: 0;
        margin: 0;
        z-index: 1000;
    }

    .headernav__menu .menu-item-has-children:hover>.sub-menu {
        display: block;
    }

    .headernav__menu .sub-menu li {
        display: block;
        height: auto;
        text-align: left;
        padding: 10px 16px;
        border-bottom: 1px solid #f0f0f0;
    }
}

/* --------------------------------------------------------------------------
   Slider hero na stronie głównej — sekcja 'homepageslider'
   -------------------------------------------------------------------------- */

/* nadpisanie reguł .homepageslider ze starego fibromat.css
   (display:flex + justify-content:center zawężały karuzelę do treści) —
   slider i carousel-inner mają być na całą szerokość strony */
.homepageslider {
    display: block;
    text-align: left;
    min-height: 0;
    background: none;
    position: relative;
}

.homepageslider .carousel,
.homepageslider .carousel-inner {
    width: 100%;
}

/* warstwa dekoracyjna nad slajdami — dosunięta do lewej strony;
   pointer-events:none, żeby nie blokowała strzałek i wskaźników karuzeli */
.homepageslider__layer {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    pointer-events: none;
}

.homepageslider__layer img {
    max-height: 100%;
    width: auto;
}

@media (max-width: 767.98px) {
    .homepageslider__layer img {
        max-width: 80%;
        height: auto;
    }
}

/* wymiary i typografia wg oryginalnego fibromat.pl (.single-slider) */
.homepageslider .carousel-item {
    height: 760px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

/* tła slajdów — slider zmienia tło i treść razem (klasy zamiast stylów inline) */
.homepageslider__slide--tws {
    background-image: url('../assets/img/slider/slider-img-3.png');
}

.homepageslider__slide--epc {
    background-image: url('../assets/img/slider/slider-img-4.png');
}

.homepageslider__slide--przemysl {
    background-image: url('../assets/img/slider/slider-img-1.png');
}

/* przyciemnienie tła pod warstwą tekstu — jak w oryginale (#211747, 50%) */
.homepageslider .carousel-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #211747;
    opacity: 0.5;
}

.homepageslider__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 760px;
    max-width: 1200px;
}

.homepageslider__content h2 {
    color: #fff;
    font-size: 3rem;
    font-weight: 700;
    line-height: 2;
    margin-bottom: 28px;
}

.homepageslider__content p {
    color: #fff;
    font-size: 22px;
    font-weight: 400;
    margin-bottom: 2.5rem;
}

/* przycisk jak oryginalny .boxed-btn2 */
.homepageslider__btn {
    background: var(--fib-red);
    color: #fff;
    border-radius: 0;
    padding: 22px 50px;
    font-size: 16px;
    align-self: flex-start;
}

.homepageslider__btn:hover {
    background: #fff;
    color: var(--fib-navy);
}

.homepageslider__btn i {
    font-size: 14px;
    padding-left: 5px;
}

.homepageslider .carousel-indicators [data-bs-target] {
    background-color: var(--fib-red);
    width: 36px;
    height: 4px;
}

@media (max-width: 767.98px) {

    .homepageslider .carousel-item,
    .homepageslider__content {
        height: 600px;
    }

    .homepageslider__content h2 {
        font-size: 25px;
        line-height: 45px;
        margin-bottom: 10px;
    }

    .homepageslider__content p {
        font-size: 18px;
    }
}

/* --------------------------------------------------------------------------
   Neutralizacja odziedziczonych reguł ze starego fibromat.css
   w obrębie nowych szablonów (main.pagecontent--2026):
   pełna szerokość sekcji z tłami + kolory nagłówków marki
   -------------------------------------------------------------------------- */

main.pagecontent--2026 {
    padding: 0;
    background: none;
}

main.pagecontent--2026 h2 {
    color: var(--fib-navy);
}

main.pagecontent--2026 h3 {
    margin-top: 0;
}

/* --------------------------------------------------------------------------
   Nagłówek podstrony — sekcja 'pagetitle' (hero z tłem i tytułem)
   -------------------------------------------------------------------------- */

.pagetitle {
    background-size: cover;
    background-position: center;
    position: relative;
}

.pagetitle::before {
    /* content: "";
    position: absolute;
    inset: 0;
    background: rgba(2, 12, 38, 0.55); */
}

.pagetitle__inner {
    position: relative;
    z-index: 2;
    padding: 140px 0 120px;
}

.pagetitle h1 {
    color: #fff;
    font-size: 3rem;
    font-weight: 700;
    margin: 0;
}

.pagetitle h1 span {
    display: block;
    font-size: 1rem;
    font-weight: 400;
    margin-bottom: 20px;
}

@media (max-width: 767.98px) {
    .pagetitle__inner {
        padding: 80px 0 70px;
    }

    .pagetitle h1 {
        font-size: 32px;
    }
}

/* --------------------------------------------------------------------------
   Nagłówki sekcji
   -------------------------------------------------------------------------- */

.sectiontitle span {
    display: block;
    color: var(--fib-red);
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.sectiontitle h2 {
    font-size: 42px;
    font-weight: 400;
    line-height: 1.3;
}

@media (max-width: 767.98px) {
    .sectiontitle h2 {
        font-size: 28px;
    }
}

/* --------------------------------------------------------------------------
   Sekcja "O nas" (zdjęcie + tekst)
   -------------------------------------------------------------------------- */

.aboutsection {
    padding: 100px 0;
}

.aboutsection__thumb img {
    width: 100%;
    height: auto;
}

.aboutsection .btn-fibromat {
    margin-top: 1rem;
}

/* czerwony przycisk marki */
.btn-fibromat {
    background: var(--fib-red);
    color: #fff;
    border-radius: 0;
    padding: 13px 32px;
    font-size: 16px;
    display: inline-block;
}

.btn-fibromat:hover {
    background: var(--fib-navy);
    color: #fff;
}

/* --------------------------------------------------------------------------
   Fakty / statystyki (2012, 150+, 350) — zdjęcie z nakładką liczbową
   -------------------------------------------------------------------------- */

.factsection {
    padding: 40px 0 90px;
}

.factsection__row {
    margin-bottom: 60px;
}

.factsection__thumb {
    position: relative;
}

.factsection__thumb img {
    width: 100%;
    height: auto;
}

.factsection__badge {
    position: absolute;
    left: -30px;
    bottom: 30px;
    background: var(--fib-red);
    color: #fff;
    padding: 22px 30px;
    min-width: 190px;
}

.factsection__badge h3 {
    color: #fff;
    font-size: 40px;
    font-weight: 700;
    margin: 0;
}

.factsection__badge p {
    color: #fff;
    margin: 0;
    font-size: 14px;
}

/* gdy zdjęcie po lewej — badge po prawej stronie zdjęcia */
.factsection__badge--right {
    left: auto;
    right: -30px;
}

.factsection__text h3 {
    font-size: 30px;
    font-weight: 400;
    margin-bottom: 1rem;
}

@media (max-width: 767.98px) {
    .factsection__badge {
        left: 10px;
        bottom: 10px;
        padding: 14px 18px;
        min-width: auto;
    }

    .factsection__badge--right {
        left: auto;
        right: 10px;
    }

    .factsection__text {
        margin-bottom: 1.5rem;
    }
}

/* --------------------------------------------------------------------------
   Sekcja "Nasze projekty" — ciemne tło ze zdjęciem, siatka kart
   -------------------------------------------------------------------------- */

.projectsection {
    background-size: cover;
    background-position: center;
    position: relative;
    padding: 100px 0;
}

.projectsection::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(33, 23, 71, 0.5);
}

.projectsection .container {
    position: relative;
    z-index: 2;
}

.projectsection .sectiontitle h2,
.projectsection .sectiontitle p {
    color: #fff;
}

.projectcard {
    background: #fff;
    margin-bottom: 24px;
    height: 100%;
}

.projectcard img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.projectcard h3 {
    font-size: 16px;
    font-weight: 500;
    padding: 18px 20px;
    margin: 0;
}

/* --------------------------------------------------------------------------
   Sektory działalności / branże — kafelki ze zdjęciem i podpisem
   -------------------------------------------------------------------------- */

.sectorsection {
    padding: 100px 0;
}

.sectortile {
    position: relative;
    display: block;
    margin-bottom: 24px;
    overflow: hidden;
}

.sectortile img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    transition: transform .4s ease;
}

.sectortile:hover img {
    transform: scale(1.05);
}

.sectortile__label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(0deg, rgba(2, 12, 38, 0.85) 0%, rgba(2, 12, 38, 0) 100%);
    color: #fff;
    padding: 40px 20px 18px;
}

.sectortile__label h3 {
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    margin: 0;
}

/* --------------------------------------------------------------------------
   Białe kafelki usług z ciemną ikoną — odpowiednik .single-service.white
   z oryginalnego fibromat.pl (Projektowanie/Dostawa/Montaż, sektory, branże)
   -------------------------------------------------------------------------- */

.servicetile {
    background: #fff;
    height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    margin-bottom: 24px;
}

.servicetile__icon {
    width: 80px;
    height: 80px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-bottom: 26px;
}

.servicetile h3 {
    font-size: 1rem;
    font-weight: 400;
    color: var(--fib-dark);
    margin: 0;
}

/* --------------------------------------------------------------------------
   Kafelki realizacji (jak galeria na /realizacje/) — link do pełnego zdjęcia
   + podpis pod kafelkiem
   -------------------------------------------------------------------------- */

.projecttile {
    display: block;
    background-size: cover;
    background-position: center;
    margin-bottom: 12px;
    transition: opacity .3s ease;
}

.projecttile:hover {
    opacity: 0.85;
}

.projecttile__caption {
    color: #fff;
    font-size: 15px;
    text-align: center;
    margin-top: 3rem;
}

.projecttile__caption a {
    color: #fff;
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   Sekcje 'service-area' i 'faq-area' — markup 1:1 ze strony źródłowej
   fibromat.pl/konstrukcje-tws/ (style przeniesione z oryginalnego style.css,
   ikony ze ścieżek lokalnych, strzałki akordeonu: FontAwesome)
   -------------------------------------------------------------------------- */

.service-area {
    
}

.single-service {
    height: 300px;
    position: relative;
    display: block;
}

.service-area .single-service .service-thumb {
    background: #211747;
    height: 100%;
}

.service-area .single-service.white .service-thumb {
    background: #fff;
    height: 100%;
    transition: 0.3s ease;
}

.service-area .single-service .service-thumb .service-background {
    height: 100%;
    width: 100%;
    object-fit: cover;
    opacity: 0.2;
}

.service-area .single-service.white .service-thumb .service-background {
    opacity: 0;
}

.service-content {
    position: absolute;
    bottom: 35px;
    width: 100%;
}

.service-area .single-service h3 {
    font-size: 24px;
    font-weight: 400;
    text-align: center;
    color: #fff;
}

.service-area .single-service.white h3 {
    color: #211747;
}

.service-icon {
    width: 100%;
    height: 100px;
    position: absolute;
    background-size: contain;
    top: 75px;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 2;
}

.service-icon.design {
    background-image: url('../assets/img/icons/sketch.png');
}

.service-icon.delivery {
    background-image: url('../assets/img/icons/delivery.png');
}

.service-icon.hammer {
    background-image: url('../assets/img/icons/hammer.png');
}

@media (max-width: 767.98px) {
    .service-area .single-service {
        margin-bottom: 30px;
    }
}

/* faq-area — akordeon jak #accordion ze źródła (karty BS + własne strzałki) */
.faq-area {
    padding: 0 0 90px;
}

.faq-area .service-details h2 {
    font-size: 28px;
    font-weight: 400;
    padding: 4px 24px;
    margin-bottom: 2rem;
}

#accordion .card {
    border: 1px solid #e5e6e9;
    border-radius: 0;
    margin-bottom: 10px;
    background: #fff;
}

#accordion .card .card-header {
    background-color: transparent;
    padding: 4px 14px;
    border: 0;
}

#accordion .card .card-body {
    font-size: 16px;
    line-height: 28px;
    color: #5c5c5c;
    padding: 6px 24px 20px;
}

#accordion h5 {
    margin: 0;
}

#accordion h5 button.btn.btn-link {
    color: #AF272F;
    width: 100%;
    text-align: left;
    text-decoration: none;
    position: relative;
    padding: 12px 40px 12px 10px;
    font-size: 17px;
}

#accordion h5 button.btn.btn-link.collapsed {
    color: #020c26;
}

#accordion h5 button.btn.btn-link::after {
    content: "\f106";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #AF272F;
    font-size: 18px;
}

#accordion h5 button.btn.btn-link.collapsed::after {
    content: "\f107";
    color: #020c26;
}

#accordion h5 button.btn.btn-link:focus {
    outline: none;
    text-decoration: none;
    box-shadow: none;
}

/* przycisk "Pobierz katalog" pod akordeonem, jak w źródle */
.details-nav .download-brouser {
    background: #020c26;
    color: #fff;
    display: block;
    padding: 17px 0;
    text-align: center;
    margin-top: 60px;
    border: 1px solid transparent;
    text-decoration: none;
}

.details-nav .download-brouser:hover {
    background: transparent;
    color: #020c26;
    border: 1px solid #020c26;
}

/* --------------------------------------------------------------------------
   Pasek CTA — "Porozmawiajmy na temat współpracy"
   -------------------------------------------------------------------------- */

.ctasection {
    background-size: cover;
    background-position: center;
    position: relative;
    padding: 110px 0;
    border-bottom: 1px solid #223058;
}

.ctasection::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(0 0 0 / 85%) 0%, #172858 100%);
}

.ctasection .container {
    position: relative;
    z-index: 2;
}

/* silniejszy selektor z main.pagecontent--2026, żeby biały tekst CTA
   wygrywał z nadpisaniem koloru nagłówków (granat) dla nowych szablonów */
.ctasection h2,
main.pagecontent--2026 .ctasection h2 {
    color: #fff;
    font-size: 40px;
    font-weight: 500;
    margin-bottom: 0.8rem;
}

.ctasection p,
main.pagecontent--2026 .ctasection p {
    color: #fff;
    font-size: 17px;
    margin-bottom: 1.8rem;
}

.ctasection__btn {
    background: var(--fib-navy);
    color: #fff;
    border-radius: 0;
    padding: 18px 42px;
    font-size: 16px;
    border: 1px solid var(--fib-light);
}

.ctasection__btn:hover {
    background: #fff;
    color: var(--fib-navy);
}

@media (max-width: 767.98px) {
    .ctasection h2 {
        font-size: 28px;
    }
}

/* --------------------------------------------------------------------------
   Treść ofertowa: akordeon, tekst + zdjęcie
   -------------------------------------------------------------------------- */

.offersection {
    padding: 90px 0;
}

.offersection__lead {
    font-size: 26px;
    font-weight: 400;
    color: var(--fib-navy);
    margin-bottom: 2.5rem;
}

.offersection .accordion-button {
    font-size: 17px;
    color: var(--fib-navy);
}

.offersection .accordion-button:not(.collapsed) {
    background: var(--fib-light);
    color: var(--fib-red);
}

.offersection .accordion-button:focus {
    box-shadow: none;
    border-color: var(--fib-red);
}

.textimagesection {
    padding: 90px 0;
}

.textimagesection h2 {
    font-size: 34px;
    font-weight: 400;
    margin-bottom: 1.2rem;
}

.textimagesection img {
    width: 100%;
    height: auto;
}

.textimagesection__fullimg {
    margin-bottom: 3rem;
}

.textimagesection ul.unordered-list {
    padding-left: 0;
    list-style: none;
}

.textimagesection ul.unordered-list li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 10px;
}

.textimagesection ul.unordered-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 10px;
    height: 10px;
    background: var(--fib-red);
}

/* --------------------------------------------------------------------------
   Strona Kontakt — formularz, dane, mapa
   -------------------------------------------------------------------------- */

.contactsection {
    padding: 90px 0;
}

.contactsection__title {
    font-size: 30px;
    font-weight: 400;
    margin-bottom: 2.5rem;
}

.contactsection .form-control {
    border-radius: 0;
    padding: 14px 18px;
    font-size: 15px;
}

.contactsection .form-control:focus {
    border-color: var(--fib-red);
    box-shadow: none;
}

.contactinfo {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.8rem;
}

.contactinfo__icon {
    color: var(--fib-red);
    font-size: 26px;
    margin-right: 18px;
    min-width: 32px;
}

.contactinfo h3 {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 4px;
}

.contactinfo p {
    margin: 0;
    font-size: 15px;
}

.contactmap {
    margin-top: 3rem;
}

.contactmap iframe {
    width: 100%;
    height: 460px;
    border: 0;
    display: block;
}

/* --------------------------------------------------------------------------
   Sekcja treści z edytora WP (uzupełnienia redakcyjne)
   -------------------------------------------------------------------------- */

/* sekcja renderowana w szablonie tylko, gdy strona ma treść z edytora */
.wpeditorcontent {
    /* padding: 40px 0; */
}


.download-link {
    border: 3px solid var(--fib-red);
    background-color: var(--fib-red);
}    

.download-link a {    
    color: var(--fib-light) !important;   
}


/* przeróbki bootstrap */

.carousel-control-next, .carousel-control-prev {
    top: 20%;
}

/* przeróbki bootstrap */

.headernav__menu ul li a {
    font-size: 0.875rem;
}

.headernav__menu ul.sub-menu li a {
    font-size: 0.75rem;
}

.gallery .gallery-item {
    padding: 1rem;
}

.gallery .gallery-item img {
    width: 100%;
    height: auto;
}