/*
Theme Name: Zarthia Theme 2 (block)
Author: Hans August Kirkemann Friis
Author URI: https://hansaugust.com
Description: Developed for the Zarthia wiki-page, containing structured information about the Zarthia universe.
Requires at least: 6.7
Tested up to: 6.7.1
Requires PHP: 7.2
Version: 2.3.0
*/

/* # GLOBALS : */

* {
	/* ## reset : */
	margin: 0;
	padding: 0;
	background: none repeat scroll 0 0 transparent;
	border: medium none;
	border-spacing: 0;
	font-size: 16px;
	font-weight: normal;
	line-height: 1rem;
	text-decoration: none;
	text-indent: 0;
	list-style: none outside none;
	box-sizing: border-box;
	
	/* ## other globals : */
	transition: all .2s ease-in-out;
	scrollbar-width: thin;
	/* hehe : */
		/* border-radius: 500%;
		background-color: red; */
}

:root {
	/* ## VARIABLES : */
	/* ### BASE VARIABLES */
	/* #### COLORS : */
	--col-brass: #CCA051;
	--col-bone: #fcf5e8;
	--col-moss: #212824;
	--col-rosewood: #432e22;
	--col-sprout: #7eb;

	/* #### SIZES : */
	--siz-space-unit: 1rem;
	--siz-main-border-width: .16rem;
	--siz-nav-height: 6rem;
	--siz-content-width: 24rem;
	--siz-minimap-width: 10rem;
	--siz-footer-height: 4rem;
	--siz-main-height: calc(
		100vh - var(--siz-nav-height)
		- var(--siz-footer-height)
		- var(--siz-space-unit)
		* 4
	);

	/* #### DECOR : */
	--dec-border-radius-m: 2rem;
	--dec-clip-path_cutoff: polygon(
    0 .5rem, 1rem 0,
    calc(100% - 1rem) 0, 100% .5rem,
    100% calc(100% - .5rem), calc(100% - 1rem) 100%,
		1rem 100%, 0 calc(100% - .5rem)
	);

	/* ### UTILISED VARIABLES : */
	/* #### COLORS : */
	--util-col-interactive: var(--col-brass);
}

body {
	color: var(--col-bone);
	background: var(--col-moss);
	font-family: 'Inter', sans-serif;
	height: 100vh;
	padding: var(--siz-space-unit);
	/* § maybe later : */
		overflow: hidden;
}

/* § these grid settings originally belonged to `body`, but since wp block theme nests body children in `div.wp-site-blocks`, they were moved to this (move back to `body` to make the old CPT look right) : */
.wp-site-blocks {
	display: grid; gap: var(--siz-space-unit);
	grid-template-rows:
		var(--siz-nav-height)
		1fr
		var(--siz-footer-height);
	height: 100%;
}

img {
	display: block;
	max-width: 100%;
}


/* # MAIN */

.trans-but-wrapper {
	width: 100%;
	padding-inline: 1rem;
}

.trans-but {
	width: 100%;
	height: 2rem;
	color: var(--util-col-interactive);
	border: solid var(--siz-main-border-width) var(--util-col-interactive);
	cursor: pointer;
	/* border-radius: var(--dec-border-radius-m); */
}

.trans-but:hover {
	-webkit-box-shadow:0px 0px 8px 3px var(--util-col-interactive);
	-moz-box-shadow: 0px 0px 8px 3px var(--util-col-interactive);
	box-shadow: 0px 0px 8px 3px var(--util-col-interactive);
}


/* ## WIKI UI : */

#wiki-view .main-content {
	grid-template-columns: 1fr;
	position: relative;
}

#wiki-view .item_main-content {
	width: 100%;
	justify-content: center;
}

#wiki-view .post_main-content {
	width: calc(var(--siz-content-width) - 2 * var(--siz-space-unit));
	margin-right: var(--siz-minimap-width);
	/* padding-right: var(--siz-minimap-width); */
}

/* § `.mapsvg-wrap-all` is generated by the plugin */
#wiki-view .mapsvg-wrap-all {
	width: var(--siz-minimap-width);
	padding-left: 0;
	left: calc(50vw + .5 * var(--siz-content-width) + 2 * var(--siz-space-unit));
}

#wiki-view .map-container {
	display: none;
	/* position: absolute;
	right: 0; top: 0;
	width: 10rem; height: 10rem;
	background-color: var(--col-sprout); */
}


/* ## MAP UI : */

.main-header {
	position: fixed;
	width: calc(100% - 2rem);
	height: var(--siz-nav-height);
	padding: 0 2rem;
	
	display: grid;
	grid-auto-flow: row;
	grid-template-columns: 1fr 2fr;
	align-items: center;

	clip-path: var(--dec-clip-path_cutoff);
	background: var(--col-rosewood);
	z-index: 99;
}

.breadcrumb a {
	color: var(--col-bone);
	transition: all .5s;
}

.breadcrumb a:hover {
	color: var(--col-sprout);
}

form.search-feature {
	margin-left: auto;
	border: solid var(--siz-main-border-width) var(--util-col-interactive);
	border-radius: var(--dec-border-radius-m);
	overflow: hidden;
	height: 2.5rem;
}

form.search-feature .wp-block-search__inside-wrapper {
	height: 100%;
}

form.search-feature input {
	background: none;
	border: none;
	color: var(--col-brass);
	padding-inline: 1rem;
}

form.search-feature button {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.main-content {
	display: grid; gap: 1rem;
	grid-template-columns: var(--siz-content-width) minmax(10rem, 1fr);
	grid-auto-flow: row;
	/* height: 100%; */
	clip-path: border-box;
}

.item_main-content {
	display: grid; gap: 1rem;
	grid-template-rows: 1fr auto;
	width: 100%;
	max-height: var(--siz-main-height);
	position: relative;
	/* background: var(--col-rosewood); */
	padding: 1rem;
}

.item_main-content::after {
	content: '';
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	background: var(--col-rosewood);
	clip-path: var(--dec-clip-path_cutoff);
	z-index: 0;
}

.item_main-content > * {
	z-index: 1;
}

.post_main-content {
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: calc(2 * var(--siz-space-unit));
	padding: calc(var(--siz-space-unit) / 2) 0;
	overflow-x: hidden;
}

/* .post_main-content > :not(:has(.mapsvg-wrap-all)) {
	height: fit-content;
	z-index: 64;
} */

/* § `.mapsvg-wrap-all` is generated by the plugin */
.mapsvg-wrap-all {
	position: fixed;
	top: calc(var(--siz-nav-height) + (2 * var(--siz-space-unit)));
	left: calc(var(--siz-content-width) + (2 * var(--siz-space-unit)));
	width: 70vw;
	/* § as mapsvg itself defines height + max-width here, we use `!important` to overrule : */
	max-width: 80vh !important;
	height: auto !important;
	/* z-index: 32; */
	/* transform: translateX(-50%); */
	/* transform: translateX(calc(-50% - var(--siz-content-width))); */
	/* min-width: var(--siz-content-width);
	height: var(--siz-main-height); */
	/* padding-left: var(--siz-content-width); */
}

footer {
	min-height: 2rem;
	margin: 0 auto;
	padding: 1rem;
	width: fit-content;
}

/* .inline-blend-in {
	display: inline;
	margin: 0;
	padding: 0;
	font-size: inherit;
	line-height: inherit;
	text-transform: capitalize;
} */