@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&display=swap");

body * {
    font-family: "Helvetica", sans-serif;
}

.navbar form .btn {
    font-family: "Helvetica", sans-serif !important;
}

.btn:not(.fa) {
    font-family: "Rubik", sans-serif !important;
}

.navbar-brand,
.nav-link,
p.lead,
.blockquote>p,
table tr th,
.page-link,
.badge {
    font-family: "Rubik", sans-serif;
}

:root {
    --primary-color: #014e6c;
    --primary-accent-color: #01425c;
    --secondary-color: #0192c9;
    --secondary-accent-color: #27a2d1;

    --header-nav-link-color: #bdbfbf;
    --header-nav-link-hover-color: white;
    --header-nav-link-hover-bg-color: #007ab8;

    --header-active-nav-link-bg-color: var(--primary-color);
    --header-active-nav-link-color: white;

    --link-color: #1c528a;
    --link-hover-color: #317172;

    --pagination-link-color: var(--link-color);

    --pagination-link-active-color: white;
    --pagination-link-active-bg-color: black;
    --pagination-link-hover-color: var(--link-hover-color);

    --footer-link-color: var(--primary-color);
    --footer-link-hover-color: var(--primary-accent-color);
    --footer-text-color: var(--primary-color);

    --btn-primary-color: white;
    --btn-primary-bg-color: var(--primary-color);
    --btn-primary-border-color: transparent;
    --btn-primary-hover-color: white;
    --btn-primary-hover-bg-color: var(--primary-accent-color);
    --btn-primary-hover-border-color: transparent;

    --btn-light-color: var(--link-color);
    --btn-light-bg-color: white;
    --btn-light-hover-color: var(--link-color);

    --facet-header-bg-color: var(--primary-color);
    --facet-header-color: white;

    --header-bg-color: transparent;
    --footer-bg-color: transparent;
    --footer-border: 0;

    --header-nav-border: 0;
    --header-nav-margin: 20px 0 20px 0;

    --search-bar-padding: 15px 20%;
    --search-bar-bg-color: transparent;
    --searchclear-color: var(--primary-color);

    --header-padding: 0;

    --font: "Helvetica", sans-serif;

    --nav-tabs-link-color: var(--link-color);
    --nav-tabs-link-hover-color: var(--link-hover-color);
}

body {
    background-image: url("/static/pmihes/img/pmihes_bg.png");
    background-size: cover;
}

header>div:first-of-type {
    background-color: #1c528a;
    background-image: url("/static/pmihes/img/pmihes_nav_bg.png");
    background-position: start 0;
    background-repeat: no-repeat;
    background-size: cover;
}

header .dropdown-menu .menu-link:hover {
    --dropdown-item-hover-bg-color: white;
}

@media (max-width: 576px) {
    header>div:first-of-type {
        background-position-x: left 100px;
        background-size: initial;
    }
}

@media (min-width: 576px) {
    .flex-sm-row {
        flex-direction: column !important;
    }
}

@media (min-width: 992px) {
    .flex-sm-row {
        flex-direction: row !important;
    }
}

@media (min-width: 768px) {
    div:has(> #line-container) {
        width: auto !important;
    }
}

@media (max-width: 1200px) {
    .navbar .container-fluid {
        margin: 0;
        padding: 0;
    }
}

header #collapseContent .nav-link,
header #collapseContent .dropdown-menu .dropdown-item {
    color: var(--primary-color);
    background-color: inherit;
}

header #collapseContent .nav-link:hover,
header #collapseContent .nav-link:focus,
header #collapseContent .dropdown-menu .dropdown-item:hover,
header #collapseContent .dropdown-menu .dropdown-item:focus {
    color: var(--secondary-color);
}

header #collapseContent .dropdown-menu {
    border: 0;
    box-shadow: none;
    padding-left: 2rem;
}

header .navbar .nav {
    flex-wrap: nowrap;
    gap: 1rem;
}

main:has(#article-div) {
    background-color: white;
}

#article-div .nav-pills .nav-link,
.btn-link {
    color: var(--link-color);

}

#article-div .nav-pills .nav-link:hover,
.btn-link:hover {
    color: var(--link-hover-color);

}

#article-div .nav-pills .nav-link.active {
    background-color: var(--primary-color);
    color: white;
}

.ref-badge {
    /* !important hack because ref badges have the BS bg-secondary class */
    background-color: var(--primary-color) !important;
}

.ref-badge:hover {
    /* !important hack because ref badges have the BS bg-secondary class. TODO: Doesn't work, as style.css already does this trick. */
    background-color: var(--primary-accent-color) !important;
}

#article-div .nav-pills .nav-link.active:hover {
    background-color: var(--primary-accent-color);
}

header .navbar .nav .menu-link {
    font-size: 20px;
    padding: 0.7rem 1.2rem;
    border-radius: 1rem;
}

header .navbar .nav .dropdown-item {
    color: var(--primary-color);
    transition: color .15s ease-in-out;
}

header .navbar .nav .dropdown-item:hover {
    color: var(--secondary-color);
}

header .navbar .nav .dropdown-toggle {
    border-radius: 1rem !important;
    transition: color .15s ease-in-out, border-color .15s ease-in-out;
}

@media (max-width: 992px) {
    .header-logo img {
        max-width: max(200px, 30vw);
    }
}

#search-group-btn {
    position: relative;
}

#search-group-btn .dropdown-toggle.show,
.dropdown-toggle.show {
    position: relative;
    border-radius: 0 !important;
    border-bottom: 0 !important;
    border-top-left-radius: 0.25rem !important;
    border-top-right-radius: 0.25rem !important;
    z-index: 1001;
}

.dropdown-menu {
    transition: color .15s ease-in-out, border-color .15s ease-in-out;
    margin-top: -3px !important;
    border-radius: 0 0.25rem 0.25rem 0.25rem;
    box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--secondary-color);
    min-width: 100% !important;
}

.search-facets .btn-dark {
    background-color: white;
    color: black;
    border: 0;
}

.search-facets .btn-dark:hover,
.search-facets .btn-dark:focus {
    background-color: var(--btn-light-hover-bg-color);
}

.search-facets .btn-light {
    color: white;
    background-color: black;
    border: 0 !important;
}

.facet-header {
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

.card {
    border-radius: 0.5rem;
}

header .navbar .nav .dropdown-menu {
    transition: color .15s ease-in-out, border-color .15s ease-in-out;
    border: 1px solid rgba(220, 220, 220);
    padding: 0;
    margin-top: 0.125rem !important;
    border-radius: 0.25rem;
    box-shadow: none;
}

#site-title {
    font-size: 24px;
    font-family: "Rubik", sans-serif;
    margin-bottom: 0;
}

header .navbar .nav .dropdown-menu li:not(:last-of-type) {
    border-bottom: 1px solid rgba(220, 220, 220);
}

#search-bar form {
    justify-content: end;
    width: max(750px, 50%);
    max-width: max(750px, 50%);
}

#search-bar {
    border-top: 2px solid #c4eaf7;
    border-bottom: 2px solid #c4eaf7;
}

@media (min-width: 768px) {
    #search-bar .browse-button {
        order: 0 !important;
    }
}

#search-bar .browse-button {
    order: 1;
}

#search-bar .browse-button .btn-primary {
    color: white;
    background-color: var(--secondary-color);
}

#search-bar .browse-button .btn-primary:hover,
#search-bar .browse-button .btn-primary:focus {
    background-color: var(--secondary-accent-color);
}

#search-bar .search-button-div .search-button {
    color: white;
    background-color: var(--primary-color);
}

#search-bar .search-button-div .search-button:hover,
#search-bar .search-button-div .search-button:focus {
    background-color: var(--primary-accent-color);
}

.search-group,
#search-group-btn {
    gap: 0.5rem;
}

.search-group-added>.input-group {
    border: 1px solid var(--secondary-color);
    border-radius: 0.25rem !important;
}

#line-container .search-group:not(.search-group-added) .searchinput,
#line-container .btn-light {
    border-radius: 0.25rem !important;
    border: 1px solid var(--secondary-color) !important;
}

.logo-footer-div {
    flex-direction: column;
}

.logos-footer {
    width: 60%;
    padding: 0 3% !important;
}

header>div {
    padding: 20px 7% !important;
}

.cms-page table {
    overflow-x: scroll;
    display: block;
}

header>div:first-of-type {
    padding: 30px 7% !important;
}

#footer .nav .menu-link {
    text-align: end;
}

.header-logo img {
    max-height: 100px;
}

.language-select-button {
    border: 1px solid var(--primary-color) !important;
    background-color: white;
    color: var(--primary-color);
}

.language-select-button:hover,
.language-select-button:focus {
    background-color: #e4e4e4;
    color: var(--primary-color);
}

#search-bar {
    width: 100%;
}

.btn-tex input {
    color: black;
}

.btn-tex input:hover,
.btn-tex input:active {
    color: black;
}

.journal-title {
    padding: 0 20px;
}

#navbar-collapse-button {
    border: 1px solid #e4e4e4;
}

@media (max-width: 500px) {
    .journal-header-content {
        width: 100%;
    }
}

.hamburger-icon span {
    background-color: var(--header-nav-link-color);
}

.dropdown-grid {
    width: 80vw;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
    z-index: 1001;
}

.dropdown-grid-items {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    border: 1px solid #dee2e6;
    background-color: #f8f9fa;
}

.dropdown-grid-item {
    display: block;
    width: 10rem;
    padding: 0.5rem;
    background-color: #f8f9fa;
    text-align: center;
    text-decoration: none;
    color: #000;
}

.dropdown-grid-item:hover {
    background-color: #dee2e6;
}

.dropdown-group-toggle {
    display: block;
    padding: 0.5rem 1rem;
    background-color: #e9ecef;
    font-weight: 500;
    color: #000;
    text-decoration: none;
    transition: background-color 0.2s ease-in-out;
}

.dropdown-group-toggle:hover {
    background-color: #ced4da;
    text-decoration: none;
}

#issueDropdownTrigger>button {
    position: relative;
}

/* Small arrow that shows under the trigger button when issues are opened */
#issueDropdownTrigger>button::after {
    content: "";
    position: absolute;
    bottom: -9px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid var(--secondary-color);
    /* Same look as btn-primary:focus' box-shadow property */
    pointer-events: none;
    z-index: 1051;

    /* Hide arrow by default */
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
}

#issueDropdownTrigger>button[aria-expanded="true"]::after {
    opacity: 1;
}