/*
Theme Name: Fundacja Radość z Życia
Theme URI: https://fundacjaradoscztycia.pl/
Author: 89 Studio
Author URI: https://89studio.pl/
Description: Ekstremalnie lekki, autorski szablon dla Fundacji Radość z Życia. Bez frameworków, bez jQuery, bez zbędnych bibliotek. Statyczny front-page kompatybilny z ACF, mobile menu poniżej 991px, wbudowane meta SEO.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: frzz
Tags: lightweight, custom-menu, custom-logo, translation-ready
*/

/* === Reset minimalny === */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; line-height:1.6; color:#222; background: #f4f6f9}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
button{font:inherit; cursor:pointer; border:0; background:none}
.text-center {text-align: center}

:root {
	--color: #5e71a3;
}

h1 {font-size: 60px; margin-bottom: 30px; margin-top: 0}
h2 {font-size: 60px; margin-bottom: 10px; margin-top: 0}
h3 {font-size: 40px; margin-bottom: 10px; margin-top: 0}
h4 {font-size: 30px; margin-bottom: 10px; margin-top: 0}
h5 {font-size: 25px; margin-bottom: 10px; margin-top: 0}
h6 {font-size: 20px; margin-bottom: 10px; margin-top: 0}





/* === Layout === */
.container{width:1200px;  max-width: 80%; margin:0 auto; padding:0 20px;  display: flex;  flex-wrap: wrap; }
.full-container {width: 100%; padding: 0 50px; display: flex; flex-wrap: wrap}

/* === Header === */
.site-header {padding: 10px 0; border-bottom:1px solid #eee;}
.home .site-header {padding: 10px 0; border-bottom:1px solid #eee; position: absolute; top: 0; left: 0; width: 100%; z-index: 99}
.site-header .full-container {display:flex; align-items:center; justify-content:space-between; gap:20px}
.site-branding a {display:inline-block; text-decoration:none; font-weight: bold; font-size:1.25rem}
.site-branding img {max-height: 90px; width:auto}
.home .site-header li.current-menu-item a {border-bottom: 2px solid #fff}
.home .site-header a {color: #fff}


/* === Menu === */
.main-navigation ul{list-style:none; margin:0; padding:0; display:flex; gap: 5px}
.main-navigation a{text-decoration:none; padding: 5px 10px; display:inline-block}
.main-navigation a:hover{text-decoration:underline}

/* === Mobile menu toggle === */
.menu-toggle{display:none; width:40px; height:40px; align-items:center; justify-content:center; flex-direction:column; gap:5px}
.menu-toggle span{display:block; width:24px; height:2px; background:#222; transition:transform .2s,opacity .2s}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* === Content === */
.site-main{padding:40px 0; min-height:50vh}
.entry-title{margin:0 0 20px}
.entry-meta{color:#666; font-size:.9rem; margin-bottom:20px}
.entry-content p{margin:0 0 1em}

/* === Posts list === */
.post-item{padding:20px 0; border-bottom:1px solid #eee}
.post-item:last-child{border-bottom:0}
.post-item h2{margin:0 0 10px}
.post-item h2 a{text-decoration:none}

/* === Pagination === */
.pagination{margin-top:30px; display:flex; gap:10px; flex-wrap:wrap}
.pagination .page-numbers{padding:8px 14px; border:1px solid #ddd; text-decoration:none; border-radius:3px}
.pagination .page-numbers.current{background:#222; color:#fff; border-color:#222}

/* === Footer === */
.site-footer{padding:30px 0; border-top:1px solid #eee; text-align:center; color:#666; font-size:.9rem; margin-top:40px}

/* === Mobile (< 991px) === */
@media (max-width:990px){
	.menu-toggle{display:flex}
	.main-navigation{position:absolute; top:100%; left:0; right:0; background:#fff; border-bottom:1px solid #eee; display:none; z-index:99}
	.main-navigation.is-open{display:block}
	.main-navigation ul{flex-direction:column; gap:0; padding:10px 20px}
	.main-navigation li{border-bottom:1px solid #f3f3f3}
	.main-navigation li:last-child{border-bottom:0}
	.main-navigation a{display:block; padding:12px 0}
	.site-header{position:relative}
}



section.hero {height: 100vh}





/* Hero - full viewport, video bg, content vertically centered */
.hero {position:relative; min-height:100vh; min-height:100dvh; margin-bottom: 50px; display:flex; align-items:center; color:#fff; overflow:hidden; background-size:cover; background-position:center; background-color:#222}
.hero-image::before,.hero--video::before {content:""; position:absolute; inset:0; background:rgba(0,0,0,.45); z-index:1}
.hero-video-bg {position:absolute; top:50%; left:50%; min-width:100%; min-height:100%; width:auto; height:auto; transform:translate(-50%,-50%); object-fit:cover; z-index:0}
.hero .container {position:relative; z-index:2; display:flex; align-items:center; max-width:900px ; min-height:100vh; min-height:100dvh}
.hero .box {padding:40px 50px; background: #00000080; z-index: 9}
.hero-title {font-size: 60px; margin:0 0 15px; color:#fff; line-height:1.15}
.hero-subtitle {font-size: 28px; font-weight:400; margin:0 0 30px; color:#fff; opacity:.95}
.btn {display:inline-block; padding:12px 30px; text-transform: uppercase; border: 1px solid #fff; background: var(--color); color:#fff; text-decoration:none; border-radius:4px; font-weight:600; height: 50px; border-radius: 25px; transition:opacity .2s}
.btn:hover {opacity:.85}
.hero-btn {margin-top:10px}

.about {margin-bottom: 50px}
.about img {border-radius: 25px}


section.news {margin-bottom: 50px}
section.news .container.news-intro {text-align: center;}
section.news .container.news-intro .box {width: 600px; max-width: 100%; text-align: center; margin: 0 auto 50px}
section.news .container.blog-grid article {flex: 0 0 25%; box-sizing: border-box}

section.news .blog-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px;}
section.news .blog-grid article {box-shadow: 0 0 10px 0 rgb(0 0 0 / .5); border-radius: 10px; display: flex; flex-wrap: wrap;}
section.news .blog-grid article .news-thumb {padding: 10px; border-radius: 10px; flex: 100%}
section.news .blog-grid article .news-thumb img {border-radius: 5px}
section.news .blog-grid .news-body {flex: 100%; position: relative; padding: 0 10px 80px;}
section.news .blog-grid .news-body h3 {font-size: 18px; margin-bottom: 0;}
section.news .blog-grid .news-body h3 a {text-decoration: none;}
section.news .blog-grid .news-body time.news-date {font-size: 12px; color: #adadad}
section.news .blog-grid .news-excerpt {font-size: 14px}
section.news .blog-grid a.news__more {position: absolute; text-decoration: none; bottom: 0; left: 0; width: 100%; padding: 15px; text-align: center; background-color: var(--color); color: #fff; font-weight: bold; border-radius: 0 0 10px 10px}



section.donation {margin-bottom: 50px}
section.donation .donation-col {flex: 1 1 50%}
section.donation .donation-text {display: flex; align-items: center; position: relative; z-index: 9}
section.donation .donation-text h4 strong {color: var(--color); font-weight: 700}
section.donation .donation-text .round-box {position: relative; padding: 30px}
section.donation .donation-text .round-box:before {content: ''; z-index: -1; position: absolute; width: 115%; height: 100%; left: 0; top: 0; background-color: #fff; border-top-right-radius: 250px; border-bottom-right-radius: 250px;}



.video-row {margin-bottom: 50px}
.video-row h2.section-title {margin: 0 auto}
.video-row-item {display: flex; flex-direction: column; gap: 12px;}
.video-row-title {font-size: 1.1rem; text-align: center; margin: 0;}
/* --- LEKKI YOUTUBE (FASADA) --- */
.lite-youtube {position: relative; width: 100%; aspect-ratio: 16 / 9; background-color: #000; border-radius: 8px; overflow: hidden; cursor: pointer; box-shadow: 0 4px 6px rgba(0,0,0,0.1);}
.lite-youtube img {width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: opacity 0.3s ease;}
.lite-youtube:hover img {opacity: 1;}
/* Przycisk Play */
.lite-youtube .play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 40px; background-color: rgba(33, 33, 33, 0.8); border-radius: 10px; border: none; cursor: pointer; transition: background-color 0.3s ease; pointer-events: none;}
.lite-youtube .play-btn::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-35%, -50%); border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent #fff;}
.lite-youtube:hover .play-btn { background-color: #ff0000; }
.lite-youtube iframe, .video-row-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;}


/* --- KONTENER SLIDERA --- */
.support-slider {margin-bottom: 50px}
.support-slider .box {width: 600px; max-width: 100%; text-align: center; margin: 0 auto 50px}
.support-slider-viewport {container-type: inline-size; overflow: hidden; width: 100%; position: relative;}
.support-slider-track { display: flex; width: max-content; transition: transform 300ms ease-in-out;}
.support-slider-slide {width: calc(100cqi / 3); height: 140px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 5px; box-sizing: border-box;}
.support-slider-slide img {width: 100%; height: 100%; object-fit: cover; transition: filter 0.3s ease; border-radius: 10px; border: 1px solid #adadad;}



section.newsletter {background-image: url('/wp-content/themes/fundacja-radosc-z-zycia/img/newsletter.jpg'); background-size: cover; background-position: right center; padding-top: 50px; padding-bottom: 50px}
section.newsletter .gform_wrapper {width: 600px; max-width: 100%; margin: 0 auto}
section.newsletter .gform_wrapper input#gform_submit_button_1 {background-color: var(--color); text-transform: uppercase; border: none; padding: 0 50px; line-height: 50px; border-radius: 25px}



footer .contact-row {display: flex; flex-wrap: wrap}
footer .contact-row .col {flex: 1 1 50%; text-align: left; color: #303030; line-height: 1.3}
footer .contact-row .col h2 {font-size: 60px}
footer .contact-row .col h3 {font-size: 24px}
footer .contact-row .col .social-icons-list {padding: 0; list-style-type: none; float: left;}
footer .contact-row .col .social-icons-list li {float: left; margin-right: 30px}
footer .contact-row .col .social-icons-list li a { display: block; width: 50px; height: 50px; padding: 12px; border-radius: 50%;}
footer .contact-row .col .social-icons-list li a[aria-label="Facebook"] {background-color: #1877F2}
footer .contact-row .col .social-icons-list li a[aria-label="Instagram"] {background-color: #E1306C}
footer .contact-row .col .social-icons-list li a[aria-label="YouTube"] {background-color: #FF0000}
footer .contact-row .col .social-icons-list li a svg {fill: #fff}
footer .copyright-row {justify-content: space-between; text-transform: uppercase; font-size: 12px; margin-top: 50px}
footer nav.footer-copyright-menu ul {list-style-type: none; padding: 0; gap: 10px; display: flex; flex-wrap: wrap}
footer nav.footer-copyright-menu ul li {float: left}
footer nav.footer-copyright-menu ul li a {text-decoration: none;}
footer .gform-footer.gform_footer.top_label .gform-footer.gform_footer.top_label {justify-content: end}
footer .gform-footer.gform_footer.top_label input#gform_submit_button_3 {background-color: var(--color); text-transform: uppercase; border: none; padding: 0 50px; line-height: 50px; border-radius: 25px}




.entry-content h2.wp-block-heading {font-size: 32px}
.entry-content h3.wp-block-heading {font-size: 26px}
.entry-content h4.wp-block-heading {font-size: 22px}


.blog .blog-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;}
.blog .blog-grid article {box-shadow: 0 0 10px 0 rgb(0 0 0 / .5); border-radius: 10px; display: flex; flex-wrap: wrap;}
.blog .blog-grid article .news-thumb {padding: 10px; border-radius: 10px; flex: 100%}
.blog .blog-grid article .news-thumb img {border-radius: 5px}
.blog .blog-grid .news-body {flex: 100%; position: relative; padding: 0 10px 80px;}
.blog .blog-grid .news-body h2 {font-size: 18px; margin-bottom: 0;}
.blog .blog-grid .news-body h2 a {text-decoration: none;}
.blog .blog-grid .news-body time.news-date {font-size: 12px; color: #adadad}
.blog .blog-grid .news-excerpt {font-size: 14px}
.blog .blog-grid a.news__more {position: absolute; text-decoration: none; bottom: 0; left: 0; width: 100%; padding: 15px; text-align: center; background-color: var(--color); color: #fff; font-weight: bold; border-radius: 0 0 10px 10px}


.single .entry-thumbnail-bg {width: 100%; height: 70vh; overflow: hidden; position: relative;}
.single .entry-thumbnail-bg img {width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;}
.container-box {flex: 100%}


.specialists-list {display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px;}
.specialists-list article {display: flex; flex-wrap: wrap; box-shadow: 0 0 10px 0 rgba(0, 0, 0, .15); border-radius: 5px; overflow: hidden;}
.specialists-list article a.specialist-photo {flex: 100%}
.specialists-list article a.specialist-photo img {width: 100%}
.specialists-list article .specialist-info {flex: 100%; text-align: center; padding: 20px 0 60px; background-color: #fff; position: relative;}
.specialists-list article .specialist-info h2 {font-size: 20px; padding: 0 15px }
.specialists-list article .specialist-info h2 a {text-decoration: none;}
.specialists-list article .specialist-info .specialist-excerpt {margin: 0; line-height: 1.5em; font-size: 14px; color: #777;}
.specialists-list article .specialist-info a.specialist-more {background-color: var(--color); color: #fff; width: 100%; height: 45px; position: absolute; bottom: 0; left: 0; display: flex; justify-content: center; align-items: center; margin-bottom: 0;}


.single-specjalisci article .container-row {display: flex;}
.single-specjalisci article .container-row .col {flex: 1 1 50%; padding: 0 15px}
.single-specjalisci article .container-row .col h1.entry-title.text-center {text-align: left}
.single-specjalisci article .container-row .entry-thumbnail-bg {height: inherit; overflow:  inherit ;}

:root :where(.wp-element-button, .wp-block-button__link) {background:   var(--color )}
.wp-block-spectra-tabs .spectra-block-is-active {background: #8ea2d6}



.placowki-list .blog-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;}
.placowki-list .blog-grid article {box-shadow: 0 0 10px 0 rgb(0 0 0 / .5); border-radius: 10px; display: flex; flex-wrap: wrap;}
.placowki-list .blog-grid article .news-thumb {padding: 10px;}
.placowki-list .blog-grid article .news-thumb img {border-radius: 5px}
.placowki-list .blog-grid .news-body {flex: 100%; position: relative; padding: 0 10px 80px;}
.placowki-list .blog-grid .news-body h2 {font-size: 18px; margin-bottom: 10px; text-transform: uppercase;}
.placowki-list .blog-grid .news-body h2 a {text-decoration: none;}
.placowki-list .blog-grid .news-body time.news-date {font-size: 12px; color: #adadad}
.placowki-list .blog-grid .news-excerpt {font-size: 14px}
.placowki-list .blog-grid a.news__more {position: absolute; text-decoration: none; bottom: 0; left: 0; width: 100%; padding: 15px; text-align: center; background-color: var(--color); color: #fff; font-weight: bold; border-radius: 0 0 10px 10px}


.single-nasze_placowki .entry-thumbnail-bg {height: inherit; width: 900px; max-width: 90%; margin: 30px auto;}
.single-nasze_placowki h1.entry-title.text-center {line-height: 1}


.placowki-list .blog-grid article .news-thumb {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.placowki-list .blog-grid article .news-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}







/* Kontener całego panelu - zmodyfikowany pod wygląd zdjęcia */
.custom-share-container {
    margin-top: 40px;
    padding: 30px; /* Większe paddingi dla efektu z obrazka */
    border-top: 1px solid #eaeaea;
    background-color: #f6f8fa; /* Jasnoszare tło widoczne pod przyciskami */
    text-align: center; /* Wyśrodkowanie całej zawartości */
    border-radius: 10px; /* Zaokrąglone rogi tła */
}

/* Tytuł panelu - duże, pogrubione hasło ze zdjęcia */
.share-title {
    text-align: center;
    font-size: 30px; /* Zwiększone, na zdjęciu jest duży */
    font-weight: 700; /* Bold */
    color: #333;
    margin-bottom: 25px;
    font-family: inherit; /* Użyj czcionki Twojego motywu */
}

/* Wiersz z przyciskami - wyśrodkowany */
.share-buttons-row {
    display: flex;
    justify-content: center; /* Wyśrodkowanie przycisków w wierszu */
    flex-wrap: wrap;
    gap: 15px; /* Odstęp między ikonami ze zdjęcia */
}

/* Podstawowy wygląd przycisku - kwadratowy, zaokrąglony */
.share-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 55px; /* Przybliżony rozmiar ze zdjęcia */
    height: 55px;
    border-radius: 10px; /* Wyraźne zaokrąglenie rogów */
    text-decoration: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Płynne efekty hover */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08); /* Subtelny cień pod samym przyciskiem, jak na zdjęciu */
}

.share-btn:hover {
    transform: translateY(-2px); /* Lekkie podniesienie przy najechaniu */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12); /* Zwiększony cień przy najechaniu */
}

/* Ustawienia dla ikon SVG wewnątrz */
.share-btn svg {
    width: 26px; /* Zwiększony rozmiar ikony wewnątrz dla lepszej widoczności */
    height: 26px;
    fill: #fff !important; /* Wymuszenie białego koloru ikon */
}

/* Dokładne kolory marek pobrane z Twojego obrazka image_0.png */
.share-fb { background-color: #3b5998; } /* Klasyczny ciemny niebieski FB */
.share-tw { background-color: #1da1f2; } /* Jasny błękit Twittera z obrazka */
.share-in { background-color: #0077b5; } /* LinkedIn blue z obrazka */
.share-wa { background-color: #25d366; } /* WhatsApp green */











/* --- SIATKA (GRID) --- */
.video-row-grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 30px;}
@media (min-width: 768px) {
    .video-row-grid {grid-template-columns: repeat(2, 1fr);}
}

@media (min-width: 1024px) {
    .video-row-grid {grid-template-columns: repeat(4, 1fr);}
    .support-slider-slide {width: calc(100cqi / 6);}
    }




@media (max-width: 768px) {
    .container {max-width: 100%}
    h2 {font-size: 42px; line-height: 1.2}
    .full-container {padding: 0 30px;}
    .hero .box {padding: 30px}
    .hero-title {font-size: 42px}
    h1.entry-title, h1.page-title {font-size: 42px}
    .home .site-header li a {color: #000}

    section.news .blog-grid, .blog .blog-grid, .placowki-list .blog-grid, .specialists-list {grid-template-columns: repeat(1, 1fr);}
    .single-specjalisci article .container-row {flex-wrap: wrap}

    body .wp-block-spectra-tabs-child-tab-wrapper:where([data-spectra-id='spectra-ms285x68-1hgsm9']) {flex-wrap: wrap !important}

}