/*
Name: Expozition
*/

/* See: https://developer.wordpress.org/themes/basics/main-stylesheet-style-css/#example */

/* Wordpress process the first comment block automatically for registering the theme
But, wa have to register this style sheet for wordpress use the css code in it...
So add this code in function.php
<?php
// Front-end
add_action( 'wp_enqueue_scripts', function() {
	wp_enqueue_style( 'style', get_stylesheet_uri() );
});

// Gutenberg
// Add support for Editor Styles
add_theme_support('editor-styles');
// Enqueue Editor Styles
add_editor_style('style.css');
?>
*/

/* You can use var(--wp--preset--{slug}) and var(--wp--custom--{...}) */

.wp-site-blocks {
	overflow-x: hidden; /* fix for .fix-allow-right-overflow */
}

.wp-site-blocks {
	padding-top: 6rem;
	/*padding: 6rem 5rem 0px 5rem;*/
}

.overlay-container{
	position: relative;
	overflow: hide;
	color: white;
}

.overlay-container > img {
	height: 200px;
	width: 100%;
	display: block;
}

.layer-center{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.layer-top-right{
	position: absolute;
	right: 0px;
	top: 0px;
}

.layer-bottom-right{
	position: absolute;
	right: 0px;
	bottom: 0px;
}

.layer-bottom-left{
	position: absolute;
	left: 0px;
	bottom: 0px;
}

/** Navigation **/
.fix-header-menu {
	background-color: rgba(255, 255, 255, 0.75);
	backdrop-filter: blur(20px);
	border-radius: 3rem;
	padding: 0.75rem;
	max-width: calc(var(--wp--style--global--content-size) - 1rem);
}

.fix-header-menu:has(.is-menu-open) {	/* Fix menu opening size on mobile ... */
	backdrop-filter: initial;
}

header {
	width: 100%;
	z-index: 15;
	position: fixed;
	top: 1rem;
}

/** Pagination **/
.wp-block-query-pagination {
	gap: 4px !important;
	margin-top: 3rem !important;
}

.wp-block-query-pagination-numbers {
	display: flex;
	gap: 4px !important;
}

.wp-block-query-pagination-previous, .wp-block-query-pagination-next, .page-numbers {
	display: flex;
	margin-right: 0px !important;
	margin-left: 0px !important;
	width: 2em;
	height: 2em;
	align-items: center;
	justify-content: center;
	background-color: var(--wp--preset--color--grey-bg);
	border-radius: 5px;
}

.wp-block-query-pagination-previous-arrow, .wp-block-query-pagination-next-arrow {
	margin: 0px !important;
}

.page-numbers.current {
	background-color: var(--wp--custom--color--accentuation);
}

/** Miscellaneous **/
.zoom-in:hover {
	outline: 2px solid var(--wp--custom--color--accentuation);
	outline-offset: 2px;
	border-radius: calc(1rem + 2px);
}

/** fix expo selector block **/
.fix-13857 {
	flex-grow: 1;
}

.fix-645829537 {
	margin-top: auto !important;
}

.fix-wp-block-cover-height .wp-block-cover {
	height: 10rem !important;
	width: auto !important;
}

.fix-wp-block-cover-width .wp-block-expo-zoom-in-on-hover {
	width: 100% !important;
	height: auto !important;
}

ul.wp-block-post-template.as-flex {
	display: flex;
	overflow-x:	auto;
}

ul.wp-block-post-template.as-flex li {
	all: initial;
}

.fix-button-visit-expo::after {
	content: "";
	background-color: rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(20px);
	border-radius: 3rem;
	height: 3rem;
	width: 10rem;
	z-index: -1;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.fix-button-visit-expo::before {
	content: "";
	display: inline-block;
	background-image: url(/wp-content/uploads/2025/05/DoorOpen_white.svg);
	background-size: contain;
	aspect-ratio: 1;
	height: 2rem !important;
	width: auto !important;
	position: relative;
	left: -0.25em;
	vertical-align: middle;
}

.fix-button-visit-expo {
	display: flex;
	align-items: center;
	justify-content: center;
}

.fix-galeri-logo-size {
	height: 3rem !important;
}

.fix-remove-italic em {
	font-style: normal;
}

/** Link **/
a {
	text-decoration: none !important;
	color: inherit !important;
}

/** wp-block-categories **/
.wp-block-categories {
	display: flex;
	padding: 0px;
	column-gap: 20px;
}

.wp-block-categories li {
	display: block;
	border-radius: 100px;
	padding: 0.75rem 1.25rem;
	background-color: var(--wp--preset--color--grey-bg);
}

/** wp-post-template **/
.as-flex {
	gap: 1rem;
	padding: 4px 4px;	/* so .zoom-in:hover is completly visible */
}

/** acf-avatar **/
.acf-avatar {
	height: 2rem;
	width: 2rem;
	border-radius: 2rem;
}

.acf-avatar-40 {
	height: 2.5rem;
	width: 2.5rem;
	border-radius: 2.5rem;
}
.acf-avatar-80 {
	height: 5rem;
	width: 5rem;
	border-radius: 5rem;
}

.acf-avatar-160 {
	height: 10rem;
	width: 10rem;
	border-radius: 10rem;
}

/** inline image **/
.inline-image img {
	height: 1em;
	width: auto;
	vertical-align: text-bottom;
	margin-left: 0.2em;
}

/** wp-block-button **/
.wp-block-button__link {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/** breadcrumb **/
.breadcrumb{
	color: rgb(207, 207, 207);
}

.breadcrumb strong{
	color: initial;
}

/** headers **/
.category-headline-home {
	font-family: Inter;
	font-size: var(--wp--preset--font-size--3-x-large);
	font-style: normal;
	font-weight: 600;
	line-height: normal;
}

/** card link **/
a.card_link:after {
	content: "";
	position: absolute !important;
	inset: 0px;
}

.card_link_container:has(.card_link) {
	position: relative !important;
}

.card_link_container *:has(.card_link) {
	position: unset;
}

.card_link_container a:not(a.card_link) {
	position: relative;
	z-index: 10;
}

/** wp-block-date **/
.wp-block-post-date:before{
	content:url(/wp-content/uploads/2025/05/Clock.svg);
	height: 1em;
	width: auto;
	vertical-align: middle;
	margin-right: var(--wp--preset--spacing--20);
}

/** Swiper.js **/
.swiper {
	overflow: visible !important;
}

.swiper-wrapper {
	padding: 0px;

}

.swiper-slide {
	width: 24rem !important;
}