/*////////////////////////////////////////////////////////////////
/*--------------------------------------------------------------*\
\*	2025-2026 MERMAID-MYSTIC                                    */
/*  IF YOU LIKE WHAT YOU SEE... CTRL+C CTRL+V                   *\
////////////////////////////////////////////////////////////////*/

/*--------------------------------------------------------------*\
\*	THEMES                                                      */

:root {
	font-family: Calibri, sans-serif; /* THIS MAY BE STUPID */
}

[data-theme="light"] {
  --background: #fff2f1;
  --foreground: #ffffff;
  --text: #030c0b;
  --primary: #5eaaf1;
  --secondary: #da678f;
  --link: #0000EE;
	--link-hover: #000066;
	--link-visited: #551A8B;
	--link-red: #bf3c2c;
  --redlink-hover: #a82817;
}

[data-theme="dark"] {
  --background: #222222;
  --foreground: #020807;
  --text: #f3fcfb;
  --primary: #741b74;
  --secondary: #991845;
  --link: #0000EE;
	--link-hover: #000066;
	--link-visited: #551A8B;
	--link-red: #bf3c2c;
  --redlink-hover: #a82817;
}

/*--------------------------------------------------------------*\
\*	LINKS                                                       */

.link-style--article a {
	color: var(--link);
	text-decoration: none;
}

.link-style--article a:hover {
	color: var(--link-hover);
	text-decoration: underline;
}

.link-style--article a:visited {
	color: var(--link-visited);
	text-decoration: none;
}

.link-style--article a:not([href]) {
  color: var(--link-red);
	text-decoration: inherit;
}

.link-style--article a:not([href]):hover {
	text-decoration: underline dotted var(--link-red) 2px;
}

.link-style--outline a {
	color: var(--link);
	text-decoration: none;
}

.link-style--outline a:hover {
	color: var(--link-hover);
	font-weight: bold;
}

.link-style--outline a:visited {
	color: var(--link);
	text-decoration: none;
}

.link-style--outline a:not([href]) {
  color: var(--link-red);
	text-decoration: inherit;
}

.link-style--outline a:not([href]):hover {
	text-decoration: underline dotted var(--link-red) 2px;
}

.link-style--header a {
	color: var(--link);
	text-decoration: none;
}

.link-style--header a:hover {
	color: var(--link-hover);
	font-weight: bold;
}

.link-style--header a:visited {
	color: var(--link);
	text-decoration: none;
}

.link-style--header a:not([href]) {
  color: var(--link-red);
	text-decoration: inherit;
}

.link-style--header a:not([href]):hover {
	text-decoration: underline dotted var(--link-red) 2px;
}

.link-style--image {
	display: block;
	width: fit-content;
	margin: auto;
}

a[rel~="external"] {
  background-image: url("external.svg");
	background-position: center right;
	background-repeat: no-repeat;
	background-size: 0.6em;
	padding-right: 0.8em;
}

/*--------------------------------------------------------------*\
\*	PAGE LAYOUT                                                 */

.full-viewport {
	min-height: 100vh;
	margin: 0px;
	padding: 0px;
}

.outer-page-container {
	display: grid;
	grid-template-columns: 12% 76% 12%;
	column-gap: 0px;
	background-color: var(--background);
}

.outer-page-container[data-view-width="wide"] {
	display: grid;
	grid-template-columns: 4% 92% 4%;
	column-gap: 0px;
	background-color: var(--background);
}

.inner-page-container {
	display: grid;
	grid-template-rows: 50px 1fr 50px;
	row-gap: 20px;
	min-height: 100vh;
}

.page-body-container {
	display: grid;
	grid-template-columns: 250px 1fr 250px;
	column-gap: 20px;
}

/*--------------------------------------------------------------*\
\*	HEADER                                                      */

.page-header-container {
	padding: 5px 5px 5px 5px;
	background-color: var(--foreground);
	border: 1px solid var(--text);
	color: var(--text);
}

.page-header {
	display: flex;
	flex-direction: row;
	gap: 5px 5px;
	height: 100%;
}

.page-header__spacer {
	flex: 0 1 250px;
}

/*--------------------------------------------------------------*\
\*	NAVIGATION BAR                                              */

.navigation-bar {
	flex: auto;
	display: flex;
	flex-direction: row;
	gap: 5px 5px;
	align-items: center;
}

.navigation-bar__link {
	flex: 0 0 200px;
	border-left: 1px solid var(--text);
	text-align: center;
}

.navigation-bar__search-container {
	flex: 1 1 auto;
	display: flex;
	flex-direction: row;
	gap: 0px 0px;
	justify-content: right;
	border-left: 1px solid var(--text);
}

.navigation-bar__search-container > form {
	width: max-content;
}

/*--------------------------------------------------------------*\
\*	FLOATING CONTENT                                            */

.float-container {
	float: right;
	margin: 15px 0px 15px 15px;
}

.float-container--no-top-margin {
	float: right;
	margin: 0px 0px 15px 15px;
}

/*--------------------------------------------------------------*\
\*	IMAGE SCALE                                                 */

.image-scale--small {
	width: 150px;
	object-fit: scale-down;
}

.image-scale--medium {
	width: 200px;
	object-fit: scale-down;
}

.image-scale--large {
	width: 250px;
	object-fit: scale-down;
}

.image-fit--summary {
	width: 220px;
	object-fit: scale-down;
}

/*--------------------------------------------------------------*\
\*	SIDEBAR                                                     */

.sidebar-container {
	padding: 10px 10px 10px 10px;
	background-color: var(--foreground);
	border: 1px solid var(--text);
	color: var(--text)
}

.sticky-container {
	position: sticky;
	top: 5px;
}

/*--------------------------------------------------------------*\
\*	OUTLINE                                                     */

.outline {
	margin: 5px 5px 5px 5px;
	padding: 5px 5px 5px 5px;
}

.outline__title {
	margin: 6px 0px 6px 0px;
	padding: 4px 0px 4px 0px;
	border-bottom: 1px solid var(--text);
	color: var(--text);
	font-size: large;
}

.outline__list {
	padding: 0px 0px 0px 8px;
	line-height: 25px;
	list-style-type: none;
}

/*--------------------------------------------------------------*\
\*	OPTIONS                                                     */

.options {
	margin: 5px 5px 5px 5px;
	padding: 5px 5px 5px 5px;
}

.options__title {
	margin: 6px 0px 6px 0px;
	padding: 4px 0px 4px 0px;
	border-bottom: 1px solid var(--text);
	color: var(--text);
	font-size: large;
}

.button-toggle {
	display: block;
	width: 100px;
	height: 25px;
	margin: 12px 0px 15px 5px;
}

/*--------------------------------------------------------------*\
\*	ARTICLE HEADER                                              */

.article-header {
	margin-bottom: 15px;
	border-bottom: 1px solid var(--text);
}

.article-header__title {
	margin: 0px 0px 0px 0px;
	padding: 5px 0px 5px 0px;
}

.article-header__categories {
	font-size: smaller;
}

/*--------------------------------------------------------------*\
\*	ARTICLE                                                     */

.article-container {
	padding: 15px 20px 15px 20px;
	background-color: var(--foreground);
	border: 1px solid var(--text);
	color: var(--text)
}

.article {
	overflow-wrap: normal;
	hyphens: auto;
}

.article > h1,
.article > section > h1 {
	display: flow-root;
	margin: 0px 0px 0px 0px;
	padding: 5px 0px 5px 0px;
	border-bottom: 1px solid var(--text);	
}

.article > h2,
.article > section > h2 {
	display: flow-root;
	margin: 6px 0px 6px 0px;
	padding: 12px 0px 4px 0px;
	border-bottom: 1px solid var(--text);
}

.article > h3,
.article > section > h3,
.article > section > section > h3 {
	margin: 5px 0px 5px 0px;
	padding: 12px 0px 3px 0px;
}

.article > p,
.article > section > p {
	margin: 8px 0px 16px 0px;
	line-height: 26px;
}

/*--------------------------------------------------------------*\
\*	INFOBOX                                                     */

.summary {
	width: 250px;
	padding: 10px;
	border: 1px solid var(--text);
}

.summary__title {
	margin: 0px 0px 8px 0px;
	background-color: var(--background);
	font-size: large;
	text-align: center;
	line-height: 26px;
}

.summary__key-image {
	margin: 0px 0px 0px 0px;
}

.summary__key-image figcaption {
	padding: 2px 0px 5px 0px;
	font-size: smaller;
	text-align: center;
}

.summary__key-image figcaption p {
	margin: 0px;
}

.summary__heading {
	margin: 0px;
	background-color: var(--background);
	font-size: large;
	text-align: center;
	line-height: 26px;
}

.summary__factsheet {
	display: grid;
	grid-template-columns: min-content auto;
  gap: 4px 16px;
	margin: 0px; 
	padding: 5px;
}

.summary__factsheet > dt {
	grid-column: 1;
	font-weight: bold;
}

.summary__factsheet > dd {
	grid-column: 2;
	margin: 0px;
}

/*--------------------------------------------------------------*\
\*	MISC                                                        */

.TEST div {
	border: 2px dotted black;
}

.TEST header {
	border: 2px dotted red;
}

.TEST nav {
	border: 2px dotted green;
}

.TEST a {
	border: 2px dotted blue;
}

.skn-custom-border {
	box-sizing: border-box;
	border: 0px solid transparent;
	border-bottom: 18px solid transparent;
	border-image: url("border.svg") 40% stretch;
}

.skn-custom-border-bottom {
	box-sizing: border-box;
}