/*
Theme Name: StartWCAG
Author: Edward Mazurek
Description: Lekki motyw blokowy WordPress zaprojektowany z myślą o WCAG 2.2 AA, przygotowany dla Start Bydgoszcz.
Requires at least: 6.6
Requires PHP: 7.4
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: startwcag
Tags: block-patterns, block-styles, custom-colors, custom-logo, editor-style, full-site-editing, wide-blocks
*/

/*
 * StartWCAG intentionally keeps its CSS small and predictable. The rules below
 * supplement theme.json where CSS is needed for interaction states, reflow and
 * accessibility. No global !important declarations are used, so accessibility
 * preference tools can safely override the presentation.
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	overflow-wrap: break-word;
	text-size-adjust: 100%;
}

body {
	min-height: 100vh;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
	max-width: 100%;
}

img,
svg,
video,
canvas {
	height: auto;
}

a {
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.16em;
}

a:hover {
	text-decoration-thickness: 0.14em;
}

:where(a, button, input, textarea, select, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
	outline: 3px solid var(--wp--preset--color--ink, #202124);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--wp--preset--color--white, #fff);
}

input,
select,
textarea,
button {
	font: inherit;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
	max-width: 100%;
	border: 2px solid var(--wp--preset--color--muted, #5a6670);
	border-radius: var(--wp--custom--radius--small, 0.375rem);
	background: var(--wp--preset--color--white, #fff);
	color: var(--wp--preset--color--ink, #202124);
	padding: 0.65rem 0.75rem;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
button,
.wp-element-button,
.wp-block-button__link,
.wp-block-navigation-item__content,
.wp-block-social-link-anchor {
	min-height: 2.75rem;
}

textarea {
	min-height: 8rem;
	resize: vertical;
}

label {
	display: inline-block;
	margin-bottom: 0.35rem;
	font-weight: 700;
}

.text-uppercase {
	text-transform:uppercase;
}

.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	filter: brightness(0.9);
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	border-width: 2px;
	background-color: transparent;
	color: var(--wp--preset--color--blue-dark, #005a88);
}

.has-blue-dark-background-color .wp-block-button.is-style-outline > .wp-block-button__link,
.has-brand-blue-background-color .wp-block-button.is-style-outline > .wp-block-button__link,
.has-red-dark-background-color .wp-block-button.is-style-outline > .wp-block-button__link,
.has-ink-background-color .wp-block-button.is-style-outline > .wp-block-button__link {
	border-color: currentColor;
	color: var(--wp--preset--color--white, #fff);
}

.wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	padding-block: 0.5rem;
}

.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content {
	font-weight: 800;
	text-decoration-thickness: 0.16em;
}

.wp-block-navigation__submenu-container {
	min-width: 15rem;
}

.wp-block-navigation__responsive-container.is-menu-open {
	padding: clamp(1rem, 4vw, 2rem);
}

.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
	min-width: 2.75rem;
	min-height: 2.75rem;
	align-items: center;
	justify-content: center;
}

.wp-block-social-link-anchor {
	min-width: 2.75rem;
	align-items: center;
	justify-content: center;
}

.wp-block-search__inside-wrapper {
	gap: 0.5rem;
}

.wp-block-search__button {
	margin-left: 0;
}

.wp-block-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table :where(th, td) {
	border: 1px solid var(--wp--preset--color--muted, #5a6670);
	padding: 0.75rem;
	text-align: left;
	vertical-align: top;
}

.wp-block-table th {
	background: var(--wp--preset--color--surface, #f5f9fc);
	font-weight: 700;
}

.wp-block-image figcaption,
.wp-block-gallery figcaption {
	max-width: 70ch;
}

.wp-block-post-featured-image img {
	border-radius: var(--wp--custom--radius--medium, 0.75rem);
}

.wp-block-post-date,
.wp-block-post-author-name,
.wp-block-post-terms {
	color: var(--wp--preset--color--muted, #5a6670);
}

.wp-block-post-template > li {
	min-width: 0;
}

.wp-block-query-pagination {
	margin-top: var(--wp--preset--spacing--50, 2rem);
}

.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
	display: inline-flex;
	min-width: 2.75rem;
	min-height: 2.75rem;
	align-items: center;
	justify-content: center;
	padding: 0.35rem;
}

.startwcag-header {
	position: relative;
	z-index: 10;
	border-bottom: 1px solid var(--wp--preset--color--border-light, #d7e2e9);
	box-shadow: 0 0.125rem 0.5rem rgb(32 33 36 / 0.06);
}

.startwcag-header__inner {
	min-height: 5rem;
}

.startwcag-header .wp-block-site-logo img {
	max-height: 4rem;
	width: auto;
}

.startwcag-footer a {
	color: inherit;
}

.startwcag-footer .wp-block-navigation-item__content {
	color: inherit;
}

.startwcag-footer__legal {
	border-top: 1px solid rgb(255 255 255 / 0.35);
}

.is-style-section-card {
	border: 1px solid var(--wp--preset--color--border-light, #d7e2e9);
	border-radius: var(--wp--custom--radius--medium, 0.75rem);
	background: var(--wp--preset--color--white, #fff);
	box-shadow: 0 0.25rem 1rem rgb(32 33 36 / 0.08);
	padding: clamp(1rem, 3vw, 2rem);
}

.is-style-brand-panel {
	border-radius: var(--wp--custom--radius--large, 1.25rem);
	background: var(--wp--preset--color--blue-dark, #005a88);
	color: var(--wp--preset--color--white, #fff);
	padding: clamp(1.25rem, 4vw, 3rem);
}

.is-style-brand-panel :where(h1, h2, h3, h4, h5, h6, a) {
	color: inherit;
}

.is-style-accent-left {
	border-left: 0.375rem solid var(--wp--preset--color--brand-red, #d32027);
	padding-left: var(--wp--preset--spacing--40, 1.25rem);
}

.is-style-soft-corners img {
	border-radius: var(--wp--custom--radius--large, 1.25rem);
}

.is-style-check-list {
	list-style: none;
	padding-left: 0;
}

.is-style-check-list li {
	position: relative;
	padding-left: 1.75em;
}

.is-style-check-list li::before {
	position: absolute;
	left: 0;
	content: "✓";
	color: var(--wp--preset--color--blue-dark, #005a88);
	font-weight: 800;
}

.startwcag-kicker {
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.startwcag-meta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
}

.startwcag-events__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: var(--wp--preset--spacing--40, 1.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.startwcag-event-card {
	min-width: 0;
	margin: 0;
}

.startwcag-event-card__article {
	display: flex;
	height: 100%;
	min-width: 0;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border-light, #d7e2e9);
	border-radius: var(--wp--custom--radius--medium, 0.75rem);
	background: var(--wp--preset--color--white, #fff);
	box-shadow: 0 0.25rem 1rem rgb(32 33 36 / 0.08);
}

.startwcag-event-card__media {
	line-height: 0;
}

.startwcag-event-card__image {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.startwcag-event-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20, 0.625rem);
	padding: var(--wp--preset--spacing--40, 1.25rem);
}

.startwcag-event-card__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--large, 1.375rem);
}

.startwcag-event-card__date {
	margin: 0;
	color: var(--wp--preset--color--blue-dark, #005a88);
	font-weight: 800;
}

.startwcag-event-card__address,
.startwcag-event-card__excerpt {
	margin: 0;
}

.startwcag-event-card__address {
	color: var(--wp--preset--color--muted, #5a6670);
	font-weight: 600;
}

.startwcag-event-card__excerpt {
	margin-top: var(--wp--preset--spacing--10, 0.375rem);
}

.startwcag-event-range__separator {
	padding-inline: 0.15em;
}

.startwcag-event-details {
	border: 1px solid var(--wp--preset--color--border-light, #d7e2e9);
	border-left: 0.375rem solid var(--wp--preset--color--brand-red, #d32027);
	border-radius: var(--wp--custom--radius--medium, 0.75rem);
	background: var(--wp--preset--color--surface, #f5f9fc);
	padding: clamp(1rem, 3vw, 2rem);
}

.startwcag-event-details__list {
	display: grid;
	gap: var(--wp--preset--spacing--30, 1rem);
	margin: 0;
}

.startwcag-event-details__item {
	display: grid;
	grid-template-columns: minmax(7rem, 9rem) minmax(0, 1fr);
	gap: 0.35rem var(--wp--preset--spacing--30, 1rem);
}

.startwcag-event-details dt {
	font-weight: 800;
}

.startwcag-event-details dd {
	margin: 0;
}

.startwcag-event-details__address {
	display: block;
}

.startwcag-event-details__map-link {
	display: inline-block;
	margin-top: var(--wp--preset--spacing--20, 0.625rem);
}

.startwcag-event-status {
	display: inline-block;
	margin: 0 0 var(--wp--preset--spacing--30, 1rem);
	border-radius: 999px;
	padding: 0.35rem 0.75rem;
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
	font-weight: 800;
}

.startwcag-event-status--current {
	background: var(--wp--preset--color--blue-dark, #005a88);
	color: var(--wp--preset--color--white, #fff);
}

.startwcag-event-status--past {
	border: 1px solid var(--wp--preset--color--muted, #5a6670);
	background: var(--wp--preset--color--white, #fff);
	color: var(--wp--preset--color--ink, #202124);
}

.startwcag-events-pagination {
	margin-top: var(--wp--preset--spacing--50, 2rem);
}

.startwcag-events-pagination .page-numbers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--20, 0.625rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.startwcag-events-pagination a.page-numbers,
.startwcag-events-pagination span.page-numbers {
	display: inline-flex;
	min-width: 2.75rem;
	min-height: 2.75rem;
	align-items: center;
	justify-content: center;
	padding: 0.35rem 0.65rem;
}

.startwcag-events-pagination .current {
	border-radius: var(--wp--custom--radius--small, 0.375rem);
	background: var(--wp--preset--color--blue-dark, #005a88);
	color: var(--wp--preset--color--white, #fff);
	font-weight: 800;
}

.startwcag-cover-text {
	max-width: 45rem;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
	word-wrap: normal;
}

.screen-reader-text:focus,
.skip-link:focus {
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: 100000;
	display: block;
	width: auto;
	height: auto;
	clip: auto;
	margin: 0;
	border: 3px solid var(--wp--preset--color--ink, #202124);
	border-radius: 0.375rem;
	background: var(--wp--preset--color--white, #fff);
	color: var(--wp--preset--color--ink, #202124);
	padding: 0.75rem 1rem;
	font-size: 1rem;
	font-weight: 700;
}

@media (max-width: 48rem) {
	.startwcag-header__inner {
		min-height: 4.5rem;
	}

	.startwcag-header .wp-block-buttons {
		display: none;
	}

	.wp-block-columns:not(.is-not-stacked-on-mobile) {
		gap: var(--wp--preset--spacing--40, 1.25rem);
	}
}

@media (max-width: 30rem) {
	.startwcag-event-details__item {
		grid-template-columns: 1fr;
	}

	.wp-block-buttons > .wp-block-button {
		width: 100%;
	}

	.wp-block-buttons > .wp-block-button .wp-block-button__link {
		width: 100%;
	}

	.wp-block-search__inside-wrapper {
		flex-wrap: wrap;
	}

	.wp-block-search__button {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	html:focus-within {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms;
		animation-iteration-count: 1;
		scroll-behavior: auto;
		transition-duration: 0.01ms;
	}
}

@media (forced-colors: active) {
	:where(a, button, input, textarea, select, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
		outline: 3px solid CanvasText;
		box-shadow: none;
	}

	.is-style-section-card,
	.is-style-brand-panel,
	.startwcag-event-card__article,
	.startwcag-event-details {
		border: 1px solid CanvasText;
	}
}

@media print {
	.startwcag-header nav,
	.startwcag-footer,
	.wp-block-buttons,
	.wp-block-query-pagination {
		display: none;
	}

	.startwcag-events__grid {
		grid-template-columns: 1fr;
	}

	a[href]::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
	}

	a[href^="#"]::after,
	a[href^="mailto:"]::after,
	a[href^="tel:"]::after {
		content: "";
	}
}
