/*CSS variables for common colors and fonts.*/
:root {
	--brand-colour: #3c4f85;
	--brand-link: #3c4f85;
	--brand-link-hover: #3c4f85;
	--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);
}

.obj_issue_toc .section > h3 { 
	color: var(--brand-colour);
}


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

/*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_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 {
	    display: inline-block;
    padding: 0.5rem;
    text-align: center;
    background: #b3d88c;
    border: 1px solid #b3d88c;
    border-top-color: #b3d88c;
    border-radius: 7px;
    box-shadow: none;
    font-size: 16px;
    line-height: 28px;
    font-weight: 700;
    text-decoration: none;
    width: 100%;
}
/*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 {
border: none;
box-shadow: inset 0 -1em 1em rgba(0,0,0,0.1);
font-size: 13px;
line-height: 28px;
font-weight: 700;
color: #3c4f85;
text-decoration: none;
}

.block_make_submission a, .page_search .submit button {
    display: inline-block;
    padding: .5rem;
    text-align: center;
    background: #b3d88c;
    border: none;
    border-radius: 7px;
    box-shadow: none;
    font-size: 16px;
    line-height: 28px;
    font-weight: 700;
    text-decoration: none;
    width: 100%;
}
.block_make_submission a {
	color:#3c4f85;
}

.pkp_structure_sidebar.left {
    --brand-colour: #3c4f85;
}
.pkp_block .title {
    font-family: var(--brand-font);
    color: #3c4f85;
}
/*search button*/
.pkp_head_wrapper .pkp_search button {
	    display: inline-block;
    padding: 0 1em;
    background: #b3d88c;
    border: #b3d88c;
        border-top-color: rgb(179, 216, 140);
    border-top-color: #b3d88c;
    border-radius: 7px;
    box-shadow: inset 0 -1em 1em rgba(0,0,0,0.1);
    font-size: 13px;
    line-height: 28px;
    font-weight: 700;
    color: #3c4f85;
    text-decoration: none;
}

.page_search .submit button {
	color: #3c4f85;
}

/*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;
	display: flex;
	justify-content: center;
	padding: 0;
}
.pkp_footer_content img{
	width: 500px;
}
/*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;
}


/*CJSOTL LOGO SIZE CUSTOMIZATION*/
.pkp_site_name .is_img img {
	max-height: 225px;
}
.pkp_navigation_user_wrapper {
	background-color: var(--brand-colour);
	border-bottom: 5px solid white;
	outline: 1px solid var(--brand-colour);
	width:100%;
}
.pkp_navigation_user.pkp_navigation_user {
    margin: auto;
}
.pkp_navigation_user .task_count {
	position:initial;
}
.pkp_structure_head {
	background-color: white;
}
.pkp_site_name > a {
	padding-top: 6px;
	padding-bottom: 6px;
}
.pkp_navigation_user > li > a {
	color: white;
}
.pkp_navigation_primary_row {
	border-top: 5px solid white;
	outline: 1px solid var(--brand-colour);
}
body {
	background: white;
}
.pkp_structure_content {
	background: white;
}
.pkp_structure_sidebar.left {
	--brand-colour: #B3D88C;
}
.pkp_brand_footer {
	display: none;
}
.pkp_structure_footer_wrapper {
	background-color: white;
}
/*create blue bars on footer*/
.pkp_structure_footer_wrapper::before, .pkp_structure_footer_wrapper::after {
	content: '';
	display: block;
	background-color: var(--brand-colour);
	height: 30px;
}
.pkp_structure_footer {
	width: 100% !important;
	border-top: 1px solid var(--brand-colour);
	border-bottom: 1px solid var(--brand-colour);
	margin-top: 5px;
	margin-bottom: 5px;
}

@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 {
                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 {
                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 {
                width: 728px !important;
        }
}
@media (max-width: 991px) {
	.pkp_site_nav_toggle > span::before, .pkp_site_nav_toggle > span::after {
    		background: var(--brand-colour);
	}
	.pkp_site_nav_toggle > span {
    		border-bottom-color: var(--brand-colour);
	}
	.pkp_navigation_primary_row {
                border-top:0px
        }
        .pkp_navigation_user_wrapper {
                border-bottom:0px;
        }
	.pkp_site_name .is_img img {
                width: 400px;
        }
        .pkp_site_name_wrapper {
                height: 9rem;
        }
	.pkp_navigation_primary ul a, .pkp_navigation_user ul a, 
        .pkp_navigation_primary ul a:hover, .pkp_navigation_user ul a:hover,
        .pkp_navigation_primary ul a:focus, .pkp_navigation_user ul a:focus {
                color: #ffffff;
                text-decoration-color: #ffffff;
        }
}