/*
Theme Name:   Safestar Docs Child
Theme URI:    https://docs.safestar.pl
Description:  Motyw potomny Kadence dla dokumentacji Safestar (docs.safestar.pl): strona główna z kategoriami, lista artykułów w kategorii, artykuł z nawigacją i spisem treści, wyniki wyszukiwania. Nagłówek i stopka z kreatora Kadence.
Author:       Safestar
Template:     kadence
Version:      2.3.0
Requires at least: 6.3
Requires PHP: 7.4
Text Domain:  safestar-docs-child
*/

/* =========================================================
   Spis sekcji
   1. Zmienne
   2. Układ ogólny
   3. Wyszukiwarka
   4. Strona główna (kafle kategorii, karty filmów, układ awaryjny)
   5. Kategoria i listy artykułów
   6. Nawigacja boczna
   7. Artykuł: treść, „Uwaga”, spis treści, poprzedni/następny
   8. Wersja na tablet i telefon
   Nagłówek i stopka: kreator Kadence (Wygląd → Dostosuj → Nagłówek / Stopka).
   ========================================================= */

/* 1. Zmienne ------------------------------------------------ */
:root {
	--ss-navy: #0E1633;
	--ss-violet: #5B3FF0;
	--ss-violet-dark: #3B2AA8;
	--ss-lead: #3E4566;
	--ss-text: #4A5070;
	--ss-line: #E1E4EE;
	--ss-gray: #F3F4F8;
	--ss-lavender: #ECEAFE;
	--ss-white: #FFFFFF;
	--ss-font: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--ss-container: none; /* pełna szerokość okna; wpisz np. 1440px, żeby ograniczyć */
	--ss-gutter: clamp(20px, 3vw, 40px);
	--ss-home-width: 1200px; /* szerokość treści układu awaryjnego strony głównej */
}

/* 2. Układ ogólny ------------------------------------------- */
.ss-docs-container {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--ss-container);
	margin: 0 auto;
	padding: 0 var(--ss-gutter);
}
.ss-docs-main {
	font-family: var(--ss-font);
	color: var(--ss-navy);
	background: var(--ss-white);
}
.ss-docs-main a { color: var(--ss-violet-dark); }
.ss-docs-main a:hover { color: var(--ss-violet); }
.ss-docs-main :focus-visible {
	outline: 2px solid var(--ss-violet);
	outline-offset: 2px;
}
/* Układ na pełną szerokość okna:
   nawigacja przy lewej krawędzi, treść wyśrodkowana w pozostałym miejscu,
   spis treści przy prawej krawędzi (tylko artykuł). */
.ss-docs-layout {
	display: grid;
	/* Ta sama siatka na stronie kategorii, wyszukiwania i artykułu:
	   treść zaczyna się w tym samym miejscu względem nawigacji.
	   Trzecia kolumna to spis treści (na liście artykułów zostaje pusta). */
	grid-template-columns: 280px minmax(0, 1fr) 220px;
	column-gap: 48px;
	align-items: start;
}
.ss-docs-layout__nav {
	grid-column: 1;
	grid-row: 1;
	align-self: stretch; /* linia przy nawigacji na całą wysokość treści */
	border-right: 1px solid var(--ss-line);
}
.ss-docs-layout__nav > .ss-docs-nav {
	position: sticky;
	top: 0;
	box-sizing: border-box;
	max-height: 100vh;
	overflow-y: auto;
	padding: 40px 16px 40px 0;
}
.admin-bar .ss-docs-layout__nav > .ss-docs-nav { top: 32px; max-height: calc(100vh - 32px); }
.ss-docs-layout__content {
	grid-column: 2;
	grid-row: 1;
	justify-self: center;
	box-sizing: border-box;
	width: 100%;
	max-width: 760px;
	min-width: 0;
	padding: 40px 0 72px;
}
.ss-docs-layout__toc {
	grid-column: 3;
	grid-row: 1;
	position: sticky;
	top: 0;
	padding-top: 40px;
}

.ss-docs-title {
	margin: 0 0 10px;
	font-size: 36px;
	font-weight: 600;
	line-height: 1.15;
	color: var(--ss-navy);
}
.ss-docs-lead {
	margin: 0 0 40px;
	font-size: 17px;
	line-height: 1.55;
	color: var(--ss-text);
}
.ss-docs-meta {
	margin: 0 0 28px;
	font-size: 14px;
	color: var(--ss-text);
}

/* Okruszki */
.ss-docs-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
	font-size: 14px;
	color: var(--ss-text);
}
.ss-docs-breadcrumbs li + li::before {
	content: "/";
	margin-right: 8px;
	color: var(--ss-line);
}
.ss-docs-breadcrumbs a { color: var(--ss-text); }

/* 3. Wyszukiwarka --------------------------------------------- */
.ss-docs-search {
	display: flex;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	min-height: 44px;
	margin: 0;
	padding: 0 6px 0 14px;
	border: 1px solid var(--ss-line);
	border-radius: 10px;
	background: var(--ss-gray);
}
.ss-docs-search:focus-within { border-color: var(--ss-violet-dark); }
.ss-docs-search__icon { flex: 0 0 auto; color: var(--ss-text); }
.ss-docs-search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	outline: none;
	background: transparent;
	box-shadow: none;
	font: 400 15px/1.2 var(--ss-font);
	color: var(--ss-navy);
}
.ss-docs-search__submit {
	flex: 0 0 auto;
	min-height: 36px;
	padding: 0 14px;
	border: 0;
	border-radius: 8px;
	background: var(--ss-navy);
	color: var(--ss-white);
	font: 600 14px/1 var(--ss-font);
	cursor: pointer;
}
.ss-docs-search__submit:hover { background: var(--ss-violet-dark); }
.ss-docs-search--hero {
	min-height: 56px;
	padding: 0 8px 0 18px;
	background: var(--ss-white);
}
.ss-docs-search--hero input[type="search"] { height: 52px; font-size: 16px; }
.ss-docs-search--hero .ss-docs-search__submit { min-height: 40px; padding: 0 18px; }
/* Wyszukiwarka w nagłówku Kadence (element HTML z krótkim kodem):
   stała szerokość, bo kolumna nagłówka sama z siebie jest wąska. */
.site-header .ss-docs-search {
	width: clamp(280px, 36vw, 560px);
	max-width: 100%;
}

/* 4. Strona główna ---------------------------------------------
   Treść strony głównej to bloki Kadence (Row Layout z tłem i szerokością 1200 px).
   Motyw dostarcza tylko: kafle kategorii [ss_docs_kategorie], dużą wyszukiwarkę
   [ss_docs_szukaj] (sekcja 3) i dopasowanie filmów w kartach z klasą ss-docs-karta. */
.ss-docs-page > :where(*) { margin-top: 0; margin-bottom: 0; }
.ss-docs-page .ss-docs-cats { margin-top: 12px; }

.ss-docs-cats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 kolumny; tablet 2, telefon 1 */
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ss-docs-cat {
	display: block;
	height: 100%;
	box-sizing: border-box;
	padding: 20px 22px;
	border: 1px solid var(--ss-line);
	border-radius: 12px;
	background: var(--ss-white);
	color: var(--ss-navy);
	text-decoration: none;
}
.ss-docs-main a.ss-docs-cat { color: var(--ss-navy); }
.ss-docs-cat:hover { border-color: var(--ss-violet-dark); }
.ss-docs-cat__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
}
.ss-docs-cat__name { font-size: 17px; font-weight: 600; }
.ss-docs-cat:hover .ss-docs-cat__name { color: var(--ss-violet-dark); }
.ss-docs-cat__count { flex: 0 0 auto; font-size: 13px; color: var(--ss-text); }
.ss-docs-cat__desc {
	display: block;
	margin-top: 6px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--ss-text);
}

/* Karty filmów: kolumna Kadence z klasą ss-docs-karta.
   Film przylega do górnej krawędzi, zaokrąglone rogi go przycinają. */
.ss-docs-karta,
.ss-docs-karta > .kt-inside-inner-col {
	overflow: hidden !important;
	padding-top: 0 !important;
}
.ss-docs-karta .wp-block-embed,
.ss-docs-karta .wp-block-embed__wrapper {
	margin: 0 !important;
}
.ss-docs-karta .wp-block-embed { margin-bottom: 4px !important; }
.ss-docs-karta iframe { display: block; width: 100%; border-radius: 0; }
/* Film jeszcze nie wstawiony (adres zastępczy) – granatowe pole zamiast adresu */
.ss-docs-karta .wp-block-embed__wrapper:not(:has(iframe)) {
	min-height: 120px;
	background: var(--ss-navy);
	font-size: 0;
	line-height: 0;
	color: transparent;
}
.ss-docs-karta .wp-block-embed__wrapper:not(:has(iframe)) a { display: none; }

/* Układ awaryjny (gdy nie wybrano strony statycznej): kolumna 1200 px */
.home .ss-docs-main .ss-docs-container {
	max-width: calc(var(--ss-home-width) + 2 * var(--ss-gutter));
}
.ss-docs-fallback { padding-top: 56px; padding-bottom: 72px; }
.ss-docs-fallback .ss-docs-search { margin-bottom: 48px; }
.ss-docs-fallback h2 {
	margin: 0;
	font-size: 28px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--ss-navy);
}
.ss-docs-admin-note {
	padding: 12px var(--ss-gutter);
	background: #FFF4DB;
	border-bottom: 1px solid #F5D38A;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ss-navy);
	text-align: center;
}

/* Poprawki względem Kadence */
/* Kadence dokleja do formularza wyszukiwania własną ikonę – mamy przycisk „Szukaj”. */
.ss-docs-search .kadence-search-icon-wrap { display: none !important; }
/* Białe tło pod krótką treścią (zamiast tła witryny Kadence) */
body.ss-docs,
body.ss-docs #wrapper,
body.ss-docs #inner-wrap,
body.ss-docs .site { background: var(--ss-white); }

/* 5. Kategoria i listy artykułów ------------------------------- */
.ss-docs-group { margin-bottom: 40px; }
.ss-docs-group:last-child { margin-bottom: 0; }
.ss-docs-group h2 {
	margin: 0 0 8px;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--ss-navy);
}
.ss-docs-main a.ss-docs-group__link { color: inherit; text-decoration: none; }
.ss-docs-main a.ss-docs-group__link:hover { color: var(--ss-violet-dark); }
.ss-docs-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.ss-docs-list li {
	padding: 14px 0;
	border-bottom: 1px solid var(--ss-line);
}
.ss-docs-list__title {
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
}
.ss-docs-list__cat {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	color: var(--ss-text);
}
.ss-docs-list__excerpt {
	margin: 4px 0 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--ss-text);
}
.ss-docs-list__excerpt p { margin: 0; }
/* Trafienia podświetlone przez Relevanssi: w zajawce i (jeśli włączone) w tytule */
.ss-docs-list__excerpt mark,
.ss-docs-list__excerpt .relevanssi-query-term,
.ss-docs-list__title mark,
.ss-docs-list__title .relevanssi-query-term {
	padding: 0 2px;
	border-radius: 4px;
	background: var(--ss-lavender);
	color: var(--ss-navy);
}
.ss-docs-empty {
	padding: 24px;
	border-radius: 12px;
	background: var(--ss-gray);
	font-size: 16px;
	color: var(--ss-text);
}
.ss-docs-empty p { margin: 0 0 8px; }
.ss-docs-empty p:last-child { margin-bottom: 0; }
/* Relevanssi: „Czy chodziło Ci o…” przy braku wyników */
.ss-docs-didyoumean { color: var(--ss-navy); }
.ss-docs-main .ss-docs-didyoumean a { font-weight: 600; }
/* Puste zapytanie: pole wyszukiwania pod nagłówkiem */
.ss-docs-layout__content > .ss-docs-search { margin-top: 24px; }
.ss-docs-pagination { margin-top: 32px; }

/* 6. Nawigacja boczna ------------------------------------------ */
.ss-docs-nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.ss-docs-nav__cat {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	min-height: 40px;
	padding: 8px 12px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
}
.ss-docs-main a.ss-docs-nav__cat { color: var(--ss-navy); }
.ss-docs-main a.ss-docs-nav__cat[aria-current="page"],
.ss-docs-nav__item.is-current-cat > a.ss-docs-nav__cat {
	background: var(--ss-lavender);
	color: var(--ss-violet-dark);
}
.ss-docs-nav__chev {
	flex: 0 0 auto;
	color: var(--ss-text);
	transition: transform .15s ease;
}
.ss-docs-nav__item.is-open .ss-docs-nav__chev { transform: rotate(90deg); }
.ss-docs-nav__posts {
	margin: 2px 0 8px 12px !important;
	padding-left: 8px !important;
	border-left: 1px solid var(--ss-line);
}
.ss-docs-nav__group-label {
	display: block;
	padding: 10px 10px 4px;
	font-size: 12px;
	font-weight: 600;
	color: var(--ss-navy);
}
.ss-docs-nav__post {
	display: block;
	padding: 6px 10px;
	border-radius: 6px;
	font-size: 14px;
	line-height: 1.4;
	text-decoration: none;
}
.ss-docs-main a.ss-docs-nav__post { color: var(--ss-text); }
.ss-docs-main a.ss-docs-nav__post:hover { color: var(--ss-violet-dark); }
.ss-docs-main a.ss-docs-nav__post[aria-current="page"] {
	background: var(--ss-lavender);
	color: var(--ss-violet-dark);
	font-weight: 600;
}

/* 7. Artykuł ----------------------------------------------------- */
.ss-docs-content {
	font-size: 17px;
	line-height: 1.6;
	color: var(--ss-text);
}
.ss-docs-content > :first-child { margin-top: 0; }
.ss-docs-content p { margin: 0 0 20px; }
.ss-docs-content h2 {
	margin: 40px 0 12px;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--ss-navy);
	scroll-margin-top: 24px;
}
.ss-docs-content h3 {
	margin: 28px 0 8px;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ss-navy);
}
.ss-docs-content strong { color: var(--ss-navy); }
.ss-docs-content ul,
.ss-docs-content ol { margin: 0 0 20px; padding-left: 24px; }
.ss-docs-content li + li { margin-top: 6px; }
.ss-docs-content img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}
.ss-docs-content figure { margin: 0 0 24px; }
.ss-docs-content figcaption,
.ss-docs-content .wp-element-caption {
	margin-top: 8px;
	font-size: 14px;
	color: var(--ss-text);
	text-align: left;
}
.ss-docs-content code {
	padding: 2px 6px;
	border-radius: 4px;
	background: var(--ss-gray);
	font-size: .9em;
	color: var(--ss-navy);
}
.ss-docs-content pre {
	overflow-x: auto;
	padding: 16px;
	border-radius: 8px;
	background: var(--ss-gray);
	font-size: 14px;
}
.ss-docs-content pre code { padding: 0; background: none; }
.ss-docs-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}
.ss-docs-content .wp-block-table { overflow-x: auto; margin: 0 0 24px; }
.ss-docs-content th,
.ss-docs-content td {
	padding: 10px 12px;
	border: 1px solid var(--ss-line);
	text-align: left;
	vertical-align: top;
}
.ss-docs-content th { background: var(--ss-gray); color: var(--ss-navy); font-weight: 600; }

/* Styl bloku Grupa „Uwaga” (wybierany w panelu bloku, bez CSS we wpisie) */
.ss-docs-content .wp-block-group.is-style-ss-uwaga,
.wp-block-group.is-style-ss-uwaga {
	margin: 0 0 24px;
	padding: 16px 20px;
	border-radius: 8px;
	background: var(--ss-lavender);
	color: var(--ss-navy);
	font-size: 16px;
}
.wp-block-group.is-style-ss-uwaga > :last-child { margin-bottom: 0; }

/* Spis treści */
.ss-docs-toc__title {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ss-navy);
}
.ss-docs-toc ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.ss-docs-toc a {
	display: block;
	padding: 6px 0;
	font-size: 14px;
	line-height: 1.4;
	text-decoration: none;
}
.ss-docs-main .ss-docs-toc a { color: var(--ss-text); }
.ss-docs-main .ss-docs-toc a:hover,
.ss-docs-main .ss-docs-toc a.is-active {
	color: var(--ss-violet-dark);
}
.ss-docs-main .ss-docs-toc a.is-active { font-weight: 600; }

/* Poprzedni / następny */
.ss-docs-pager {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 16px;
	margin-top: 40px;
	padding-top: 20px;
	border-top: 1px solid var(--ss-line);
}
.ss-docs-pager a {
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
	max-width: 48%;
	text-decoration: none;
}
.ss-docs-pager__next { margin-left: auto; text-align: right; }
.ss-docs-pager__label { font-size: 13px; color: var(--ss-text); }
.ss-docs-pager__title { font-size: 15px; font-weight: 600; }

/* 8. Tablet i telefon -------------------------------------------- */
@media (max-width: 1200px) {
	.ss-docs-layout { grid-template-columns: 240px minmax(0, 1fr); column-gap: 40px; }
	.ss-docs-layout__toc { display: none; }
}
@media (max-width: 1024px) {
	.ss-docs-layout { grid-template-columns: minmax(0, 1fr); }
	.ss-docs-layout__content { grid-column: 1; grid-row: 1; justify-self: stretch; max-width: none; padding-bottom: 40px; }
	/* Nawigacja pod treścią, żeby od razu było widać artykuł */
	.ss-docs-layout__nav {
		grid-column: 1;
		grid-row: 2;
		border-right: 0;
		border-top: 1px solid var(--ss-line);
	}
	.ss-docs-layout__nav > .ss-docs-nav,
	.admin-bar .ss-docs-layout__nav > .ss-docs-nav {
		position: static;
		max-height: none;
		overflow: visible;
		padding: 24px 0 48px;
	}
	.ss-docs-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ss-docs-title { font-size: 30px; }
}
@media (max-width: 767px) {
	.ss-docs-title { font-size: 28px; }
	.ss-docs-cats { grid-template-columns: minmax(0, 1fr); }
	.ss-docs-pager a { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.ss-docs-nav__chev { transition: none; }
	html { scroll-behavior: auto; }
}