/*
Theme Name: CSR Dostępny
Description: Lekki motyw WordPress dla Centrum Społecznego Rozwoju w Mikołowie.
Version: 1.3.0
Requires at least: 6.5
Requires PHP: 7.4
Text Domain: csr-dostepny
*/
:root {
	--paper: #fff; --surface: #eff9fd; --hero: #fff9f0; --ink: #143248; --muted: #40596a;
	--blue: #00628a; --deep: #075575; --inverse: #fff; --inverse-muted: #edfaff;
	--line: #bfd6df; --control: #537889; --accent: #ffad50; --accent-ink: #38220e;
	--focus: #963e00; --focus-dark: #ffe0ae; --radius: 1.15rem;
	--shadow: 0 .65rem 1.7rem rgb(17 77 109 / .09);
	font-size: 100%;
}
:root[data-font="125"] { font-size: 125%; }
:root[data-font="150"] { font-size: 150%; }
:root[data-font="200"] { font-size: 200%; }
:root[data-contrast="dark"] {
	color-scheme: dark;
	--paper: #000; --surface: #0d0d0d; --hero: #0a0a0a; --ink: #fff; --muted: #fff;
	--blue: #ffe16a; --deep: #000; --inverse: #fff; --inverse-muted: #fff;
	--line: #eee; --control: #eee; --accent: #ffe16a; --accent-ink: #000;
	--focus: #ffe16a; --focus-dark: #ffe16a; --shadow: none;
}
:root[data-contrast="light"] {
	color-scheme: light;
	--paper: #fff9df; --surface: #fff3c2; --hero: #fff3c2; --ink: #000; --muted: #171717;
	--blue: #003669; --deep: #fff3c2; --inverse: #000; --inverse-muted: #171717;
	--line: #222; --control: #222; --accent: #172538; --accent-ink: #fff;
	--focus: #59128c; --focus-dark: #59128c; --shadow: none;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 1rem/1.6 system-ui, "Segoe UI", sans-serif; overflow-wrap: anywhere; }
img { max-inline-size: 100%; block-size: auto; vertical-align: middle; }
iframe, video, embed, object { max-inline-size: 100%; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .65em; font-weight: 760; }
h1 { font-size: clamp(1.9rem, 1.65rem + 2.3vw, 3.8rem); letter-spacing: -.035em; }
h2 { font-size: clamp(1.5rem, 1.25rem + 1.25vw, 2.4rem); letter-spacing: -.025em; }
h3 { font-size: 1.22rem; }
:root a { color: var(--blue); text-decoration: none; text-underline-offset: .2em; text-decoration-thickness: .085em; }
a:hover { color: var(--ink); }
:root[data-underline="on"] a { text-decoration-line: underline; }
:focus-visible { outline: .17rem solid var(--focus); outline-offset: .2rem; }
[id] { scroll-margin-block-start: 1rem; }
main:focus { outline-offset: -.24rem; }
button, input, select, textarea { font: inherit; color: inherit; }
button, select, input, textarea { max-inline-size: 100%; }
button, select, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea {
	border: 1px solid var(--control); border-radius: .5rem; padding: .48em .7em; min-block-size: 2.75rem;
	background: var(--paper);
}
button, select, summary, input[type="submit"] { cursor: pointer; }
button, input[type="submit"] { font-weight: 700; }
input[type="checkbox"], input[type="radio"] { inline-size: 1.5rem; block-size: 1.5rem; vertical-align: middle; }
.wrap { width: min(100% - clamp(1.5rem, 6vw, 5rem), 78rem); margin-inline: auto; }
.section { padding-block: clamp(2.25rem, 2rem + 3vw, 5rem); }
.screen-reader-text {
	border: 0; clip-path: inset(50%); width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; position: absolute; white-space: nowrap;
}
.skip-link {
	position: absolute; z-index: 100001; inset-block-start: .5rem; inset-inline-start: .5rem;
	padding: .65rem 1rem; background: var(--paper); color: var(--blue);
}
.skip-link:not(:focus) { clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; }
.utility { background: var(--surface); color: var(--ink); font-size: .875rem; border-bottom: 1px solid var(--line); }
.utility a { color: var(--blue); font-weight: 650; }
.utility a:hover { background: var(--paper); }
.site-footer a { color: var(--inverse); font-weight: 650; }
.site-footer a:hover { background: var(--paper); color: var(--blue); }
.site-footer :focus-visible { outline-color: var(--focus-dark); }
.utility-inner, .preferences, .actions, .footer-links { display: flex; flex-wrap: wrap; gap: .45rem 1rem; align-items: center; }
.utility-inner { padding-block: .38rem; }
.utility-inner > a { display: inline-flex; align-items: center; min-block-size: 2rem; }
.accessibility { margin-inline-start: auto; max-inline-size: 100%; }
.accessibility summary { width: fit-content; margin-inline-start: auto; min-height: 2.25rem; padding: .35rem .65rem; color: var(--blue); font-weight: 720; }
.accessibility[open] summary { background: var(--paper); border-radius: .45rem; }
.preferences { padding-block: .45rem .15rem; max-inline-size: 100%; gap: .4rem .62rem; }
.preferences select { min-block-size: 2.2rem; color: var(--ink); padding-block: .3em; }
.underline-option { display: inline-flex; align-items: center; gap: .35rem; min-block-size: 2.2rem; cursor: pointer; }
.masthead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-block: .9rem; }
.brand { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem 1rem; min-width: 0; }
.brand-logo, .custom-logo-link { display: inline-block; background: #fff; border-radius: .45rem; padding: .13rem .3rem; }
.brand img { width: auto; max-height: 4.1rem; max-width: min(10rem, 100%); object-fit: contain; }
.brand-name { font-size: 1.04rem; font-weight: 750; }
.brand-logo { inline-size: 5.7rem; max-inline-size: 100%; --mark-height: 3.8rem; }
.logo-mark { position: relative; display: block; inline-size: min(100%, calc(var(--mark-height) * var(--mark-ratio))); aspect-ratio: var(--mark-ratio); overflow: hidden; }
.logo-mark img { position: absolute; left: var(--mark-left); top: var(--mark-top); width: var(--mark-width); height: auto; max-width: none; max-height: none; }
.search-form { display: flex; flex-wrap: wrap; gap: .45rem; align-items: stretch; max-width: 100%; }
.search-form input { flex: 1 1 9rem; width: 11rem; min-width: 0; }
.search-form button { color: var(--inverse); background: var(--deep); }
.navigation { border-block: 1px solid var(--line); background: var(--paper); }
.navigation ul, .program-grid, .pillars-grid, .partner-grid, .footer-links { list-style: none; padding: 0; margin-block: 0; }
.menu-list > li { min-width: 0; }
.navigation a, .navigation summary, .navigation li > span {
	display: flex; align-items: center; min-block-size: 2.75rem; gap: .55rem; color: var(--ink);
	padding: .5rem .72rem; font-size: .94rem; line-height: 1.35; font-weight: 680;
}
.menu-list > li > a, .navigation summary { text-decoration: none; }
.navigation summary { justify-content: space-between; list-style: none; }
.navigation summary::-webkit-details-marker { display: none; }
.navigation summary::after { content: ""; border: solid currentColor; border-width: 0 .12rem .12rem 0; width: .44rem; height: .44rem; transform: rotate(45deg); margin: -.2em .15em 0 0; flex: none; }
.navigation details[open] > summary::after { transform: rotate(225deg); margin-block: .17em 0; }
.navigation :is(a, summary):hover, .navigation [aria-current="page"], .navigation details[open] > summary {
	background: var(--surface); color: var(--blue);
}
.navigation [aria-current="page"] { box-shadow: inset 0 -.17rem var(--blue); }
.navigation .nav-parent { color: var(--blue); }
.nav-panel { margin-inline-start: .72rem; border-inline-start: 1px solid var(--line); }
.nav-toggle { margin-block: .45rem; }
.nav-toggle span { margin-inline-end: .25rem; }
.is-compact .menu-list { display: block; }
.is-compact .menu-list > li > details > .nav-panel {
	position: static; width: auto; max-height: none; overflow: visible; padding: 0; margin-inline-start: .72rem;
	border: 0; border-inline-start: 1px solid var(--line); border-radius: 0; box-shadow: none;
}
.hero { background: var(--hero); border-bottom: 1px solid var(--line); }
:root:not([data-contrast]) .hero { background: radial-gradient(ellipse at 92% 15%, #dff6ff, transparent 58%), radial-gradient(ellipse at 0% 100%, #ffedd8, transparent 51%), var(--hero); }
.hero-grid { display: grid; align-items: center; gap: clamp(1.4rem, 5vw, 4.4rem); padding-block: clamp(2.2rem, 2rem + 3vw, 5.3rem); }
.hero-copy { min-width: 0; }
.hero h1 { max-width: 20ch; margin: 0 0 .42em; font-size: clamp(2rem, 1.65rem + 2.45vw, 4rem); }
.hero h1 span { display: block; color: var(--blue); }
.eyebrow { color: var(--blue); font-weight: 780; font-size: .83rem; letter-spacing: .065em; margin-bottom: .65em; }
.eyebrow span { display: inline-block; width: .8em; height: .8em; border-radius: 50%; background: var(--accent); border: 1px solid currentColor; margin-inline-end: .32em; }
.lede { font-size: 1.12rem; max-width: 48ch; color: var(--muted); margin-bottom: 1.4rem; }
.actions { gap: .65rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-block-size: 2.75rem; border: 1px solid transparent; border-radius: .55rem; padding: .6em .9em; text-decoration: none; font-weight: 750; line-height: 1.3; }
.button.primary { background: var(--deep); color: var(--inverse); border-color: var(--control); }
.button.secondary { background: var(--paper); color: var(--blue); border-color: var(--control); }
.button.primary:hover, .button.secondary:hover { box-shadow: inset 0 0 0 .1rem currentColor; }
.feature, .news-card { min-width: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.feature { box-shadow: var(--shadow); border-top: .26rem solid var(--accent); }
.slider-controls { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; justify-content: end; padding: .4rem .65rem; border-bottom: 1px solid var(--line); }
.slider-caption { flex: 1 1 auto; padding-inline: .25rem; color: var(--blue); font-weight: 740; font-size: .85rem; }
.slider-controls button { min-inline-size: 2.75rem; padding: .35rem; color: var(--blue); }
.slider-controls button:hover { background: var(--surface); }
.slider-count { min-width: 3.25em; text-align: center; font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.slider-links { margin: 0 0 1rem; padding-inline: 2rem 1rem; }
.slider-links a { font-weight: 700; }
.slider-slide { position: relative; }
.slider-slide h2 a::after { content: ""; position: absolute; inset: 0; }
.feature-image { aspect-ratio: 1600 / 441; overflow: hidden; background: #faf8ed; border-bottom: 1px solid var(--line); }
.feature-image img { width: 100%; height: 100%; object-fit: contain; }
.feature-copy { padding: clamp(.85rem, 2.5vw, 1.45rem); }
.feature h2 { font-size: clamp(1.23rem, 1.1rem + .7vw, 1.75rem); margin-bottom: .38em; }
.feature h2 a { display: flex; align-items: center; justify-content: space-between; gap: .55em; }
.feature-copy p { margin-bottom: .65em; }
.slider-description { white-space: pre-line; }
.feature-copy .feature-note { font-size: .83rem; color: var(--muted); margin-bottom: 0; }
.slider-slide--background { display: flex; align-items: end; min-height: clamp(14rem, 23vw, 19rem); padding: .7rem; }
.slider-slide--background .feature-image { position: absolute; inset: 0; aspect-ratio: auto; border: 0; border-radius: 0 0 var(--radius) var(--radius); }
.slider-slide--background .feature-image img { object-fit: cover; }
.slider-slide--background .feature-copy { z-index: 1; width: 100%; background: var(--paper); border: 1px solid var(--line); border-radius: .65rem; }
.pillars { border-bottom: 1px solid var(--line); }
.pillars-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }
.pillars-grid li { padding: .95rem .55rem .95rem .85rem; border-inline-start: .15rem solid var(--accent); }
.pillars-grid { padding-block: .65rem; }
.pillars-grid strong, .pillars-grid span { display: block; }
.pillars-grid strong { font-size: 1.04rem; }
.pillars-grid span { font-size: .88rem; color: var(--muted); }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: .75rem 1.2rem; margin-bottom: 1.35rem; }
.section-head h2, .section-head p { margin-bottom: 0; }
.standalone { display: inline-flex; align-items: center; min-height: 2.75rem; gap: .42rem; font-weight: 720; }
.standalone:hover { background: var(--surface); }
.program-grid, .news-grid, .partner-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.25rem), 1fr)); gap: .85rem; }
.program-grid, .partner-grid { gap: .95rem; }
.program-grid li, .partner-grid li {
	min-width: 0;
	text-align: center;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 1.2rem;
}
.program-grid a, .partner-grid a { display: block; height: 100%; border-radius: inherit; }
.program-grid li:has(a:hover), .partner-grid li:has(a:hover) { border-color: var(--blue); }
.program-image, .partner-image { display: grid; place-items: center; padding: .75rem .8rem .35rem; }
.program-image { min-height: 7.5rem; --mark-height: 5.65rem; }
.program-title, .partner-name { display: block; max-width: 25ch; margin: 0 auto; padding: 0 .7rem .9rem; }
.program-title { font-size: .94rem; font-weight: 740; }
.program-title::before, .partner-name::before {
	content: "";
	display: block;
	width: 1.6rem;
	height: .16rem;
	margin: .15rem auto .57rem;
	border-radius: 1rem;
	background: var(--accent);
}
.program-grid a:hover .program-title::before, .partner-grid a:hover .partner-name::before { background: var(--blue); }
:root[data-underline="on"] :is(.program-title, .feature h2 a) > span:first-child,
:root[data-underline="on"] .partner-grid a .partner-name { text-decoration-line: underline; }
.link-arrow { display: inline-grid; place-items: center; vertical-align: middle; border-radius: 50%; width: 1.75em; height: 1.75em; flex: none; background: var(--accent); color: var(--accent-ink); font-weight: 750; }
.support { background: var(--deep); color: var(--inverse); border-block: 1px solid var(--line); }
:root:not([data-contrast]) .support { background: linear-gradient(110deg, #075575 30%, #00688c); }
.support-grid { display: grid; gap: 1.2rem; align-items: center; padding-block: clamp(1.75rem, 1.3rem + 2vw, 3.5rem); }
.support .eyebrow { color: var(--inverse-muted); }
.support h2 { margin-bottom: .35em; }
.support .primary { background: var(--accent); color: var(--accent-ink); }
.support :focus-visible { outline-color: var(--focus-dark); }
.news-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.news-image { aspect-ratio: 16 / 9; border-radius: var(--radius) var(--radius) 0 0; background: var(--surface); }
.news-image img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.news-copy { padding: 1rem; }
.news-copy time { display: block; color: var(--muted); font-size: .88rem; margin-bottom: .4rem; }
.news-copy :is(h2, h3) { font-size: 1.15rem; margin: 0; line-height: 1.4; }
.news-copy a { display: inline-block; min-block-size: 2.75rem; padding-block: .2em; }
.partners { background: var(--surface); border-top: 1px solid var(--line); }
.partner-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.6rem), 1fr)); }
.partner-grid li { font-size: .87rem; font-weight: 680; }
.partner-image { min-height: 5.9rem; --mark-height: 4.4rem; }
.site-footer { padding-block: 2rem; background: var(--deep); color: var(--inverse); border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1.4rem; }
.site-footer h2 { font-size: 1.15rem; letter-spacing: 0; }
.site-footer address { font-style: normal; margin-bottom: .6rem; }
.footer-links a { display: inline-flex; align-items: center; min-height: 2rem; }
.article { max-width: 72ch; margin-inline: auto; }
.article-heading { padding-bottom: 1rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.article-heading h1 { margin-bottom: 0; }
.entry-content { min-width: 0; }
.entry-content :is(h2, h3, h4) { margin-top: 1.35em; }
.entry-content figure { max-width: 100%; margin-inline: 0; }
.entry-content :is(.wp-block-table, pre) { max-width: 100%; overflow: auto; }
.entry-content table { border-collapse: collapse; width: 100%; }
.entry-content :is(th, td) { padding: .45em; border: 1px solid var(--line); text-align: start; }
.entry-content fieldset { min-width: 0; max-width: 100%; }
.entry-content :is(input, textarea, select) { max-width: 100%; }
.entry-content .wp-block-button__link { padding: .55em .85em; }
.entry-content :is(p, li, td, dd) a:not(.wp-block-button__link):not(:has(img)) { font-weight: 700; }
:root:not([data-underline]) .entry-content :is(p, li, td, dd) a:not(.wp-block-button__link):not(:has(img))::after {
	content: "";
	display: inline-block;
	width: .37em;
	height: .37em;
	margin-inline: .24em .16em;
	vertical-align: .26em;
	border: solid currentColor;
	border-width: .1em .1em 0 0;
}
.archive-grid { margin-block: 1rem; }
.archive-description { max-width: 65ch; }
.pagination .nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.pagination .page-numbers { padding: .45rem .65rem; display: inline-flex; min-height: 2.75rem; min-width: 2.75rem; justify-content: center; align-items: center; border: 1px solid var(--line); border-radius: .4rem; }
.pagination .current { background: var(--surface); font-weight: 750; }
.comments { border-top: 1px solid var(--line); margin-top: 2rem; padding-top: 1.4rem; }
.comments ol, .comments ul { padding-inline-start: 1.1rem; }
@media (max-width: 39rem) {
	:root:not([data-font]) .brand { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .65rem; }
	:root:not([data-font]) .brand-logo { inline-size: 4.5rem; --mark-height: 3.15rem; }
}
@media (min-width: 52rem) {
	.hero-grid { grid-template-columns: 1.08fr 1fr; }
	.support-grid { grid-template-columns: 1.15fr 1fr; }
	.support .actions { justify-content: end; }
}
@media (min-width: 70rem) {
	:root:not([data-font]) .program-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
:root[data-font="200"] .hero-grid, :root[data-font="200"] .support-grid { grid-template-columns: minmax(0, 1fr); }
:root[data-font="200"] .support .actions { justify-content: start; }
@media (min-width: 70rem) {
	.menu-list { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .12rem; }
	.menu-list > li { position: relative; }
	.menu-list > li > details > .nav-panel {
		position: absolute; z-index: 5; inset-inline-start: 0; margin: 0; width: min(25rem, 45vw);
		max-height: 65vh; overflow: auto; padding: .45rem; border: 1px solid var(--line);
		border-radius: .55rem; background: var(--paper); box-shadow: var(--shadow);
	}
	.menu-list > li:nth-last-child(-n+3) > details > .nav-panel { inset-inline: auto 0; }
}
@media (prefers-contrast: more) {
	:root:not([data-contrast]) { --control: #293d4b; --line: #506978; }
}
@media (forced-colors: active) {
	.button, .navigation a, .navigation summary { border: 1px solid ButtonText; }
	:focus-visible, .utility :focus-visible, .support :focus-visible, .site-footer :focus-visible { outline-color: Highlight; }
}