/*
 * Motyw "czestochowska" - style bazowe i szkielet strony.
 * Wartosci odtworzone z dotychczasowego wygladu (OceanWP + ustawienia + dodatki zzz-*), zmierzone w przegladarce.
 * Strony specjalne (Ogloszenia, Intencje, Pogrzeby, Nekrologi, Galeria, Kolęda...) i karty tresci maja style
 * w swoich dodatkach (wp-content/mu-plugins/zzz-*.php) - tu tylko to, co dawal motyw.
 *
 * Spis: 1. Czcionki i zmienne  2. Podstawy  3. Formularze i przyciski  4. Gorny pasek  5. Naglowek i menu
 *       6. Menu mobilne  7. Naglowek strony  8. Uklad tresci  9. Pasek boczny  10. Wpisy i listy
 *       11. Stopka  12. Do gory, 404, rozne  13. Szerokosci ekranu
 */

/* ─── 1. Czcionki i zmienne ─── */
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300 800; font-display: swap; src: url(../fonts/open-sans-latin-wght-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300 800; font-display: swap; src: url(../fonts/open-sans-latin-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 300 800; font-display: swap; src: url(../fonts/open-sans-latin-wght-italic.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 300 800; font-display: swap; src: url(../fonts/open-sans-latin-ext-wght-italic.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/roboto-latin-wght-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/roboto-latin-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
	--czest-zielony: #4caf50;
	--czest-zielony-ciemny: #2e7d32;
	--czest-zielony-jasny: #eef7ee;
	--czest-zolty: #eeee22;
	--czest-grafit: #212121;
	--czest-tekst: #000;
	--czest-szary: #333;
	--czest-linia: #f1f1f1;
	--czest-radius: 8px;
	--czest-karta-radius: 12px;
	--czest-cien: 0 0 10px 0 rgba(0, 0, 0, .15);
	--czest-kontener: 1200px;
	--czest-czcionka: "Open Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--zzz-radius: 8px; /* uzywane przez dodatki zzz-* */
}

/* ─── 2. Podstawy ─── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body {
	margin: 0; background: #fff; color: var(--czest-tekst); font-family: var(--czest-czcionka);
	font-size: 14px; line-height: 1.8; overflow-wrap: break-word; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; vertical-align: middle; }
svg.czest-ikona { display: inline-block; vertical-align: middle; flex-shrink: 0; }
a { color: var(--czest-szary); text-decoration: none; transition: color .3s; }
a:hover { color: var(--czest-zolty); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--czest-zielony-ciemny); outline-offset: 2px; }
p { margin: 0 0 20px; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 20px; color: var(--czest-szary); font-weight: 600; line-height: 1.4; }
h1 { font-size: 23px; } h2 { font-size: 20px; } h3 { font-size: 18px; } h4 { font-size: 17px; } h5 { font-size: 14px; } h6 { font-size: 12px; }
ul, ol { margin: 15px 0 15px 20px; padding: 0; }
li ul, li ol { margin: 0 0 0 25px; }
blockquote { margin: 20px 0; padding-left: 20px; border-left: 2px solid var(--czest-zielony); color: #777; font-style: italic; }
hr { margin: 33px 0; border: 0; border-top: 1px solid #e9e9e9; }
table { width: 100%; margin-bottom: 2.618em; border-collapse: collapse; border-spacing: 0; }
th, td { padding: 10px; border: 1px solid #e9e9e9; text-align: left; vertical-align: top; }
figure { margin: 0; }
iframe, embed, object, video { max-width: 100%; }
/* Czyszczenie oplywania tylko tam, gdzie tresc moze miec obrazki wyrownane do boku (klasa .clr w znacznikach jest
   tylko dla zgodnosci z dodatkami - w ukladach flex/grid "::after" zajmowalby miejsce). */
.entry::after, .entry-content::after, .single-page-article::after { content: ""; display: table; clear: both; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap; }
.skip-link:focus { position: fixed !important; z-index: 100000; top: 10px; left: 10px; width: auto; height: auto; padding: 10px 18px; clip: auto; clip-path: none; border-radius: var(--czest-radius); background: #fff; color: var(--czest-grafit); font-weight: 600; box-shadow: var(--czest-cien); }
.container { width: var(--czest-kontener); max-width: 90%; margin: 0 auto; }
.alignleft { float: left; margin: 0 20px 20px 0; }
.alignright { float: right; margin: 0 0 20px 20px; }
.aligncenter { display: block; clear: both; margin-right: auto; margin-left: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text, figcaption { margin-top: 6px; color: #777; font-size: 13px; }

/* ─── 3. Formularze i przyciski ─── */
input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="date"], input[type="number"],
input[type="search"], input[type="tel"], select, textarea {
	display: inline-block; min-height: 40px; max-width: 100%; padding: 6px 12px; border: 1px solid #ddd; border-radius: var(--czest-radius);
	background: transparent; color: var(--czest-szary); font: inherit; font-size: 14px; line-height: 1.8; transition: border-color .3s;
}
input:focus, select:focus, textarea:focus { border-color: #bbb; outline: 0; }
textarea { min-height: 150px; width: 100%; }
button, input[type="submit"], .button, .theme-button, .wp-block-button__link {
	display: inline-block; padding: 14px 20px; border: 1px solid #fff; border-radius: var(--czest-radius); background-color: var(--czest-zielony);
	color: #fff; font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: .1em; text-transform: uppercase;
	cursor: pointer; transition: background-color .3s, color .3s;
}
button:hover, input[type="submit"]:hover, .button:hover, .theme-button:hover, .wp-block-button__link:hover { background-color: var(--czest-zielony-ciemny); color: #fff; }
/* Przyciski blokow (Szukaj, Przyciski): WordPress daje im wlasny ciemny styl - tu jak pozostale przyciski */
body .wp-element-button, body .wp-block-button__link, .wp-block-search .wp-block-search__button {
	padding: 14px 20px; border: 1px solid #fff; border-radius: var(--czest-radius); background-color: var(--czest-zielony);
	color: #fff; font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: .1em; text-transform: uppercase;
}
body .wp-element-button:hover, body .wp-block-button__link:hover, .wp-block-search .wp-block-search__button:hover { background-color: var(--czest-zielony-ciemny); color: #fff; }
.wp-block-search .wp-block-search__label { display: block; margin: 0; color: #000; font-weight: 600; }
.wp-block-search .wp-block-search__input { min-height: 40px; padding: 6px 12px; border: 1px solid #ddd; color: var(--czest-szary); font-size: 14px; }

/* ─── 4. Gorny pasek ─── */
#top-bar-wrap { position: relative; z-index: 101; border-bottom: 1px solid var(--czest-linia); background: var(--czest-grafit); color: #fff; font-size: 12px; }
#top-bar { display: flex; align-items: flex-start; justify-content: center; min-height: 65px; padding: 15px 0 7px; }
#top-bar-social ul { display: flex; margin: 0; padding: 0; list-style: none; }
#top-bar-social li a { display: flex; align-items: center; justify-content: center; width: 36px; height: 43px; padding: 0 6px; color: #bbb; font-size: 24px; }
#top-bar-social li a:hover { color: var(--czest-zolty); }

/* ─── 5. Naglowek i menu ─── */
#site-header {
	position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 100; background: var(--czest-zielony);
	transition: box-shadow .25s;
}
#site-header.przyklejony { box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
#site-header-inner { position: relative; display: flex; align-items: center; justify-content: space-between; height: 74px; }
#site-logo { display: flex; align-items: center; }
#site-logo img { display: block; width: auto; max-height: 50px; }
#site-logo .site-logo-text { color: #fff; font-size: 20px; font-weight: 600; }
#site-navigation-wrap { position: relative; right: -15px; }
#site-navigation .main-menu { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
#site-navigation .main-menu > li { position: relative; }
#site-navigation .main-menu > li > a, #site-navigation .site-search-toggle {
	display: flex; align-items: center; height: 74px; padding: 0 15px; border: 0; border-radius: 0; background: none;
	color: #fff; font-size: 14px; font-weight: 400; line-height: 74px; letter-spacing: .6px; text-transform: uppercase;
}
#site-navigation .main-menu > li > a .text-wrap { display: inline-flex; align-items: center; }
#site-navigation .main-menu > li > a .nav-arrow { margin-left: 10px; font-size: 14px; }
#site-navigation .main-menu > li > a:hover,
#site-navigation .main-menu > li:hover > a,
#site-navigation .main-menu > li:focus-within > a,
#site-navigation .main-menu > li.current-menu-item > a,
#site-navigation .main-menu > li.current-menu-ancestor > a,
#site-navigation .main-menu > li.current-menu-parent > a,
#site-navigation .main-menu > li.current_page_ancestor > a,
#site-navigation .site-search-toggle:hover { color: var(--czest-zolty); }
#site-navigation .site-search-toggle { padding: 0 14px; font-size: 16px; letter-spacing: 0; cursor: pointer; }
#site-navigation .site-search-toggle:hover { background: none; }

/* Podmenu */
#site-navigation .sub-menu {
	position: absolute; z-index: 9999; top: 100%; left: 0; min-width: 180px; width: 234px; margin: 0; padding: 0;
	border-top: 3px solid var(--czest-zolty); background: var(--czest-zielony); box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
	list-style: none; visibility: hidden; opacity: 0; transition: opacity .2s, visibility .2s;
}
#site-navigation .main-menu > li:hover > .sub-menu,
#site-navigation .main-menu > li:focus-within > .sub-menu,
#site-navigation .main-menu > li.otwarte > .sub-menu { visibility: visible; opacity: 1; }
#site-navigation .sub-menu li { border-bottom: 1px solid var(--czest-linia); }
#site-navigation .sub-menu li:last-child { border-bottom: 0; }
#site-navigation .sub-menu a {
	display: block; padding: 12px 15px; color: var(--czest-szary); font-size: 12px; line-height: 1.2; letter-spacing: .6px;
	text-transform: capitalize; transition: background-color .3s, color .3s;
}
#site-navigation .sub-menu a:hover, #site-navigation .sub-menu a:focus-visible { background: #f8f8f8; color: #555; }
#site-navigation .sub-menu .sub-menu { top: -3px; left: 100%; }

/* Wyszukiwarka w naglowku */
#searchform-dropdown {
	position: absolute; z-index: 10000; top: 74px; right: 15px; width: 260px; padding: 15px; border-top: 3px solid var(--czest-zolty);
	background: var(--czest-zielony); box-shadow: 0 2px 7px rgba(0, 0, 0, .1);
}
#searchform-dropdown[hidden] { display: none; }
#searchform-dropdown .searchform { position: relative; }
#searchform-dropdown input[type="search"] { width: 100%; border-color: #ddd; border-radius: 0; background: #fff; }
#searchform-dropdown .searchform-submit, #mobile-menu-search .searchform-submit { display: none; }

/* Przycisk menu mobilnego (ukryty na komputerze) */
.oceanwp-mobile-menu-icon { display: none; }
.oceanwp-mobile-menu-icon .mobile-menu {
	display: inline-flex; align-items: center; gap: 8px; height: 74px; padding: 0; border: 0; border-radius: 0; background: none;
	color: #fff; font-size: 14px; font-weight: 400; letter-spacing: .6px; line-height: 74px; text-transform: uppercase;
}
.oceanwp-mobile-menu-icon .mobile-menu:hover, .oceanwp-mobile-menu-icon .mobile-menu[aria-expanded="true"] { background: none; color: var(--czest-zolty); }
.oceanwp-mobile-menu-icon .mobile-menu .czest-ikona { font-size: 16px; }
.oceanwp-mobile-menu-icon .ikona-zamknij, .oceanwp-mobile-menu-icon .oceanwp-close-text { display: none; }
.oceanwp-mobile-menu-icon .mobile-menu[aria-expanded="true"] .oceanwp-text { display: none; }
.oceanwp-mobile-menu-icon .mobile-menu[aria-expanded="true"] .oceanwp-close-text { display: inline; }

/* ─── 6. Menu mobilne ─── */
#mobile-dropdown {
	position: absolute; z-index: 99; top: 100%; left: 0; right: 0; max-height: 400px; overflow-y: auto;
	background: var(--czest-zielony); box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
}
#mobile-dropdown[hidden] { display: none; }
#mobile-dropdown ul { margin: 0; padding: 0; list-style: none; }
#mobile-dropdown li { position: relative; border-bottom: 1px solid rgba(0, 0, 0, .035); }
#mobile-dropdown li a { display: block; padding: 12px 40px; color: var(--czest-szary); font-size: 15px; line-height: 1.8; }
#mobile-dropdown li a:hover { color: var(--czest-zolty); }
#mobile-dropdown .sub-menu { display: none; }
#mobile-dropdown li.otwarte > .sub-menu { display: block; }
#mobile-dropdown .sub-menu li a { padding-left: 40px; }
#mobile-dropdown .sub-menu .sub-menu li a { padding-left: 60px; }
#mobile-dropdown .rozwin {
	position: absolute; top: 0; right: 20px; display: flex; align-items: center; justify-content: center; width: 50px; height: 51px;
	padding: 0; border: 0; border-radius: 0; background: none; color: var(--czest-szary); font-size: 14px;
}
#mobile-dropdown .rozwin:hover { background: none; color: var(--czest-zolty); }
#mobile-dropdown .rozwin .czest-ikona { transition: transform .2s; }
#mobile-dropdown li.otwarte > .rozwin .czest-ikona { transform: rotate(180deg); }
#mobile-menu-search { padding: 20px 40px 25px; }
#mobile-menu-search input[type="search"] { width: 100%; border-color: rgba(255, 255, 255, .6); background: #fff; }

/* ─── 7. Naglowek strony (pas z tytulem) ─── */
.page-header { position: relative; padding: 34px 0; background-color: #f5f5f5; }
.page-header .page-header-title { margin: 0; color: var(--czest-szary); font-size: 32px; font-weight: 400; line-height: 1.4; }
.page-header .page-subheading { margin: 0 0 4px; color: var(--czest-szary); font-size: 15px; line-height: 1.5; }
.site-breadcrumbs { position: relative; z-index: 2; margin: 0; color: #333; font-size: 13px; line-height: 1.4; }
.site-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; }
.site-breadcrumbs li { display: inline-flex; align-items: center; }
.site-breadcrumbs a { color: inherit; }
.site-breadcrumbs a:hover { color: var(--czest-zielony); }
.site-breadcrumbs .breadcrumb-sep { margin: 0 6px; }
.site-breadcrumbs .breadcrumb-home.has-icon { display: none; }
.site-breadcrumbs .czest-ikona-dom { font-size: 14px; }

.background-image-page-header {
	display: flex; flex-direction: column; justify-content: center; min-height: 400px;
	background-color: #000; background-position: center; background-repeat: no-repeat; background-size: cover;
}
.background-image-page-header .page-header-inner { position: relative; z-index: 2; text-align: center; }
.background-image-page-header .page-header-title,
.background-image-page-header .page-subheading,
.background-image-page-header .site-breadcrumbs { color: #fff; }
.background-image-page-header .site-breadcrumbs { margin-top: 20px; }
.background-image-page-header .site-breadcrumbs ol { justify-content: center; }
.background-image-page-header .site-breadcrumbs a:hover { color: var(--czest-zolty); }
.background-image-page-header-overlay { position: absolute; inset: 0; z-index: 1; background-color: #000; opacity: .5; }

/* ─── 8. Uklad tresci ─── */
#content-wrap { padding: 50px 0; }
#content-wrap::after { content: ""; display: table; clear: both; }
.content-area { float: left; width: 72%; padding-right: 30px; border-right: 1px solid var(--czest-linia); }
.widget-area { float: right; width: 28%; padding-left: 30px; font-size: 13px; line-height: 1.8; }
body.czest-bez-paska .content-area { float: none; width: 100%; padding-right: 0; border-right: 0; }
.site-content > :last-child { margin-bottom: 0; }

/* ─── 9. Pasek boczny ─── */
.sidebar-box { margin-bottom: 40px; }
.sidebar-box .widget-title, .sidebar-box h2 { margin: 0 0 15px; color: var(--czest-grafit); font-size: 17px; font-weight: 600; line-height: 1.4; }
.sidebar-box ul { margin: 0; padding: 0; list-style: none; }
.sidebar-box .wp-block-image { margin: 0; }
/* Widzet "Ostatnie wpisy" - uklad wiersza (wyglad: zzz-ostatnie-aktualnosci.php) */
.oceanwp-recent-posts li { display: flex; align-items: center; }
.oceanwp-recent-posts .recent-posts-title { display: block; }

/* ─── 10. Wpisy i listy ─── */
.single-page-article .entry > :last-child, .entry-content > :last-child { margin-bottom: 0; }
article ul.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; margin: 0 0 20px; padding: 0; color: #4a4a4a; font-size: 14px; line-height: 1.4; list-style: none; }
article ul.meta li { display: inline-flex; align-items: center; gap: 6px; }
article ul.meta.ospm-default li { min-height: 26px; }
article ul.meta.ospm-default li + li::before { content: "-"; margin-right: 6px; color: #bbb; }
.blog-entry ul.meta li { display: block; padding-bottom: 5px; line-height: 18px; }
article ul.meta .czest-ikona { color: #4a4a4a; font-size: 15px; }
.post-tags { margin: 0 0 20px; color: #333; font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.post-tags a { margin: 0 2px; color: #333; }
.post-navigation { margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--czest-linia); }
.post-navigation .nav-links { display: flex; justify-content: space-between; gap: 30px; }
.post-navigation .nav-links > div { flex: 1 1 50%; }
.post-navigation .nav-next { text-align: right; }
.post-navigation a { display: block; }
.post-navigation .title { display: flex; align-items: center; gap: 8px; color: var(--czest-zielony); font-size: 12px; font-weight: 500; line-height: 20px; text-transform: uppercase; }
.post-navigation .nav-next .title { justify-content: flex-end; }
.post-navigation .post-title { display: block; margin-top: 5px; color: var(--czest-grafit); font-size: 16px; font-weight: 600; line-height: 1.8; }

/* Lista wpisow (szczegoly kart - zzz-aktualnosci-karty.php) */
/* Siatka jak w OceanWP: wiersz z marginesem -6.25px, wpis 50% (odstep miedzy kartami daje padding wpisu - zzz-aktualnosci-karty) */
#blog-entries.blog-grid { display: flex; flex-wrap: wrap; margin: 0 -6.25px; }
#blog-entries.blog-grid > .blog-entry { width: 50%; }
/* Link w tytule karty: 24 px i odstep liter jak w OceanWP (tytul ma 21 px, ale widac rozmiar linku) */
.blog-entry .blog-entry-title a { font-size: 24px; line-height: 1.4; letter-spacing: .6px; }
.blog-entry .thumbnail { position: relative; }
.blog-entry .thumbnail img { display: block; width: 100%; }
.search-entry-inner .thumbnail img { border-radius: 5px; }
.blog-entry-title { margin: 0 0 10px; font-size: 18px; }
.blog-entry-title a { color: var(--czest-szary); }
.blog-entry-readmore a { display: inline-flex; align-items: center; gap: 4px; color: var(--czest-zielony); font-size: 12px; text-transform: uppercase; }

/* Kafelki (szablon "Kafelki": Relikwie, Grupy parafialne, Transmisje) - jak dawne karty z Elementora */
.czest-kafelki { display: flex; flex-wrap: wrap; }
.czest-kafelek-kol { display: flex; flex: 0 0 calc(100% / var(--kaf-n, 4)); max-width: calc(100% / var(--kaf-n, 4)); padding: 0 8px 16px; }
.czest-kafelki-3 { --kaf-n: 3; } .czest-kafelki-4 { --kaf-n: 4; } .czest-kafelki-5 { --kaf-n: 5; } .czest-kafelki-6 { --kaf-n: 6; }
.czest-kafelki-rozciagnij .czest-kafelek-kol { flex-grow: 1; max-width: none; }
.czest-kafelek {
	display: flex; flex-direction: column; align-items: center; width: 100%; padding: 22px 14px 12px; border-radius: var(--czest-karta-radius);
	background: #fff; box-shadow: var(--czest-cien); text-align: center; transition: box-shadow .25s, transform .25s;
}
.czest-kafelek:hover { box-shadow: 0 0 24px 0 rgba(0, 0, 0, .2); transform: translateY(-3px); }
.czest-kafelek-obraz { display: block; margin-bottom: 20px; line-height: 0; }
.czest-kafelek-obraz:has(.czest-kafelek-ikona) { margin-bottom: 27px; } /* jak w Elementorze: ikona miala wyzszy wiersz */
.czest-kafelek-obraz img { width: 150px; height: auto; }
.czest-kafelki-kolo .czest-kafelek-obraz img { aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
.czest-kafelek-ikona {
	display: inline-flex; align-items: center; justify-content: center; width: 100px; height: 100px; border-radius: 50%;
	background: var(--czest-zielony); color: #fff; font-size: 50px; transition: background-color .2s;
}
.czest-kafelek:hover .czest-kafelek-ikona { background: var(--czest-zielony-ciemny); }
.czest-kafelek-podpis { margin: 0 0 10px; color: var(--czest-grafit); font-size: 13px; font-weight: 700; line-height: 1.5; transition: color .2s; }
.czest-kafelek:hover .czest-kafelek-podpis { color: var(--czest-zielony-ciemny); }

/* Paginacja */
.oceanwp-pagination { margin: 0; text-align: center; }
.oceanwp-pagination ul.page-numbers { display: inline-block; margin: 0; padding: 10px 0 0; list-style: none; }
.oceanwp-pagination ul.page-numbers li { display: inline-block; }
.oceanwp-pagination .page-numbers a, .oceanwp-pagination .page-numbers span {
	display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; margin: 0 4px; padding: 0;
	border: 1px solid #e9e9e9; border-radius: var(--czest-radius); color: #555; font-size: 18px; line-height: 38px;
}
.oceanwp-pagination .page-numbers a:hover, .oceanwp-pagination .page-numbers .current { border-color: #e9e9e9; background: #f8f8f8; color: #555; }
.oceanwp-pagination .page-numbers a:hover { color: var(--czest-zielony); }

/* ─── 11. Stopka ─── */
#footer-widgets { padding: 30px 0; background: #222; color: #929292; }
#footer-widgets .footer-widgets-inner { display: flex; flex-wrap: wrap; align-items: flex-start; }
#footer-widgets .footer-box { width: 33.333%; padding: 0 15px; }
#footer-widgets .footer-widget { margin-bottom: 20px; }
#footer-widgets .footer-widget:last-child { margin-bottom: 0; }
#footer-widgets h2, #footer-widgets h3, #footer-widgets .widget-title { margin: 0 0 20px; color: #b6b6b6; font-weight: 600; }
#footer-widgets p { margin: 0 0 20px; }
#footer-widgets ul { margin: 0; padding: 0; list-style: none; }
#footer-widgets a { color: #fff; }
#footer-widgets a:hover { color: var(--czest-zolty); }
#footer-widgets iframe { display: block; width: 100%; border: 0; }
#footer-bottom { padding: 15px 0; background: #1b1b1b; color: #777; font-size: 12px; line-height: 1; }
#footer-bottom #copyright { text-align: center; }
#footer-bottom a { color: #777; }
#footer-bottom a:hover { color: var(--czest-zolty); }

/* ─── 12. Do gory, 404, rozne ─── */
#scroll-top {
	position: fixed; z-index: 100; right: 20px; bottom: 20px; display: flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: var(--czest-radius); background: var(--czest-zielony); color: #fff; font-size: 18px;
	opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s, background-color .3s;
}
#scroll-top.widoczny { opacity: 1; visibility: visible; }
#scroll-top:hover { background: #ffe500; color: #fff; }

body.error404 .content-area { float: none; width: 100%; padding: 0; border: 0; }
body.error404 .widget-area { display: none; }
.error404-content { max-width: 760px; margin: 0 auto; text-align: center; }
.error404-content .error-title { margin: 0 0 30px; color: var(--czest-szary); font-size: 50px; font-weight: 700; line-height: 1.2; }
.error404-content .error-text { margin: 0 0 30px; font-size: 18px; }
.error404-content .searchform { position: relative; max-width: 390px; margin: 0 auto 50px; }
.error404-content .searchform input { width: 100%; }
.error404-content .searchform-submit { display: none; }
.error404-content .error-btn { padding: 14px 26px; font-size: 13px; }

/* Lightbox (motyw.js) */
.czest-lightbox { position: fixed; z-index: 100001; inset: 0; display: flex; align-items: center; justify-content: center; padding: 40px 20px; background: rgba(0, 0, 0, .88); }
.czest-lightbox[hidden] { display: none; }
.czest-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 0 20px rgba(0, 0, 0, .5); }
.czest-lightbox button { position: absolute; top: 12px; right: 12px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .15); color: #fff; font-size: 22px; }
.czest-lightbox button:hover { background: rgba(255, 255, 255, .3); }

/* ─── 13. Szerokosci ekranu ─── */
/* Menu na komputerze tylko gdy sie miesci; ponizej - przycisk "Menu" (OceanWP zawijal menu pod logo do 959 px) */
@media (max-width: 1100px) {
	#site-navigation-wrap { display: none; }
	.oceanwp-mobile-menu-icon { display: block; }
}
@media (max-width: 959px) {
	.content-area, .widget-area { float: none; width: 100%; padding: 0; border: 0; }
	.content-area { margin-bottom: 40px; }
	#footer-widgets .footer-box { width: 50%; margin-bottom: 30px; }
}
@media (max-width: 767px) {
	.background-image-page-header { min-height: 0; }
	.czest-kafelki { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
	.czest-kafelek-kol { max-width: none; padding: 0; }
	.czest-kafelek { padding: 14px 10px 6px; }
	.czest-kafelek-obraz img { width: 100px; }
	.czest-kafelek-ikona { width: 68px; height: 68px; font-size: 34px; }
	.czest-kafelek-podpis { font-size: 12px; }
	#blog-entries.blog-grid > .blog-entry { width: 100%; }
	#footer-widgets .footer-box { width: 100%; }
	#scroll-top { right: 10px; bottom: 10px; width: 26px; height: 26px; font-size: 14px; }
	.post-navigation .nav-links { flex-direction: column; gap: 0; }
}
@media (max-width: 480px) {
	.alignleft, .alignright { float: none; margin: 0 0 20px; }
	.oceanwp-pagination .page-numbers a, .oceanwp-pagination .page-numbers span { height: auto; }
}
@media print {
	#top-bar-wrap, #site-header, .widget-area, #footer, #scroll-top { display: none !important; }
	.content-area { float: none; width: 100%; padding: 0; border: 0; }
}