/*
 * Szablon "biblioteka" - szablon potomny Cassiopei (Joomla 6) w charakterze dawnej strony Biblioteki Miejskiej
 * w Łebie: papier, brązy, zdjęcie książek w nagłówku, nagłówki Bebas Neue.
 *
 * Kontrast kolorów sprawdzony wg WCAG 2.1 AA (tekst ≥ 4,5:1): tekst/papier 12,9 · link/papier 6,1 ·
 * biały/nagłówek ≥ 7 · biały/pasek górny 6,0 · tekst stopki 14,2.
 */

@font-face {
	font-family: "Bebas Neue";
	src: url("../fonts/BebasNeue-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	--bib-papier: #f4ecd8;
	--bib-karta: #fbf6ea;
	--bib-tekst: #2e2418;
	--bib-tekst-drugi: #5e4b36;
	--bib-braz: #8b553d;
	--bib-braz-ciemny: #53300c;
	--bib-link: #8a4510;
	--bib-link-hover: #5a2a08;
	--bib-linia: #b39a6c;
	--bib-turkus: #3d6a70;
	--bib-stopka: #2b1a0e;
	--bib-wiecej: #7a1f0e;
	--bib-naglowki: "Bebas Neue", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
	--bib-szeryf: Georgia, "Times New Roman", serif;

	/* zmienne Cassiopei / Bootstrapa */
	--cassiopeia-color-primary: #2a170c;
	--cassiopeia-color-hover: #53300c;
	--cassiopeia-color-link: var(--bib-link);
	--link-color: var(--bib-link);
	--link-color-rgb: 138, 69, 16;
	--link-hover-color: var(--bib-link-hover);
	--link-hover-color-rgb: 90, 42, 8;
	--body-bg: var(--bib-papier);
	--body-color: var(--bib-tekst);
	--body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--body-font-size: 1.0625rem;
	--cassiopeia-font-family-body: var(--body-font-family);
	--cassiopeia-font-family-headings: var(--bib-naglowki);
	--cassiopeia-font-weight-headings: 400;
	--border-color: var(--bib-linia);
}

body { background: var(--bib-papier); color: var(--bib-tekst); }
a { color: var(--bib-link); }
a:hover, a:focus { color: var(--bib-link-hover); }
:focus-visible { outline: 3px solid var(--bib-link); outline-offset: 2px; }

/* ---------- nagłówek: pasek górny, zdjęcie książek, logo, menu ---------- */
.container-header {
	background-color: #2a170c;
	background-image: linear-gradient(rgba(30, 14, 5, .70), rgba(30, 14, 5, .84)), url("../images/naglowek.jpg");
	background-size: cover;
	background-position: center 35%;
	box-shadow: 0 4px 0 var(--bib-braz);
}
@supports (background-image: url("x.webp")) {
	.container-header { background-image: linear-gradient(rgba(30, 14, 5, .70), rgba(30, 14, 5, .84)), url("../images/naglowek.webp"); }
}
.container-header :focus-visible { outline-color: #fff; }

.container-topbar {
	background: var(--bib-turkus);
	color: #fff;
	font-size: .9rem;
}
.container-topbar .biblioteka-topbar {
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1.5rem;
	max-width: 1320px; margin: 0 auto; padding: .35rem 1rem;
}
.container-topbar a { color: #fff; text-decoration: underline; }
.biblioteka-date { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

.container-header .navbar-brand { padding: .75rem 0 .25rem; }
.container-header .brand-logo img { max-height: 150px; width: auto; }

.container-header .metismenu > li > a,
.container-header .metismenu > li > button,
.container-header .mod-menu > li > a {
	font-family: var(--bib-naglowki);
	font-size: 1.35rem;
	letter-spacing: .04em;
	color: #fff;
}
.container-header .metismenu > li.active > a,
.container-header .metismenu > li > a[aria-current],
.container-header .metismenu > li > a:hover,
.container-header .metismenu > li > a:focus {
	background: var(--bib-braz-ciemny);
	color: #fff;
}
.container-header .metismenu > li > a:after { background: #fff; opacity: .6; }
.container-header .navbar-toggler { color: #fff; border-color: rgba(255, 255, 255, .7); }

/* wyszukiwarka w nagłówku */
.container-search .mod-finder input.form-control { border-color: #fff; }
.container-search .mod-finder .btn,
.mod-finder .btn-primary, .com-finder .btn-primary {
	background: var(--bib-braz); border-color: var(--bib-braz); color: #fff;
}
.container-search .mod-finder .btn:hover, .mod-finder .btn-primary:hover { background: var(--bib-braz-ciemny); }

/* ---------- treść ---------- */
.site-grid { padding-top: 1.5rem; }
.container-component > main,
.container-component > .mod-breadcrumbs__wrapper + main {
	background: var(--bib-karta);
	border-top: 4px solid var(--bib-braz);
	padding: 1.25rem 1.5rem 1.5rem;
	box-shadow: 0 1px 3px rgba(43, 26, 14, .15);
}
.container-component .breadcrumb { background: transparent; padding: 0 0 .5rem; margin: 0; font-size: .95rem; }

h1, h2, h3, .page-header h1, .page-header h2 { color: var(--bib-tekst); }
.page-header h1, .page-header h2, .com-content-category-blog > h1, .com-content-category > h1,
.com-content-categories h1, .blog-featured .page-header h1, .com-finder h1, .com-weblinks-category h1 {
	font-family: var(--bib-naglowki);
	font-size: clamp(2rem, 4vw, 2.75rem);
	line-height: 1.05;
	letter-spacing: .03em;
	text-transform: uppercase;
	margin: 0 0 .5rem;
	border-bottom: 1px dashed var(--bib-linia);
	padding-bottom: .4rem;
}
.biblioteka-first-word { color: var(--bib-braz); }

/* wpisy na stronie głównej i w blogu */
.blog-item, .blog-featured .blog-item {
	padding-bottom: 1.25rem;
	margin-bottom: 1.5rem;
	border-bottom: 2px solid var(--bib-linia);
}
.blog-item:last-child { border-bottom: 0; }
.item-category {
	margin: 0 0 .1rem;
	font-family: var(--bib-naglowki);
	font-size: 1.6rem;
	letter-spacing: .04em;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--bib-tekst);
}
.item-category__parent { display: block; font-family: var(--bib-szeryf); font-size: .9rem; letter-spacing: .02em; color: var(--bib-braz-ciemny); }
.item-title, .blog-item .item-title, .com-content-category-blog .item-title {
	font-family: var(--bib-szeryf);
	font-size: 1.55rem;
	font-weight: 700;
	line-height: 1.25;
	margin: .35rem 0 .75rem;
}
.item-title a { color: var(--bib-link); text-decoration: none; }
/* tytuły wpisów w blogu kategorii (rdzeń: .blog-item .page-header h2) - jak na stronie głównej, nie jak nagłówek strony */
.blog-item .page-header h2, .blog-item .page-header h3 {
	font-family: var(--bib-szeryf); font-size: 1.55rem; font-weight: 700; line-height: 1.25; letter-spacing: 0;
	text-transform: none; border: 0; padding: 0; margin: .35rem 0 .75rem; color: var(--bib-tekst);
}
.blog-item .page-header h2 a, .blog-item .page-header h3 a { color: var(--bib-link); text-decoration: none; }
.blog-item .page-header h2 a:hover, .blog-item .page-header h2 a:focus { text-decoration: underline; }
.item-title a:hover, .item-title a:focus { text-decoration: underline; }

/* "Więcej »" - zawsze pod treścią, po prawej */
.readmore { clear: both; text-align: end; margin: .75rem 0 0; }
.readmore .btn, .readmore .btn-secondary {
	background: var(--bib-wiecej);
	border-color: var(--bib-wiecej);
	color: #fff;
	font-family: var(--bib-szeryf);
	text-transform: uppercase;
	letter-spacing: .03em;
}
.readmore .btn:hover, .readmore .btn:focus { background: var(--bib-braz-ciemny); border-color: var(--bib-braz-ciemny); color: #fff; }

/* pełny artykuł: tytuł, narzędzia, metadane */
.com-content-article .page-header h1, .com-content-article .page-header h2 { border-top: 4px solid var(--bib-braz); padding-top: .4rem; }
.article-tools { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: .25rem 0 .5rem; font-size: .95rem; }
.article-tools__link { color: var(--bib-link); text-decoration: none; }
.article-tools__link:hover, .article-tools__link:focus { text-decoration: underline; }
.article-meta {
	margin: 0 0 1.25rem;
	padding: .5rem 0;
	border-top: 1px dashed var(--bib-linia);
	border-bottom: 1px dashed var(--bib-linia);
	font-size: .9rem;
	color: var(--bib-tekst-drugi);
}
.article-meta__line { margin: 0; line-height: 1.7; }
.article-meta__line > span { white-space: nowrap; }
.article-meta strong { color: var(--bib-tekst); }
.article-meta__sep { color: var(--bib-linia); }

.com-content-article__body img, .blog-item img, .card-body img { max-width: 100%; height: auto; }
.com-content-article__body table { max-width: 100%; }

/* nawigacja poprzedni / następny */
.pagenavigation .btn { background: transparent; border-color: var(--bib-braz); color: var(--bib-link); }
.pagenavigation .btn:hover, .pagenavigation .btn:focus { background: var(--bib-braz-ciemny); color: #fff; }

/* paginacja */
.pagination { --pagination-color: var(--bib-link); --pagination-hover-color: var(--bib-link-hover); --pagination-active-bg: var(--bib-braz); --pagination-active-border-color: var(--bib-braz); --pagination-bg: var(--bib-karta); --pagination-border-color: var(--bib-linia); }

/* lista artykułów kategorii, lista kategorii */
.com-content-category__table th { border-bottom: 2px solid var(--bib-braz); }
.com-content-categories__items .page-header { border-bottom: 1px dashed var(--bib-linia); }

/* ---------- kolumna boczna: moduły jak dawne "karty" Grunge ---------- */
.container-sidebar-right .card, .container-bottom-a .card, .container-bottom-b .card {
	background: var(--bib-karta);
	border: 0;
	border-top: 4px solid var(--bib-braz);
	border-radius: 0;
	box-shadow: 0 1px 3px rgba(43, 26, 14, .15);
	margin-bottom: 1.25rem;
}
.card-header {
	background: transparent;
	border-bottom: 1px dashed var(--bib-linia);
	font-family: var(--bib-naglowki);
	font-size: 1.7rem;
	letter-spacing: .04em;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--bib-tekst);
}
/* menu w kolumnie bocznej - jak dawniej: wersaliki, kreskowane linie */
.container-sidebar-right .mod-menu { list-style: none; margin: 0; padding: 0; }
.container-sidebar-right .mod-menu > li { border-bottom: 1px dashed var(--bib-linia); margin: 0; }
.container-sidebar-right .mod-menu > li:last-child { border-bottom: 0; }
.container-sidebar-right .mod-menu a, .container-sidebar-right .mod-menu .mod-menu__separator {
	display: block; padding: .55rem .25rem;
	font-family: var(--bib-szeryf); text-transform: uppercase; color: var(--bib-tekst); text-decoration: none;
}
.container-sidebar-right .mod-menu a:hover, .container-sidebar-right .mod-menu a:focus { color: var(--bib-link); text-decoration: underline; }
.container-sidebar-right .mod-menu li.current > a, .container-sidebar-right .mod-menu li.active > a { color: var(--bib-link); font-weight: 700; }

/* ---------- partnerzy, stopka ---------- */
.biblioteka-partnerzy { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 2rem; margin: 0; padding: .5rem 0; list-style: none; }
.biblioteka-partnerzy li { margin: 0; }
.biblioteka-partnerzy img { display: block; height: 64px; width: auto; max-width: 160px; object-fit: contain; }

.container-footer {
	background: var(--bib-stopka);
	color: var(--bib-papier);
	border-top: 4px solid var(--bib-braz);
}
.container-footer a { color: #e8b77a; }
.container-footer a:hover, .container-footer a:focus { color: #fff; }
.container-footer .biblioteka-stopka { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; padding: 1rem 0; }
.container-footer .biblioteka-stopka p { margin: 0; }

.back-to-top-link { color: var(--bib-braz-ciemny); border-color: var(--bib-braz-ciemny); }

/* ---------- okienko "skopiowano link" ---------- */
#rt-share-overlay { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .55); }
#rt-share-box { box-sizing: border-box; width: 440px; max-width: calc(100vw - 32px); padding: 1.1rem 1.25rem 1rem; background: var(--bib-karta); border-top: 4px solid var(--bib-braz); box-shadow: 0 6px 24px rgba(0, 0, 0, .45); color: var(--bib-tekst); }
#rt-share-box h3 { margin: 0 0 .5rem; font-family: var(--bib-szeryf); font-size: 1.15rem; color: var(--bib-braz-ciemny); text-transform: none; }
#rt-share-box p { margin: 0 0 .75rem; font-size: .95rem; }
#rt-share-box input { box-sizing: border-box; width: 100%; padding: .35rem .5rem; margin: 0 0 .75rem; border: 1px solid var(--bib-braz); background: #fff; font-size: .9rem; }
#rt-share-box .rt-share-actions { text-align: end; }
#rt-share-box button { padding: .35rem 1.25rem; border: 0; background: var(--bib-braz); color: #fff; cursor: pointer; }
#rt-share-box button:hover, #rt-share-box button:focus { background: var(--bib-braz-ciemny); }

/* ---------- małe ekrany ---------- */
@media (max-width: 991.98px) {
	.container-header .brand-logo img { max-height: 96px; }
	.container-component > main { padding: 1rem; }
	/* menu główne jest kopiowane do menu w nagłówku (user.js) - w kolumnie bocznej ukryte */
	html.biblioteka-js .container-sidebar-right .biblioteka-menu-glowne { display: none; }
	.biblioteka-mnav { margin-top: .5rem; padding-top: .5rem; border-top: 1px solid rgba(255, 255, 255, .35); }
	.biblioteka-mnav ul { list-style: none; margin: 0; padding: 0; }
	.biblioteka-mnav a { display: block; padding: .45rem 1rem; color: #fff; font-family: var(--bib-naglowki); font-size: 1.3rem; letter-spacing: .04em; text-decoration: none; }
	.biblioteka-mnav a:hover, .biblioteka-mnav a:focus { text-decoration: underline; }
}
@media (min-width: 992px) {
	.biblioteka-mnav { display: none; }
}
@media (max-width: 575.98px) {
	/* długie daty w metadanych mogą się łamać - bez przewijania w poziomie */
	.article-meta__line > span { white-space: normal; }
}
/* paginacja z wieloma stronami i filtr nad listą artykułów zawijają się na wąskich ekranach */
.pagination { flex-wrap: wrap; row-gap: .25rem; }
.com-content__filter, .com-content-category .btn-group { flex-wrap: wrap; gap: .5rem; }
.com-content-category__table { width: 100%; overflow-wrap: anywhere; }

/* ---------- wydruk ---------- */
@media print {
	.container-header, .container-sidebar-right, .container-bottom-a, .container-bottom-b, .container-footer,
	.article-tools, .readmore, .pagenavigation, .back-to-top-link, .mod-breadcrumbs__wrapper { display: none !important; }
	body, .container-component > main { background: #fff !important; box-shadow: none !important; border: 0 !important; }
	a { color: #000; text-decoration: none; }
}
body.contentpane { background: #fff; padding: 1.25rem; }