/* ==== SAPPHIRE Theme Redux ==== */

/**
 * [2024 Wikidot Theme]
 * Forked by Lt Flops
 * Originally Created by DrGemini
 *
 * Based On
 *	Thème de SAPHIR by DrGemini
 * Source Link
 *	https://fondationscp.wikidot.com/theme:saphir
**/

/* ==== HEADER AREA ==== */

/* == COMMON == */

 :root {
	/* = SITE BANNER = */
	--header-title: "SAPHIR";
	--header-subtitle: "WHEN IN DOUBT, DOUBT";
	--titleColor: var(--key);
	--subtitleColor: var(--midnight-blue);
	--lgurl: none;
}

 :root {
	/* = OVERALL COLOUR DEFINITIONS = */
	--alpha: hsl(0, 0%, 100%);
	--key: hsl(0, 0%, 5%);

	--dark-forest: hsl(0, 0%, 13%);
	--eggshell: hsl(66, 41%, 87%);
	--pale-goldenrod: hsl(66, 41%, 77%);
	--grey: hsl(204, 4%, 65%);
	--rifle-green: hsl(204, 4%, 23%);
	--platinum: hsl(236, 29%, 90%);
	--ultramarine: hsl(236, 80%, 60%);
	--desat-dark-blue: hsl(236, 20%, 50%);
	--navy-blue: hsl(236, 100%, 25%);
	--midnight-blue: hsl(236, 64%, 23%);
	--onyx: hsl(238, 49%, 10%);
	--patriarch: hsl(296, 100%, 25%);
	
	/* = SAPHIR NAV COLOUR DEFINITIONS = */
	--mid-jungle-green: hsl(206, 49%, 14%);
	--carolina-blue: hsl(236, 65%, 80%);
}

 :root {
	/* = FONTS = */
	--body-font: "Merriweather", serif;
	--sub-font: "Special Elite", system-ui;
	--euphoric-font: "Tinos", serif;
}

 body {
	font-family: var(--body-font);
}

 #content-wrap {
	padding-top: 5.8rem;
}
 
/* == SITE BANNER == */

 div#container-wrap {
	background: url(/api/css-proxy?url=https%3A%2F%2Fscp-wiki.wdfiles.com%2Flocal--files%2Ftheme%253Asaphir%2Fsaphir-header.png) top left repeat-x;
}

 #header :is(h1 a, h2)::before {
	text-shadow:
		-2px -2px var(--alpha),
		0    -2px var(--alpha),
		2px  -2px var(--alpha),
		2px   0   var(--alpha),
		2px   2px var(--alpha),
		0     2px var(--alpha),
		-2px  2px var(--alpha),
		-2px  0   var(--alpha);
}

 #header h1 a::before {
	top: 2rem;

	font-family: var(--body-font);
	font-weight: 900;
}

 #header h2::before {
	top: 3rem;

	font-family: var(--sub-font);
	font-size: 20pt;
}

 #page-title, 
 .meta-title {
	color: var(--midnight-blue);

	font-family: var(--sub-font);
	font-weight: 700;
}

/* == SEARCH == */

 #search-top-box-input,
 #search-top-box-form input[type="submit"] {
	color: var(--dark-forest);
	background-color: var(--eggshell);
	border-color: var(--dark-forest);
}

 #search-top-box-input:is(:hover, :focus),
 #search-top-box-form input[type="submit"]:is(:hover, :focus) {
	color: var(--key);
	background-color: var(--pale-goldenrod);
	border-color: var(--key);
}

/* == TOP MENU == */

 #top-bar {
	top: 14.55rem;
}

 #top-bar ul li:is(.sfhover, :hover) a {
	color: var(--navy-blue);
}

/* == LOGIN == */

 #login-status,
 #login-status a {
	color: var(--key);
}

 #login-status {
	padding: 2px 5px;
	font-family: var(--sub-font);

	background: var(--eggshell);
	border: thin solid var(--key);
}

 #login-status ul a {
	color: var(--navy-blue);
}

 #account-topbutton {
	padding: 0;

	border: 0;
}

 #account-options {
	margin-top: 2px;

	background: var(--eggshell);
	border-color: var(--key);
}

 #account-options li a:hover {
	background: var(--pale-goldenrod);
}

/* == SIDE MENU == */

 #top-bar .open-menu a {
	color: var(--midnight-blue);
	background: var(--eggshell);
	border-color: var(--key);
}

/* ==== CONTENT AREA ==== */

/* == INFO BAR == */

 .info-container {
	--barColour: var(--rifle-green);
}

/* == PAGE RATING == */

 .page-rate-widget-box {
	display: flex;
	width: max-content;
	margin: auto;
}

 div.page-rate-widget-box .rate-points {
	background: var(--rifle-green);
	border-color: var(--rifle-green);
}

 .page-rate-widget-box :is(.rateup, .ratedown) {
	border-top-color: var(--rifle-green);
	border-bottom-color: var(--rifle-green);
}

 .page-rate-widget-box .cancel {
	background: var(--rifle-green);
	border-color: var(--rifle-green);
}

 .page-rate-widget-box :is(.rateup, .ratedown) a {
	color: var(--rifle-green);
}

 .page-rate-widget-box .cancel a {
	color: var(--grey);
}

 .page-rate-widget-box :is(.rateup, .ratedown, .cancel) a:hover {
	color: var(--alpha);
	background: var(--rifle-green);
}

/* == INFO MODULE == */

 #page-content .creditRate {
	float: none;
	display: flex;
	align-items: center;
	width: max-content;
	margin: auto !important;
}

 #page-content .rate-box-with-credit-button {
	background: var(--rifle-green);
	border-color: var(--rifle-green);
}

 #page-content .creditRate .page-rate-widget-box {
	display: inline;
}

 .creditButton p a {
	margin-left: -2px;

	border-left-color: var(--grey);
}

 .creditButtonStandalone p a {
	background: var(--rifle-green);
	border: thin solid var(--rifle-green);
	border-radius: 0;
	box-shadow: none;
}

 .creditButtonStandalone p a:hover {
	background: var(--rifle-green);
	text-decoration: none;
}

/* == FORMATTING | [GENERAL] == */

 #page-content :is(h1, h2, h3, h4, h5, h6) {
	font-family: var(--body-font);
}

 h1 {
	color: var(--midnight-blue);
}

 #page-content h1 {
	font-style: italic;
}

 a,
 #side-bar a {
	color: var(--navy-blue);
}

 a:visited {
	color: var(--patriarch);
}

 ul {
	list-style-type: "⬥ ";
}

/* == FORMATTING | [SPECIAL] == */

 .footing,
 .footing::before {
	border-bottom-color: var(--rifle-green);
}

/* == SAPPHIRE GOI FORMAT == */

 .sapphire-block {
	margin: 1rem 0;
	padding: 1rem 1rem .5rem;

	color: var(--dark-forest);
	background: var(--carolina-blue);
	border: thick solid var(--onyx);

	font-family: var(--euphoric-font);
	font-size: 14pt;
	text-align: justify;
	word-break: unset;
}

 .sapphire-block p:not(:first-of-type) {
	text-indent: 2rem;
}

 .sapphire-block a {
	text-indent: 0;
}

 .sapphire-block :is(h1, h2, h3, h4, h5, h6) {
	color: var(--midnight-blue);
}

 .sapphire-block h2 {
	font-size: 150%;
	font-weight: bold;
}

 .sapphire-block h3 {
	font-size: 130%;
}

 .sapphire-block h4 {
	font-size: 120%;
}

 .sapphire-block hr {
	border-color: var(--onyx);
	border-width: medium;
}

 .sapphire-block h3:last-of-type {
	font-style: italic;
}

 .sapphire-block .lite-heading h4 {
	color: var(--midnight-blue);
}

 .sapphire-block .excerpt {
	margin: 1rem 2rem;
	padding: 0 1rem;

	background-color: var(--platinum);
	border: thin solid var(--onyx);
}

/* == SAPPHIRE RATING ALTERATION == */

 .sapphire-block
	 :is(div.page-rate-widget-box .rate-points) {
		background: var(--midnight-blue);
		border-color: var(--midnight-blue);
}

 .sapphire-block
	 .page-rate-widget-box :is(.rateup, .ratedown) {
		border-top-color: var(--midnight-blue);
		border-bottom-color: var(--midnight-blue);
}

 .sapphire-block
	 .page-rate-widget-box .cancel {
		background: var(--midnight-blue);
		border-color: var(--midnight-blue);
}

 .sapphire-block
	 .page-rate-widget-box :is(.rateup, .ratedown) a {
		color: var(--midnight-blue);
}

 .sapphire-block
	 .page-rate-widget-box .cancel a {
		color: var(--desat-dark-blue);
}

 .sapphire-block
	 .page-rate-widget-box :is(.rateup, .ratedown, .cancel) a:hover {
		color: var(--alpha);
		background: var(--midnight-blue);
}

/* == SAPPHIRE INFO MODULE ALTERATION == */

 .sapphire-block
	 .rate-box-with-credit-button .creditButton {
		background: var(--midnight-blue);
}

 .sapphire-block
	 .creditButtonStandalone p a {
		background: var(--midnight-blue);
		border-color: var(--midnight-blue);
}

 .sapphire-block
	 .creditButtonStandalone p a:hover {
		background: var(--midnight-blue);
}

/* == NAVIGATION == */

 .saphir-showcase,
 .saphir-nav {
	color: var(--key);
	background: var(--carolina-blue);
	border: thin solid var(--mid-jungle-green);
	border-radius: .6rem;
	box-shadow:
		inset 0 -5px 0 hsla(0, 0%, 0%, .2),
		inset 0 1px hsla(0, 100%, 100%, .3),
		inset 0 5px hsla(0, 100%, 100%, .2),
		inset 0 5px 10px hsla(0, 100%, 100%, .25),
		inset 0 -7.5px 15px hsla(0, 0%, 0%, .1);
		
	text-shadow: 1px 1px 2px hsla(0, 0%, 0%, .35);
}

 .saphir-showcase {
	margin-bottom: 1.6rem;
	padding: 1.6rem;
}

 .saphir-nav {
	margin: 1rem 0;
	padding: 0 .8rem .4rem;

	font-weight: bold;
	font-size: 85%;
	text-align: center;
}

.saphir-showcase :is(h3, h4) {
	color: var(--midnight-blue);
}

 .hub-entry table {
	line-height: 1.5;
}

 .hub-entry table :is(td, th) {
	padding: .4rem;

	border: thin solid var(--desat-dark-blue);
}

 .hub-entry table th {
	color: var(--alpha);
	background: var(--desat-dark-blue);
}

 .hub-entry table th:nth-child(2) {
	width: 30%;
}

/* ==== YUI TABS ==== */

/* == YUI TAB CUSTOMIZATION == */

 :is(.yui-navset, .yui-navset .yui-navset-top) .yui-nav {
	border-color: var(--rifle-green);
}

 :is(.yui-navset, .yui-navset .yui-navset-top) .yui-nav a {
	/* = Tab Background Colour | [UNSELECTED] = */
	background: var(--grey);
	/* == */
}
 
 .yui-navset .yui-nav li {
	background: var(--rifle-green);
}

 .yui-navset .yui-nav .selected {
	/* = Tab Background Colour | [SELECTED] = */
	background: var(--rifle-green);
	/* == */
}
 
.yui-navset .yui-nav .selected a {
	background: var(--rifle-green);
}

 .yui-navset .yui-nav a:is(:hover, :focus) {
	/* = Tab Background Colour | [HOVER] = */
	background: var(--ultramarine);
	/* == */
}
 
 .yui-navset .yui-nav .selected a:is(:hover, :active, :focus) {
	background: var(--rifle-green);
}

/* ==== BREAKPOINTS ==== */

/* == BREAKPOINTS KEY == */

/**
 *	Dbl-Extra-Small:	≤383.9px
 *	Extra-Small:		384px	…	575.9px
 *	Small:			576px	…	767.9px
 *	Medium:			768px	…	983.9px
 *	Large:			984px	…	1199.9px
 *	Extra-Large:		1200px	…	1391.9px
 *	Dbl-Extra-Large:	≥1392px
**/

/* == DBL-EXTRA-SMALL MEDIA QUERY == */

 @media (max-width: 383.9px) {
	 .sapphire-block .excerpt {
		margin: 1rem 0;
	}
}

/* == EXTRA-SMALL MEDIA QUERY == */

 @media (min-width: 384px) and (max-width: 575.9px) {
	 .sapphire-block .excerpt {
		margin: .5rem;
	}
}

/* == SMALL MEDIA QUERY == */

 @media (max-width: 767.9px) {
	 #search-top-box {
		margin-top: 7px;
	}

	 #login-status {
		margin-top: 4px;
	}
	
	 #account-options {
		right: -1px;
	}
}

/* == MEDIUM MEDIA QUERY == */

 @media (min-width: 768px) and (max-width: 983.9px) {
	 #login-status {
		margin-left: 1.2rem;
	}
}

 @media (min-width: 768px) {
	 #account-options {
		left: 6px;
	}
}