/* 
Theme Name:   KK-POL
Template:     spacious-pro
*/

/* TEMP - stare
==========================================================================
   ŁADOWANIE FONTU LATO (Z FOLDERU MOTYWU POTOMNEGO)
   ========================================================================== */

/* Thin (100) */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url('fonts/Lato-Thin.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: url('fonts/Lato-ThinItalic.woff2') format('woff2');
}

/* Light (300) */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/Lato-Light.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/Lato-LightItalic.woff2') format('woff2');
}

/* Regular (400) */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Lato-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Lato-Italic.woff2') format('woff2');
}

/* Bold (700) */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Lato-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Lato-BoldItalic.woff2') format('woff2');
}

/* Black (900) */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/Lato-Black.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/Lato-BlackItalic.woff2') format('woff2');
}

/* ==========================================================================
   PRZYPISANIE FONTU DO STRONY
   ========================================================================== */
body, input, select, textarea {
  font-family: 'Lato', sans-serif;
}

/* ZMIANA SZEROKOŚCI STRONY */
#page {
    max-width: 1920px !important;
}
.inner-wrap {
    max-width: 1820px !important;
    width: 100% !important;
}

/* Prawidłowe ułożenie całego głównego obszaru zawartości strony */ 
#main {
    position: relative !important;
    clear: both !important;
    display: block !important;
}

/* Ustawienia stopki */
#colophon .widget_text {
    margin-bottom: 0;
}
#colophon .widget, #colophon .widget_text .textwidget {
    padding-bottom: 0;
}
.footer-widgets-wrapper {
    border-top: 0;
}

/* Tło i linia pod górnym paskiem Top Bar */
#header-meta {
  background-color: #272525;
  border-bottom: 1px solid #c95b1d;
}
/* GLOBALNE ODSTAWIENIE ELEMENTÓW TOP BAR OD KRAWĘDZI (DLA KOMPUTERÓW) */
#header-meta .inner-wrap {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important; /* Dba o to, by padding nie rozpychał kontenera */
}
/* Brak górnego i dolnego marginesu strony */
body {
  padding-top: 0px;
  padding-bottom: 0px;
}

/* Zmiana podstawowego koloru linków w menu */
.main-navigation ul li a {
    color: #fff !important; 
}
div .main-navigation ul li a {
	font-size: 16px;
}
.header-post-title-container {
  display: none;
}

/* Zmiana koloru menu po najechaniu myszką (hover) i dla aktywnej strony */
.main-navigation ul li:hover > a,
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current_page_item > a {
    color: #c95b1d !important; 
}

/* ==========================================================================
   KWESTIE SLAJDERA (Wersja dla komputerów i tabletów)
   ========================================================================== */

/* Inteligentny placeholder z pierwszym obrazkiem jako tło pod LCP */
#featured-slider {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    clear: both !important;
    overflow: hidden !important;
    aspect-ratio: 1920 / 685 !important; /* Domyślny wymiar dla komputerów */
    background-image: url('https://nowa.kkpol.com/wp-content/uploads/2026/09/685Stelazslim.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    z-index: 1 !important; /* Tło CSS siedzi na najniższej warstwie */
}

/* Wymuszenie, aby właściwe slajdy były wyżej niż tło (Eliminacja mignięcia) */
#featured-slider .slides, 
#featured-slider .cycle-slide,
#featured-slider .slider-cycle {
    z-index: 2 !important; /* Slajdy lądują nad tłem CSS */
    background: #ffffff !important; /* Maskowanie: białe tło pod każdym pojedynczym slajdem */
}

/* Zabezpieczenie aktywnego slajdu na samej górze */
#featured-slider .cycle-slide-active {
    z-index: 3 !important; 
}

/* Wymuszenie koloru dla ikon wewnątrz strzałek i usunięcie tła */
#featured-slider .cycle-prev, 
#featured-slider .cycle-next,
#featured-slider .cycle-prev::before,
#featured-slider .cycle-next::before,
#featured-slider .slider-nav a,
#featured-slider .slider-nav a::before {
    background: transparent !important;   
    background-image: none !important;    
    color: #c95b1d !important;            
    opacity: 0.8 !important;              
    transition: all 0.3s ease !important; 
}

/* Efekt hover dla strzałek nawigacyjnych */
#featured-slider .cycle-prev:hover, 
#featured-slider .cycle-next:hover,
#featured-slider .cycle-prev:hover::before,
#featured-slider .cycle-next:hover::before {
    background: transparent !important;   
    color: #c95b1d !important;            
    opacity: 1 !important;                
}

/* Przycisk na sliderze */
#featured-slider .slider-read-more-button {
  padding: 0.6rem 1.2rem;
}

/* Ramka pod teksty na sliderze */
#featured-slider .entry-description-container {
	width: 80%;
}

/* Kreseczki slajdów na dole (Komputery) */
#controllers a {
  width: 32px;
  height: 3px;
}

/* ==========================================================================
   POPRAWKA DLA TELEFONÓW (Ekrany o szerokości do 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
    
	    /* Wyłączenie zdjęcia tła i zresetowanie wymuszonej wysokości komputerowej */
    #featured-slider {
        background-image: none !important; 
        aspect-ratio: auto !important;     
        height: auto !important;           
        min-height: 0 !important;          
    }
	
	/* DODANIE CIENKIEJ LINII POD MENU */
    #header-text-nav-container,
    .header-bottom {
        border-bottom: 1px solid #c95b1d !important;
    }
    
	/* Pozwalamy kontenerowi tekstu się wyświetlić na telefonie */
    #featured-slider .slider-caption,
    #featured-slider .entry-container {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        background: transparent !important; 
    }

    /* Wymuszamy widoczność i czytelność samego tytułu slajdu */
    #featured-slider .entry-title,
    #featured-slider .slider-title {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        color: #ffffff !important; 
    }

    /* Ukrywamy opis/tekst oraz oryginalny przycisk "Więcej" */
    #featured-slider .entry-content,
    #featured-slider .slider-text,
    #featured-slider .slider-read-more,
    #featured-slider .read-more {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
    
    /* Ukrycie strzałek nawigacyjnych (lewa/prawa) */
    #featured-slider .slider-nav,
    #featured-slider .cycle-prev,
    #featured-slider .cycle-next,
    #featured-slider .slider-navigation {
        display: none !important;
    }
    
    /* Ukrycie kropek, kreseczek i paska postępu na dole */
    #featured-slider .cycle-pager,
    #featured-slider .slider-pager,
    #featured-slider .pager,
    #featured-slider .progress-bar {
        display: none !important;
    }

    /* Ukrycie paska kontrolerów w strukturze Spacious */
    #featured-slider #controllers,
    #featured-slider nav#controllers,
    #featured-slider #controllers a {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        opacity: 0 !important;
    }
	
	/* DODANIE MARGINESÓW BOCZNYCH (EFEKT PUDEŁKOWY) NA TELEFONACH I TABLETACH */
    #page {
        width: 98% !important;        /* Strona zajmie 93% szerokości ekranu */
        margin-left: auto !important;  /* Automatyczne wyśrodkowanie - lewy margines */
        margin-right: auto !important; /* Automatyczne wyśrodkowanie - prawy margines */
        margin-top: 15px !important;   /* Opcjonalnie: lekki odstęp od góry ekranu */
        margin-bottom: 15px !important;/* Opcjonalnie: lekki odstęp od dołu ekranu */
        box-shadow: 0 0 10px rgba(0,0,0,0.1) !important; /* Delikatny cień wokół pudełka strony */
    }
	
	/* WEWNĘTRZNY ODSTĘP OD KRAWĘDZI PUDEŁKA (LOGO, TEKSTY, STOPKA) */
    .inner-wrap {
        padding-left: 20px !important;  /* Odstęp wewnętrzny z lewej strony */
        padding-right: 20px !important; /* Odstęp wewnętrzny z prawej strony */
        width: auto !important;         /* Pozwala przeglądarce prawidłowo obliczyć szerokość wraz z paddingiem */
    }
	/* DODANIE MARGINESU DLA ELEMENTÓW W TOP BAR (NOWOŚĆ) */
    #header-meta .inner-wrap {
        padding-left: 20px !important;
        padding-right: 20px !important;
        width: auto !important;
    }
}

@media screen and (max-width: 767px) {
  .small-info-text {
    float: none;
    padding-right: 0;
  }
}
	@media screen and (max-width: 768px) {
  .better-responsive-menu #header-text-nav-container {
    position: relative;
    margin-bottom: 0px;
    border: none;
  }
	}
	@media screen and (max-width: 600px) {
  .better-responsive-menu #header-left-section {
    padding-top: 1px;
    text-align: center;
    float: none;
		margin-top: 1px;
  }  
  .better-responsive-menu .menu-toggle {
    margin: 10px auto !important;
    float: none !important;
    display: block !important;
  }
}



/* ==========================================================================
   ZMIANA KOLORU IKON SOCIAL MEDIA NA BIAŁY
   ========================================================================== */

/* Stan domyślny (ikony stają się białe) */
.social-links ul li a,
.social-links ul li a::before {
    color: #ffffff !important;
    opacity: 0.9 !important; /* Delikatne wtopienie, aby wyglądały estetycznie */
    transition: all 0.3s ease !important; /* Płynna zmiana koloru */
}

/* Efekt po najechaniu myszką (np. zmiana na Twój firmowy pomarańczowy) */
.social-links ul li a:hover,
.social-links ul li a:hover::before {
    color: #c95b1d !important;
    opacity: 1 !important;
}

/* problem z domyślnym zachowaniem kolumn WordPressa (Gutenberga) na tabletach. 
Zamiast nagłego przeskoku z 4 kolumn do 1 pionowej, płynnie wprowadza elegancki układ 2x2. */

/* Wymuszenie układu 2x2 na tabletach (szerokość od 600px do 980px) */
@media screen and (max-width: 980px) and (min-width: 600px) {
    .wp-block-columns.tablet-dwie-kolumny {
        flex-wrap: wrap !important; /* Pozwala kolumnom przechodzić do nowej linii */
        flex-direction: row !important; /* Blokuje domyślne pionowe układanie */
    }

    .wp-block-columns.tablet-dwie-kolumny > .wp-block-column {
        flex-basis: calc(50% - var(--wp--style--block-gap, 20px) / 2) !important; /* Dwie kolumny uwzględniające odstęp */
        flex-grow: 0 !important;
    }
}

/* Bezpieczny powrót do 1 kolumny na telefonach (poniżej 599px) */
@media screen and (max-width: 599px) {
    .wp-block-columns.tablet-dwie-kolumny {
        flex-direction: column !important;
    }
    .wp-block-columns.tablet-dwie-kolumny > .wp-block-column {
        flex-basis: 100% !important;
    }
}


#header-logo-image img {
  margin-bottom: 5px;
  margin-top: 20px;
}
#main {
  padding: 0px 0 10px 0;
}
#header-text-nav-wrap {
  padding-top: 1px;
  padding-bottom: 5px;
	margin-left: 15px;
  margin-right: 15px;
}



#header-right-section .widget {
  text-align: right;
  padding-top: 1px;
}
.main-navigation {
  float: right;
  padding-top: 1px;
}
.is-form-style input.is-search-input {
  background: #fff;
    background-color: rgb(255, 255, 255);
    background-image: none;
  background-image: none !important;
  color: #333;
  padding: 0 12px;
  margin: 0;
  outline: 0 !important;
  font-size: 14px !important;
  height: 36px;
  min-height: 0;
  line-height: 1;
  border-radius: 0;
  border: 1px solid #ccc !important;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: rgb(204, 204, 204);
  font-family: arial;
  width: 55%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -webkit-border-radius: 1;

}
/*Przycisk SKLEP */
.main-navigation .tg-header-button-wrap.button-one a {
  border: none;
  border-radius: 5px;
  padding: 0px 20px;
  background-color: #c95bid;
  color: #fff;
}
.main-navigation .tg-header-button-wrap.button-one a:hover {
  color: #c95bid;
  background-color: #e1dddb;
}

/* Tło rozwijanego menu */
.main-navigation ul li ul {
    background-color: #333333; /* Ciemnoszary */
}

/* Kolor tekstu w rozwijanym menu */
.main-navigation ul li ul li a {
    color: #ffffff; /* Biały tekst */
}

/* Kolor tekstu po najechaniu myszką (Hover) */
.main-navigation ul li ul li a:hover {
    color: #0073aa; /* Kolor po najechaniu */
}
.blockart-paragraph.blockart-paragraph-6382f008, .blockart-paragraph.blockart-paragraph-588d6024, .blockart-paragraph.blockart-paragraph-b1dfd8d3 {
  margin: 10px;
}
.blockart-paragraph.blockart-paragraph-0fa90a67 {
  margin: 10px;
 }

/*Odległośc nagłówka w bloku od góry w style-blocks.css*/
.blockart-heading {
  margin-top: 30px;
}

/* Wymuszenie widoczności separatora w motywie Spacious */
.wp-block-separator, hr {
    /*border-top: 1px solid #ccc !important;*/
    background-color: #ccc !important;
    height: 1px !important;
    opacity: 1 !important;
    display: block !important;
}

body.page img.header-image {
display: none;
}
body.home img.header-image {
display: inline;
}
#header-meta {
  background-color: #272525;
  border-bottom: 1px solid #c95b1d;
}
/*Tytuł strony*/
.header-post-title-class {
  font-size: 0;
  padding-bottom: 0;
  line-height: none;
}
.header-post-title-container {
  display: none;
}
	.wp-block-post-title {
  box-sizing: border-box;
  word-break: break-word;
  padding: 30px 0px 30px 0px;
}

/*Wygląd przycisków buttons*/
div .blockart-button .blockart-button-link.is-large {
  padding: 10px 10px;
}

div .blockart-button .blockart-button-link {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 8px;
}

div .blockart-buttons > .blockart-button > .blockart-button-link {
  background: #c95b1d;
  width: 100%
}

form.customize-unpreviewable, form.customize-unpreviewable input, form.customize-unpreviewable select, form.customize-unpreviewable button, a.customize-unpreviewable, area.customize-unpreviewable {
  cursor: not-allowed !important;
}
a:focus, a:active, a:hover {
  text-decoration: none;

}
a:hover, a:active {
  outline: 0;

}
div .wp-element-button, .wp-block-button__link) {
  padding-top: calc(0.5em);
  padding-bottom: calc(0.5em);
  margin-top: 20px;
  width: 185px !important;
} 

.small-info-text {
  float: right;
  max-width: 100%;
  padding-right: 15px;
  padding-top: 8px;
  font-size: 100%;
  padding-bottom: 8px;
  color: #dfba92;
}


#header-text-nav-container {
  border-bottom: 1px solid #c95b1d;
  background-color: #272525;
}
#featured-slider .entry-description-container {
  background-color: #555;
  background-color: rgba(255, 255, 255, 0.1);
  padding: 0.5rem 1.5rem;
  width: 80%;
}
.widget_text .textwidget {
  padding-bottom: 0px;
}
body {
  padding-top: 0px;
}
body.custom-background {
  background-color: #fff;
}
.main-navigation {
  float: right;
  
}