/* =====================================================
   Portal Księgarski — main.css
   Źródło: _new/public/css/main.css (WCAG 2.2 AAA)
   ===================================================== */

/* ─── ZMIENNE ─────────────────────────────────────────── */
:root {
	--color-bg:             #efefef;
	--color-surface:        #FFFFFF;
	--color-text:           #111111;
	--color-text-hover:     #fefefe;
	--color-text-btn:       #fefefe;
	--color-text-btn-hover: yellow;
	--color-text-sub:       #3D3D3D;
	--color-brand:          #1C2B4A;
	--color-accent:         #911e5a;
	--color-focus:          #005FCC;
	--color-border:         #C5BDB0;

	--font-body: 'Georgia', 'Times New Roman', serif;
	--font-ui:   system-ui, -apple-system, 'Segoe UI', sans-serif;

	--size-base: 1rem;
	--size-sm:   0.875rem;
	--size-lg:   1.125rem;
	--size-xl:   1.5rem;

	--space-xs: 0.25rem;
	--space-s:  0.5rem;
	--space-m:  1rem;
	--space-l:  1.5rem;
	--space-xl: 2.5rem;

	--focus-outline:  3px solid var(--color-focus);
	--focus-offset:   3px;
	--padding-default:.5rem;
}

/* ─── TRYB CIEMNY ─────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
	:root {
		--color-bg:      #111111;
		--color-surface: #1D2027;
		--color-text:    #fefefe;
		--color-text-sub:#B0A898;
		--color-brand:   #7FA8E0;
		--color-accent:  #F4894A;
		--color-focus:   #66AAFF;
		--color-border:  #3A3D45;
	}
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important; scroll-behavior: auto !important;
	}
}

@media (forced-colors: active) {
	:root { --color-focus: Highlight; }
	.skip-link:focus, a:focus-visible, button:focus-visible { outline-color: Highlight; }
	nav ul ul { border-color: ButtonText; }
}

/* ─── RESET ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--color-bg); color: var(--color-text);
	font-family: var(--font-body); font-size: var(--size-base); line-height: 1.7; }

/* ─── FOKUS ───────────────────────────────────────────── */
:focus                     { outline: var(--focus-outline); outline-offset: var(--focus-offset); }
:focus:not(:focus-visible) { outline: none; }
:focus-visible             { outline: var(--focus-outline); outline-offset: var(--focus-offset); border-radius: 2px; }

/* ─── SKIP LINK ───────────────────────────────────────── */
.skip-link {
	position: absolute; top: -100%; left: var(--space-m); z-index: 9999;
	padding: var(--space-s) var(--space-l); background: var(--color-focus); color: #FFF;
	font-family: var(--font-ui); font-size: var(--size-base); font-weight: 700;
	text-decoration: none; border-radius: 0 0 4px 4px;
}
.skip-link:focus { top: 0; }
.skip-link--bottom { top: auto; bottom: -100%; border-radius: 4px 4px 0 0; }
.skip-link--bottom:focus { top: auto; bottom: 0; }

/* ─── SR-ONLY ─────────────────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ─── LAYOUT ──────────────────────────────────────────── */
.container { width: 100%; max-width: 75rem; margin: 0 auto; padding: 0 var(--space-l); }

/* ─── HEADER ──────────────────────────────────────────── */
body > header {
	position: fixed; z-index: 2; width: 100dvw; top: 0; padding: 0;
	background: var(--color-bg); border-bottom: 1px solid var(--color-border);
}
header .container {
	display: flex; align-items: center; justify-content: space-between;
	padding-top: var(--space-m); padding-bottom: var(--space-m); flex-wrap: wrap;
}
#logo { display: block; flex-shrink: 0; }
#logo img { display: block; height: 3rem; width: auto; box-shadow: none; }

/* ─── NAWIGACJA ───────────────────────────────────────── */
nav ul { list-style: none; margin: 0; padding: 0; }
nav > ul { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
nav li  { position: relative; }
nav a {
	display: block; padding: var(--space-s) var(--space-m);
	color: var(--color-text); font-family: var(--font-ui); font-size: var(--size-sm);
	font-weight: 600; text-decoration: none; letter-spacing: .03em;
	text-transform: uppercase; border-radius: 3px;
	transition: background .15s ease, color .15s ease;
}
nav a:hover { background: var(--color-accent); color: var(--color-text-hover); }
nav a[aria-current="page"] { /*! background: rgba(0,0,0,.08); */ text-decoration: underline; text-underline-offset: 3px; }

nav ul ul {
	position: absolute; top: 100%; left: 0; z-index: 100; min-width: 14rem;
	background: var(--color-surface); border: 2px solid var(--color-border);
	border-top: 3px solid var(--color-accent); border-radius: 0 0 4px 4px;
	box-shadow: 0 4px 12px rgba(0,0,0,.15);
	visibility: hidden; opacity: 0; transform: translateY(-4px);
	transition: visibility 0s .15s, opacity .15s ease, transform .15s ease;
}
nav ul ul li { border-bottom: 1px solid var(--color-border); }
nav ul ul li:last-child { border-bottom: none; }
nav ul ul a { color: var(--color-text); text-transform: none; font-weight: 400; }
nav ul ul a:hover { background: var(--color-accent); color: var(--color-text-hover); }
nav li:hover > ul, nav li:focus-within > ul {
	visibility: visible; opacity: 1; transform: translateY(0); transition-delay: 0s;
}
nav li:has(> ul) > a::after {
	content: ''; display: inline-block; margin-left: var(--space-xs);
	width: .4em; height: .4em;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: translateY(-.15em) rotate(45deg); vertical-align: middle;
}

/* ─── MAIN ────────────────────────────────────────────── */
main { min-height: 50vh; padding-top: 4.5rem; }

/* ─── FOOTER ──────────────────────────────────────────── */
footer {
	background: var(--color-bg); color: var(--color-text);
	padding: var(--space-xl) 0; margin-top: auto;
	border-top: 3px solid var(--color-accent);
	font-family: var(--font-ui); font-size: var(--size-sm);
}

/* ─── TYPOGRAFIA ──────────────────────────────────────── */
h1 { font-size: 2rem; line-height: 1.3; }
h2 { font-size: 1.5rem; line-height: 1.35; }
h3 { font-size: 1.25rem; line-height: 1.4; }
p, li, blockquote { max-width: 65ch; }
img { max-width: 100%; border-radius: .15rem; box-shadow: 1px 1px 4px #444; }
main a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
main a:hover { text-decoration-thickness: 2px; }

/* ─── HEADLINER ───────────────────────────────────────── */
.headliner a, .btn {
	display: block; padding: var(--space-s) var(--space-m); color: var(--color-text-btn);
	font-family: var(--font-ui); font-size: var(--size-sm); font-weight: 600;
	text-decoration: none; letter-spacing: .03em; text-transform: uppercase;
	border-radius: 3px; border: solid 3px var(--color-accent);
	transition: all .5s ease; background-color: var(--color-accent); width: fit-content;
}
.headliner a:hover, .btn:hover { border-color: var(--color-border); }

/* ─── LIST-SECTION ────────────────────────────────────── */
.list-section * { text-decoration: none; color: var(--color-text); }
.list-section h2 { padding: var(--space-m) 0 var(--space-s); font-family: var(--font-ui); }
.list-section h2::before {
	content: ''; display: inline-block; width: 1.1rem; height: 1.1rem;
	border-radius: .15rem; margin-right: .6rem;
	background-color: var(--color-accent); vertical-align: middle;
}
.list-section > ul {
	display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;
	padding: 0; position: relative; overflow: hidden; grid-gap: var(--padding-default);
}
.list-section > ul > li {
	margin: 0; border: solid 3px var(--color-bg); border-radius: .25rem;
	list-style-type: none; transition: .5s ease;
}
.list-section > ul > li:hover { border-color: var(--color-accent); }
.list-section article { display: block; position: relative; }
.list-section article > img { max-width: 100%; aspect-ratio: 6/4; height: auto; }
.list-section article h2 { font-size: 1rem; padding: var(--space-s); margin: 0; }
.list-section article h2 a::after { content: ''; position: absolute; inset: 0; }

.article-meta {
	display: flex; gap: var(--space-s); align-items: center;
	padding: var(--space-s); font-family: var(--font-ui); font-size: var(--size-sm);
}
.card-category {
	position: relative; z-index: 1;
	border: solid 1px var(--color-bg); padding: calc(var(--padding-default) / 8) 1rem;
	color: var(--color-text-btn); background-color: var(--color-accent);
	text-decoration: none; font-size: var(--size-sm); border-radius: 2px;
	line-height: 1.7;
}
.card-category:hover { color: var(--color-text-btn-hover); border-color: var(--color-accent); }

/* ─── ARTYKUŁ (pełny widok) ───────────────────────────── */
.article-full { max-width: 75rem; margin: 0 auto; padding: 0 var(--space-l); }
.article-full .article-cover {
	width: 100%; aspect-ratio: 16/9; object-fit: cover;
	border-radius: .25rem; margin-bottom: var(--space-l);
}
.article-full .article-lead {
	font-size: var(--size-lg); color: var(--color-text-sub); margin-bottom: var(--space-l); max-width: 100%;
}
.article-full .article-body { line-height: 1.8; }
.article-full .article-body p { margin-bottom: var(--space-m); max-width: 100%; }
.article-full .article-meta { padding: 0; }
.article-full h1 { }

/* ─── KATEGORIA ───────────────────────────────────────── */
.category-header {
	padding: var(--space-l) 0 var(--space-m);
	border-bottom: 2px solid var(--color-border); margin-bottom: var(--space-l);
}
.category-header h1 { margin: 0; font-family: var(--font-ui); }
.category-description {
	color: var(--color-text-sub); font-size: var(--size-lg);
	margin-top: .5rem; max-width: 60ch;
}
.category-empty { padding: 2rem 0; color: var(--color-text-sub); }
.breadcrumb { font-family: var(--font-ui); font-size: var(--size-sm); color: var(--color-text-sub); margin-bottom: var(--space-s); display: flex; margin-top: .8rem; }
.breadcrumb a { color: var(--color-accent); display: inline; padding: 0; font-size: .6rem; }
.breadcrumb span[aria-hidden], .breadcrumb span[aria-current] { margin: 0 .25rem; margin-top: -.25rem; }
.breadcrumb span[aria-current] { font-size: .75rem; margin-top: -0.05rem; }

/* ─── PAGINACJA ───────────────────────────────────────── */
.pagination {
	display: flex; gap: var(--space-s); justify-content: center;
	align-items: center; padding: var(--space-xl) 0; font-family: var(--font-ui);
}
.pagination a, .pagination strong {
	display: inline-block; padding: var(--space-s) var(--space-m);
	border: 2px solid var(--color-border); border-radius: 3px;
	text-decoration: none; color: var(--color-text); font-weight: 600;
	min-width: 2.5rem; text-align: center;
}
.pagination a:hover { border-color: var(--color-accent); color: var(--color-accent); }
.pagination strong { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }

/* ─── AUTOR (karta w artykule) ────────────────────────── */
.author-card {
	display: flex; gap: 1.25rem; align-items: flex-start;
	margin-top: var(--space-xl); padding: var(--space-l);
	background: var(--color-surface); border: 1px solid var(--color-border);
	border-left: 4px solid var(--color-accent); border-radius: .25rem;
}
.author-card__avatar {
	width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
	flex-shrink: 0; box-shadow: none; border: 2px solid var(--color-border);
}
.author-card__avatar--placeholder {
	display: flex; align-items: center; justify-content: center;
	background: var(--color-accent); color: #fff;
	font-family: var(--font-ui); font-size: 1.5rem; font-weight: 700;
}
.author-card__label {
	font-family: var(--font-ui); font-size: .7rem; text-transform: uppercase;
	letter-spacing: .06em; color: var(--color-text-sub); margin: 0 0 .2rem; max-width: 100%;
}
.author-card__name {
	font-family: var(--font-ui); font-size: 1rem; font-weight: 700;
	color: var(--color-text); text-decoration: none; display: block; margin-bottom: .4rem;
}
a.author-card__name:hover { color: var(--color-accent); text-decoration: underline; }
.author-card__bio {
	font-size: var(--size-sm); color: var(--color-text-sub);
	line-height: 1.6; margin: 0 0 .5rem; max-width: 100%;
}
.author-card__links { display: flex; gap: 1rem; font-family: var(--font-ui); font-size: var(--size-sm); }
.author-card__links a { color: var(--color-accent); text-decoration: none; }
.author-card__links a:hover { text-decoration: underline; }

/* ─── STOPKA — grid wielokolumnowy ───────────────────── */
.footer-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: var(--space-xl); margin-bottom: var(--space-l);
}
.footer-col__heading {
	font-family: var(--font-ui); font-size: var(--size-sm); font-weight: 700;
	text-transform: uppercase; letter-spacing: .08em;
	margin: 0 0 var(--space-m); color: var(--color-text);
}
.footer-col nav ul { list-style: none; margin: 0; padding: 0; }
.footer-col nav li { margin-bottom: var(--space-xs); width: 100%;}
.footer-col nav a {
	color: var(--color-text-sub); text-decoration: none;
	font-family: var(--font-ui); font-size: var(--size-sm);
}
.footer-col nav a:hover { color: var(--color-accent); text-decoration: underline; color: var(--color-text-btn);}
.footer-col address {
	font-style: normal; font-family: var(--font-ui);
	font-size: var(--size-lg); line-height: 1.8; color: var(--color-text-sub);
}
.footer-col address a { color: var(--color-text-sub); text-decoration: none; }
.footer-col address a:hover { color: var(--color-accent); text-decoration: underline; }
.footer-copy { margin-top: var(--space-m); opacity: .8; }

/* ─── BŁĘDY ───────────────────────────────────────────── */
.error-page { text-align: center; padding: var(--space-xl) var(--space-l); }
.error-page h1 { font-size: 4rem; color: var(--color-accent); margin-bottom: 0; }
.error-page p { font-size: var(--size-lg); color: var(--color-text-sub); }

/* ─── HAMBURGER + SUB-TOGGLE ──────────────────────────── */

/* Hamburger — domyślnie ukryty (desktop) */
.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: space-between;
	width: 2.25rem;
	height: 1.75rem;
	padding: .2rem .15rem;
	margin-left: auto;
	background: transparent;
	border: 2px solid transparent;
	border-radius: .25rem;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.nav-toggle:focus-visible {
	outline: 3px solid var(--color-accent);
	outline-offset: 3px;
}
.nav-toggle__bar {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--color-text);
	border-radius: 1px;
	transition: transform .22s ease, opacity .18s ease;
	transform-origin: center;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
	transform: translateY(calc(.75rem - 1px)) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
	opacity: 0; transform: scaleX(0);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
	transform: translateY(calc(-.75rem + 1px)) rotate(-45deg);
}

/* Sub-toggle (trójkąt podmenu) — domyślnie ukryty na desktopie */
.sub-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 3rem;
	min-height: 2.5rem;
	background: transparent;
	border: none;
	border-left: 1px solid var(--color-border);
	cursor: pointer;
	color: var(--color-text);
	flex-shrink: 0;
	-webkit-tap-highlight-color: transparent;
}
.sub-toggle:focus-visible {
	outline: 3px solid var(--color-accent);
	outline-offset: -3px;
}
/* Trójkąt przez border trick */
.sub-toggle::before {
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-top: .4em solid transparent;
	border-bottom: .4em solid transparent;
	border-left: .55em solid currentColor;
	transition: transform .2s ease;
}
.sub-toggle[aria-expanded="true"]::before {
	transform: rotate(90deg);
}

/* ─── RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 48rem) {
	/* Header: logo + hamburger w jednym wierszu */
	header .container { flex-direction: row; align-items: center; flex-wrap: wrap; }

	/* Hamburger widoczny */
	.nav-toggle { display: flex; }

	/* Nav domyślnie ukryta */
	#main-nav {
		display: none;
		width: 100%;
		order: 3;
		border-top: 1px solid var(--color-border);
		padding: var(--space-s) 0;
	}
	#main-nav.nav-open { display: block; }

	/* Lista główna: pionowo, bez gaps */
	#main-nav > ul { flex-direction: column; width: 100%; gap: 0; }

	/* Li z dziećmi: flex row — link + przycisk w jednej linii */
	#main-nav li {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		border-bottom: 1px solid var(--color-border);
	}
	#main-nav li:last-child { border-bottom: none; }
	#main-nav li > a {
		flex: 1;
		text-transform: none;
		font-weight: 600;
		padding: var(--space-m);
		border-radius: 0;
	}

	/* Sub-toggle widoczny na mobile */
	.sub-toggle { display: flex; }

	/* Podmenu: domyślnie ukryte, pełna szerokość */
	#main-nav ul ul {
		position: static;
		visibility: visible;
		opacity: 1;
		transform: none;
		box-shadow: none;
		border: none;
		border-top: 1px solid var(--color-border);
		margin: 0;
		background: rgba(0,0,0,.03);
		width: 100%;
		display: none;
	}
	#main-nav li.sub-open > ul { display: block; }

	/* Pozycje podmenu — lekkie wcięcie, bez border-left */
	#main-nav ul ul li {
		border-bottom: 1px solid var(--color-border);
		border-top: none;
	}
	#main-nav ul ul li:last-child { border-bottom: none; }
	#main-nav ul ul a {
		padding-left: var(--space-xl);
		text-transform: none;
		font-weight: 400;
		border-radius: 0;
		font-size: var(--size-sm);
	}

	/* Desktop dropdown arrow — schowany na mobile */
	nav li:has(> ul) > a::after { display: none; }

	.headliner { display: grid; position: relative; width: 100%; margin: 0; padding: 0;
		grid-template-areas: "img" "head"; }
	.headliner > img { position: relative; max-width: 100%; height: auto; grid-area: img; }
	.headliner > header { display: grid; position: relative; grid-area: head; padding: var(--padding-default); }

	.list-section > ul { grid-template-columns: 1fr 1fr; }
	.footer-grid { grid-template-columns: 1fr; gap: var(--space-l); }
}

@media (min-width: 48.0001rem) {
	.headliner { display: block; position: relative; height: 100dvh; margin: 0; overflow: hidden; }
	.headliner > img { position: absolute; max-width: 100%; height: auto; top: 0; left: 0; z-index: 0; }
	.headliner > header {
		display: block; position: absolute; z-index: 1;
		top: 50%; transform: translateY(-50%);
		width: 35%; margin-left: calc((100dvw - 74rem) / 2);
	}
	.headliner > header > :where(h1, p) { background-color: rgba(0,0,0,.8); padding: var(--padding-default); }
	.headliner > header * { color: #fff; }
}

@media (max-width: 36rem) {
	.list-section > ul { grid-template-columns: 1fr; }
}