/*
Theme Name:  Kalium Child
Theme URI:   
Description: Child theme of Kalium
Author:      
Template:    kalium
Version:     1.0.0
Text Domain: getfound
*/

html:has(body.single-case, body.page-template-page-cases) {
	font-size: 16px;
}

body:is(.single-case, .page-template-page-cases) {
	--wp--style--block-gap: 12px;

	* {
		box-sizing: border-box;
	}

	.content-wrapper {
		width: calc(100% - 32px);
		max-width: 1312px;
		margin-inline: auto;

		> *:first-child {
			margin-top: 0 !important;
		}
	}

	:where(
		.wp-block-image.is-style-rounded img,
		.wp-block-image .is-style-rounded img
	) {
		border-radius: 8px;
	}

	.is-layout-grid {
		.wp-block-separator {
			margin-block: 15px;
			color: rgba(113, 77, 0, 0.1);
		}
	}

	.wp-block-gallery {
		margin-bottom: 8px;
	}
	:where(.wp-block-columns.is-layout-flex) {
		gap: var(--wp--style--block-gap);
	}
}

body.page-template-page-cases {
	.content-wrapper {
		header {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			gap: 24px;
			margin-bottom: 72px;

			h1 {
				margin: 0;
				font-size: 88px;
				font-weight: bold;
				letter-spacing: -0.02em;
				color: #151515;
			}

			p {
				margin: 0;
				font-size: 18px;
				line-height: 24px;
				color: #151515;
			}
		}

		.cases-list {
			&:not(:has(+ .cases-pagination)) {
				margin-bottom: 100px;
			}
		}
	}
}

:root:where(
	.wp-block-image.is-style-rounded img,
	.wp-block-image .is-style-rounded img
) {
	border-radius: 8px;
}

.cases-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	list-style: none;
	padding: 0;
	margin: 0;
}

ul.page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-block: 24px 100px;
	padding: 0;

	li {
		display: flex;
	}

	.page-numbers {
		background: transparent;
		color: #f7d36e;
		border: 1px solid #fff;
		padding: 4px 12px;
		border-radius: 32px;
		width: fit-content;
		margin: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20px;
		font-weight: 500;
		min-width: 40px;
		min-height: 40px;

		&::after {
			display: none !important;
		}

		&.current {
			border-color: #f7d36e;
			background: #f7d36e;
			color: #fff;
		}

		&:hover {
			text-decoration: none !important;
			border-color: #f7d36e;
		}
	}
}

.cases-list * {
	color: inherit;
}

.cases-list__item {
	position: relative;
	height: 100%;
	aspect-ratio: 644/350;
}

.case-post {
	position: relative;
	border-radius: 8px;
	color: white;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	padding: 1rem;
	text-decoration: none;
	height: 100%;
	background-size: 100%;
	transition: background-size 0.3s ease;
	background-position: center;

	h2 {
		margin: 0;
		color: #fff !important;
	}

	.collab {
		margin: 0;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		gap: 6px;
	}

	.case-content {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		gap: 12px;

		> a:not(.btn) {
			z-index: 1;
			position: absolute !important;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			text-decoration: none !important;
		}

		.btn {
			flex-shrink: 0;
			display: none;
			background: #f7d36e;
			align-items: center;
			justify-content: center;
			padding: 8px 24px;
			color: #151515;
			text-decoration: none;
			border-radius: 32px;
			font-size: 15px;
			line-height: normal;
			font-weight: 500;
			letter-spacing: -0.5px;
			margin: 0;
		}
	}

	h3 {
		margin: 0;
	}

	.case-meta {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 12px;

		> div {
			display: flex;
			gap: 4px 24px;
			align-items: center;
			justify-content: flex-start;
			flex-wrap: wrap;
		}
	}

	&:hover {
		background-size: 110%;
	}
}

.custom-btn {
	background: transparent;
	border: 1px solid white;
	padding: 4px 12px;
	border-radius: 32px;
	width: fit-content;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 1rem;
}

.markets-helped {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;

	li {
		display: flex;
		width: 18px;
	}

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

@media (max-width: 768px) {
	.custom-btn {
		font-size: 15px;
		line-height: normal;
	}

	.wp-block-group-is-layout-grid {
		grid-template-columns: 1fr !important;

		> * {
			grid-column: span 1 !important;
		}
	}

	.cases-list {
		grid-template-columns: 1fr !important;
	}

	.cases-list__item {
		aspect-ratio: 370/220;
	}

	.case-post {
		h3 {
			font-size: 20px;
		}

		.case-content {
			> a:not(.btn) {
				display: none;
			}

			.btn {
				display: flex;
			}
		}
		.case-meta {
			gap: 4px;

			> div {
				gap: 4px 12px;

				.collab {
					font-size: 14px;
				}
			}
		}
	}

	body.page-template-page-cases {
		.content-wrapper {
			header {
				flex-direction: column;
				align-items: flex-start;
				gap: 4px;
				margin-bottom: 24px;

				h1 {
					font-size: 44px;
				}

				p {
					font-size: 14px;
					line-height: 20px;
				}
			}

			.cases-list {
				margin-bottom: 48px;
			}
		}
	}
}

.clients-block {
	.clients-logos {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: anchor-center;
		gap: 70px 0;
		padding-bottom: 35px;
	}

	.client-logo-wrapper {
		padding-inline: 15px;
		width: 50%;
		display: flex;
		justify-content: center;
		align-items: flex-start;
	}

	.clients-logo {
		max-width: 100%;
		height: auto;
		object-fit: contain;
	}

	@media (max-width: 768px) {
		.clients-logo {
			padding: 0 !important;
		}
	}

	@media (min-width: 768px) {
		.clients-logos {
			justify-content: center;
		}
		.client-logo-wrapper {
			width: 20%;
		}

		.clients-logo {
			max-height: 62px;
		}
	}
}

footer:is(.site-footer) {
	background: #151515;
	color: #fff;
	padding: 32px 0;

	.container {
		width: calc(100% - 32px);
		max-width: 1312px;
		margin-inline: auto;
	}

	.content-wrapper {
		width: 100% !important;
		max-width: 100% !important;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		gap: 36px 60px;
	}

	.content {
		* {
			font-size: 16px;
			line-height: 24px;
			letter-spacing: -1px;
			color: #fff;
			font-weight: 400;
		}

		p {
			margin-bottom: 4px;
		}
	}

	.socials {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 24px;
		max-width: 300px;

		a {
			display: flex;
			align-items: center;
			justify-content: center;

			img {
				width: 60px;
				height: auto;
			}
		}
	}
}

/* Fixes for mobile */
@media (max-width: 768px) {
	.home {
		rs-slide {
			display: flex !important;
			flex-direction: column;
			align-items: flex-start;
			justify-content: flex-end;
			gap: 24px;
			padding: 24px 15px;

			> rs-layer-wrap {
				position: static !important;

				> rs-layer {
					white-space: initial !important;
				}
			}
		}

		h2 {
			overflow-wrap: anywhere;
		}

		.wpb_wrapper {
			.wpb_content_element:where([class*="vc_custom"]) {
				padding-inline: 0px !important;
			}
		}

		.vc_column-inner:where([class*="vc_custom"]) {
			padding-inline: 15px !important;
			padding-block: 30px !important;
		}

		.vc_row.vc_inner:has(.vc_col-xs-6) {
			display: flex;
			flex-wrap: wrap;
		}

		.wpb_content_element:is(
			.vc_custom_1716384509579,
			.vc_custom_1716320194715
		) {
			margin-inline: auto !important;
		}
	}

	.wpb_text_column:is(
		.wpb_content_element.vc_custom_1719229504692.post-formatting
	) {
		margin-inline: 15px !important;
	}

	.vc_row:is(.vc_custom_1588094167123, .vc_custom_1588093425076) {
		margin-top: 50px !important;
		margin-right: -15px !important;
	}

	:is(.blog, .single) {
		.column.column--sidebar,
		.post-sidebar {
			.textwidget.custom-html-widget {
				display: none;
			}
			.widget_text.widget.widget_custom_html {
				display: none;
			}
		}
	}

	/* kontakta-oss-2 */
	.vc_custom_1759377914758 {
		margin-inline: 15px !important;
	}
	.wpb_text_column.wpb_content_element:is(
			.vc_custom_1588530921878,
			.vc_custom_1759377914758
		).post-formatting {
		margin-inline: 15px !important;
	}
	.wpb_text_column.wpb_content_element:is(
			.vc_custom_1588610019864
		).post-formatting {
		margin-inline: 15px !important;
	}
	.vc_column-inner.vc_custom_1558421219329 {
		padding-top: 0px !important;

		.vc_custom_1583755366452 {
			margin-top: 0px !important;
		}
	}

	/* kontakta-oss */
	.lab-contact-form.contact-form.vc_custom_1558421285299 {
		padding-inline: 0px !important;
	}

	footer.site-footer {
		.content-wrapper {
			flex-direction: column;
			text-align: center;
		}
		.socials {
			a {
				img {
					width: 40px;
				}
			}
		}
	}
}

/* Fixes for blog and posts page */

body:is(.blog, .single-post) {
	.site-header.main-header {
		padding-bottom: 20px;
	}

	.site-header.main-header,
	.site-header--sticky-spacer {
		background: transparent;
	}
	.header-block {
		background-color: rgba(32, 34, 43, 1);

		&.site-header--sticky-active-style {
			background-color: rgba(32, 34, 43, 0.47);
		}
	}
}

body.blog {
	.post {
		.post-meta {
			a {
				font-weight: 600;
				color: #003366;

				&:hover {
					color: #f8da70;
				}
			}
		}
	}

	.column.column--sidebar {
		.widget_text.widget.widget_custom_html {
			display: none;
		}
	}

	.pagination--normal {
		.page-numbers {
			color: #003366;
		}
	}
}

body.single-post {
	.post {
		.entry-header {
			.post-title {
				font-size: 42px;
				font-weight: bold;
			}
		}

		a {
			color: #003366;
			font-weight: 400;

			&:hover {
				color: #f8da70;
			}
		}
	}

	.single-post > .container > .row {
		display: grid;
		grid-template-columns: 1fr 250px;

		&::before,
		&::after {
			display: none;
		}

		.post-image {
			grid-column: 1;
			grid-row: 1;
		}

		.post {
			grid-column: 1;
			grid-row: 2;
			width: 100%;
		}

		.post-sidebar {
			grid-column: 2;
			grid-row: span 2;
			width: 100%;

			.widget_text.widget.widget_custom_html {
				display: none;
			}
		}
	}

	@media (max-width: 768px) {
		.single-post > .container > .row {
			grid-template-columns: 1fr;

			.post-sidebar {
				grid-column: 1;
			}
		}
	}
}

/* Rid of underline for links with images */
a:has(> img) {
	&::after {
		display: none !important;
	}
}

/* ::selection {
    background: #f8da70;
    color: #f2f2f2;
} */