/*
Theme Name: OCD Arhitekti
Author: Denis Žoljom
Version: 1.0.0
Description: A website portfolio for OCD Arhitekti.
Text Domain: ocdarhitekti
Requires at least: 6.8
Requires PHP: 8.4
*/

body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

body.overflow-hidden {
	overflow: hidden;
}

mark {
	background-color: transparent;
}
/* Navigation */

.wp-block-template-part:has(>.is-position-sticky) {
	--wp-admin--admin-bar--position-offset: var(--wp-admin--admin-bar--height, 0px);
	position: sticky;
	top: calc(0px + var(--wp-admin--admin-bar--position-offset, 0px));
	z-index: 101;
}

header .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
	padding: 0.5rem 1rem;
}

header .wp-block-navigation .wp-block-navigation-item:last-of-type .wp-block-navigation-item__content.wp-block-navigation-item__content {
	padding-right: 0;
}

header .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content .wp-block-navigation-item__label {
	position: relative;
}

footer .wp-block-navigation__container {
	gap: 0.5rem;
}

.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content .wp-block-navigation-item__label:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -0.25rem;
	width: 100%;
	opacity: 0;
	height: 0.0625rem;
	background: currentColor;
	transition: opacity 0.3s ease;
}

.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover .wp-block-navigation-item__label:after,
.wp-block-navigation .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__label:after {
	opacity: 1;
}

/* Mobile nav */

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	--navigation-layout-justification-setting: flex-start;
	padding-left: var(--wp--style--root--padding-left);
}

.wp-block-navigation__responsive-container-close {
	top: 1.25rem;
	right: 1.25rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
	--navigation-layout-justification-setting: flex-start;
}

@media (min-width: 782px) {
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		--navigation-layout-justification-setting: flex-end;
	}
}

footer .wp-block-navigation.items-justified-right.is-vertical {
	--navigation-layout-align: flex-start;
	--navigation-layout-justify: flex-start;
	align-items: flex-start;
}

@media (min-width: 782px) {
	footer .wp-block-navigation.items-justified-right.is-vertical {
		--navigation-layout-align: inherit;
		--navigation-layout-justify: inherit;
		align-items: flex-end;
	}
}

/* Gallery */

.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 11;
}

.wp-block-gallery.has-nested-images figure.wp-block-image:hover figcaption {
	opacity: 1;
}

.wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption):before {
	display: none;
}

.wp-block-gallery.has-nested-images figure.wp-block-image .wp-element-caption {
	top: 60%;
	text-shadow: none;
	background: none;
	font-weight: 400;
	font-size: var(--wp--preset--font-size--default);
}

.wp-block-gallery.has-nested-images figure.wp-block-image .lightbox-trigger {
	z-index: 9;
	top: 0!important;
	bottom: 0!important;
	right: 0!important;
	left: 0!important;
	height: 100%;
	width: 100%;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	background-color: rgba(0, 0, 0, 0.3);
}

.wp-block-gallery.has-nested-images figure.wp-block-image:hover .lightbox-trigger {
	opacity: 1;
}

.wp-block-gallery.has-nested-images figure.wp-block-image .lightbox-trigger svg {
	position: absolute;
	top: 5%;
	right: 8%;
}

.wp-block-gallery.has-nested-images figure.wp-block-image:has(a) a:after {
	content: "";
	height: 100%;
	background-color: rgba(0, 0, 0, 0.3);
	bottom: 0;
	left: 0;
	max-height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 10;
}

.wp-block-gallery.has-nested-images figure.wp-block-image:has(a):hover a:after {
	opacity: 1;
}

/* Buttons */

.wp-block-button__link {
	position: relative;
	padding: 0;
}

.wp-block-button__link:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -0.25rem;
	width: 100%;
	opacity: 0;
	height: 0.0625rem;
	background: currentColor;
	transition: opacity 0.3s ease;
}

.wp-block-button__link:hover:after {
	opacity: 1;
}

/* Separator */

.wp-block-separator {
	height: 0.0625rem;
	width: 100%;
}

/* List */

.wp-block-list .wp-block-list {
	margin-top: var(--wp--preset--spacing--minus-3);
}

.wp-block-list .wp-block-list li {
	padding-bottom: var(--wp--preset--spacing--minus-3);
}

/* Social */

.wp-block-social-link:hover {
	transform: scale(1);
}

:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-instagram,
:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-facebook,
:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-linkedin {
	background: var(--wp--preset--color--dark);
	opacity: 1;
	transition: background-color 0.3s ease-in, opacity 0.3s ease-in;
}

:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-instagram:hover,
:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-facebook:hover,
:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-linkedin:hover {
	background: var(--wp--preset--color--dark);
	opacity: 0.6;
	transition: background-color 0.3s ease-out, opacity 0.3s ease-out;
}

/* Post navigation */

.wp-block-post-navigation-link {
	font-size: var(--wp--preset--font-size--default);
}