/*
 Theme Name:   Kadence Child fo Stratum 
 Description:  Andrzej Dzirba, MediaMachina.net 
 Author:       Andrzej Dzirba 
 Template:     kadence
 Text Domain:  stratum
 Version:      1.0.0
*/

a {
    text-decoration: none !important;
}

a:hover {
    text-decoration: none !important;
}


/* Klasa bazowa dla animacji */
.js-reveal {
  opacity: 0;
  /* transform: translateY(20px); */
  /* transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform; */
  transition: opacity 0.3s ease-in-out;
  will-change: opacity;
}

/* Stan po wejściu na ekran */
.js-reveal.is-visible {
  opacity: 1;
  /* transform: translateY(0); */
}


/* 1. Kolor tekstu dla aktywnego elementu (biały) */
.header-navigation .header-menu-container ul li.current-menu-item > a {
    color: #ffffff !important;
}

/* 2. Dodanie podkreślenia */
.header-navigation .header-menu-container ul li.current-menu-item > a {
    text-decoration: none !important; /* Wyłączamy standardowe podkreślenie */
    position: relative;
}

/* 3. Tworzenie ładnego podkreślenia za pomocą border-bottom lub pseudo-elementu */
.header-navigation .header-menu-container ul li.current-menu-item > a::after {
    content: "";
    position: absolute;
    bottom: 5px; /* Odległość od tekstu */
    left: 0;
    width: 100%;
    height: 2px; /* Grubość linii */
    background-color: #ffffff; /* Kolor linii */
}
 
 
 
 #masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start):not(.item-hidden-above) > .site-header-row-container-inner,
.transparent-header .site-main-header-wrap .site-header-row-container-inner
 {
	 transition: background 0.3s ease !important;
 }
 
 
 .site-main-header-inner-wrap { 
 position:relative;
 /*top:2rem;*/
 }
 
 
 footer ul, 
footer ol {
    list-style: none !important; /* Usuwa kropki/numery */
    margin-left: 0 !important;   /* Usuwa lewy margines */
    padding-left: 0 !important;  /* Usuwa wewnętrzny odstęp */
}

footer li {
    list-style-type: none !important;
}


 

@media (min-width: 992px) {

    .site-main-header-inner-wrap {
        padding-left:  2rem;
        padding-right: 2rem;
    }

}

/*  HEADER OVERLAY HIGH */

 /* 1. Celujemy w główny kontener */
.wp-block-cover.is-style-header-overlay-high {
    position: relative !important;
}

/* 2. Zamiast modyfikować span, który WP kontroluje, dodajmy własną warstwę ::before */
.wp-block-cover.is-style-header-overlay-high::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('assets/overlay-header-high.svg') !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Nadajemy wysoki z-index, ale mniejszy niż treść */
    z-index: 1; 
    pointer-events: none;
    display: block !important;
    mix-blend-mode: multiply; /* Efekt mnożenia kolorów */
    opacity: 1;
}

/* 3. Upewniamy się, że obrazek tła jest na samym spodzie */
.wp-block-cover.is-style-header-overlay-high .wp-block-cover__image-background {
    z-index: 0 !important;
    position: absolute !important;
}

/* 4. KLUCZOWE: Musimy wyciągnąć napisy nad Twoją nakładkę */
.wp-block-cover.is-style-header-overlay-high .wp-block-cover__inner-container {
    position: relative !important;
    z-index: 2 !important;
}

/* 5. Ukrywamy domyślny overlay WordPressa, żeby nie kolidował */
.wp-block-cover.is-style-header-overlay-high .wp-block-cover__background {
    display: none !important;
}


@supports not (mix-blend-mode: multiply) {
    .wp-block-cover.is-style-header-overlay-high::before {
        opacity: 0.7; /* Proste przezroczystość zamiast mnożenia */
        background-color: #000; /* Lub kolor zbliżony do efektu SVG */
    }
}



/*  header gap and bg  */
	
.is-style-header-overlay-high, .is-style-header-overlay-low {
	background-color:#D6D3CB!important;
}

.wp-block-cover.is-style-header-overlay-high .wp-block-cover__image-background,
.wp-block-cover.is-style-header-overlay-low .wp-block-cover__image-background
 {
top:0.75rem!important; 
}
 

/*  HEADER OVERLAY LOW */

 
 /* 1. Celujemy w główny kontener */
.wp-block-cover.is-style-header-overlay-low {
    position: relative !important;
	overflow: visible !important;
}

/* 2. Zamiast modyfikować span, który WP kontroluje, dodajmy własną warstwę ::before */
.wp-block-cover.is-style-header-overlay-low::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% + 2rem) !important;
    background-image: url('assets/overlay-header-low.svg') !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Nadajemy wysoki z-index, ale mniejszy niż treść */
    z-index: 1; 
    pointer-events: none;
    display: block !important;
    mix-blend-mode: multiply; /* Efekt mnożenia kolorów */
    opacity: 1;
}

/* 3. Upewniamy się, że obrazek tła jest na samym spodzie */
.wp-block-cover.is-style-header-overlay-low .wp-block-cover__image-background {
    z-index: 0 !important;
    position: absolute !important;
    top:0rem;
}

/* 4. KLUCZOWE: Musimy wyciągnąć napisy nad Twoją nakładkę */
.wp-block-cover.is-style-header-overlay-low .wp-block-cover__inner-container {
    position: relative !important;
    z-index: 2 !important;
}

/* 5. Ukrywamy domyślny overlay WordPressa, żeby nie kolidował */
.wp-block-cover.is-style-header-overlay-low .wp-block-cover__background {
    display: none !important;
}


@supports not (mix-blend-mode: multiply) {
    .wp-block-cover.is-style-header-overlay-low::before {
        opacity: 0.7; /* Proste przezroczystość zamiast mnożenia */
        background-color: #000; /* Lub kolor zbliżony do efektu SVG */
    }
}




/* Lowe header with small overlay - meet the team homepage */

.is-style-header-overlay-high, .is-style-header-small-overlay-low {
	background-color:#D6D3CB!important;
}

.wp-block-cover.is-style-header-small-overlay-low .wp-block-cover__image-background
 {
top:0.75rem!important; 
}

/* 1. Celujemy w główny kontener */
.wp-block-cover.is-style-header-small-overlay-low {
    position: relative !important;
	overflow: visible !important;
	//overflow-x:hidden!important;
}
 
.wp-block-cover.is-style-header-small-overlay-low::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0%;
    width: 100%;
    height: calc(100% + 2rem) !important;
    background-image: url('assets/overlay-header-low-low.svg') !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Nadajemy wysoki z-index, ale mniejszy niż treść */
    z-index: 1; 
    pointer-events: none;
    display: block !important;
    mix-blend-mode: multiply; /* Efekt mnożenia kolorów */
    opacity: 1;
}
 
.wp-block-cover.is-style-header-small-overlay-low .wp-block-cover__image-background {
    z-index: 0 !important;
    position: absolute !important;
    top:0rem;
}

 
.wp-block-cover.is-style-header-small-overlay-low .wp-block-cover__inner-container {
    position: relative !important;
    z-index: 2 !important;
}

 
.wp-block-cover.is-style-header-small-overlay-low .wp-block-cover__background {
    display: none !important;
}


@supports not (mix-blend-mode: multiply) {
    .wp-block-cover.is-style-header-small-overlay-low::before {
        opacity: 0.7;  
        background-color: #000; 
    }
}







/*  FOOTER OVERLAY HIGH */

 /* 1. Celujemy w główny kontener */
.wp-block-cover.is-style-footer-overlay-high {
    position: relative !important;
}

/* 2. Zamiast modyfikować span, który WP kontroluje, dodajmy własną warstwę ::before */
.wp-block-cover.is-style-footer-overlay-high::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('assets/overlay-footer-high.svg') !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Nadajemy wysoki z-index, ale mniejszy niż treść */
    z-index: 1; 
    pointer-events: none;
    display: block !important;
    mix-blend-mode: multiply; /* Efekt mnożenia kolorów */
    opacity: 1;
}

/* 3. Upewniamy się, że obrazek tła jest na samym spodzie */
.wp-block-cover.is-style-footer-overlay-high .wp-block-cover__image-background {
    z-index: 0 !important;
    position: absolute !important;
    top:2rem;
}

/* 4. KLUCZOWE: Musimy wyciągnąć napisy nad Twoją nakładkę */
.wp-block-cover.is-style-footer-overlay-high .wp-block-cover__inner-container {
    position: relative !important;
    z-index: 2 !important;
}

/* 5. Ukrywamy domyślny overlay WordPressa, żeby nie kolidował */
.wp-block-cover.is-style-footer-overlay-high .wp-block-cover__background {
    display: none !important;
}


@supports not (mix-blend-mode: multiply) {
    .wp-block-cover.is-style-footer-overlay-high::before {
        opacity: 0.7; /* Proste przezroczystość zamiast mnożenia */
        background-color: #000; /* Lub kolor zbliżony do efektu SVG */
    }
}







 


@media (min-width: 769px) {
    
    .wp-block-cover[class*="is-style-slanted-"] {
        display: block !important;
        position: relative !important;
        padding: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        background-color: transparent !important;
    }

    /* OBRAZEK dyktuje wysokość bloku */
    .wp-block-cover[class*="is-style-slanted-"] img.wp-block-cover__image-background {
        position: relative !important;
        display: block !important;
        width: auto !important;
        height: auto !important;
        object-fit: cover !important;
        top: auto !important;
        left: auto !important;
        margin: 0 !important;
        transform: none !important;
        z-index: 1;
		max-width:100%;
    }

    /* Obrazek po prawej stronie */
    .is-style-slanted-r-text-l img.wp-block-cover__image-background,
    .is-style-slanted-l-text-l img.wp-block-cover__image-background { float: right; }

    /* Obrazek po lewej stronie */
    .is-style-slanted-r-text-r img.wp-block-cover__image-background,
    .is-style-slanted-l-text-r img.wp-block-cover__image-background { float: left; }

    /* KONTENER WEWNĘTRZNY - absolutny nad całością */
    .wp-block-cover[class*="is-style-slanted-"] .wp-block-cover__inner-container {
        position: absolute !important;
        top: 0; left: 0; bottom: 0; right: 0;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        display: flex !important;
        z-index: 10;
        pointer-events: none;
    }

    /* GRUPA Z TEKSTEM */
    .wp-block-cover[class*="is-style-slanted-"] .wp-block-group {
        width: 70% !important;
        height: 100% !important;
        margin: 0 !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        pointer-events: auto;
    }



    /* Pozycjonowanie boksu tekstu */
    .is-style-slanted-r-text-l .wp-block-cover__inner-container,
    .is-style-slanted-l-text-l .wp-block-cover__inner-container { justify-content: flex-start; }
    .is-style-slanted-r-text-r .wp-block-cover__inner-container,
    .is-style-slanted-l-text-r .wp-block-cover__inner-container,

    .is-style-slanted-r-text-r-sm .wp-block-cover__inner-container
     { justify-content: flex-end; }

    /* SLANTY */
    
    .is-style-slanted-r-text-r .wp-block-group { clip-path: polygon(29.5% 0%, 100% 0%, 100% 100%, 0% 100%); padding: 0% 7% 0% 20% !important; }
    .is-style-slanted-r-text-l .wp-block-group { clip-path: polygon(0% 0%, 100% 0%, 72.5% 100%, 0% 100%); padding: 0% 20% 0% 7% !important; }
    .is-style-slanted-l-text-r .wp-block-group { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 17.5% 100%); padding: 0% 7% 0% 20% !important; }
    .is-style-slanted-l-text-l .wp-block-group { clip-path: polygon(0% 0%, 82.5% 0%, 100% 100%, 0% 100%); padding: 0% 20% 0% 7% !important; }

    .is-style-slanted-r-text-r-sm .wp-block-group { clip-path: polygon(55.5% 0%, 100% 0%, 100% 100%, 31% 100%); padding: 0% 7% 0% 37% !important; }


    .wp-block-cover.is-style-slanted-r-text-r-sm {
        display:flex!important;
    }

}

@media (max-width: 768px) {
    .wp-block-cover[class*="is-style-slanted-"] { display: flex !important; flex-direction: column !important; height: auto !important; }
    .wp-block-cover[class*="is-style-slanted-"] img.wp-block-cover__image-background { position: relative !important; width: 100% !important; height: auto !important; min-height: 300px !important; float: none !important; }
    .wp-block-cover[class*="is-style-slanted-"] .wp-block-group { width: 100% !important; clip-path: none !important; padding: 40px 20px !important; }
}


.single-content .wp-block-cover[class*="is-style-slanted-"] {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}

 
 
 .has-theme-palette-4-background-color  a  {
    color: var(--global-palette1)!important; 
}

.has-theme-palette-4-background-color  a:hover   {
    color: white!important; 
}


 .kb-row-layout-wrap.has-theme-palette4-background-color a {
	 color: white!important; 
     
}

 .kb-row-layout-wrap.has-theme-palette4-background-color  a:hover {
    color: var(--global-palette1)!important; 
}


 .has-theme-palette-5-background-color a   {
    color: var(--global-palette2)!important; 
}

 .has-theme-palette-5-background-color  a:hover {
    color: black!important; 
}


.is-style-footer-overlay-high a 
{
    color: white!important;
}

.is-style-footer-overlay-high a:hover
{
    color: black!important;
}


 
/* ============================================================
   1. GŁÓWNY KONTENER - Szare tło i Duży Cudzysłów
   ============================================================ */
   
   
   
.wp-block-kadence-testimonials {
    background-color: #f5f5f5 !important; /* Tutaj zmień kolor szarego tła */
    padding: 80px 40px !important;    /* Oddech wewnątrz szarego pola */
    position: relative !important;     /* Baza dla pozycjonowania cudzysłowu i strzałek */
    margin-bottom: 100px !important;  /* Miejsce na strzałki pod spodem */
    overflow: visible !important;      /* Pozwalamy cudzysłowowi wystawać */
}

/* Tworzenie Wielkiego Cudzysłowu */
.wp-block-kadence-testimonials::before {
    content: ""; /* Kod Unicode dla otwierającego cudzysłowu drastycznego “ */
    position: absolute !important;
    top: -70px;       /* Lekko wystaje ponad górną krawędź */
    left: 40px;       /* Odstęp od lewej krawędzi */
	width:200px;
	height:220px;
    background-image: url('https://stratum.mediamachina.net/wp-content/uploads/quote.svg') !important;
    z-index: 0 !important; /* Pod spodem tekstu */
}

/* Zapewniamy, że treść opinii jest nad cudzysłowem */
.kt-blocks-testimonials-inner-wrap {
    position: relative !important;
    z-index: 5 !important;
}

/* ============================================================
   2. STYLIZACJA STRZAŁEK (Splide) - Prawy Dolny Róg
   ============================================================ */
/* Kontener strzałek */
.kt-blocks-carousel-init.splide .splide__arrows {
    display: flex !important;
    gap: 10px;
    position: absolute !important;
    bottom: -60px !important; /* Odległość POD szarym tłem */
    right: 0 !important;      /* Wyrównanie do prawej krawędzi bloku */
    top: auto !important;
    left: auto !important;
    transform: none !important;
    z-index: 100 !important;
}

/* Styl pojedynczych strzałek */
.kt-blocks-carousel-init.splide .splide__arrow {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 45px !important;
    height: 45px !important;
    background: #333 !important; /* Kolor tła strzałki */
    border-radius: 4px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    opacity: 1 !important;
    border: none !important;
    cursor: pointer;
    transition: background 0.3s ease !important;
}

/* Naprawa kierunku lewej strzałki */
.kt-blocks-carousel-init.splide .splide__arrow--prev svg {
    transform: scaleX(-1);
}

.kt-blocks-carousel-init.splide .splide__arrow {
	border-radius:0!important;
    background: var(--global-palette1) !important; /* Wpisz tutaj swój kolor, np. pomarańczowy */
    opacity: 1 !important;
}


/* Kolor ikon SVG */
.kt-blocks-carousel-init.splide .splide__arrow svg {
    fill: #fff !important;
    width: 20px !important;
    height: 20px !important;
}

/* Hover dla strzałek */
.kt-blocks-carousel-init.splide .splide__arrow:hover {
    background: #000 !important;
}

/* ============================================================
   3. RESPONSYWNOŚĆ (Mobile)
   ============================================================ */
@media (max-width: 768px) {
    .wp-block-kadence-testimonials {
        padding: 50px 20px !important;
    }
    .wp-block-kadence-testimonials::before {
        font-size: 150px !important; /* Mniejszy cudzysłów na telefonie */
        top: -10px;
        left: 10px;
    }
}




 

 /* Reset stylów Gutenberga kolidujących ze Splide */
 
 /* Splide musi kontrolować szerokość slajdów */
/* Gap między slajdami - upewnij się że splide__track nie blokuje */
.query-slider .splide__track {
  overflow: hidden;
  width: 100%;
}

.query-slider .splide__list {
  display: flex !important;
  flex-wrap: nowrap !important;
  margin: 0 !important;
  padding: 0 !important;
}

.query-slider .splide__list {
  list-style: none !important;
}

.query-slider .splide__slide {
  list-style: none !important;
}

.query-slider .splide__slide {
  flex-shrink: 0 !important;
  width: auto !important;
  margin-top: 0 !important;    /* ← tylko góra i dół, nie prawy */
  margin-bottom: 0 !important;
  box-sizing: border-box;
}

/* Tytuł na obrazku - kontener względny */
.query-slider .splide__slide .wp-block-post-featured-image {
  position: relative;
  margin: 0 !important;
  overflow: hidden;
}

.query-slider .splide__slide .wp-block-post-featured-image img {
  width: 100%;
  height: 450px;
  object-fit: cover;
  display: block;
}

/* Tytuł absolutnie na środku obrazka */
.query-slider .splide__slide .wp-block-post-title {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0 !important;
  padding: 0 2rem;
  width: 100%;
  color: #fff;
  z-index: 2;
  font-size: 1.1rem;
  line-height: 1.3;
}

/* Ciemna nakładka żeby tekst był czytelny */
.query-slider .splide__slide .wp-block-post-featured-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
  pointer-events: none;   
}


/* Map */


@media (min-width: 786px) {

    .mapdesciption {
        position: absolute;
		top:0;
		left:2rem;
		width:400px;
		z-index:11111111111!important;
    }

}



.tape-image::after {
	
	content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('assets/overlay-tape-image.svg') !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Nadajemy wysoki z-index, ale mniejszy niż treść */
    z-index: 1; 
    pointer-events: none;
    display: block !important;
    mix-blend-mode: multiply; /* Efekt mnożenia kolorów */
    opacity: 1;
	
	
}


/* News and insights filer - temp disable */

.pf-filters {
	display:none!important;
}


/* Single post fix */

.single-entry .entry-content-wrap {
padding:2rem;	
}
	
.single-entry .entry-taxonomies a {
	font-weight:400;
}