/*
Theme Name: Wschodzące Słońce
Theme URI: https://wschodzaceslonce.org.pl/
Author: Fundacja dla Dziecka i Rodziny "Wschodzące Słońce"
Author URI: https://wschodzaceslonce.org.pl/
Description: Motyw blokowy (FSE) Fundacji dla Dziecka i Rodziny "Wschodzące Słońce". Paleta i typografia oparte na logotypie fundacji: ciepłe zielenie, wschodzące słońce i kremowe tła. Dostępny (WCAG), responsywny, z gotowymi wzorcami sekcji: aktualności, eksperci, kampanie, partnerzy.
Requires at least: 7.0
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wschodzace-slonce
Tags: block-theme, full-site-editing, accessibility-ready, blog, one-column, custom-colors, custom-logo, translation-ready
*/

/* ---------- Drobne style uzupełniające theme.json ---------- */

/* Płynne zaokrąglenia i cienie kart aktualności */
.ws-card {
	border-radius: 16px;
	overflow: hidden;
	background: var(--wp--preset--color--base);
	box-shadow: 0 1px 2px rgba(18, 53, 31, 0.06), 0 8px 24px rgba(18, 53, 31, 0.07);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ws-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 2px 4px rgba(18, 53, 31, 0.08), 0 14px 32px rgba(18, 53, 31, 0.12);
}
.ws-card .wp-block-post-featured-image img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* Pastylka / etykieta (np. "Aktualności", "KRS") */
.ws-pill {
	display: inline-block;
	padding: 0.35em 1em;
	border-radius: 999px;
	background: var(--wp--preset--color--mint);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Łuk "wschodzącego słońca" pod sekcją hero */
.ws-hero {
	position: relative;
	overflow: hidden;
}
.ws-hero::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -12vw;
	transform: translateX(-50%);
	width: 140vw;
	height: 16vw;
	min-height: 90px;
	border-radius: 50% 50% 0 0;
	background: var(--wp--preset--color--base);
	pointer-events: none;
}

/* Zdjęcia ekspertów — okrągłe, jednakowy rozmiar, wyśrodkowane */
.ws-expert {
	display: flex;
	justify-content: center;
	margin-left: auto;
	margin-right: auto;
}
.ws-expert img {
	width: min(200px, 60vw);
	height: auto;
	border-radius: 50%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: top center;
	border: 4px solid var(--wp--preset--color--cream);
	box-shadow: 0 6px 18px rgba(18, 53, 31, 0.12);
}

/* Widoczny fokus — dostępność */
a:focus-visible,
button:focus-visible,
.wp-block-navigation a:focus-visible {
	outline: 3px solid var(--wp--preset--color--sun);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Link "przejdź do treści" */
.skip-link.screen-reader-text:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 100000;
	padding: 0.75em 1.25em;
	background: var(--wp--preset--color--primary);
	color: #fff;
	clip: auto;
	clip-path: none;
	width: auto;
	height: auto;
}

/* Partnerzy — loga wyrównane, jednakowa wysokość */
.ws-partners .wp-block-column {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
}
.ws-partners .wp-block-image {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 110px;
	margin: 0 auto;
}
.ws-partners .wp-block-image img {
	max-height: 110px;
	width: auto;
	max-width: 220px;
	object-fit: contain;
}

/* Kafelki wpisów — jednakowa wysokość w siatce */
.wp-block-post-template.is-layout-grid > .wp-block-post {
	display: flex;
}
.wp-block-post-template.is-layout-grid .ws-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
}
.wp-block-post-template.is-layout-grid .ws-card > .wp-block-group {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}
.wp-block-post-template.is-layout-grid .ws-card .wp-block-post-excerpt {
	margin-top: auto;
}

/* ---------- Trendy 2026 ---------- */

/* Sticky header z efektem szkła (glassmorphism) */
.ws-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: color-mix(in srgb, var(--wp--preset--color--base) 78%, transparent);
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
	backdrop-filter: blur(14px) saturate(1.4);
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
}

/* Bento grid — pierwszy wpis aktualności powiększony */
@media (min-width: 782px) {
	.wp-block-post-template.is-layout-grid > .wp-block-post:first-child {
		grid-column: span 2;
	}
	.wp-block-post-template.is-layout-grid > .wp-block-post:first-child .wp-block-post-title {
		font-size: var(--wp--preset--font-size--x-large);
	}
}

/* Mikrointerakcje przycisków */
.wp-element-button,
.wp-block-button__link {
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.wp-element-button:hover,
.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(10, 82, 49, 0.25);
}
.wp-element-button:active,
.wp-block-button__link:active {
	transform: translateY(0);
}

/* Animacje sterowane przewijaniem (scroll-driven) — progressive enhancement */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.ws-card,
		.ws-expert {
			animation: ws-reveal linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 60%;
		}
	}
}
@keyframes ws-reveal {
	from {
		opacity: 0;
		transform: translateY(24px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Tryb ciemny — automatycznie wg preferencji systemu */
@media (prefers-color-scheme: dark) {
	body {
		--wp--preset--color--base: #101B13;
		--wp--preset--color--cream: #182619;
		--wp--preset--color--contrast: #F2EFE6;
		--wp--preset--color--muted: #9FB0A5;
		--wp--preset--gradient--sunrise: linear-gradient(160deg, #16241B 0%, #1D2A1E 55%, #6B4A12 140%);
	}
	body .ws-card {
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
		border: 1px solid rgba(242, 239, 230, 0.08);
	}
	body a:not(.wp-element-button) {
		color: var(--wp--preset--color--mint);
	}
	body .ws-pill {
		background: var(--wp--preset--color--primary);
		color: #ffffff;
	}
	body .ws-expert img {
		border-color: var(--wp--preset--color--cream);
	}
}

/* Poszanowanie preferencji ograniczonego ruchu */
@media (prefers-reduced-motion: reduce) {
	.ws-card,
	.ws-card:hover,
	.wp-element-button,
	.wp-block-button__link {
		transition: none;
		transform: none;
		animation: none;
	}
}