/*****************************************/
/* Variables
/*****************************************/
:root {
	/* --me-title-text-transform: capitalize; */
}

/*****************************************/
/* Common styles.
/*****************************************/

/* HEADER */
.bloglo-header-layout-5:not(.bloglo-sticky-header) #bloglo-header {
	margin: 0;
	padding: 0;

	&>#bloglo-header-inner {
		border-radius: 0;
		max-width: unset;
		margin: 0;

		.site-navigation {
			border-radius: 0;
		}
		
		.bloglo-nav.bloglo-header-element {
			font-size: var(--wp--preset--font-size--medium);
		}

		&>.bloglo-container {

			max-width: unset;

			& .logo-inner {
				margin-top: 1rem;
				margin-bottom: 1rem;

				&>a {
					display: flex;
					font-size: 2.8rem;
					text-transform: uppercase;
					gap: 1rem;

					&>span {
						margin-top: -3px;
					}
				}

				& img {
					max-height: 80px;
				}
			}

		}
	}
}

.bloglo-layout__boxed-separated #masthead+#main,
.bloglo-layout__boxed-separated:not(.archive, .blog, .category, .search-results) #masthead+#main {
	padding: 0 3rem;

	/* BREADSCRUMS */
	&>.bloglo-breadcrumbs {
		border-radius: 0;
		max-width: 1280px;
		width: 100%;
		margin: 3rem auto 0;

		&>.bloglo-container {
			max-width: unset;

			.trail-item.trail-end {
				font-weight: bold;
			}
		}
	}

	/* CONTENT */
	&>.bloglo-container {
		max-width: 1280px;
		margin: 3rem auto 0;
		padding: 0;

		&>#primary {
			margin-top: 0 !important;
			margin-bottom: 3rem;

			#content {
				border-radius: 0 !important;


				div:has(>.qrcswholewtapper) {
					display: none;
				}

				.post-thumb.entry-media.thumbnail {
					display: none;
				}

				h1 {
					text-align: center;
				}

				p {
					text-align: justify;
				}

				.bloglo-entry {
					.wp-block-image {
						float: right;
						margin: 0 0 1rem 3rem;
						border: 1px solid #000;
						box-shadow: 0 0 0.5rem;
					}
					
					.wp-block-gallery {
						.wp-block-image {
							max-width: fit-content;
							max-height: fit-content;
						}
					}
					
					.pgc-sgb-cb {
						min-height: fit-content;	
						margin-bottom: 3rem;
					}
					
					.pgcsimplygalleryblock-justified-content {
						gap: 1rem;
						padding: 0 !important;
						.pgcsimplygalleryblock-justified-item.pgc-image {
							border: 1px solid #000;
							box-shadow: 0 0 0.5rem;
							
							&:not(.pgc-portrait) img:not(.emoji) {
								width: 102% !important;
							}
						}
						
						
						
						.pgcsimplygalleryblock-justified-main-wrap.pgc-image {
							padding: 0 !important;
							
							.pgcsimplygalleryblock-justified-item-wrap {
								border: 0 !important;
							}
						}
					
					}
					
					.pgcsimplygalleryblock-justified-collection .pgcsimplygalleryblock-justified-content {
						justify-content: center;		
					}
				}
			}

			.post-nav {
				padding: 3rem;
				background-color: #fff;
				border: 1px solid #000;

				.nav-title {
					font-weight: bold;
					text-transform: uppercase;
					font-size: inherit;
					margin-bottom: 0;
				}

				a[rel="prev"] .nav-content span:before {
					content: "< ";
				}

				a[rel="next"] .nav-content span:after {
					content: " >";
				}
				

			}
		}
	}


}

/* FOOTER */
#colophon {
	margin-left: -3rem;
	width: calc(100% + 6rem);
}

.pager {
	display: flex;
	justify-content: space-between;
}


.bloglo-layout__boxed-separated.category .bloglo-article {
	border-radius: 0 !important;
}

.post-category {
	display: none;
}

.fields-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
	align-items: center;

	.field {
		display: flex;
		flex-direction: row;
		gap: 1rem;
		justify-content: center;
		align-items: center;
		border: 1px solid #000;
		padding: 0.5rem 1rem;
	}
}

/* article */
.single .entry-footer {
	display: none;
}

:not(.single) .entry-footer {
	margin: 0 !important;

	display: flex;
	justify-content: space-between;

	& .entry-meta {
		margin: 0 !important;

		& .entry-meta-elements {
			margin: 0 !important;
		}
	}

	& .bloglo-btn.btn-text-1 {
		border-radius: 0 !important;
	}
}

.bloglo-hover-slider .entry-content,
.single .entry-content {
	margin-bottom: 0;
}



/* FOOTER */

#bloglo-copyright {
	background-color: black !important;
	border-width: 0 !important;
	color: white !important;
}

/* QR CODE */
div:has(>.qrcswholewtapper) {
	margin: 0 !important;

	.qrc_canvass,
	.qrcprowrapper,
	.qrcswholewtapper {
		height: fit-content;
	}
}


/*****************************************/
/* Responsive styles.
/*****************************************/
/* 
  ##Device = Most of the tablets and smartphones
  ##Screen = 768px and under.
*/
@media screen and (max-width: 768px) {
	body {
		/* background: red !important; */
	}

	.bloglo-header-layout-5:not(.bloglo-sticky-header) #bloglo-header {
		&>#bloglo-header-inner {

			.site-navigation {
				margin-top: 1px;
			}

			&>.bloglo-container {
				padding: 0 3rem;

				& .logo-inner {


					&>a {

						&>span {
							display: none;
						}

						&>img {
							max-height: 70px;
						}
					}
				}
			}
		}
	}

	/* CONTENT */
	.bloglo-layout__boxed-separated #masthead+#main,
	.bloglo-layout__boxed-separated:not(.archive, .blog, .category, .search-results) #masthead+#main {
		&>.bloglo-container {
			&>#primary {

				& #content {
					& .bloglo-entry {
						& .wp-block-image {
							width: fit-content;
							float: none;
							margin: 0 auto 2rem auto;

						}
					}
				}
			}
		}
	}

	.post-nav {
		padding: 3rem;
		background-color: #fff;
		border: 1px solid #000;

		>div {
			white-space: nowrap;
			flex-grow: 1;
		}

		.nav-title {
			font-weight: bold;
			text-transform: uppercase;
			font-size: inherit;
			margin-bottom: 0;
		}

		a[rel="prev"] .nav-content span:before {
			content: "< ";
		}

		a[rel="next"] .nav-content span:after {
			content: " >";
		}
	}
}

/* 
  ##Device = Desktops and landscape tablets
  ##Screen = 769px and upper.
*/
@media screen and (min-width: 769px) {
	body {
		/* background: green !important; */
	}
}

/* 
  ##Device = Large desktops and upper (incl. iPad Pro in landscape mode)
  ##Screen = 1281px and upper.
*/
@media screen and (min-width: 1281px) {
	body {
		/* background: blue !important; */
	}

	.bloglo-header-layout-5:not(.bloglo-sticky-header) #bloglo-header {
		&>#bloglo-header-inner {
			&>.bloglo-container {

				& .logo-inner {


					&>a {

						&>span {
							font-size: 3.5rem;
						}

						&>img {
							max-height: 100px;
						}
					}
				}
			}
		}
	}
}