@charset "utf-8";

/* General */

.frontend,
.landing-page {
	background-color:var(--ark-bg-color);
	background-image:url('../img/snowflakes-pattern-03.png');
	background-repeat:repeat;
	background-attachment:fixed;
	background-size:300px;
}

.backend {	
	grid-template-columns:10rem 1fr;
	background-color:rgb(var(--ark-primary-lt-rgb) / .5);
}

iframe.fullscreen {
	display:block;
	height:100vh;
	height:100svh;
	width:100%;
}

/* = Header = */

.site-header {
	background-color:var(--ark-bg-color);
	box-shadow:0 .25rem .5rem rgb(var(--ark-text-rgb) / .15);
	z-index:99;
	top:0;
}

.site-header .top-nav {
	gap:1rem;
}

.site-header .top-nav-links {
	gap:1rem;
}

.site-header .brand-logo {
	display:inline-block;
	max-width:50%;
}

.site-header .brand-logo a {
	gap:12px;
}

.site-header .brand-logo img {
	height:4rem;
}

.site-header .brand-logo .tagline {
	font-size:2rem;
	line-height:1;
	font-weight:400;
	text-transform:uppercase;
	font-family:var(--ark-header-family);
	text-wrap:balance;
	margin-top:.25em;
}

@media only screen and (max-width: 1200px) {
	.site-header .brand-logo {
		max-width:45%;
	}
	
	.site-header .brand-logo .tagline {
		font-size:1.75rem;
	}
}

@media only screen and (max-width: 992px) {
	.site-header .brand-logo {
		max-width:calc(100% - 10rem);
	}
	
	.site-header .brand-logo .tagline {
		font-size:1.5rem;
	}
}

.site-header a,
.site-header button {
	color:var(--ark-dark);
}

.site-header a:hover {
	color:var(--ark-primary-dk);
}

.site-header .top-nav-links .menu-link {
	font-family:var(--ark-header-family);
	font-size:1.5em;
}

.site-header .dropdown-toggle {
	font-size:1.5em;
	display:flex;
	align-items:center;
}

.site-header .dropdown-toggle img {
	width:2.25rem;
	border-radius:100vmax;
	border:4px solid var(--ark-dark);
}

.site-header .dropdown-toggle:hover img {
	border-color:var(--ark-primary-dk);
}

.site-header .dropdown-menu {
	right:0 !important;
	top:2.5rem !important;
	left:auto !important;
	min-width:max-content;
	text-align:right;
	background-color:var(--ark-primary-lt);
	padding:.25rem;
	
	transform:scaleY(0);
}

.site-header .dropdown-menu.show {
	transform:scaleY(100%);
}

@media only screen and (max-width: 992px) {
	.site-header .dropdown-menu {
		top:1rem !important;
		position:relative !important;
	}
}

.site-header .dropdown-menu a {
	color:var(--ark-primary-dk);
	display:flex;
	justify-content:flex-end;
	align-content:center;
	padding:.5rem;
}

.site-header .dropdown-menu a:hover {
	background-color:var(--ark-dark);
	color:var(--ark-bg-color);
}

/* = Main Content = */

.site-content {
	min-height:calc(100svh - 7.5rem);
}

/* = Footer = */

.site-footer {
	line-height:1.25;
	box-shadow:0 -.25rem .5rem rgb(var(--ark-text-rgb) / .15);
}

.site-footer .brand-logo {
	width:100%;
	height:auto;
	max-height:7.5rem;
}

.site-footer * + p {
	margin-top:.5rem;
}

.site-footer .social-icons {
	gap:.5rem;
}

.site-footer .social-icons a {
	background-color:var(--ark-primary-lt);
}

.site-footer .social-icons img {
	height:2.5rem;
	width:2.5rem;
}

/* = Sidebar = */

.offcanvas {
	width:15rem !important;
}

.sidebar-wrapper {
	box-shadow:.25rem 0 .5rem rgb(var(--ark-text-rgb) / .15);
}

.sidebar-wrapper {
	width:100%;
	z-index:999;
	height:100%;
}

.sidebar {
	padding:1rem;
	top:0;
}

@media only screen and (min-width: 992px) {
	.sidebar {
		position:sticky !important;
	}
}

.sidebar .actions * {
	padding:.25rem .5rem;
	line-height:1;
}

.sidebar .actions *:first-child {
	padding-top:.5rem;
}

.sidebar .actions *:last-child {
	padding-bottom:.5rem;
}

.sidebar .active {
	cursor:default;
	position:relative;
}

.sidebar .active::before {
	content:'►';
	position:absolute;
	left:-1em;
}