/* Developed by PKP|PS
This CSS template allows you to make additional customizations to the OJS Health Science Theme on OJS 3.3
You can change the colors (e.g. color: #e56e1c;) below.
The text shown in grey (such as this) are informational guide letting you know what that piece of code does. */



/* Global variables */
:root {
    /* --primary-color: #######; */
    /* Not currently in use */
    --secondary-color: #e56e1c;
    /* Orange color, for text decoration color and box shadows, among others */
    --tertiary-color: #e3e554;
    /* Green color, for box shadows, backgrounds, among others */
    --accent-color: #51bacc;
    /* Blue color, background color for submenus and footer */
    --black-color: #000000;
    /* Black color, for borders */
    --white-color: #ffffff;
    /* White color, for some backgrounds and fonts */
    --red-coral-color: #de4040;
    /* Red coral color, for ToC, author list, article landing page, author list */
    --gray-color-background: #e5e5e5e5;
    /* Gray color, used in homepage image behind issue */
    --gray-color: #383838;
    /* Gray color, used in the article landing page in issue name */
    --light-gray-color: #757575;
    /* Light gray color, used in article details issue section */
    --light-gray-color-menu: #f5f5f5;
    /* Light gray color, used in dropdown menu */
    --light-gray-color-modal: #f7f7f7;
    /* Light gray color, used in modal content when clicking on the author's biography */
    --font-josefina: 'Josefin Sans', sans-serif;
    /* Font for h1, h2, h3, h4, h5, h6 */
    --font-mukta: 'Mukta', sans-serif;
    /* Font body, buttons and some article details  */
}

/* font controls - monochrome */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-josefina);
}

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

.article-summary-authors, .article-summary-pages, .authors-string, .author-string-href {
    color: var(--red-coral-color);
}

.issue-toc-section-title {
    font-family: var(--font-josefina);
    color: var(--black-color);
}

.article-details-issue-identifier {
    font-family: var(--font-josefina);
    color: var(--black-color);
}


/* link styling */
/* color definitions -  tertiary:  #e3e554 green, secondary:  #e56e1c orange, tertiary: #51bacc blue rgb needed */
.article-summary-title a {
    font-family: var(--font-mukta);
    text-decoration: none;
}

a {
    color: var(--black-color);
    text-decoration: underline;
    text-decoration-color: var(--secondary-color);
}

a:hover, a:focus {
    color: var(--black-color);
}

/* box shadows - secondary & tertiary colors */
.homepage-issue-cover {
    box-shadow: -10px -10px var(--secondary-color), 10px 10px var(--tertiary-color);
}

.page-issue-cover, .article-details-block.article-details-cover img {
    box-shadow: -10px -10px var(--secondary-color), 10px 10px var(--tertiary-color);
}

.issue-summary-cover {
    box-shadow: -5px -5px var(--secondary-color), 5px 5px var(--tertiary-color);
}

#primaryNav .nav-link:hover, #primaryNav .nav-link:focus {
    background: transparent;
}

#primaryNav .dropdown-item:focus, #primaryNav .dropdown-item:hover {
    background-color: transparent;
    border-color: transparent;
}

#primaryNav .dropdown-menu.show {
    background-color: var(--accent-color)
}

.homepage-issue-description-more a {
    text-decoration: none;
    color: var(--black-color);
    padding: 0em 0.125em 0em 0.125em;
    text-transform: uppercase;
    border-bottom: .125em solid var(--tertiary-color);
    box-shadow: inset 0 -0.125em 0 var(--tertiary-color);
    transition: box-shadow 270ms cubic-bezier(0.77, 0, 0.175, 1), color 270ms cubic-bezier(0.77, 0, 0.175, 1);
}

.homepage-issue-description-more a:hover {
    text-decoration: none;
    box-shadow: inset 0 -1.5em 0 var(--tertiary-color);
    color: var(--black-color);
}

.homepage-issue-description-more a:focus {
    background: var(--white-coral);
    outline: none;
    background: var(--tertiary-color);
    color: var(--white-coral);
}


/* buttons */
.btn.btn {
    font-family: var(--font-mukta);
}

.btn-primary {
    background: none;
    border-color: var(--black-color);
    color: var(--black-color);
    text-transform: uppercase;
    margin: 0.5em;
    text-decoration: none;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background: transparent !important;
    border-color: var(--black-color) !important;
    color: var(--black-color);
    box-shadow: -3px -3px var(--secondary-color), 3px 3px var(--tertiary-color);
}

.article-details-issue-identifier a {
    text-decoration: underline;
    text-decoration-color: var(--secondary-color);
    color: var(--gray-color);
}

.article-details-issue-section, .article-details-doi, .article-details-published {
    font-family: var(--font-mukta);
    color: var(--light-gray-color);
}

#primaryNav .nav-link, #primaryNav .dropdown-item {
    font-size: 1.125rem;
    font-family: var(--font-josefina);
    text-decoration: none;
}

ul#userNav a {
    text-decoration: none;
}

#userNav .dropdown-item, .language-toggle .dropdown-item {
    text-decoration: none;
    color: var(--black-color);
}

.container-homepage-issue {
    margin-top: -3rem;
}

.site-footer {
    background: var(--accent-color)
}

/* notification circle */
.badge-light {
    background: var(--tertiary-color);
}

.dropdown-item:hover, .dropdown-item:focus {
    border: none;
}

.article-details-heading, .article-details .item>.label {
    color: var(--black-color);
}

.dropdown-menu {
    background: var(--light-gray-color-menu);
}

.modal-content {
    background: var(--light-gray-color-modal);
}

/* 992 media screen breakpoint */
@media screen and (max-width: 992px) {
    .navbar-brand img {
        max-height: 3em;
    }
    .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .dropdown-item:hover, .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .dropdown-item:focus {
        color: var(--black-color);
    }
}