/*
Theme Name: IKM Dostępność
Theme URI: https://dostepnosc.ikm.gda.pl
Author: TRU STUDIO Łukasz Farysej
Author URI: https://truststudio.pl
Description: Prosty blokowy (FSE) motyw WordPress dla bloga o dostępności Instytutu Kultury Miejskiej w Gdańsku. Oparty na stylistyce, nagłówku i stopce serwisu new.ikm.gda.pl.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ikm-dostepnosc
*/

/* =========================================================
   PODSTAWY
   ========================================================= */

:root {
	--ikm-radius: 2px;
}


*:focus { outline: none; }
*:focus-visible { outline: 3px solid #005fcc; outline-offset: 3px;  border-radius: 3px; box-shadow: 0 0 0 6px rgba(0, 95, 204, 0.2);  }

.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; }

body {
	background: var(--wp--preset--color--tlo);
	color: var(--wp--preset--color--tekst);
}

a {
	color: currentColor;
}

a:focus-visible{
	color: var(--wp--preset--color--akcent);
}

button {
	background: none;
	border:none;
}


a, button {
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}


.site-main {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: 2rem;
}

/* =========================================================
   NAGŁÓWEK
   ========================================================= */

.site-header {
	padding: 1.75rem 2rem;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	position:relative;
}

.site-header .site-logo-link {
	display: block;
	text-decoration: none;
}

.site-header .site-logo-text {
	font-family: var(--wp--preset--font-family--naglowek);
	font-weight: 700;
	line-height: 1.05;
	font-size: 1.05rem;
	letter-spacing: -0.01em;
	text-transform: lowercase;
	color: var(--wp--preset--color--tekst);
	margin: 0;
}

.header-right {
	gap: 3rem;
	align-items: center;
}

.accessicon svg,
.accessicon svg path {
	fill: var(--wp--preset--color--tekst);
	transition: fill 0.2s ease;
}

.accessicon:hover svg,
.accessicon:hover svg path {
	fill: var(--wp--preset--color--akcent);
}


.skip-link.screen-reader-text {
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	clip-path: inset(50%) !important;
	height: 1px !important;
	width: 1px !important;
	overflow: hidden !important;
	white-space: nowrap;
	position: absolute !important;
	margin: -1px;
	padding: 0;
}

.skip-link.screen-reader-text:focus {
	clip: auto !important;
	clip-path: none !important;
	height: auto !important;
	width: auto !important;
	overflow: visible !important;
	white-space: normal;
	position: fixed !important;
	top: 1rem;
	left: 1rem;
	margin: 0;
	z-index: 100000;

	background: #ffffff;
	color: var(--wp--preset--color--tekst);
	font-family: var(--wp--preset--font-family--naglowek);
	font-weight: 600;
	font-size: 16px;
	padding: 0.85rem 1.5rem;
	border-radius: 8px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
	text-decoration: none;
}

/* Nawigacja / MENU */




.site-nav .wp-block-navigation__responsive-container-open,
.site-nav .wp-block-navigation__responsive-container-close {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	background: none;
	border: none;
	font-family: var(--wp--preset--font-family--naglowek);
	font-weight: 600;
	font-size: 16px;
	color: var(--wp--preset--color--tekst);
	cursor: pointer;
	padding: 0;
}

.wp-block-navigation__responsive-container-open:hover {
	color: var(--wp--preset--color--akcent);
}

.site-nav .wp-block-navigation__responsive-container-open svg,
.site-nav .wp-block-navigation__responsive-container-close svg {
	display: none;
}



.site-nav .wp-block-navigation__responsive-container-open::before,
.site-nav .wp-block-navigation__responsive-container-close::before {
	content: "Menu";
	font-family: var(--wp--preset--font-family--naglowek);
	font-weight: 500;
	font-size: 2rem;
	text-transform: uppercase;
}

.site-nav .wp-block-navigation__responsive-container-open::after,
.site-nav .wp-block-navigation__responsive-container-close::after {
	content: "";
	width: 27px;
	height: 27px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='27' height='27' viewBox='0 0 27 27' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24.6282 13.3137H2.00074' stroke='%23000000' stroke-width='3.5' stroke-linecap='square' stroke-linejoin='round'/%3E%3Cpath d='M13.3145 2V24.6274' stroke='%23000000' stroke-width='3.5' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg width='27' height='27' viewBox='0 0 27 27' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24.6282 13.3137H2.00074' stroke='%23000000' stroke-width='3.5' stroke-linecap='square' stroke-linejoin='round'/%3E%3Cpath d='M13.3145 2V24.6274' stroke='%23000000' stroke-width='3.5' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}


.site-nav .wp-block-navigation__responsive-container-close {
	transform: translateY(60px);
}

.site-nav .wp-block-navigation__responsive-container-close::after {
	transform: rotate(45deg);
}

.site-nav .wp-block-navigation__responsive-container .wp-block-navigation__container {
	margin-top: 120px;
	margin-left: 32px;
}


.site-nav .wp-block-navigation__container .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--naglowek);
	font-weight: 600;
	font-size: 2rem;
}

.site-nav .wp-block-navigation__responsive-container.is-menu-open {
	position: fixed; /* WP już to ustawia, ale wymuszam na wszelki wypadek jako punkt odniesienia */
}

.nav-overlay-logo {
	position: absolute;
	top: 1.75rem;
	left: 2rem;
}

.nav-overlay-logo a {
	display: inline-block;
}


.site-nav .wp-block-navigation__responsive-container.is-menu-open {
	background-color: #336189 !important;
	color: #ffffff !important;
}

.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: #ffffff;
}

.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	color: #ffffff;
}

.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close::after {
	background-image: url("data:image/svg+xml,%3Csvg width='27' height='27' viewBox='0 0 27 27' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24.6282 13.3137H2.00074' stroke='%23FFFFFF' stroke-width='3.5' stroke-linecap='square' stroke-linejoin='round'/%3E%3Cpath d='M13.3145 2V24.6274' stroke='%23FFFFFF' stroke-width='3.5' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E");
}




/* =========================================================
   STRONA GŁÓWNA BLOGA / ARCHIWUM
   ========================================================= */

.blog-title-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 2.5rem;
}

.blog-title-row h1 {
	margin: 0;
}

.blog-wave {
	flex-shrink: 0;
	height: 24px;
	width: auto;
	color: var(--wp--preset--color--akcent);
}

.wp-block-post-template {
	display: flex;
	flex-direction: column;
	gap: 7.5rem 2rem;
}

.wp-block-post-template li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.post-card__thumb {
	width: 100vw;
	max-width: 960px;
	margin-left: 50%;
	transform: translateX(-50%);
	overflow: hidden;
	border-radius: var(--ikm-radius);
	background-color: #f8f8f8;
}

.post-card__thumb img {
	width: 100%;
	height: 420px;
	object-fit: cover;
	border-radius: var(--ikm-radius);
	transition: transform 0.35s ease;
	mix-blend-mode: multiply;
}

.post-card__thumb:hover img, .post-card__thumb a:focus-visible img {
	transform: scale(1.05);
}


.post-card__thumb :focus-visible {
	outline: 3px solid #005fcc;
	outline-offset: -3px;
	box-shadow: inset 0 0 0 6px rgba(0, 95, 204, 0.2);
	border-radius: 3px;
}



@media (max-width: 782px) {
	.post-card__thumb img {
		height: 220px;
	}
}

.post-card__meta {
	display: flex;
	justify-content: space-between;
	font-size: 0.85rem;
	color: var(--wp--preset--color--tekst-jasny);
	border-top: 1px solid var(--wp--preset--color--linia);
	padding-top: 0.75rem;
	margin-bottom: 1.25rem;
}


.post-card h2,
.post-card h3 {
	margin: 1rem 0 0.75rem;
	font-size: 2rem;
	line-height: 1.3;
}

.post-card h2 a,
.post-card h3 a {
	text-decoration: none;
	color: var(--wp--preset--color--tekst);
}

.post-card h2 a:hover,
.post-card h3 a:hover,
.post-card h2 a:focus-visible,
.post-card h3 a:focus-visible {
	color: var(--wp--preset--color--akcent);
}

.post-card .wp-block-post-excerpt {
	color: var(--wp--preset--color--tekst-jasny);
	font-size: 0.95rem;
}


.post-card__more {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: 1.25rem;
	font-family: var(--wp--preset--font-family--naglowek);
	font-size: 16px;
	font-weight: 600;
	color: var(--wp--preset--color--tekst);
	text-decoration: none;
}

.post-card__more::after {
	content: "";
	width: 21px;
	height: 22px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='21' height='22' viewBox='0 0 21 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 11L18.6 11' stroke='%23000000' stroke-width='2' stroke-linecap='square' stroke-linejoin='round'/%3E%3Cpath d='M10.5 2L19.5 11L10.5 20' stroke='%23000000' stroke-width='2' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg width='21' height='22' viewBox='0 0 21 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 11L18.6 11' stroke='%23000000' stroke-width='2' stroke-linecap='square' stroke-linejoin='round'/%3E%3Cpath d='M10.5 2L19.5 11L10.5 20' stroke='%23000000' stroke-width='2' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.post-card__more:hover, .post-card__more:focus-visible {
	color: var(--wp--preset--color--akcent);
}

/* Paginacja */
.wp-block-query-pagination {
	justify-content: center;
	margin-top: 3rem;
	font-size: 0.95rem;
}

.wp-block-query-pagination-numbers a,
.wp-block-query-pagination-numbers span {
	padding: 0.25rem 0.5rem;
}

.wp-block-query-pagination-numbers .current {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* =========================================================
   WPIS / SINGLE
   ========================================================= */

.single-post-header {
	max-width: 720px;
	margin: 0 auto 2rem;
}

.single-post-content {
	max-width: 720px;
	margin: 0 auto;
}

.single-post-content p,
.single-post-content li {
	font-size: 1.05rem;
	line-height: 1.75;
}

.single-post-content img {
	border-radius: var(--ikm-radius);
	height: auto;
}


.single-post-back a {
	text-decoration: none;
}
.single-post-back__link {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--wp--preset--font-family--naglowek);
	font-weight: 600;
	font-size: 16px;
}

.single-post-back__link::before {
	content: "";
	width: 20px;
	height: 21px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 10.4143L1.89997 10.4143' stroke='%23000000' stroke-width='2' stroke-linecap='square' stroke-linejoin='round'/%3E%3Cpath d='M10 1.41431L1 10.4143L10 19.4143' stroke='%23000000' stroke-width='2' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 10.4143L1.89997 10.4143' stroke='%23000000' stroke-width='2' stroke-linecap='square' stroke-linejoin='round'/%3E%3Cpath d='M10 1.41431L1 10.4143L10 19.4143' stroke='%23000000' stroke-width='2' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.single-post-back__link:hover, .single-post-back__link:focus-visible {
	color: var(--wp--preset--color--akcent);
}

/* =========================================================
   WYSZUKIWARKA
   ========================================================= */

#searchtrigger {
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	color: var(--wp--preset--color--tekst);
	cursor: pointer;
	flex-shrink: 0;
}

#searchtrigger:hover, #searchtrigger:focus-visible {
	color: var(--wp--preset--color--akcent);
}

.searchcontainer {
	position: absolute;
	top: 100%;
	right: 2rem;
	margin-top: 0.75rem;
	width: min(420px, calc(100vw - 4rem));
	background: #ffffff;
	border-radius: 8px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
	padding: 1rem 1.25rem;
	z-index: 99999;
	display: none;
}

.searchcontainer.sopen {
	display: block;
}

.searchwrapper {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.searchform {
	flex: 1;
	display: flex;
	align-items: center;
	border-bottom: 2px solid var(--wp--preset--color--linia);
}

.searchform input[type="text"] {
	flex: 1;
	border: none;
	outline: none;
	font-family: var(--wp--preset--font-family--tekst);
	font-size: 1rem;
	padding: 0.5rem 0;
	background: none;
	color: var(--wp--preset--color--tekst);
}

.searchform #searchsubmit {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--wp--preset--color--tekst);
	display: flex;
	align-items: center;
	padding: 0 0 0 0.5rem;
}

.searchform #searchsubmit:hover, .searchform #searchsubmit:focus-visible {
	color: var(--wp--preset--color--akcent);
}

.closesearch #sclosebtn {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--wp--preset--color--tekst);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.25rem;
}

.closesearch #sclosebtn:hover, .closesearch #sclosebtn:focus-visible {
	color: var(--wp--preset--color--akcent);
}

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


.search-no-results {
	margin-top: 1rem;
}

.search-no-results ul {
	margin-top: 1rem;
}

.search-highlight {
	background-color: var(--wp--preset--color--akcent);
	color: #ffffff;
	padding: 0 0.15em;
	border-radius: 2px;
}


/* =========================================================
   STOPKA
   ========================================================= */

.site-footer {
	margin-top: 4rem;
	padding: 3rem 2rem 1.5rem;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	font-size: 0.9rem;
}




@media (max-width: 782px) {
	.site-header,
	.site-footer,
	.site-main {
		padding-inline: 1.25rem;
	}
	.blog-title-row {
		flex-wrap: wrap;
	}


.site-footer > .wp-block-group {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.5rem;
	}

	.site-footer .loga {
		flex-wrap: wrap;
		gap: 1rem;
	}

	.site-footer .loga img {
		height: 36px;
		width: auto;
	}



	
}


@media (max-width: 500px) {
	.header-right {
		gap: 1rem;
	}

	.site-logo-link svg {
		width: 62px;
		height: 40px;
	}

	.site-nav .wp-block-navigation__responsive-container-open::before,
	.site-nav .wp-block-navigation__responsive-container-close::before {
		font-size: 1.25rem;
	}

	.site-nav .wp-block-navigation__responsive-container-open::after,
	.site-nav .wp-block-navigation__responsive-container-close::after {
		width: 18px;
		height: 18px;
	}

	.nav-overlay-logo svg {
		height: 40px;
	}

	.nav-overlay-logo {
		top: 0rem;
		left: 0rem;
	}


	.site-nav .wp-block-navigation__responsive-container .wp-block-navigation__container {
		margin-top: 30px;
		margin-left: 30px;
		gap:10px !important;
	}

	.site-nav .wp-block-navigation__container .wp-block-navigation-item__content {
		font-size: 1rem;
	}

	.site-nav .wp-block-navigation__responsive-container-close {
		transform: none;
		position: absolute;
		top: 1rem;
		right: 1.25rem;
	}

	.searchcontainer {
		right:auto;
		left:0.8rem;
	}
}

/* =========================================================
   WTYCZKA DOSTĘPNOŚCI (accessibility-menu)
   ========================================================= */

#accessibility-menu .inside .htitle span {
	font-family: var(--wp--preset--font-family--naglowek);
	font-weight: 600;
	font-size:1.5rem; 
	line-height: 1.7rem;;
}

#accessibility-menu .hlabel {
	font-family: var(--wp--preset--font-family--lora);
	font-size:1rem;
	line-height: 1.2rem;;
}

#accessibility-menu .amenucontainer {
  gap: 10px;
}

.cky-notice-btn-wrapper { gap:10px;}