/*
Theme Name: Denis Marciniak '25
Theme URI: https://denismarciniak.pl
Author: Yzoja
Author URI: http://yzoja.pro
Version: 0.1.2025
*/

:root {
	/* fonts */
	/*--accentFont: 'new-spirit', sans-serif;*/
	--accentFont: 'avenir-next-lt-pro';
	--mainFont: 'haboro-soft', sans-serif;


	/* colors */
	--bg: #fff;
	--bgR: rgba(0,0,0,0.3);
	--pale: #f1f1f1;
	--paleR: rgba(255,255,255,0.2);
	--accent: #2C00D1; 
	--secondary: #780082;
	--text: #111;
	--border: 1px solid #ddd;
	--white: #fff;
	--black: #111;

	/* sizes */
	--gap: 50px;
	--gapXS: calc(var(--gap) / 2);
	--gapS: 15px;
	--gapL: calc(var(--gap) * 2);

	--em: 17px;

	--content: 1400px;
	--narrow: 1000px;
	
	--tint: rgba(44, 0, 209, 0.07);

	/* extra */
	--shadow: 0 10px 20px rgba(0,0,0,0.05);
	--shadowR: inset -3px 2px 3px -2px rgba(141 148 205 / 60), inset 3px -2px 3px -2px rgba(141 148 205 / 60), inset -3px 2px 2px -1px rgba(141 148 205 / 60), inset 3px -2px 2px -1px rgba(141 148 205 / 60);
}

@media (prefers-color-scheme: dark) { 

	:root {
		--bg: #222;
		--bgR: rgba(0,0,0,0.3);
		--text: #FCF4E8;
		--accentBg: #42252e;
		--pale: #333;
		--border: 1px solid #666;
		--paleR: rgba(255,255,255,0.5);
		--dark: var(--secondary);
		--accent: var(--secondary);
		--shadow: 0 10px 10px 0px rgba(0,0,0,0.2);
	}

	#newsletter, nav a, .timestamp {
		color: var(--text) !important;
	}
}

* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

body {
	background: var(--bg);
	color: var(--text);
	font-weight: 400;
	font-size: var(--em);
	font-family: var(--mainFont);
}

a {
	color: inherit;
	text-decoration: none;
}

#entry a, #about a {
	text-decoration: underline;
}

img {
	max-width: 100%;
	height: auto;
}

h1 {
	font-size: 2.3em;
}

h1, h2, h3, strong {
	font-family: var(--accentFont);
	font-weight: bold;
	word-break: break-word;
}

header {
	background: var(--bgR);
	/*backdrop-filter: blur(10px) contrast(1.2) brightness(0.9);*/
	color: var(--white);
	position: fixed;
	top: var(--gapXS);
	left: 0;
	right: 0;
	z-index: 6;
	border-radius: 0 0 1em 1em;
	border-radius: 2em;
}

/*body:not(.home) header {
	color: var(--black);
}*/

.admin-bar header {
	margin-top: 32px;
}

header + * {
	padding-top: 100px;
	margin-top: -10px;
}

header .logo a {
	font-size: 2em;
	font-family: var(--accentFont);
	font-weight: bold;
}

header a {
	color: inherit;
	text-decoration: none;
	display: block;
}

header ul {
	display: flex;
	gap: 1em;
	align-items: center;
}

header li {
	list-style-type: none;
	display: inline-block;
	position: relative;
}

header li > a {
	padding: 5px;
	border-radius: 20px;
	font-size: 16px;
}

#menu-menu > li > a {
	padding: 5px 10px;
}

header li a:hover {
	background: var(--bgR);
}

header svg {
	fill: currentColor;
	width: 1.5em;
	height: 1.5em;
	display: block;
}

svg, path {
	fill: currentcolor;
}

.sub-menu {
	opacity: 0;
	transition: all 0.3s;
	transition-delay: 0s;
	transform: translateY(40px);
	pointer-events: none;
	position: absolute;
	background: var(--bgR);
	right: -5px;
	gap: 0;
	flex-direction: column;
	align-items: stretch;
	padding: 10px 0;
	border-radius: 5px;
	top: 100%;
	backdrop-filter: blur(10px) contrast(1.2) brightness(0.9);
	box-shadow: var(--shadowR), 4px 4px 7px rgba(255, 255, 255, 0.1), -4px -4px 7px rgba(0, 0, 0, 0.1);
}

:is(#entry, #about, .modal-window) .wp-block-button__link {
	backdrop-filter: blur(10px);
	box-shadow: var(--shadowR), 4px 4px 7px rgba(255, 255, 255, 0.1), -4px -4px 7px rgba(0, 0, 0, 0.1);
	background: var(--tint);
	text-decoration: none;
	padding: 0.8em calc(0.8em + 10px);
	display: flex;
	font-size: 1em;
	gap: 1em;
	transition: all 0.3s;
	color: currentColor;
}

:is(#entry, #about, .modal-window) .wp-block-button__link:hover, .close-modal {
	transform: scale(1.05);
}

#about .bio .wp-block-button__link {
	padding: 0.8em 1.3em;
}

:is(#entry, #about, .modal-window) .wp-block-button__link .plus {
	width: 1em;
	display: block;
	margin: 0 -10px;
}

.sub-menu li > a {
	border-radius: 3px;
}

li:hover .sub-menu {
	opacity: 1;
	pointer-events: visible;
	transition-delay: 0.2s;
	transform: translateY(0);
}

.menu-item-has-children > a:after {
	content: " ▾";
}

.sub-menu li {
	display: block;
	text-align: right;
	padding: 0 10px;
	line-height: 1.3em;
}

.flex {
	display: flex;
	gap: var(--gapXS);
}

.-ac {
	align-items: center;
}

.-jsb {
	justify-content: space-between;
}

.container {
	max-width: var(--content);
	width: calc(100% - (2 * var(--gapXS)));
	margin-inline: auto;
}

.container-m {
	max-width: var(--narrow);
	width: calc(100% - (2 * var(--gapXS)));
	margin-inline: auto;
}

#menu-button {
	display: none;
}
/* content */

#about {
	--content: var(--narrow);
	margin-bottom: calc(2 * var(--gap));
	background: rgba(32,32,32,0.2) no-repeat 60% bottom url('assets/denis.png');
	background-size: auto 80%;
	color: var(--white);
	padding-bottom: var(--gap);
	font-size: 1.4em;
	position: relative;
	height: 40vw;
	max-height: 700px;
	display: flex;
	align-items: flex-end;
}

#about:before {
	content: "";
	position: absolute;
	background: #111 url('/wp-content/uploads/2025/07/bg.jpg') center center;
	background-size: cover;
	z-index: -1;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

#about .container {
	position: relative;
	z-index: 2;
	padding-bottom: var(--gap);
}

#about .bio {
	padding-right: 30%;
	margin-top: 1em;
}

#about .bio p {
	text-wrap: balance;
}

#about .bio > *:not(:last-child) {
	margin-bottom: .5em;
}

#about .wp-block-buttons {
	font-size: 16px;
}

#about img {
	max-width: 300px;
	aspect-ratio: 1;
	border-radius: 300px;
}

.blog-grid {
	margin-bottom: var(--gapL);
	display: flex;
	gap: var(--gap);
	flex-wrap: wrap;
}

.blog-grid article {
	flex: 1 1 27%;
	transition: all 0.4s;
}

.blog-grid article:hover {
	transform: scale(1.05);
	box-shadow: var(--shadow);
}

.blog-grid h2, #pagination, .pagination {
	flex: 1 1 100%;
}

#home.paged #blog {
	margin-top: var(--gap);
}

#blog h1 {
	font-size: 0;
}

#blog h1 span {
	font-size: calc(2.3 * var(--em));
}

.select {
	line-height: 2em;
	position: relative;
	height: 2em;
	list-style-type: none;
	position: relative;
	z-index: 5;
	cursor: pointer;
	width: 150px;
	background: var(--bg);
	border: var(--border);
	border-radius: 2em;
	align-self: center;
	transition: all 0.3s;
	color: var(--bg);
}

.select.open {
	border-radius: 1em 1em 0 0;
}

.select span {
	padding: 0 10px;
}

.options {
	display: flex;
	position: relative;
	background: var(--bgR);
	border-radius: 0 0 1em 1em;
	padding-bottom: 5px;
	color: #fff;
	box-shadow: var(--shadowR), 4px 4px 7px rgba(255, 255, 255, 0.1), -4px -4px 7px rgba(0, 0, 0, 0.1);
}

.options span {
	display: block;
	position: relative;
	z-index: 2;
	color: var(--bg);
}

.options[hidden] {
	display: none;
}

.select:hover {
	box-shadow: var(--shadow);
}

.select .options span {
	line-height: 2em;
	height: 2em;
	display: block;
	color: var(--bg);
	padding: 0 1em;
}

.select .current i {
	font-style: normal;
}

.select .current {
	background: var(--bgR);
	color: #fff;
	display: flex;
	padding-left: 1em;
	border-radius: inherit;
	justify-content: space-between;
	box-shadow: var(--shadowR), 4px 4px 7px rgba(255, 255, 255, 0.1), -4px -4px 7px rgba(0, 0, 0, 0.1);
}

.select li:not(.current) {
	display: none;
}

.select:not(.open) li:first-child {
	border-radius: 1em;
}

.select .options a {
	display: block;
}

.select .options .glass {
	border-radius: 0 0 1em 1em;
	z-index: -1;
}

.select .options a:hover {
	font-weight: bold;
}

.select li:last-child {
	border-radius: 0 0 1em 1em;
}

.select a {
	color: #fff;
}

.section-header {
	justify-content: space-between;
}

.owl-stage {
	display: flex !important;
	align-items:stretch;
}

.owl-stage:hover {
	animation-play-state: paused;
}

.owl-stage .owl-item {
	align-self:stretch;
	display: flex;
	flex-direction: column;
}

.owl-stage .owl-item:not(.active) {
	opacity: 0.3;
}

.owl-stage .opinia {
	margin-right: var(--gap);
	border: var(--border);
	padding: 2em;
	width: 400px;
	max-width: 100%;
	border-radius: 1em;
	height: inherit;
	display: flex;
	height: 100%;
	flex-direction: column;
	justify-content: center;
}

.opinia .quote {
	font-style: italic;
	font-size: 0.9em;
	margin-bottom: var(--gap);
	text-align: center;
}

.opinia .cite {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--gap);
	font-size: 14px;
}

.opinia .cite img {
	max-height: 50px;
	max-width: 40%;
	height: auto;
	width: auto;
	flex-shrink: 0;
}

#modal-overlay {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	width: 100vw;
	max-width: 100%;
	height: 100vh;
	background: var(--bgR);
	backdrop-filter: blur(5px);
	overflow: hidden;
	z-index: 8;
}

p:empty {
	display: none;
}

.overlay .glass {
	z-index: 2;
	border-radius: 0 !important;
}

#modal-overlay .modal-window {
	width: var(--content);
	max-width: 90%;
	background: rgba(from var(--bg) r g b / 80%);
	border-radius: 1em;
	margin: calc(3 * var(--gap)) auto var(--gap);
	padding: var(--gap);
	position: relative;
	z-index: 3;
}

.modal-content {
	overflow: auto;
	max-height: 100vh;
	padding-bottom: calc(5 * var(--gap));
}

.modal-window .close-modal {
	top: 10px;
	right: -10px;
	float: right;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	background: inherit;
	border-radius: 30px;
	margin: -10px -10px 0 -50px !important;
	position: sticky;
	background: var(--tint);
	backdrop-filter: blur(5px);
	box-shadow: var(--shadowR), 4px 4px 7px rgba(255, 255, 255, 0.1), -4px -4px 7px rgba(0, 0, 0, 0.1);
	color: var(--text);
	transition: all 0.3s;
}

#pagination, .pagination, h1, .section-header {
	grid-column: 1 / -1;
}

#pagination, .pagination {
	text-align: right;
}

#pagination .page-numbers:not(.next):not(.prev) {
	display: none;
}

.wp-block-columns + .wp-block-columns {
	margin-top: var(--gap) !important;
}

.blog-grid article:nth-of-type(1),
.blog-grid article:nth-of-type(2) {
	flex: 1 1 45%;
}

.thumb {
	background: #666;
	display: block;
}

.thumb img {
	display: block;
	aspect-ratio: 3 / 2;
	width: 100%;
	object-fit: cover;
}

.regular {
	overflow: hidden;
	border-radius: 1em;
	display: flex;
	flex-direction: column;
	background: var(--pale);
}

.regular h3 {
	margin-bottom: .5em;
}

.regular .inside {
	padding: var(--gap);
}

.regular .post-meta {
	margin-top: auto;
	padding: var(--gapXS) var(--gap);
	border-top: var(--border);
	filter: grayscale(1);
	font-size: 13px;
}

.regular .post-meta a {
	padding-right: 5px;
}

.main-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: var(--gap);
}

.main-grid > h2 {
	grid-column: 1 / -1;
}

.wallpaper {
	border: 1px solid var(--pale);
	border-radius: 1em;
	overflow: hidden;
	text-align: center;
	box-shadow: var(--shadow);
	position: relative;
}

.wallpaper-meta {
	color: #fff;
	text-shadow: 2px 2px 5px rgba(0,0,0,0.2);
	font-weight: bold;
	position: absolute;
	top: 1em;
	left: 1em;
	right: 1em;
	text-wrap: balance;
	text-align: left;
	z-index: 2;
	transform: translateY(50%);
	opacity: 0;
	transition: all 0.4s;
}

.wallpaper:hover .wallpaper-meta {
	transform: translateY(0);
	opacity: 1;
}

.wallpaper img {
	display: block;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	object-position: center center;
}

.wallpaper .download-links {
	background: var(--bgR);
	border-radius: 2em;
	margin-inline: auto;
	width: fit-content;
	color: var(--white);
	left: 0;
	right: 0;
	position: absolute;
	bottom: var(--gap);
	line-height: var(--gapXS);
	font-size: 14px;
	transition: all 0.4s;
}

.glass-content {
	padding: .5em 1.5em;
	transition: inherit;
	border-radius: 2em;
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 1em;
	box-shadow: var(--shadowR), 4px 4px 7px rgba(255,255,255,0.1), -4px -4px 7px rgba(0,0,0,0.1);
}

.wallpaper .download-links:hover {
	margin-bottom: -0.5em;
}

.wallpaper .download-links:hover .glass-content {
	padding: 1em 2.5em;
}

.wallpaper .download-links a {
	color: inherit;
	text-decoration: none;
}

.wallpaper .download-links a:hover {
	font-weight: bold;
}

.wallpaper .download-links svg {
	fill: currentColor;
	width: 1em;
}

/* single */

.single #single {
	padding-top: 0;
}

#post-header {
	height: 30vw;
	position: relative;
	color: #fff;
}

#post-header:after {
	content: "";
	background: linear-gradient(360deg, black, transparent);
	z-index: 1;
	position: absolute;
	bottom: 0;
	height: 50%;
	width: 100%;
	opacity: 0.5;
}

#post-meta {
	position: absolute;
	bottom: 0;
	text-align: center;
	max-width: var(--content);
	left: 0;
	right: 0;
	margin: 0 auto;
	padding: var(--gap);
	z-index: 2;
	background: ;
}

#post-header h1 {
	margin-bottom: 1em;
}

#cover img {
	object-fit: cover;
	width: 100%;
	height: 30vw;
}

#entry {
	font-size: 1.2em;
}

#entry + #blog {
	font-size: 13px;
	margin-top: var(--gapL);
}

#entry > *, .wp-block-group-is-layout-constrained, .modal-content > * {
	max-width: var(--narrow);
	margin-inline: auto;
	margin-block: 1em;
}

.wp-block-group-is-layout-constrained {
	padding: var(--gap) 0;
}

:is(#entry, .modal-content) > *.alignwide {
	max-width: var(--content);
}

:is(#entry, .modal-contentw) > *.alignfull {
	max-width: 100%;
}

:is(#entry, .modal-content) li {
	margin-bottom: .5em;
	line-height: 1.6em;
}

:is(#entry, .modal-content) ul {
	padding-left: 1.2em;
}

:is(#entry, .modal-window) p:not(:last-child) {
	margin-bottom: 1em;
}

.wp-block-image {
	border-radius: 1em;
}

.wp-block-column p.has-text-align-center:not(:first-child) {
	font-size: 0.9em;
}

.wp-block-group > .wp-block-image img,
.wp-block-group > .wp-block-image {
	border-radius: 0;
}

.wp-block-column > * + * {
	margin-top: .5em;
}

.slick-list {
	padding-bottom: 10px;
}

p {
	line-height: 1.6em;
}

footer {
	background: var(--pale);
	padding-block: var(--gap);
	margin-top: var(--gap);
}

svg[hidden] {
	display: none;
}

.wp-block-image img {
	border-radius: 1em;
}

.wp-block-quote {
	border-left: 3px solid var(--pale);
	padding-left: 3em;
	font-style: italic;
}

#entry + #blog {
	grid-template-columns: repeat(3, 1fr);
}

:is(#menu-button, .close-modal) span.bar,
:is(#menu-button, .close-modal) span.bar:before,
:is(#menu-button, .close-modal) span.bar:after {
	width: 20px;
	height: 2px;
	background: currentColor;
	content: "";
	display: block;
	position: relative;
	border-radius: 2px;
	transition: all 0.4s;
}

:is(#menu-button, .close-modal) span.bar:before {
	margin-top: -7px;
	position: absolute;
}

:is(#menu-button.active, .close-modal) span.bar {
	background: transparent;
}

:is(#menu-button, .close-modal) span.bar:after {
	margin-top: 7px;
	position: absolute;
}

:is(#menu-button.active, .close-modal) span.bar:before {
	margin-top: 0;
	transform: rotate(45deg);
}

:is(#menu-button.active, .close-modal) span.bar:after {
	margin-top: 0;
	transform: rotate(-45deg);
}

@media screen and (max-width: 1300px) and (min-width: 601px) {

	#stream, .main-grid {
		--content: 90%;
		--narrow: 80%;
		grid-template-columns: repeat(3, 1fr);
	}

	header .flex {
		flex-wrap: wrap;
		flex-grow: 2;
		justify-content: center;
		font-size: 14px;
	}

	header .logo {
		flex: 1 1 100%;
		text-align: center;
	}

	header .logo a {
		font-size: 1.5em;
	}

	#about {
		padding-block: 150px 0;
		background-size: auto calc(100% - 150px);
	}

	#entry + #blog {
		grid-template-columns: repeat(2, 1fr);
		width: 100%;
		max-width: var(--content);
	}

	
}


@media screen and (max-width: 800px) {

	#stream, .main-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	
}

@media (orientation: landscape) and (max-width: 1000px) {

	:root {
		--narrow: 90%;
		--content: 90%;
		--gap: 30px;
	}

	#entry + #blog {
		margin: 5vw;
		width: 100%;
		max-width: var(--content);
	}

	header .logo a {
		font-size: 1.3em;
	}

	#about {
		height: 80vw;
	}

	h1 {
		font-size: 1.8em;
	}

	#post-header, #cover img {
		height: 100vh;
	}

	.blog-grid article {
		flex: 1 1 35%;
	}

	.blog-grid article:nth-of-type(1), .blog-grid article:nth-of-type(2) {
		flex: 1 1 70%;
	}
	
}

@media screen and (max-width: 600px) {

	:root {
		--gap: 20px;
		--em: 15px;
	}

	#top-menu {
		display: none;
		flex: 1 1 100%;
		padding-top: var(--gap);
	}

	#menu-menu,
	#menu-menu li {
		display: block;
	}

	#menu-menu {
		margin-bottom: .5em;
	}

	#menu-menu li a {
		display: block;
		width: 100%;
		padding: .5em 0;
	}

	#header.container {
		top: 10px;
	}

	.admin-bar #header.container {
		margin-top: 0;
	}
/*
	header .glass, header .glass-content {
		border-radius: 0 0 1em 1em;
	}*/

	header .glass-content {
		padding-block: 1em;
	}

	header .logo a {
		font-size: 1.2em;
	}

	#about .container {
		flex-direction: column-reverse;
		text-align: left;
	}

	#about .bio {
		padding-right: 10%;
	}

	#about {
		height: 80vh;
		background-position: 40% bottom;
	}

	#about img {
		max-width: 60%;
	}

	.wallpaper-meta {
		opacity: 1;
		transform: translateY(0);
	}

	#menu-button {
		aspect-ratio: 1;
		align-items: center;
		justify-content: center;
		display: flex;
		width: 30px;
		border-radius: 4px;
	}

	:is(#menu-button, .close-modal) span.bar,
	:is(#menu-button, .close-modal) span.bar:before,
	:is(#menu-button, .close-modal) span.bar:after {
		width: 20px;
		height: 2px;
		background: currentColor;
		content: "";
		display: block;
		position: relative;
		border-radius: 2px;
		transition: all 0.4s;
	}

	:is(#menu-button, .close-modal) span.bar:before {
		margin-top: -7px;
		position: absolute;
	}

	:is(#menu-button.active, .close-modal) span.bar {
		background: transparent;
	}

	:is(#menu-button, .close-modal) span.bar:after {
		margin-top: 7px;
		position: absolute;
	}

	:is(#menu-button.active, .close-modal) span.bar:before {
		margin-top: 0;
		transform: rotate(45deg);
	}

	:is(#menu-button.active, .close-modal) span.bar:after {
		margin-top: 0;
		transform: rotate(-45deg);
	}

	.sub-menu {
		position: static;
		opacity: 1;
		transform: none;
		display: block;
		background: none;
		backdrop-filter: none;
		box-shadow: none;
		border: 0;
		padding: 0 0 0 1em;
	}

	.sub-menu li {
		padding: 0;
		text-align: left;
	}

	#menu-social {
		gap: 5px;
	}

	header .flex {
		flex-wrap: wrap;
		gap: 0;
	}

	#about {
		font-size: 1em;
	}

	#post-header, #cover img {
		height: 80vh;
	}

	#entry > * {
		padding-inline: var(--gap);
	}

	.main-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.blog-grid > article,
	.blog-grid article:nth-of-type(1), .blog-grid article:nth-of-type(2) {
		flex-basis: 100%;
	}
	
	.owl-stage .opinia {
		margin-inline: var(--gap);
		width: unset;
	}
}

@media screen and (max-width: 450px) {

	#stream, .main-grid, #entry + #blog {
		grid-template-columns: 100%;
	}
	
	h1 {
		font-size: 1.5em;
	}

	#modal-overlay .modal-window {
		margin-top: 100px;
	}
	
	.modal-content {
		padding-bottom: calc(6 * var(--gap));
		font-size: 16px;
	}

	
}