/*CSS variables for common colors and fonts.*/
:root {
	--brand-colour: #373737;
	--brand-link: #015b86;
	--brand-link-hover: #029feb;
	--brand-font: 'Arial', sans-serif;
}

/*font replacements*/
body {
	font-family: var(--brand-font);
}

h1, .cmp_breadcrumbs .current h1, .pkp_structure_main h1, .pkp_structure_main h2, .pkp_structure_main h3, .pkp_structure_main h4, .pkp_block .title {
	font-family: var(--brand-font);
	color: var(--brand-colour);
}


/*OJS used h2 for subtitles. For shame! */
.pkp_structure_main h2.subtitle {
	color: black;
}

/*prevents font from being gray on desktop display*/
@media (min-width: 768px){
	.obj_issue_toc .galleys h2, .obj_issue_toc .section h2 {
		color: var(--brand-colour);
	}
}

/*SECONDARY RECOLORING FOR MAIN SITE ELEMENTS*/
.pkp_structure_head { 
	background-color: #eee;
}

/*PRIMARY RECOLORING FOR MAIN SITE ELEMENTS*/
/*foreground elements*/
.pkp_site_name .is_text, .pkp_navigation_user > li > a, .pkp_navigation_user > li > a:hover, .pkp_navigation_user > li > a:focus, .pkp_head_wrapper .pkp_search.is_open .search_prompt{
	color: var(--brand-colour);
}
/*background elements*/
.pkp_navigation_primary_row {
	background-color: var(--brand-colour);
}

/*PRIMARY RECOLORING FOR LINKS*/
/*in-text links*/
a, a:focus {
	color: var(--brand-link);
}
a:hover {
	color: var(--brand-link-hover);
}
/*galley link*/
.obj_galley_link {
	border: 1px solid var(--brand-link);
	color: var(--brand-link);
}
.obj_galley_link:hover, .obj_galley_link:focus {
	background: var(--brand-link);
}
/*button elements*/
.block_make_submission a, .page_search .submit button {
	background: var(--brand-link);
	box-shadow: 1px 3px 3px rgba(0,0,0,0.3);
	color: white;
}
/*button background elements*/
.page_search .submit button:after {
	background: var(--brand-link);
	top: 0;
	height: 28px;
	line-height: 28px;
}
.page_search .submit button:hover:after, .page_search .submit button:focus:after {
	background: var(--brand-link-hover);
}
.block_make_submission a:hover {
	box-shadow: inset 0 1em 1em rgba(0,0,0,0.1);
}
/*dropdown elements*/
.pkp_navigation_primary ul a, .pkp_navigation_user ul a {
	color: var(--brand-colour);
	text-decoration-color: var(--brand-colour);
}
.pkp_navigation_primary .dropdown-menu a:focus,.pkp_navigation_primary .dropdown-menu a:hover, .cmp_notification{
    border-color: var(--brand-colour);
}
.pkp_nav_list ul a:hover {
	border-color: var(--brand-colour);
	color: var(--brand-colour);
}
.cmp_button_wire:hover, .cmp_button_wire:focus{
	background: var(--brand-colour);
}
.pkp_head_wrapper .pkp_search.is_open .search_prompt:hover,.pkp_head_wrapper .pkp_search.is_open .search_prompt:focus{
    border-bottom-color: var(--brand-colour);
}
:focus {
	outline-color: var(--brand-link-hover);
}

/*Code for switching sidebar to left side --- disable block if not desired*/
/*START LEFT SIDEBAR BLOCK*/
/*
.pkp_structure_content {
	display: flex !important;
}
.pkp_structure_sidebar {
	order: -1;
}
@media (min-width: 768px) {
	.pkp_structure_main:before {
		left: 300px;
	}
}
@media (min-width: 1200px) {
	.pkp_structure_main:after {
		left: 1160px;
	}
}
@media (min-width: 992px) {
	.pkp_structure_main:after {
		left: 952px;
	}
}
*/
/*note---this is just for demonstration--- more media queries need to be added if it's decided that sidebar should be moved permanently to left*/
/*END LEFT SIDEBAR BLOCK*/

/*Code for setting footer content and brand footer on the same line*/
.pkp_structure_footer {
	display: flex;
}
.pkp_footer_content {
	flex-grow: 1;
}
/*style formatting for footer*/
.pkp_footer_content img {
	max-width: 300px;
}

/*flex code for pushing footer down to bottom on pages without much content */
.pkp_structure_page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
.pkp_structure_content {
	flex-grow: 1;
}

/*code for sites with logos to keep the top from being terrible*/
/*note: this code all exists because of some really bad-looking default styles 
associated with the .has_site_logo class which need to be overwritten to give a consistent-
looking style. Ideally, we should work with PKP to revise the default style to not look
as bad with logos, and then remove these overwrites*/

.has_site_logo .pkp_head_wrapper {
	padding-left: 0;
	padding-right: 0;
}
@media (min-width: 1200px) {
	.has_site_logo .pkp_head_wrapper {
		width: 100%;
	}
	.pkp_site_name, .pkp_navigation_primary_wrapper, .pkp_navigation_user, .pkp_structure_content, .pkp_structure_footer {
		width: 1160px !important;
	}
}
@media (min-width: 992px) and (max-width: 1199px) {
	.has_site_logo .pkp_head_wrapper {
		width: 100%;
	}
	.pkp_site_name, .pkp_navigation_primary_wrapper, .pkp_navigation_user, .pkp_structure_content, .pkp_structure_footer {
		width: 952px !important;
	}
}
@media (min-width: 768px) and (max-width: 991px) {
	.has_site_logo .pkp_head_wrapper {
		width: 100%;
	}
	.pkp_site_name, .pkp_navigation_primary_wrapper, .pkp_navigation_user, .pkp_structure_content, .pkp_structure_footer {
		width: 728px !important;
	}
}


/*CHIASMA LOGO SIZE CUSTOMIZATION*/
.pkp_site_name .is_img img {
	max-height: 225px;

}
.pkp_site_name > a {
	padding-top: 0;
}
/*CHIASMA CUSTOM NAVIGATION BAR BACKGROUND COLORATION*/
.pkp_navigation_primary_row {
	background: -webkit-linear-gradient(#252525, #0a0a0a);
}