/* Developed by PKP|PS
This CSS template allows you to make additional customizations to the OJS Classic Theme on OJS 3.3
You can change the colors and font type.
The text shown in grey (such as this) are informational guide letting you know what that piece of code does.
*/


/* Global variables */
:root {
    --principal-font-family: 'Open Sans', sans-serif;
    /* Blue color used for links, buttons, footer, colored background for magazine description, and menus. Base color #2 */
    --primary-color: #1d70b8;
    /* Light gray color for the background of the entire website. Base color #1 */
    --tertiary-color: #fafafa;
    /* Medium gray color for the borders of the Additional Content and Description of the Issue */
    --medium-gray: #c4c7cf;
    /* Dark gray color of the main font for the entire website */
    --secundary-color: #747474;
    /* Black color used in the font of the user menu (profile and language), also used in the section titles of the table of contents */
    --carbon-black: #2D2D2C;
    /* White color used in the texts that contrast with blue and gray backgrounds, seen mainly in the menu and buttons */
    --white: #ffffff;
}

/* Base styles for the whole site: main color background, typography, general structure, breadcrumb */
html, * {
    font-family: var(--principal-font-family) !important;
}

body{
  background-color: var(--tertiary-color);
  color: var(--secundary-color);
}

.header {
    background-color: var(--tertiary-color);
}

/* Primary menu and User menu (profile, language) */
@media (min-width: 992px) {
    #navigationPrimary {
        justify-content: right;
    }
}

@media (min-width: 992px) {
    #navigationPrimary .nav-link {
        text-transform: none;
    }
}

@media (min-width: 992px) {
    header .nav-link {
        margin-left: 0;
    }
}

#navigationUser .nav-link, #languageNav .dropdown-toggle {
    color: var(--carbon-black);
}

#navigationUser .nav-link:hover, #languageNav .dropdown-toggle:hover {
    color: var(--white);
    background-color: var(--primary-color);
}

#languageNav .show #languageToggleMenulanguageNav {
    color: var(--white);
}

#navigationUser .nav-link:focus, #navigationUser .nav-link:active {
    color: var(--white);
}

.task_count {
    background-color: var(--primary-color);
    color: var(--white);
}

#user-dashboard-link:hover .task_count, #user-dashboard-link:active .task_count, #user-dashboard-link:focus .task_count {
    background-color: var(--white);
    color: var(--primary-color);
}

.dropdown-item:focus, .dropdown-item:hover, .dropdown-item:active {
    background-color: var(--white);
    color: var(--carbon-black);
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    background-color: var(--primary-color);
}

.dropdown-item {
    font-size: inherit;
}

#languageToggleMenulanguageNav:hover {
    background-color: var(--primary-color);
    color: var(--white);
}

ul#navigationPrimary .nav-item .nav-link {
  text-decoration: none;
  color: var(--secundary-color);
  position: relative;
  font-size: 20px;
  padding: 10px 20px;
  margin: 0 5px;
  z-index: 1;
}

ul#navigationPrimary .nav-item .nav-link::before {
  content: '';
  background-color: var(--primary-color);
  position: absolute;
  left: 0;
  bottom: 9px;
  width: 100%;
  height: 12px;
  z-index: -1;
  transition: all .3s ease-in-out;
}

ul#navigationPrimary .nav-item .nav-link:hover::before {
  bottom: 0;
  height: 100%;
  z-index: -1;
}

ul#navigationPrimary li.nav-item a.nav-link:hover, ul#navigationPrimary li.nav-item a.nav-link:active, ul#navigationPrimary li.nav-item a.nav-link:focus {
    color: var(--white) !important;
}

/* Main content website */
.page_index_journal .homepage_image {
    background: var(--primary-color) !important;
}

section.container.journal_summary {
    color: var(--white) !important;
}

@media (min-width: 992px) {
    .description {
        width: 70%;
    }
}

@media (min-width: 992px) {
    .issue_cover_block {
        width: 30%;
        text-align: center;
    }
}

@media (min-width: 992px) {
    .page_index_journal .container-page {
        padding-left: 0;
        padding-right: 0;
    }

    .page_issue .container-page {
        padding-left: 12%;
        padding-right: 12%;
    }
}

section.announcements {
    display: none;
}

section.announcements, section.current_issue, section.additional_content {
    padding: 0;
    width: 80%;
    margin: 5rem auto;
}

.section_title {
    color: var(--carbon-black);
    font-size: xx-large;
}

.section:not(:last-child) {
    border-bottom: 1px solid var(--medium-gray);
}

.container-fluid.container-page {
    background: var(--tertiary-color);
}

.container-page {
    margin-top: 0;
}

.article_summary {
    width: 100%;
}

main.page.page_article {
    margin: 0 15rem;
}

section.additional_content p, section.description_cover {
    background: var(--white);
    border: 1px solid var(--medium-gray);
    padding: 2rem;
}

.article_main_data {
    font-size: unset;
}

.current_issue p.published, p.announcement_date, .summary_meta {
    font-size: medium;
}

.summary_meta {
    margin-top: 10px;
}

.copyright a, .copyright p {
    font-size: initial;
}

.page_issue .container-page .current_page_title {
    margin: 5rem 0;
}

.modal-header {
    background-color: var(--primary-color);
}

/*Buttons, links, inputs, forms */
span.ion-icon-text, a, a.summary_title{
    color: var(--primary-color);
    font-weight: 500;
}

a:hover, a:not([href]):hover, a:active, a:not([href]):active, a:focus, a:not([href]):focus {
    color: var(--primary-color);
    background-color: inherit;
    border-color: unset;
}

a, a:not([href]) {
    border-bottom: 0;
    color: var(--primary-color);
}

.btn-primary:hover, .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
      color: var(--carbon-black);
      background-color: var(--white);
}

.btn {
    border-color: var(--carbon-black);
    background-color: var(--primary-color);
    color: var(--white);
    font-size: small;
}

.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
    background-color: inherit;
    border-color: inherit;
}

#dropdownMenuButton:hover {
    color: var(--carbon-black);
    background-color: var(--white);
}

div.form-group input#query {
    font-size: medium;
}

.form-control:hover, .form-control:focus, .form-control:active {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 .1rem var(--primary-color);
}

/* Footer */
.site-footer {
    background-color: var(--primary-color);
}

footer {
    color: var(--white);
}

.sidebar_wrapper+.additional-footer-info {
    border-top: 1px solid var(--white);
}

.block_make_submission_link {
    border-color: var(--white);
    background-color: var(--white);
    color: var(--carbon-black);
    font-size: initial;
}