/*!
Theme Name: krajewska-pietrasik
Theme URI: https://krajewska-pietrasik.art
Author: OUTSIDE the BOX DESIGN
Author URI: http://otbd.pl
Version: 1.0.0
*/

/* Links
--------------------------------------------- */
a {
	color: #404040;
	text-decoration:none;
}

a:visited {
	color: #404040;
}

a:hover,
a:focus,
a:active {
	color: #9f9f9f;
}

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

/* ==========================================================================
   1. RESET, LAYOUT & STRUKTURA GLOBALNA
   ========================================================================== */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Bezwzględna blokada bocznego scrolla */
}

body, #page {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    background-color: #e5e8eb;
    font-family: 'Roboto condensed', sans-serif;
    color: #161616;
	font-size: 18px;
}

.site-main {
    flex: 1 0 auto; 
    display: flex;
    flex-direction: column;
}

/* ==========================================================================
   2. NAGŁÓWEK I MENU (DESKTOP / PC)
   ========================================================================== */
.site-header {
    border-bottom: 1px solid #d3d3d3;
}

.site-title {
    font-size: 24px;
    font-weight: 600;
    color: #161616;
    text-transform: uppercase;
}

.desktop-navigation ul {
    list-style: none;
    gap: 24px;
    padding: 0;
    margin: 0;
}

.desktop-navigation #primary-menu li {
    display: inline-block;
}

.desktop-navigation ul li a {
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.2s ease-in-out;
}

.desktop-navigation ul li a:hover {
    color: #9f9f9f;
}

.desktop-navigation .current-menu-item a, .desktop-navigation .current-page-ancestor a{
	font-weight:600;
}

.desktop-navigation #primary-menu li:last-child{
	margin-right:20px;
}

/* ==========================================================================
   3. MENU MOBILNE (OFFCANVAS) & KONTROLKI
   ========================================================================== */
.navbar-toggler {
    background: none;
    border: none;
    color: #404040;
    padding: 0;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.mobile-fullscreen-menu {
    background-color: #e5e8eb !important;
}

.btn-close-custom {
    background: none;
    border: none;
    color: #404040;
    padding: 0;
}

.mobile-fullscreen-menu .mobile-menu-wrapper ul li a {
    color: #161616;
    text-decoration: none;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.mobile-menu-wrapper ul li.current-menu-item>a, .mobile-menu-wrapper ul li.current-page-ancestor>a{
	font-weight:600;
}

.mobile-sub-navigation ul.custom-mobile-sub {
    padding: 0;
    margin: 0;
    list-style: none;
}

.mobile-sub-navigation ul.custom-mobile-sub li a {
    color: #404040;
    text-decoration: none;
    display: inline-block;
    padding: 5px 0;
    transition: color 0.2s ease-in-out;
}

.mobile-sub-navigation ul.custom-mobile-sub li.current-menu-item a {
		font-weight:600;
}

/* ==========================================================================
   4. PRZEŁĄCZNIK JĘZYKÓW (POLY_LANG)
   ========================================================================== */
.language-switcher {
    padding-left: 0;
    display: flex !important; /* Wymuszamy układ liniowy dla el. listy */
    align-items: center;
    list-style: none !important;
    margin: 0;
}

.language-switcher li {
    display: inline-flex !important;
    align-items: center;
}

.language-switcher li a {
    font-size: 14px !important;
    text-transform: lowercase !important;
    color: #9f9f9f !important;
    text-decoration: none !important; /* Blokujemy pojawianie się podkreśleń */
}

.language-switcher li.current-lang a {
    color: #404040 !important;
    text-decoration: none !important;
}

.language-switcher li a:hover {
    text-decoration: none !important;
}

/* Przywrócenie i wzmocnienie separatora na sztywno */
.language-switcher li:not(:last-child)::after {
    content: "|" !important;
    color: #404040 !important;
    margin-left: 4px !important;
    margin-right: 4px !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    text-decoration: none !important; /* Gwarancja braku podkreślenia samej kreski */
    display: inline-block !important;
}

/* ==========================================================================
   5. BREADCRUMBS & PODMENU GALERII
   ========================================================================== */
#breadcrumbs {
    padding: 5px 0;
    font-size: 16px;
    color: #404040;
		font-weight: 300;
}

#breadcrumbs a {
    color: #9f9f9f;
    text-decoration: none;
}
#breadcrumbs .current{
	font-weight:400;
}

.gallery-sub-navigation ul {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    gap: 25px;
}

.gallery-sub-navigation ul li {
    margin: 0 !important;
    padding: 0 !important;
}

.gallery-sub-navigation ul li:last-child {
    padding-right: 0;
    margin-right: 20px !important;
}

.gallery-sub-navigation ul li a {
    color: #404040;
    text-decoration: none;
    font-size: 18px;
    font-weight: 400;
    transition: color 0.2s ease-in-out;
    display: inline-block;
}

.gallery-sub-navigation ul li a:hover{
    color: #9f9f9f;
}
.gallery-sub-navigation ul li.current-menu-item a {
    font-weight:600;
}

/* ==========================================================================
   6. JEDNOLITY KONTENER ZDJĘĆ & EDYTOR (Automatyczny, Elastyczny Układ)
   ========================================================================== */
.home-image-container {
    display: flex !important;
    flex-direction: column !important; /* Układ pionowy elementów (tekst nad karuzelą) */
    justify-content: center !important; /* Środkuje zawartość w pionie */
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    height: calc(100dvh - 170px) !important; /* Domyślna wysokość okna dla podstron */
    box-sizing: border-box !important;
    padding: 10px 0 0 0 !important;
    margin: 0 auto !important;
}

/* Nadpisanie wysokości specjalnie dla strony głównej (.home) */
.home .home-image-container {
    height: calc(100dvh - 120px) !important;
    padding-top: 20px !important;
}

/* Każdy element tekstowy wstawiony z edytora WP (Gutenberg) */
.home-image-container > p,
.home-image-container > div:not(#galleryCarousel),
.home-image-container > h1,
.home-image-container > h2,
.home-image-container > h3 {
    flex-shrink: 0 !important; /* Zapobiega ściskaniu tekstu */
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 20px !important; /* Odstęp od karuzeli */
    text-align: left;
}

/* Jeśli pojawi się tekst, kontener główny przestaje wymuszać środkowanie na samej górze */
.home-image-container:has(> p, > h1, > h2, > h3, > div:not(#galleryCarousel)) {
    justify-content: flex-start !important;
}

/* Obsługa obrazów wstawianych bezpośrednio z edytora WP (Gutenberg) */
.home-image-container .wp-block-image,
.home-image-container figure {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 100% !important;
    width: 100% !important;
}

/* Uniwersalne, bezpieczne skalowanie każdego zdjęcia na stronie (Karuzela i Gutenberg) */
.home-image-container img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
    margin: 0 auto !important;
}

/* ==========================================================================
   7. KARUZELA I PODPISY (GALERIA PRAC)
   ========================================================================== */
#galleryCarousel {
    width: 100% !important;
    flex-grow: 1 !important; /* Karuzela automatycznie zajmuje całe pozostałe miejsce */
    min-height: 0 !important; /* Bezpiecznik dla wyliczeń wysokości flexboxa */
}

/* Nowy wrapper przyjmuje dokładnie taką szerokość, jaką realnie ma wyrenderowany obrazek */
#galleryCarousel .carousel-image-wrapper {
    max-width: 100%;
    max-height: calc(100% - 40px); /* Rezerwujemy miejsce na podpis */
    width: max-content; /* Kluczowe: boks kurczy się do szerokości zdjęcia */
    margin: 0 auto;
}

/* Wymuszamy, aby obrazek wewnątrz wrappera prawidłowo rezerwował miejsce na podpis */
#galleryCarousel .carousel-image-wrapper img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Podpis zostaje wyrównany do lewej krawędzi wrappera (czyli obrazka) */
#galleryCarousel .gallery-caption-text {
    margin-top: 8px; /* Odstęp tekstu od dolnej krawędzi obrazu */
    font-size: 14px;
    color: #404040;
    font-weight: 400;
    text-align: left !important; /* Wyrównanie tekstu do lewej */
    text-overflow: ellipsis;
    padding-left: 0 !important; /* Zerujemy ewentualne wewnętrzne marginesy */
}

#galleryCarousel .gallery-caption-text-main-page {
	text-align:center !important;
	font-size:18px;
	font-weight:600;
	text-transform:uppercase;
	margin-top: 10px;
}

.home-page .carousel-fade .carousel-item {
    transition: opacity 0.5s ease-in-out !important;
}

#galleryCarousel .carousel-inner,
#galleryCarousel .carousel-item {
    height: 100% !important;
}

#galleryCarousel .carousel-item .d-flex {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* Idealne środkowanie w pionie w pozostałej przestrzeni */
    align-items: center !important;    /* Środkowanie w poziomie */
    height: 100% !important;
    width: 100% !important;
}

/* Zawężamy obszar, w którym renderuje się zdjęcie */
.carousel-item {
    padding-left: 50px;
    padding-right: 50px;
}

/* Nawigacja karuzeli */
.carousel-control-prev,
.carousel-control-next {
    width: 5% !important;
    opacity: 1;
    transition: 0.2s ease;
}

.carousel-control-prev-icon-custom,
.carousel-control-next-icon-custom {
    color: #404040;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-chevron {
    stroke-width: 0.3px; 
    opacity: 1;
}

/* Subtelny efekt po najechaniu myszką */
.carousel-control-prev:hover .custom-chevron,
.carousel-control-next:hover .custom-chevron {
    opacity: 1;
	transition: 0.2s ease;
}

/* Sprawiamy, że całe tło przycisku ignoruje dotyk/gesty (dzięki czemu swipe działa pod nimi), 
   ale sama ikona strzałki w środku nadal reaguje na kliknięcia */
.carousel-control-prev,
.carousel-control-next {
    pointer-events: none; 
}

.carousel-control-prev-icon-custom,
.carousel-control-next-icon-custom,
.custom-chevron {
    pointer-events: auto; /* Przywracamy klikalność samej strzałce */
}

/* ==========================================================================
   8. STOPKA (FOOTER)
   ========================================================================== */
.footer-text {
    font-size: 0.7rem;
    color: #9f9f9f;
    font-weight: 300;
}

.footer-link {
    color: #404040;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

.footer-link:hover {
    color: #1a1a1a;
    text-decoration: underline;
}

/* ==========================================================================
   9. RESPONSIVNESS (MEDIA QUERIES)
   ========================================================================== */
@media (max-width: 991.98px) {
    .site-header {
        border-bottom: none !important;
        padding-top: 12px !important;
        padding-bottom: 8px !important;
    }

    .site-header .site-title {
        display: block !important;
        width: 100% !important;
        padding-bottom: 8px !important;
        border-bottom: 1px solid #d3d3d3 !important;
        letter-spacing: 0.5px;
    }

    .mobile-header-row {
        width: 100% !important;
    }

    .mobile-controls {
        padding-top: 6px !important;
    }

    .mobile-controls .language-switcher li a {
        font-size: 14px !important;
    }
    
    .mobile-controls .language-switcher li:not(:last-child)::after {
        margin-left: 5px;
        margin-right: 3px;
    }

    .mobile-controls .navbar-toggler svg {
        width: 36px;
        height: 36px;
    }

	.carousel-item {
		padding-left: 0;
		padding-right: 0;
	}
        
    .mobile-fullscreen-menu .style-mobile-title {
        font-size: 20px !important;
    }

    /* Dopasowania wysokości podstron i home dla mobile (wyższy nagłówek) */
	.home-image-container {
        height: calc(100dvh - 410px) !important;
    }
    .home .home-image-container {
        height: calc(100dvh - 200px) !important;
    }

    /* Wymuszenie wyświetlania kontenera podmenu na mobilnych */
    .sub-navigation-wrapper .d-flex.justify-content-lg-end {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100% !important;
        margin-right: 0 !important;
    }

    /* Ustawienie elementów podmenu i przygotowanie go pod strzałki */
    .gallery-sub-navigation {
        width: 100% !important;
        display: block !important;
        position: relative !important; /* Baza dla pozycjonowania wrappera strzałek */
    }

    .gallery-sub-navigation ul {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
        padding: 0 !important;
    }
   
    .gallery-sub-navigation ul li:last-child {
        margin-right: 0 !important;
    }

    /* POZYCJONOWANIE NOWEGO WRAPPERA STRZAŁEK (W PRAWO OD MENU) */
    .mobile-gallery-arrows-wrapper {
        position: absolute !important;
        bottom: 0;
        right: 0 !important;
        width: 110px !important;
        height: 50px !important;
        display: flex !important;
        justify-content: space-between !important;
        z-index: 999 !important;
    }

    /* Resetowanie starych stylów Bootstrapa dla przeniesionych przycisków */
    .mobile-gallery-arrows-wrapper button.carousel-control-prev,
    .mobile-gallery-arrows-wrapper button.carousel-control-next {
        position: relative !important;
        top: 0 !important;
        bottom: 0 !important;
        left: auto !important;
        right: auto !important;
        width: 50px !important;
        height: 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: none !important;
    }

    /* Korekta wielkości chevronów na mobilce, żeby pasowały do tekstu */
    .mobile-gallery-arrows-wrapper .custom-chevron {
        width: 35px !important;
        height: 45px !important;
    }
}

@media (max-width: 767.98px) {
    .gallery-sub-navigation ul {
        justify-content: center !important;
        width: 100%;
    }
    .gallery-caption-text {
        font-size: 13px;
    }
    .carousel-control-prev,
    .carousel-control-next {
        width: 10% !important;
    }
}

@media (max-width: 600px) {
	.wp-block-media-text__content{
		padding:0 !important;
		margin-top:20px;
	}
}

/* ==========================================================================
   10. LISTA WYSTAW
   ========================================================================== */
.rok-blok{
  margin-bottom: 30px;
}

.rok-naglowek{
	display:inline-block;
	vertical-align:top;
	font-weight:600;
}

.wystawy-lista{
	display:inline-block;
}

.wystawa-pozycja{
	position: relative;
  padding-left: 15px;
	margin-bottom:10px;
}

.wystawa-pozycja::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background-color: #161616;
}

/* ==========================================================================
   11. Przycisk Go To Top
   ========================================================================== */
.scroll-to-top-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: #9f9f9f; /* Jasnoszare tło ze zrzutu */
    color: #ffffff;            /* Biała strzałka */
    border: none;
    border-radius: 50%;        /* Idealne koło */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 99999;            /* Bardzo wysoki z-index, żeby nic go nie przykryło */
    opacity: 0;                /* Startowo niewidoczny */
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.2s ease;
}

/* Klasa dodawana i usuwana przez jQuery */
.scroll-to-top-btn.show {
    opacity: 1;
    visibility: visible;
}

/* Efekt hover */
@media (hover: hover) {
    .scroll-to-top-btn:hover {
        background-color: #d8d8d8;
    }
}

/* Responsywność dla mobile */
@media (max-width: 767.98px) {
    .scroll-to-top-btn {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
    }
}