:root {
	--gutter-sm: 30px;
	--gutter-md: 4em;
}

p:empty {
	display: none;
}

/*
 *  Navigation
 *
 */

ul.menu {
	font-family: var(--ropecon-font-heading);
	font-weight: 500;
	font-size: 70%;
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 1.4em;
}
	ul.menu a {
		line-height: 1.4rem;
	}

/*
 *  Links
 *
 */

a, a:link, a:visited {
	color: var(--ropecon-link);
}
	a:hover, a:active, a:focus {
		color: var(--ropecon-link-hover);
	}

/*
 *  Headings
 *    (and large text)
 *
 */

h1, h2, h3, h4, h5, h6,
.has-large-font-size {
	font-family: var(--ropecon-font-heading);
	font-weight: 700;
}

h1, h2, h3, h4, h5, h6 {
	margin: 1.2em 0 0.7em 0;
	text-align: left;

	line-height: 1.4em;
}

h1 { font-size: 200%; }
h2 { font-size: 140%; }
h3 { font-size: 130%; }
h4 { font-size: 120%; }
h5 { font-size: 110%; }
h6 { font-size: 105%; }
/* --> TODO */

footer section h2 {
	font-size: 80%;
	font-weight: 500;
	text-transform: uppercase;
}

@media screen and (min-width:400px) {
	h1 { font-size: 250%; }
}

@media screen and (min-width:768px) {
	h1 { font-size: 400%; }
		.wp-block-media-text h1 { font-size: 275%; }
}

@media screen and (min-width:1200px) {
	.wp-block-media-text h1 { font-size: 400px%; }
}

/*
 *  Paragraphs
 *
 */

p {
	line-height: 1.625em;
}

/*
 *  Images
 *
 */

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

/*
 *  Gutenberg blocks
 *
 */

#content > [class*="wp-block"] {
	clear: both;
}

/*  Buttons  */

.wp-block-buttons {
	margin-bottom: 1em;
}

/*  Columns  */

.wp-block-columns {
	align-items: stretch;
	margin-bottom: 0;
}
	.wp-block-columns .wp-block-column {
		margin-left: 0;
	}

	.wp-block-columns .wp-block-column .wp-block-group {
		height: 100%;
	}

@media screen and (max-width:768px) {
	.wp-block-columns .wp-block-column {
		flex-basis: 100% !important;
	}
}

	/*  Block style: Content in boxes  */

	.wp-block-columns.is-style-content-in-boxes {
		margin-top: 2em !important;
		margin-bottom: 2em !important;
	}
		.wp-block-columns.is-style-content-in-boxes .wp-block-column {
			background-color: #fff;
			padding: 1em;
			margin-bottom: 2em;
		}
			.wp-block-columns.is-style-content-in-boxes .wp-block-column > :first-child { margin-top: 0; }
			.wp-block-columns.is-style-content-in-boxes .wp-block-column > :last-child { margin-bottom: 0; }

			.wp-block-columns.is-style-content-in-boxes .wp-block-column:hover {
				box-shadow: 0 0 2em 0 rgba(0,0,0,0.05);
			}

		.wp-block-columns.is-style-content-in-boxes .wp-block-column > figure:first-child {
			margin: -1em -1em 1em -1em;
		}
			.wp-block-columns.is-style-content-in-boxes .wp-block-column > figure:first-child + * {
				margin-top: -5px;
			}

@media screen and (min-width:769px) {
	.wp-block-columns.is-style-content-in-boxes .wp-block-column {
		margin-bottom: 0;
	}
		.wp-block-columns.is-style-content-in-boxes .wp-block-column:not(:first-child) {
			margin-left: 2em !important;
		}
}

/*  Cover  */

#content .wp-block-cover.is-style-full-height {
	min-height: 100vh;
}
	#content .wp-block-cover.is-style-full-height > .wp-block-cover__inner-container {
		margin: 3em 0;
	}

	.wp-block-cover h1,
	.wp-block-cover h2,
	.wp-block-cover h3,
	.wp-block-cover h4,
	.wp-block-cover h5,
	.wp-block-cover h6 {
		text-shadow: 2px 2px 0 rgba(0,0,0,1);
	}

/*  Group  */

.wp-block-group {
	padding: 4em;
}
	.wp-block-group__inner-container > :first-child { margin-top: 0; }
	.wp-block-group__inner-container > :last-child { margin-bottom: 0; }

/*  Latest Posts  */

.wp-block-latest-posts {
	padding: 4em 0;
}
	.wp-block-latest-posts li {
		background-color: var(--ropecon-background-highlight);
		padding: 2em;
		margin-bottom: 1em;
	}
		.wp-block-latest-posts li > a:first-child {
			/* == h2 */
			font-family: var(--ropecon-font-heading);
			font-size: 140%;
			font-weight: 700;
		}

		.wp-block-latest-posts li:hover {
			box-shadow: 0 0 2em 0 rgba(0,0,0,0.05);
		}
			.wp-block-latest-posts__post-full-content > :last-child {
				margin-bottom: 0;
			}

/*  Media & Text  */

#content .wp-block-media-text {
	padding: 0;
	background-color: var(--ropecon-background);
	overflow: hidden;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
}

	.wp-block-media-text .wp-block-media-text__media,
	.wp-block-media-text .wp-block-media-text__content {
		grid-column: auto;
	}
		.wp-block-media-text .wp-block-media-text__content {
			margin: 0;
			padding: var(--gutter-sm);
			grid-row: 1 !important;
		}
		.wp-block-media-text .wp-block-media-text__media {
			grid-column: 1 !important;
			grid-row: 2 !important;
			max-height: 50vh;
			overflow: hidden;
		}

			.wp-block-media-text .wp-block-media-text__content > :first-child { margin-top: 0; }
			.wp-block-media-text .wp-block-media-text__content > :last-child { margin-bottom: 0; }

#content > .wp-block-media-text:first-child .wp-block-media-text__content {
	margin-top: 4em;
}
#content > :not([class*='wp-block']):first-child {
	padding-top: 100px;
}

@media screen and (min-width: 768px) {
	.wp-block-media-text {
		grid-template-columns: repeat(2, 1fr) !important;
	}
		.wp-block-media-text .wp-block-media-text__media,
		.wp-block-media-text .wp-block-media-text__content {
			grid-column: auto !important;
			grid-row: 1 !important;
		}
		.wp-block-media-text .wp-block-media-text__media {
			position: relative;
			max-height: 100%;
			height: 100%;
			width: 100%;
			overflow: hidden;
		}
			.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
				grid-column: 2 !important;
			}
			.wp-block-media-text .wp-block-media-text__media img {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: 0;
				padding: 0;
				width: 100%;
				height: 100%;
				max-width: none;
				max-height: none;
				-o-object-fit: cover;
				object-fit: cover;
			}
		.wp-block-media-text .wp-block-media-text__content {
			padding: var(--gutter-md);
		}

		/*  Force media of "odd" childs to the right column  */
		.wp-block-media-text:nth-child(odd) .wp-block-media-text__media {
			grid-column: 2 !important;
		}

	#content > .wp-block-media-text:first-child .wp-block-media-text__content {
		margin-top: initial;
	}
}

@media screen and (min-width:1280px) {
	.wp-block-media-text .wp-block-media-text__content {
		padding: 6em 0;
		width: 50%;
		margin-left: 25%;
	}
}

/*  Block style: Text overlaying image  */

@media screen and (min-width:768px) {
	.wp-block-media-text.is-style-text-overlaying-image {
		display: grid;
	}
		.wp-block-media-text.is-style-text-overlaying-image .wp-block-media-text__media,
		.wp-block-media-text.is-style-text-overlaying-image .wp-block-media-text__content {
			grid-row: 1 !important;
			position: relative;
			top: 0;
			left: 0;
		}
		.wp-block-media-text.is-style-text-overlaying-image .wp-block-media-text__media {
			grid-column: 1 !important;
			width: 200%;
		}
		.wp-block-media-text.is-style-text-overlaying-image .wp-block-media-text__content {
			color: #fff;
			position: relative;
			z-index: 2;
		}
}

@media screen and (min-width:1024px) {
	.wp-block-media-text.is-style-text-overlaying-image .wp-block-media-text__content {
		width: 100%;
		max-width: 570px;
		margin-right: 30px;
		margin-left: 0;
	}
}

@media screen and (min-width:1280px) {
	.wp-block-media-text.is-style-text-overlaying-image.has-media-on-the-right .wp-block-media-text__content {
		margin-left: 25%;
	}
}

/*  Paragraph  */

	/*  Block style: Currency  */
	p.is-style-currency span.currency {
		font-size: 50%;
		line-height: 250%;
		margin-right: 0.3em;

		vertical-align: top;
	}

/*  Table  */

.wp-block-table {
	margin-top: 2em !important;
	margin-bottom: 2em !important;
}
	table {
		width: 100%;
		table-layout: fixed;
		background-color: #fff;
	}
		td, th {
			padding: 0.5em 0.9em;
			border: 1px solid rgba(0,0,0,0.2) !important;
		}
			thead td, th {
				text-align: left;
				font-family: var(--ropecon-font-heading);
				font-weight: 600;
			}


/*
 *  Common classes
 *
 */

.hidden { display: none; }
.small { font-size: 85%; }
.alignright { float: right; margin: 1em 0 1em 1em; }
.alignleft { float: left; margin: 1em 1em 1em 0; }
.aligncenter { clear: both; display: block; margin: 1em auto; }

/*
 *  Color palette
 *
 */

.has-black-background-color { background-color: #000; }
.has-black-color { color: #000; }

.has-dark-gray-background-color { background-color: #232323; }
.has-dark-gray-color { color: #232323; }

.has-light-gray-background-color { background-color: #f4f4f4; }
.has-light-gray-color { color: #f4f4f4; }

.has-white-background-color { background-color: #fff; }
.has-white-color { color: #fff !important; }

/*  Highlight colors  */

.has-ropecon-highlight-one-background-color { background-color: var(--ropecon-highlight-one); }
.has-ropecon-highlight-one-color { color: var(--ropecon-highlight-one); }

/*
 *  Animations
 *
 */

.ropecon-block-pattern.wp-block-cover[data-ll-status="loading"],
.ropecon-block-pattern .wp-block-cover[data-ll-status="loading"] {
	background-color: var(--ropecon-highlight-one);
	animation: 600ms linear 0s infinite alternate running loading-cover-image;
}

@keyframes loading-cover-image {
	0% { opacity: 0.85; }
	100% { opacity: 1; }
}

.fade-in-up.is-hidden {
	opacity: 0;
}
.fade-in-up.is-visible {
	animation: 800ms ease 0s 1 normal none fade-in-up;
}

@keyframes fade-in-up {
	0% { opacity: 0; transform: translate3d(0,75%,0); }
	100% { opacity: 1; transform: none; }
}

/*
 *  Icons
 *
 */

p[class^="icon-"], p[class*=" icon-"] {
	display: block;
	font-size: 48px;
	margin-bottom: 12px;
	text-align: center;
}
	p[class^="icon-"].has-text-align-left, p[class*=" icon-"].has-text-align-left {
		text-align: left;
	}
	p[class^="icon-"].has-text-align-right, p[class*=" icon-"].has-text-align-right {
		text-align: right;
	}

	p.icon-Ropecon:before {
		content: " ";
		display: block;
		height: 48px;
		background-image: url(images/ropecon_icon.png);
		background-size: 48px;
		background-repeat: no-repeat;
		background-position: 50% 0;
	}
		p.icon-Ropecon.has-text-align-left:before {
			background-position: 0 0;
		}
		p.icon-Ropecon.has-text-align-right:before {
			background-position: 100% 0;
		}

/*
 *  Image information
 *
 */

.wp-block-media-text,
.wp-block-media-text__media {
	position: relative;
}

.image-information {
	position: absolute;
	z-index: 2;
	width: 100%;
	bottom: 0;

	display: grid;
	grid-template-columns: 50px auto;
	grid-template-areas: "area-icon area-info";
	align-items: center;

	color: #fff;
}
	.image-information span.icon {
		display: block;
		grid-area: area-icon;

		width: 30px;
		padding: 3px;
		margin: 10px;

		font-size: 24px;

		border-radius: 50%;
		transition: 200ms all;
	}
		*:hover > .image-information span.icon {
			background-color: rgba(0,0,0,0.5);
		}
	.image-information span.info {
		display: none;
		grid-area: area-info;

		font-family: var(--ropecon-font-heading);
		font-size: 12px;
		font-weight: 500;
		text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
	}
		.image-information.information-visible span.info {
			display: block;
		}

@media screen and (min-width:768px) {
	.wp-block-cover .image-information,
	.wp-block-media-text.has-media-on-the-right .image-information {
		grid-template-columns: auto 50px;
		grid-template-areas: "area-info area-icon";
	}
		.wp-block-cover .image-information span.info,
		.wp-block-media-text.has-media-on-the-right .image-information span.info {
			text-align: right;
		}
}