/*
Theme Name: Sarzyna Magazyn
Theme URI: https://sarzyna.info/
Author: PMcode sp. z o.o.
Description: Lekki motyw blokowy dla Sarzyńskiego Serwisu Informacyjnego – układ lokalnego magazynu, paleta z herbu, bez zależności od page builderów.
Version: 0.7.2
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: sarzyna-magazyn
*/

/* Drobne poprawki, których nie da się wyrazić w theme.json. */

/* Pigułki kategorii: blok post-terms dostaje styl "pill". */
.is-style-pill a {
	display: inline-block;
	background: var(--wp--preset--color--yellow);
	color: var(--wp--preset--color--ink);
	padding: 0.2em 0.7em;
	border-radius: 999px;
	font-weight: 700;
	text-decoration: none;
	margin: 0 0.25em 0.25em 0;
}
.is-style-pill .wp-block-post-terms__separator { display: none; }

/* Etykiety działów nad tytułem: małe wersaliki w kolorze marki. */
.is-style-kicker a {
	color: var(--wp--preset--color--blue);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 700;
}

/* Karty i obrazki: zaokrąglenia jak w makiecie. */
.wp-block-post-featured-image img { border-radius: 14px; }
.sm-hero .wp-block-post-featured-image img { border-radius: 18px; }

/* Linki w kartach bez podkreślenia, podkreślenie dopiero na hover (czytelność + dostępność). */
.wp-block-post-title a { text-decoration: none; }
.wp-block-post-title a:hover,
.wp-block-post-title a:focus-visible { text-decoration: underline; text-underline-offset: 0.15em; }

/* Widoczny fokus z klawiatury – nie usuwamy outline, tylko go wzmacniamy. */
:where(a, button, input):focus-visible {
	outline: 3px solid var(--wp--preset--color--yellow);
	outline-offset: 2px;
}

/* Pasek nawigacji: biały tekst na niebieskim, podmenu czytelne. */
.sm-navbar .wp-block-navigation__submenu-container {
	color: var(--wp--preset--color--ink);
	border-radius: 10px;
	border: 1px solid var(--wp--preset--color--line);
}

/* --- Bloki strony głównej: pogoda, polecane witryny, losowy wpis --- */
/* Karta ma wysokość swojej treści. (Wcześniej height:100% rozciągało każdą kartę
   na całą kolumnę – pogoda robiła się tasiemcem, a "Polecane" wychodziły poza kolumnę.) */
.sm-karta { height: auto; }

.sm-polecane { list-style: none; margin: 0; padding: 0; columns: 2 12rem; column-gap: 1.5rem; font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--s); }
.sm-polecane li { break-inside: avoid; padding: 0.35rem 0; border-bottom: 1px solid var(--wp--preset--color--line); }
.sm-polecane a { color: var(--wp--preset--color--ink); text-decoration: none; }
.sm-polecane a:hover, .sm-polecane a:focus-visible { color: var(--wp--preset--color--blue); text-decoration: underline; }

.sm-losowy { display: flex; flex-direction: column; gap: 0.5rem; color: var(--wp--preset--color--ink); text-decoration: none; }
.sm-losowy img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; }
.sm-losowy__data { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--muted); }
.sm-losowy__tytul { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: var(--wp--preset--font-size--m); line-height: 1.25; }
.sm-losowy:hover .sm-losowy__tytul, .sm-losowy:focus-visible .sm-losowy__tytul { text-decoration: underline; }

/* Stopka: lista linków bez kropek, z odstępami. */
.sm-stopka-linki { list-style: none; padding: 0; margin: 0; }
.sm-stopka-linki li { padding: 0.35rem 0; }

/* Wyszukiwarka jako lupa na końcu niebieskiego paska. */
.sm-navbar .sm-szukaj .wp-block-search__button {
	background: transparent;
	color: var(--wp--preset--color--white);
	border: 0;
	padding: 0.5rem;
	min-width: 44px;
	min-height: 44px;
}
.sm-navbar .sm-szukaj .wp-block-search__button svg { fill: currentColor; }
.sm-navbar .sm-szukaj .wp-block-search__input { border-radius: 10px; }

/* Widżet twojapogoda.pl: niech wypełnia kartę. */
.sm-pogoda #tp-widget-default { max-width: 100%; }

/* Widżet twojapogoda ma sztywny iframe 300 px.
   1) Poniżej 1024 px czołówka i boczna kolumna (pogoda + polecane) idą jedna pod drugą,
      żeby pogoda dostała pełną szerokość zamiast ~190 px.
   2) Bezpiecznik: karta pogody nigdy nie wypycha strony w bok. */
@media (max-width: 1024px) {
	.wp-block-columns:has(> .sm-hero) { flex-wrap: wrap !important; }
	.wp-block-columns:has(> .sm-hero) > .wp-block-column { flex-basis: 100% !important; }
}
.sm-pogoda { overflow-x: auto; display: flex; justify-content: center; }
.sm-pogoda iframe { max-width: 100%; }

/* Karta pogody na niebiesko (kolor paska menu); linki widżetu jasne. */
.sm-karta--pogoda a { color: var(--wp--preset--color--white); }
.sm-karta--pogoda #tp-widget-default { border-radius: 10px; overflow: hidden; }

/* Baner sponsora w nagłówku (po prawej od logo). */
.sm-sponsor { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; max-width: 100%; }
.sm-sponsor__etykieta { font-family: var(--wp--preset--font-family--display); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.sm-sponsor img { display: block; max-width: min(728px, 100%); max-height: 110px; width: auto; height: auto; border-radius: 8px; }
@media (max-width: 781px) { .sm-sponsor { align-items: center; width: 100%; } }

/* --- Nagłówek: logo i baner w JEDNEJ linii od tabletu w górę ---
   Baner kurczy się proporcjonalnie (max 728 px), zamiast spadać pod logo. */
@media (min-width: 782px) {
	.sm-naglowek { flex-wrap: nowrap !important; }
	.sm-naglowek > .wp-block-group:first-child { flex: 0 0 auto; }
	.sm-naglowek .sm-sponsor { flex: 0 1 728px; min-width: 0; }
	.sm-naglowek .sm-sponsor a, .sm-naglowek .sm-sponsor img { width: 100%; max-width: 728px; }
}

/* --- Pogoda o 1/3 mniejsza ---
   Widżet twojapogoda ma sztywny iframe 300 px; zoom skaluje go razem z treścią
   (obsługiwany przez Chrome, Edge, Safari i Firefox 126+). */
.sm-karta--pogoda #tp-widget-default { zoom: 0.67; }
.sm-karta--pogoda { padding: 1.1rem !important; }

/* --- Strona „Redakcja Serwisu” (klasy w treści strony) --- */
.sm-redakcja { display: flex; flex-direction: column; gap: 2.5rem; font-family: var(--wp--preset--font-family--display); max-width: 860px; margin: 0 auto; text-align: center; }
.sm-redakcja h2 { font-size: var(--wp--preset--font-size--l); margin: 0 0 1rem; }
.sm-redakcja__zespol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.sm-osoba { background: var(--wp--preset--color--surface); border-radius: 16px; padding: 1.25rem 1.5rem; border-top: 4px solid var(--wp--preset--color--blue); }
.sm-osoba h3 { margin: 0 0 0.25rem; font-size: var(--wp--preset--font-size--l); }
.sm-osoba__rola { margin: 0 0 0.75rem; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--s); }
.sm-osoba__kontakt { margin: 0; font-size: var(--wp--preset--font-size--s); line-height: 1.8; }
.sm-redakcja__pamiec { border-top: 4px solid var(--wp--preset--color--yellow); padding: 1rem 0 0; max-width: 560px; margin: 0 auto; }
.sm-redakcja__pamiec p { margin: 0.25rem 0; }
.sm-redakcja__dolne { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.sm-redakcja__dolne > div { border: 1px solid var(--wp--preset--color--line); border-radius: 16px; padding: 1.25rem 1.5rem; }
.sm-redakcja__dolne ul { margin: 0; padding: 0; list-style: none; line-height: 1.8; }
.sm-redakcja__dolne p { margin: 0; line-height: 1.7; }

/* Telefon: redakcja w jednej kolumnie. */
@media (max-width: 600px) {
	.sm-redakcja__zespol, .sm-redakcja__dolne { grid-template-columns: 1fr; }
}

/* --- Zwykłe strony (polityka prywatności, redakcja, apteki…): mniejsza typografia ---
   Treść ~15 px jak na starej sarzyna.info, nagłówki o stopień niżej niż we wpisach. */
.sm-strona .wp-block-post-content { font-size: 0.9375rem; line-height: 1.65; }
.sm-strona .wp-block-post-content h2 { font-size: 1.25rem; }
.sm-strona .wp-block-post-content h3 { font-size: 1.0625rem; }
.sm-strona .wp-block-post-content li { margin-bottom: 0.35rem; }

/* --- Boczna kolumna strony głównej: stałe 340 px ---
   Najdłuższa nazwa w „Polecanych” (Centrum Kultury i Biblioteka w Nowej Sarzynie)
   ma 287 px przy 14 px Lato + 2×24 px marginesu karty = ~337 px. Reszta szerokości
   idzie na czołówkę. Poniżej 1024 px kolumny i tak układają się jedna pod drugą. */
@media (min-width: 1025px) {
	.wp-block-columns:has(> .sm-hero) > .sm-hero { flex: 1 1 auto !important; min-width: 0; }
	.wp-block-columns:has(> .sm-hero) > .wp-block-column:not(.sm-hero) { flex: 0 0 340px !important; }
}
/* Polecane w bocznej kolumnie: jedna kolumna, każda nazwa w jednej linii
   (gdyby kiedyś trafiła dłuższa – zostanie ucięta wielokropkiem, a nie złamana). */
.sm-karta .sm-polecane { columns: 1; }
.sm-polecane a { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Menu odrobinę większe: 16 px zamiast 14 px. */
.sm-navbar .wp-block-navigation { font-size: 1rem; }

/* --- Galerie ze starych wpisów ([gallery]) i blok Galeria: równa siatka --- */
.wp-block-post-content .gallery {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.75rem;
	margin: 1.5rem 0;
}
.wp-block-post-content .gallery-columns-1 { grid-template-columns: 1fr; }
.wp-block-post-content .gallery-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 600px) {
	.wp-block-post-content .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.wp-block-post-content .gallery br { display: none; } /* stary markup wstawia <br style="clear:both"> */
.wp-block-post-content .gallery .gallery-item { margin: 0; width: auto !important; max-width: none; }
.wp-block-post-content .gallery .gallery-icon a { display: block; }
.wp-block-post-content .gallery img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 8px;
	border: 0 !important;
}
.wp-block-post-content .gallery .gallery-caption { font-family: var(--wp--preset--font-family--display); font-size: 0.8125rem; color: var(--wp--preset--color--muted); padding-top: 0.35rem; }
.wp-block-post-content a:has(> img) { cursor: zoom-in; }

/* --- Podgląd zdjęć (assets/js/galeria.js) --- */
.sm-lb-blokada { overflow: hidden; }
.sm-lb {
	position: fixed; inset: 0; z-index: 100000;
	display: none; align-items: center; justify-content: center;
	background: rgba(8, 12, 20, 0.92);
}
.sm-lb--otwarte { display: flex; }
.sm-lb__kadr { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.sm-lb__kadr img {
	display: block;
	max-width: 92vw;
	max-height: 84vh;      /* zawsze mieści się w ekranie, niezależnie od rozmiaru pliku */
	width: auto; height: auto;
	object-fit: contain;
	border-radius: 6px;
	background: #1b2433;
}
.sm-lb__kadr figcaption { color: #E6EAF0; font-family: var(--wp--preset--font-family--display); font-size: 0.9375rem; max-width: 80ch; text-align: center; }
.sm-lb__kadr figcaption:empty { display: none; }
.sm-lb button {
	position: absolute; border: 0; cursor: pointer;
	background: rgba(255, 255, 255, 0.12); color: #fff;
	width: 48px; height: 48px; border-radius: 50%;
	font-size: 2rem; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.sm-lb button:hover, .sm-lb button:focus-visible { background: rgba(255, 255, 255, 0.25); }
.sm-lb__zamknij { top: 16px; right: 16px; }
.sm-lb__poprz { left: 16px; top: 50%; transform: translateY(-50%); }
.sm-lb__nast { right: 16px; top: 50%; transform: translateY(-50%); }
.sm-lb--jedno .sm-lb__nav { display: none; }
.sm-lb__licznik { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); color: #C9D3E0; font-family: var(--wp--preset--font-family--display); font-size: 0.875rem; }
@media (max-width: 600px) {
	.sm-lb__nav { top: auto !important; bottom: 12px; transform: none !important; }
	.sm-lb__kadr img { max-width: 96vw; max-height: 78vh; }
}

/* --- Ostrzeżenia IMGW (pasek nad czołówką, tylko gdy aktywne) --- */
.sm-ostrzezenia { display: flex; flex-direction: column; gap: 0.5rem; }
.sm-ostrzezenie { margin: 0; padding: 0.85rem 1.1rem; border-radius: 10px; font-family: var(--wp--preset--font-family--display); font-size: 0.9375rem; line-height: 1.45; color: var(--wp--preset--color--ink); }
.sm-ostrzezenie--1 { background: #FFF3C4; border-left: 6px solid #F5B800; }
.sm-ostrzezenie--2 { background: #FFE0C2; border-left: 6px solid #E8730C; }
.sm-ostrzezenie--3 { background: #FFD6D6; border-left: 6px solid #C81E1E; }
.sm-ostrzezenie__zrodlo { color: var(--wp--preset--color--muted); font-size: 0.8125rem; }

/* --- Jakość powietrza (Polski Indeks Jakości Powietrza: 6 kolorów jak na mapie GIOŚ) --- */
.sm-powietrze { font-family: var(--wp--preset--font-family--display); }
.sm-powietrze__ocena { margin: 0 0 0.6rem; font-size: 1.375rem; font-weight: 700; display: flex; align-items: center; gap: 0.6rem; }
.sm-powietrze__kropka { width: 18px; height: 18px; border-radius: 50%; background: #999; flex: 0 0 auto; }
.sm-powietrze--0 .sm-powietrze__kropka { background: #57B108; }
.sm-powietrze--1 .sm-powietrze__kropka { background: #B0DD10; }
.sm-powietrze--2 .sm-powietrze__kropka { background: #FFD911; }
.sm-powietrze--3 .sm-powietrze__kropka { background: #E58100; }
.sm-powietrze--4 .sm-powietrze__kropka { background: #E50000; }
.sm-powietrze--5 .sm-powietrze__kropka { background: #990000; }
.sm-powietrze__lista { list-style: none; margin: 0 0 0.6rem; padding: 0; font-size: 0.875rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.2rem 1rem; }
.sm-powietrze__lista span { color: var(--wp--preset--color--muted); }
.sm-powietrze__zrodlo, .sm-powietrze__brak { margin: 0; font-size: 0.75rem; color: var(--wp--preset--color--muted); }

/* --- Wywóz odpadów --- */
/* --- Wywóz odpadów --------------------------------------------------
 * Kolory rodzajów: brąz = zmieszane + bio (kolor brązowego pojemnika BIO),
 * żółty marki = segregacja + popiół. Dzień z oboma wywozami: pół na pół. */
.sm-odpady { --odp-z: #7A5530; --odp-s: var(--wp--preset--color--yellow); font-family: var(--wp--preset--font-family--display); font-size: 0.9375rem; }
.sm-odpady__etykieta { display: block; font-size: 0.8125rem; color: var(--wp--preset--color--muted); margin-bottom: 0.3rem; }
.sm-odpady select, .sm-odpady input[type="search"] { width: 100%; min-height: 44px; padding: 0 0.75rem; border: 1px solid #C9D3E0; border-radius: 10px; font: inherit; background: #fff; box-sizing: border-box; }
.sm-odpady__lista { list-style: none; margin: 0.8rem 0; padding: 0; }
.sm-odpady__lista li { display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 0.5rem; padding: 0.55rem 0; border-bottom: 1px solid var(--wp--preset--color--line); }
.sm-odpady__lista time { font-weight: 700; }
.sm-odpady__lista li.is-pierwszy time { color: var(--wp--preset--color--blue); }
.sm-odpady__lista .sm-odpady__chipy { grid-column: 1 / -1; }
.sm-odpady__kiedy { font-size: 0.8125rem; color: var(--wp--preset--color--muted); white-space: nowrap; }
.sm-odpady__kiedy.is-pilne { color: #B42318; font-weight: 700; }
.sm-odpady__chipy { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0; }
.sm-odpady__chip { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; line-height: 1.5; }
.sm-odpady__chip--z { background: var(--odp-z); color: #fff; }
.sm-odpady__chip--s { background: var(--odp-s); color: var(--wp--preset--color--ink); }
.sm-odpady__link, .sm-odpady__brak, .sm-odpady__male { margin: 0; font-size: 0.875rem; }
.sm-odpady__male { color: var(--wp--preset--color--muted); font-size: 0.8125rem; }

/* Pełna strona harmonogramu */
.sm-odpady--pelny { display: grid; gap: 1rem; max-width: 860px; margin-inline: auto; }
.sm-odpady__trafienia { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.sm-odpady__trafienie { border: 1px solid var(--wp--preset--color--blue); background: #fff; color: var(--wp--preset--color--blue); border-radius: 999px; padding: 0.35rem 0.8rem; font: inherit; font-size: 0.875rem; cursor: pointer; min-height: 36px; }
.sm-odpady__trafienie:hover, .sm-odpady__trafienie:focus-visible { background: var(--wp--preset--color--blue); color: #fff; }
.sm-odpady__opis { margin: 0; font-size: 0.875rem; color: var(--wp--preset--color--muted); }
.sm-odpady__nastepny { background: var(--wp--preset--color--blue); color: #fff; border-radius: 14px; padding: 1.1rem 1.3rem; }
.sm-odpady__nastepny p { margin: 0; }
.sm-odpady__nastepny-etykieta { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.85; }
.sm-odpady__nastepny-data { font-size: 1.6rem; font-weight: 700; line-height: 1.2; margin: 0.15rem 0 !important; }
.sm-odpady__nastepny .sm-odpady__kiedy { color: #fff; font-size: 0.9375rem; margin-bottom: 0.5rem !important; }
.sm-odpady__nastepny .sm-odpady__kiedy.is-pilne { color: var(--wp--preset--color--yellow); }
.sm-odpady__akcje { margin: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.sm-odpady__ics { background: var(--wp--preset--color--yellow); color: var(--wp--preset--color--ink); border: 0; border-radius: 10px; padding: 0.7rem 1rem; font: inherit; font-weight: 700; cursor: pointer; min-height: 44px; }
.sm-odpady__ics:hover, .sm-odpady__ics:focus-visible { filter: brightness(0.95); outline: 2px solid var(--wp--preset--color--ink); outline-offset: 2px; }
.sm-odpady__legenda { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-size: 0.8125rem; }
.sm-odpady__legenda li { display: flex; align-items: center; gap: 0.4rem; }
.sm-odpady__znak { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.sm-odpady__znak--z, .sm-odpady__dzien--z { background: var(--odp-z); color: #fff; }
.sm-odpady__znak--s, .sm-odpady__dzien--s { background: var(--odp-s); color: var(--wp--preset--color--ink); }
.sm-odpady__znak--zs, .sm-odpady__dzien--zs { background: linear-gradient(135deg, var(--odp-z) 50%, var(--odp-s) 50%); color: #fff; }
.sm-odpady__rok { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.sm-odpady__mies { border: 1px solid var(--wp--preset--color--line); border-radius: 12px; padding: 0.7rem; background: #fff; }
.sm-odpady__mies.is-minione { opacity: 0.55; }
.sm-odpady__mies h3 { margin: 0 0 0.4rem; font-size: 0.9375rem; font-weight: 700; }
.sm-odpady__siatka { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; font-size: 0.8125rem; }
.sm-odpady__dn { font-size: 0.6875rem; color: var(--wp--preset--color--muted); padding-bottom: 2px; }
.sm-odpady__dzien { line-height: 1.9; border-radius: 6px; }
.sm-odpady__dzien[class*="--"] { font-weight: 700; }
.sm-odpady__dzien.is-minione { opacity: 0.45; }
.sm-odpady__dzien.is-dzis { outline: 2px solid var(--wp--preset--color--blue); outline-offset: -1px; }
.sm-odpady__uwaga { margin: 0; padding: 0.8rem 1rem; border-left: 4px solid #B42318; background: #FDF2F1; border-radius: 0 10px 10px 0; font-size: 0.9375rem; }
@media print {
	.sm-odpady__szukaj, .sm-odpady__akcje, .sm-odpady__male { display: none !important; }
	.sm-odpady__mies.is-minione, .sm-odpady__dzien.is-minione { opacity: 1; }
	.sm-odpady__dzien[class*="--"], .sm-odpady__znak, .sm-odpady__nastepny { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* „Czytaj całość” pod zajawką czołówki – wyraźny przycisk, bo sama zajawka
 * nie mówi czytelnikowi, że to dopiero początek tekstu. */
.wp-block-read-more.sm-czytaj { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.25rem; padding: 0.6rem 1.1rem; min-height: 44px; box-sizing: border-box; background: var(--wp--preset--color--blue); color: #fff; border-radius: 10px; font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 0.9375rem; text-decoration: none; }
.wp-block-read-more.sm-czytaj::after { content: "→"; transition: transform .15s ease; }
.wp-block-read-more.sm-czytaj:hover, .wp-block-read-more.sm-czytaj:focus-visible { background: var(--wp--preset--color--ink); color: #fff; }
.wp-block-read-more.sm-czytaj:hover::after { transform: translateX(3px); }