/* obligacyjnyinwestor.pl - wspolny arkusz UI */
/* Design tokens: Projekt A - Strona/styl-wizualny.md. Edytowany lokalnie w
   Projekt A - Strona/mu-plugins/, wgrywany przez FTP do wp-content/mu-plugins/. */

/*
 * Spis tresci (linie przyblizone, sekcje ulozone w kolejnosci chronologicznej
 * powstania - kazda logicznie spojna wewnetrznie, zob. PLAN-CZYSZCZENIA-KODU.md):
 *   1. H1 - ujednolicenie rozmiaru (linia ~16)
 *   2. Sidebar Astra - wylaczony wszedzie (linia ~38)
 *   3. Homepage - panel "Na biezaco" + breakpoint (linia ~52)
 *   4. Logo spolki na archiwum kategorii (linia ~140)
 *   5. Slownik - uklad 2-kolumnowy + quicknav (linia ~182)
 *   6. Shortcode [oi_najnowsze_artykuly] (linia ~237)
 *   7. Nawigacja serii edukacyjnych (linia ~312)
 *   8. Widget feedbacku czytelnikow (linia ~354)
 */

/*
 * H1 standard - ujednolicenie rozmiaru tytulu strony/artykulu/archiwum.
 * Bez tego 3 rozne wzorce: .entry-title (posty/strony, 30px), .ast-archive-title (archiwa
 * kategorii, 40px), plain h1.wp-block-heading (np. slownik, bez jawnego rozmiaru).
 * Nie dotyczy swiadomego wyjatku "hero" (homepage/Poczatek, custom blok Spectra 42px).
 */
.entry-title,
.ast-archive-title,
.page-title,
.entry-content > h1.wp-block-heading {
	font-size: 36px !important;
}

@media (max-width: 921px) {
	.entry-title,
	.ast-archive-title,
	.page-title,
	.entry-content > h1.wp-block-heading {
		font-size: 28px !important;
	}
}

@media (max-width: 544px) {
	.entry-title,
	.ast-archive-title,
	.page-title,
	.entry-content > h1.wp-block-heading {
		font-size: 22px !important;
	}
}

/*
 * Sidebar wylaczony wszedzie (design token: styl-wizualny.md).
 * To override wizualny (CSS), nie prawdziwe wylaczenie zapytania widgetow w WP -
 * nie znaleziono REST route do ustawienia Astry "Archive Layout" (theme_mod, brak w API).
 */
body.ast-right-sidebar #secondary,
body.ast-left-sidebar #secondary {
	display: none !important;
}

body.ast-right-sidebar #primary,
body.ast-left-sidebar #primary {
	width: 100% !important;
	border-right: 0 !important;
	border-left: 0 !important;
	padding-right: 0 !important;
	padding-left: 0 !important;
}

/*
 * Homepage - panel boczny "Na biezaco" (news-ticker) obok kolumny z pelnymi
 * artykulami (2026-07-10, BACKLOG #14/#20/#21). ".oi-home-split" = wiersz kolumn
 * (core/columns), ".oi-sidebar-panel" = prawa, wezsza kolumna stylizowana jako
 * odrebny panel (tlo, zaokraglenie, sticky) - NIE to samo co sidebar Astry wyzej.
 */
.oi-sidebar-panel {
	background: #EDF6EE;
	border-radius: 12px;
	padding: 24px;
	align-self: flex-start;
	position: sticky;
	top: 100px;
}

.oi-sidebar-panel h3 {
	margin-top: 0;
	margin-bottom: 1em;
	color: #1B9C85;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.oi-sidebar-panel .wp-block-latest-posts__list {
	max-height: 420px;
	overflow-y: auto;
	margin: 0;
	padding-right: 8px;
}

.oi-sidebar-panel .wp-block-latest-posts__list li {
	margin-bottom: 14px;
	padding-bottom: 14px;
	border-bottom: 1px solid #D4F3D7;
}

.oi-sidebar-panel .wp-block-latest-posts__list li:last-child {
	border-bottom: 0;
	margin-bottom: 0;
	padding-bottom: 0;
}

.oi-sidebar-panel .wp-block-latest-posts__post-title {
	display: block;
	font-weight: 600;
	font-size: 0.92rem;
	color: #0F172A;
	text-decoration: none;
	line-height: 1.35;
}

.oi-sidebar-panel .wp-block-latest-posts__post-title:hover {
	color: #1B9C85;
}

.oi-sidebar-panel .wp-block-latest-posts__post-date {
	display: block;
	font-size: 0.75rem;
	color: #454F5E;
	margin-top: 4px;
}

.oi-ad-placeholder {
	margin-top: 20px;
	padding: 28px 12px;
	text-align: center;
	border: 1px dashed #9CA3AF;
	border-radius: 8px;
	color: #6B7280;
	font-size: 0.8rem;
}

/*
 * Breakpoint 781px, nie 767px - WordPress (core wp-block-columns) uklada
 * kolumny w wiersz (nowrap) od 782px wzwyz; nizej sa domyslnie stacked (wrap).
 * Wylacznik sticky musi sie zgadzac z tym samym punktem, inaczej w waskim
 * zakresie 768-781px panel byl sticky I pelnej szerokosci jednoczesnie
 * (znalezione w audycie mobile 2026-07-10, BACKLOG #5).
 */
@media (max-width: 781px) {
	.oi-sidebar-panel {
		position: static;
		margin-top: 24px;
	}
}

/*
 * Logo spolki na gorze strony kategorii (nad opisem), niezalezne od
 * ktoregokolwiek posta - logo nie musi byc featured_media najnowszego posta,
 * zyje tutaj, na poziomie kategorii. Dopisz kolejna spolke wg tego samego
 * wzoru, gdy Projekt A doda dla niej kategorie (patrz CLAUDE.md, sekcja
 * "Wyglad strony kategorii spolki").
 */
/*
 * Wysokosc stala (90px), szerokosc automatyczna: logo pionowe/kwadratowe
 * (KRUK, BEST, 7R) i logo szerokie/poziome (PragmaGO, Grenova, Ghelamco,
 * Vehis Finanse) maja ten sam "ciezar" wizualny zamiast kwadratowego boksu
 * 150x150, w ktorym poziome logo wychodzilo maleńkie i cienkie, a pionowe
 * wypelnialo cala wysokosc (zgloszenie Wojciecha 2026-07-14: "nieladnie to
 * wyglada").
 */
.category-16 .ast-archive-title::after,
.category-14 .ast-archive-title::after,
.category-17 .ast-archive-title::after,
.category-15 .ast-archive-title::after,
.category-19 .ast-archive-title::after,
.category-29 .ast-archive-title::after,
.category-30 .ast-archive-title::after,
.category-31 .ast-archive-title::after,
.category-32 .ast-archive-title::after {
	content: "";
	display: block;
	margin: 0 auto 1.5em;
	width: 100%;
	max-width: 260px;
	height: 90px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.category-16 .ast-archive-title::after {
	background-image: url("https://www.obligacyjnyinwestor.pl/wp-content/uploads/2026/07/logo-kruk-small.png");
}

.category-14 .ast-archive-title::after {
	background-image: url("https://www.obligacyjnyinwestor.pl/wp-content/uploads/2026/07/logo-best-small.png");
}

.category-17 .ast-archive-title::after {
	background-image: url("https://www.obligacyjnyinwestor.pl/wp-content/uploads/2026/07/logo-pragmago.png");
}

.category-15 .ast-archive-title::after {
	background-image: url("https://www.obligacyjnyinwestor.pl/wp-content/uploads/2026/07/logo-grenova.webp");
}

.category-19 .ast-archive-title::after {
	background-image: url("https://www.obligacyjnyinwestor.pl/wp-content/uploads/2026/07/logo-cavatina-holding.png");
}

.category-29 .ast-archive-title::after {
	background-image: url("https://www.obligacyjnyinwestor.pl/wp-content/uploads/2026/07/logo-dekpol.png");
}

.category-30 .ast-archive-title::after {
	background-image: url("https://www.obligacyjnyinwestor.pl/wp-content/uploads/2026/07/logo-ghelamco.png");
}

.category-31 .ast-archive-title::after {
	background-image: url("https://www.obligacyjnyinwestor.pl/wp-content/uploads/2026/07/logo-vehis-finanse.png");
}

.category-32 .ast-archive-title::after {
	background-image: url("https://www.obligacyjnyinwestor.pl/wp-content/uploads/2026/07/logo-7r.png");
}

/*
 * Slownik - uklad 2-kolumnowy na desktopie + szybka nawigacja do kategorii.
 * Naglowki kategorii (h2.glossary-category) rozciagaja sie na cala szerokosc
 * (grid-column:1/-1), hasla (details.glossary-entry) uklada sie automatycznie
 * do dwoch kolumn. Rozwiazuje "puste, szerokie miejsce" na desktopie.
 */
.glossary-quicknav {
	max-width: 900px;
	margin: 1em auto 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.glossary-quicknav a {
	display: inline-block;
	background: #EDF6EE;
	color: #1B9C85;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid #D4F3D7;
	transition: background 0.2s ease;
}

.glossary-quicknav a:hover {
	background: #D4F3D7;
}

@media (min-width: 768px) {
	/*
	 * !important konieczne - Spectra generuje wlasna regule
	 * "body .wp-block-spectra-container:where([data-spectra-id=...])" z wyzsza
	 * specyficznoscia (display:flex), ktora bez tego wygrywa nad zwykla klasa.
	 */
	.glossary-refresh {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		column-gap: 32px;
		row-gap: 0;
		align-items: start !important;
		flex-direction: unset !important;
		max-width: 1100px;
		margin-left: auto;
		margin-right: auto;
	}

	.glossary-refresh > h2.glossary-category {
		grid-column: 1 / -1;
	}
}

/*
 * Lista z shortcode [oi_najnowsze_artykuly] - patrz oi-shortcode-najnowsze.php.
 * Kafelek = miniaturka (featured_media, narazie logo spolki - do zmiany gdy
 * artykuly beda bardziej ogolne, zob. BACKLOG #22) + tekst w rzedzie.
 */
.oi-najnowsze-artykuly {
	list-style: none;
	padding: 0;
	margin: 0;
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
}

.oi-najnowsze-artykuly li {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 1.5em;
	padding-bottom: 1.5em;
	border-bottom: 1px solid #D4F3D7;
}

.oi-najnowsze-artykuly-thumb {
	flex-shrink: 0;
	display: block;
	width: 72px;
	height: 72px;
	border-radius: 8px;
	overflow: hidden;
	background: #EDF6EE;
}

.oi-najnowsze-artykuly-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 6px;
	box-sizing: border-box;
}

.oi-najnowsze-artykuly-body {
	flex: 1;
	min-width: 0;
}

.oi-najnowsze-artykuly li:last-child {
	border-bottom: 0;
	margin-bottom: 0;
	padding-bottom: 0;
}

.oi-najnowsze-artykuly a {
	font-weight: 700;
	color: #0F172A;
	text-decoration: none;
	font-size: 1.1rem;
}

.oi-najnowsze-artykuly a:hover {
	color: #1B9C85;
}

.oi-najnowsze-artykuly-date {
	display: block;
	font-size: 0.8rem;
	color: #454F5E;
	margin: 2px 0 6px;
}

.oi-najnowsze-artykuly p {
	color: #454F5E;
	margin: 0;
}

/*
 * Nawigacja serii edukacyjnych (2026-07-12) - pigulki pokazujace pozycje w
 * serii (wprowadzenie + artykuly 1..N), z wyrozniona aktualna strona. Ten sam
 * wizualny wzorzec co .glossary-quicknav (slownik), zeby nie wymyslac nowego
 * stylu. Rozwiazuje brak czytelnej hierarchii przy wejsciu bezposrednio na
 * artykul (np. z menu), nie tylko przez hub.
 */
.oi-seria-nav {
	max-width: 900px;
	margin: 0 auto 1.5em;
	padding: 14px 18px;
	background: #EDF6EE;
	border-radius: 12px;
}

.oi-seria-nav-label {
	margin: 0 0 10px;
	font-size: 0.9rem;
	color: #454F5E;
}

.oi-seria-nav-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.oi-seria-pill {
	display: inline-block;
	background: #FFFFFF;
	color: #1B9C85;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid #D4F3D7;
	transition: background 0.2s ease;
}

.oi-seria-pill:hover {
	background: #D4F3D7;
}

.oi-seria-pill-current {
	background: #1B9C85;
	color: #FFFFFF;
	border-color: #1B9C85;
}

/*
 * Widget feedbacku czytelnikow (BACKLOG #39, 2026-07-12) - patrz oi-feedback.php
 * (endpoint REST) i oi-feedback.js (obsluga klikniec).
 */
.oi-feedback-widget {
	max-width: 500px;
	margin: 32px auto;
	padding: 16px 20px;
	background: #EDF6EE;
	border-radius: 12px;
	text-align: center;
}

.oi-feedback-widget p {
	margin: 0 0 10px;
	font-size: 0.95rem;
	color: #454F5E;
}

.oi-feedback-btn {
	display: inline-block;
	background: #FFFFFF;
	border: 2px solid #1B9C85;
	color: #1B9C85;
	border-radius: 999px;
	padding: 8px 20px;
	margin: 0 6px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.oi-feedback-btn:hover {
	background: #1B9C85;
	color: #FFFFFF;
}

/*
 * Kalkulator odsetek (BACKLOG #17, wdrozony na zywo 2026-07-13) - steppery,
 * suwak oprocentowania, karta wyniku, legenda wykresow. <style> w tresci
 * strony jest usuwane przy renderowaniu, wiec te reguly musza zyc tutaj, nie
 * w samej stronie /kalkulator-odsetek/.
 */
.oi-field { margin-bottom: 12px; }
.oi-field label { display: block; margin-bottom: 4px; }

.oi-stepper-row { display: flex; gap: 10px; align-items: center; }
.oi-stepper-row input {
	flex: 1;
	min-width: 0;
	padding: 8px;
	border-radius: 6px;
	border: 1px solid #D4F3D7;
	text-align: center;
	font-size: 15px;
	-moz-appearance: textfield;
}
.oi-stepper-row input[type="number"]::-webkit-outer-spin-button,
.oi-stepper-row input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.oi-stepper-btn {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background: #FFFFFF;
	color: #1B9C85;
	cursor: pointer;
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
	transition: background 0.15s ease, color 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease;
}
.oi-stepper-btn:hover { background: #1B9C85; color: #FFFFFF; box-shadow: 0 2px 6px rgba(27, 156, 133, 0.35); }
.oi-stepper-btn:active { transform: scale(0.90); }

@media (max-width: 544px) {
	.oi-stepper-row { gap: 6px; }
	.oi-stepper-btn { width: 32px; height: 32px; font-size: 17px; }
	.oi-stepper-row input { font-size: 14px; padding: 6px 4px; }
}

.oi-slider {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	border-radius: 999px;
	background: #D4F3D7;
	outline: none;
	margin: 10px 0 4px;
}
.oi-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #1B9C85;
	box-shadow: 0 1px 4px rgba(15, 23, 42, 0.3);
	cursor: pointer;
	border: 3px solid #FFFFFF;
	transition: transform 0.1s ease;
}
.oi-slider::-webkit-slider-thumb:hover { transform: scale(1.1); }
.oi-slider::-moz-range-thumb {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #1B9C85;
	box-shadow: 0 1px 4px rgba(15, 23, 42, 0.3);
	cursor: pointer;
	border: 3px solid #FFFFFF;
}
.oi-slider::-moz-range-track { background: #D4F3D7; height: 6px; border-radius: 999px; }

.oi-submit-btn {
	background: #1B9C85;
	color: #FFFFFF;
	border: none;
	padding: 10px 24px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(27, 156, 133, 0.35);
	transition: background 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease;
}
.oi-submit-btn:hover { background: #178E79; box-shadow: 0 3px 10px rgba(27, 156, 133, 0.45); }
.oi-submit-btn:active { transform: scale(0.97); }

.oi-wynik-glowny {
	margin-top: 20px;
	padding: 16px 20px;
	background: #FFFFFF;
	border: 2px solid #1B9C85;
	border-radius: 12px;
	text-align: center;
}
.oi-wynik-glowny-label { font-size: 13px; color: #454F5E; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.oi-wynik-glowny-kwota { font-size: 32px; font-weight: 700; color: #1B9C85; line-height: 1.2; }
.oi-wynik-szczegoly { margin-top: 12px; font-size: 15px; color: #0F172A; }
.oi-wynik-szczegoly div { margin-bottom: 4px; }
.oi-wynik-info { margin-top: 12px; font-size: 12px; color: #9CA3AF; }
.oi-wynik-uwaga { margin-top: 8px; font-size: 13px; color: #B45309; }

.oi-wykres-legenda { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; font-size: 12px; color: #454F5E; }
.oi-wykres-legenda span { display: flex; align-items: center; gap: 6px; }
.oi-wykres-legenda i { display: inline-block; width: 16px; height: 3px; border-radius: 2px; }

/*
 * Ukrycie miniaturki (featured image) na stronach archiwum/kategorii (np.
 * /category/spolki/, /category/spolki/kruk/), zgloszenie Wojciecha
 * 2026-07-14: zdjecia z artykulow (stockowe, powtarzalne) niepotrzebnie
 * zajmuja miejsce na listingu, gdzie liczy sie tytul i opis, nie obrazek.
 * Klasa .ast-blog-featured-section wystepuje tylko w widoku archiwum
 * (potwierdzone), na pojedynczym artykule miniaturka uzywa innej klasy
 * (.post-thumb-img-content bez .ast-blog-featured-section), wiec ta regula
 * nie dotyka wygladu samych artykulow.
 */
.ast-blog-featured-section.post-thumb {
	display: none;
}

/*
 * Panel snapshotu spolki (oi-spolka-snapshot.php) na mobile - tabela 5-kolumnowa
 * ("Kluczowe dane finansowe") byla nieczytelna/stloczona na waskich ekranach,
 * zgloszenie Wojciecha 2026-07-14. Panel jest budowany przez echo w PHP z
 * inline style="", ktory ma wyzszy priorytet niz zwykla klasa CSS, stad
 * !important - ten sam wzorzec co reszta breakpointow w tym pliku (patrz H1,
 * kalkulator odsetek). Zewnetrzny div panelu ma juz klase .oi-spolka-snapshot,
 * wiec nie trzeba nic zmieniac w PHP, tylko dodac te reguly tutaj.
 */
@media (max-width: 544px) {
	.oi-spolka-snapshot {
		padding: 12px !important;
		gap: 16px !important;
	}
	.oi-spolka-snapshot table {
		font-size: 10.5px !important;
	}
	.oi-spolka-snapshot th,
	.oi-spolka-snapshot td {
		padding: 4px 2px !important;
	}
}