/*
Theme Name: Jephou Academic
Author: Joseph Hategekimana
Description: Multi-journal academic theme. Per-journal colours, fonts and labels live in Appearance > Customize > Journal Branding.
Version: 1.7.1
Requires at least: 5.9
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: journal-theme
Tags: bootstrap, responsive, journal, academic
*/

/* ==========================================================================
   CONTENTS
   1.  Foundation
   2.  Header: brand bar + Menu button
   3.  Primary navigation: bar (992px and up)
   4.  Primary navigation: menu drawer (phones and tablets)
   5.  Menu icons
   6.  Home page
   7.  Article page
   8.  Archives, lists and pagination
   9.  Pages, sidebars and widgets
   10. People: author profile, editors
   11. Footer

   Colours are CSS variables set by inc/branding.php (Appearance > Customize >
   Journal Branding). The value after a comma is only a fallback for when those
   variables are unavailable.

   Breakpoints follow Bootstrap: 576 / 768 / 992 / 1200. Everything is written
   mobile-first: the base rules are the phone layout and media queries add to it.
   ========================================================================== */


/* ==========================================================================
   1. FOUNDATION
   ========================================================================== */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-wrap: break-word; /* a long word or URL must never widen the page */
}

/* the footer sits at the bottom of short pages, whatever the page contains */
body > footer {
  margin-top: auto;
}

img {
  max-width: 100%;
}

.respo,
.wp-post-image {
  max-width: 100% !important;
  height: auto;
  display: block;
}

/* Editor content: images, embeds, code and tables never push the page wider */
.entry-content img,
.widget img,
.post-thumbnail img {
  max-width: 100%;
  height: auto;
}

.entry-content iframe,
.entry-content video,
.entry-content embed,
.entry-content object {
  max-width: 100%;
}

.entry-content pre {
  max-width: 100%;
  overflow: auto;
}

@media (max-width: 767.98px) {
  /* a wide table scrolls sideways inside itself instead of stretching the page */
  .entry-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* WordPress' own "visually hidden" class (WordPress does not ship its CSS to themes) */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

a:focus-visible,
button:not(.btn):focus-visible {
  outline: 3px solid rgba(var(--journal-primary-rgb, 13, 110, 253), 0.5);
  outline-offset: 2px;
}


/* ==========================================================================
   2. HEADER: BRAND BAR + MENU BUTTON
   Markup: header.php. On phones this bar is the only thing above the page: the
   journal name and one Menu button. From 992px the Top Bar menu (Home, Login,
   Registration ...) sits on the right instead of the button.
   ========================================================================== */

.site-header {
  position: relative;
  z-index: 1020;
  background: var(--bs-body-bg, #fff);
}

@media (max-width: 991.98px) {
  /* the brand bar stays in reach while reading a long page. Logged-in editors also
     see the WordPress admin bar, whose height WordPress publishes in this variable
     (unset for everyone else, so 0). */
  .site-header {
    position: sticky;
    top: var(--wp-admin--admin-bar--height, 0px);
    box-shadow: 0 1px 0 var(--bs-border-color, #dee2e6), 0 0.25rem 0.75rem rgba(0, 0, 0, 0.06);
  }
}

@media (max-width: 600px) {
  /* on phones the admin bar scrolls away with the page instead of staying put */
  .site-header { top: 0; }
}

.site-topbar {
  padding: 0.5rem 0;
  background: var(--bs-body-bg, #fff);
}

.site-topbar > .container {
  flex-wrap: nowrap;
  gap: 0.75rem;
}

.site-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1 1 auto;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.site-brand:hover,
.site-brand:focus {
  color: inherit;
}

.site-brand__logo {
  display: block;
  flex: 0 0 auto;
  height: 44px;
  width: auto;
  max-width: min(38vw, 200px); /* a wide logo may use some room, a portrait cover stays narrow */
  object-fit: contain;
  border-radius: 5px;
}

.site-brand__text {
  display: block;
  min-width: 0;
  line-height: 1.2;
}

.site-brand__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--bs-heading-color, #212529);
}

.site-brand__tagline {
  display: none;
  margin-top: 0.15rem;
  font-size: 0.9rem;
  line-height: 1.2;
  color: var(--journal-primary);
}

/* home page: the publisher's name, written in the journal colour */
.site-brand--text .site-brand__name {
  font-size: clamp(1rem, 4.5vw, 1.5rem);
  color: var(--journal-primary);
}

@media (min-width: 576px) {
  .site-brand__logo { height: 56px; max-width: min(30vw, 240px); }
  .site-brand__name { font-size: 1.2rem; }
  .site-brand__tagline { display: block; }
}

@media (min-width: 992px) {
  .site-topbar { padding: 0.75rem 0; }
  .site-brand__logo { height: 72px; max-width: 280px; }
  .site-brand__name { font-size: 1.5rem; }
  .site-brand--text .site-brand__name { font-size: 1.5rem; }
}

/* Top Bar menu, wide screens only (phones get it inside the drawer) */
.site-account {
  flex: 0 0 auto;
}

.site-account .navbar-nav {
  flex-direction: row;
  align-items: center;
  gap: 0.25rem;
}

.site-account .nav-link {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.7rem;
  border-radius: 0.4rem;
  font-size: 0.95rem;
  color: var(--bs-secondary-color, #6c757d);
}

.site-account .nav-link:hover,
.site-account .nav-link:focus-visible,
.site-account .active > .nav-link {
  color: var(--journal-primary);
  background: var(--bs-tertiary-bg, #f8f9fa);
}

/* the Menu button */
.site-toggler {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.5rem;
  background: var(--bs-body-bg, #fff);
  color: var(--bs-body-color, #212529);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.site-toggler .bi {
  font-size: 1.6rem;
  line-height: 1;
}

.site-toggler:hover {
  background: var(--bs-tertiary-bg, #f8f9fa);
}

@media (max-width: 399.98px) {
  /* very narrow phones: icon only, so the journal name keeps its room */
  .site-toggler { padding: 0.4rem 0.6rem; }
  .site-toggler__label { display: none; }
}


/* ==========================================================================
   3. PRIMARY NAVIGATION: BAR (992px and up)
   Markup: template-parts/site-nav.php. Below 992px the same element is the
   drawer described in section 4.
   ========================================================================== */

.site-mainbar {
  position: relative;
  z-index: 1020;
  padding: 0;
}

.site-mainbar > .container {
  padding-top: 0;
  padding-bottom: 0;
}

/* Submit / Guide buttons (their phone look is in section 4) */
.btn-submit,
.btn-guide {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 600;
  white-space: nowrap;
}

.btn-submit {
  border: 1px solid var(--journal-primary);
  background: var(--journal-primary);
  color: var(--journal-on-primary);
}

.btn-submit:hover,
.btn-submit:focus-visible,
.btn-submit:active {
  border-color: var(--journal-primary-dark, var(--journal-primary));
  background: var(--journal-primary-dark, var(--journal-primary));
  color: var(--journal-on-primary);
}

.btn-guide {
  border: 1px solid var(--bs-border-color, #dee2e6);
  background: transparent;
  color: var(--bs-body-color, #212529);
}

.btn-guide:hover,
.btn-guide:focus-visible {
  background: var(--bs-tertiary-bg, #f8f9fa);
  color: var(--bs-body-color, #212529);
}

@media (min-width: 992px) {

  .site-mainbar--bar {
    background: var(--journal-primary);
    color: var(--journal-on-primary);
    --bs-navbar-color: var(--journal-on-primary);
    --bs-navbar-hover-color: var(--journal-on-primary);
    --bs-navbar-active-color: var(--journal-on-primary);
    --bs-navbar-disabled-color: var(--journal-on-primary);
  }

  .site-mainbar--bar .site-drawer {
    --bs-offcanvas-color: var(--journal-on-primary);
  }

  .site-mainbar--light {
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #212529);
    border-bottom: 1px solid var(--journal-primary);
    --bs-navbar-color: rgba(var(--bs-emphasis-color-rgb, 0, 0, 0), 0.7);
    --bs-navbar-hover-color: var(--journal-primary);
    --bs-navbar-active-color: var(--journal-primary);
  }

  /* the offcanvas body is already a row here (Bootstrap); lay it out */
  .site-mainbar .offcanvas-body {
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
  }

  .site-primary { order: 0; margin-inline-end: auto; flex-wrap: wrap; }
  .site-search { order: 1; }
  .site-actions { order: 2; }
  .site-drawer__account { display: none; }

  /* --- top-level items --- */
  .site-primary > .nav-item {
    display: flex;
    align-items: stretch;
    position: relative;
  }

  .site-primary > .nav-item > .nav-link {
    display: inline-flex;
    align-items: center;
    padding: 1rem 0.9rem;
    font-weight: 500;
    white-space: nowrap;
  }

  /* a parent that is also a page: link + separate caret button */
  .site-primary > .nav-item-split > .nav-link {
    padding-right: 0.15rem;
  }

  .site-primary > .nav-item > .submenu-toggle {
    display: inline-flex;
    align-items: center;
    padding: 0 0.7rem 0 0.3rem;
    border: 0;
    background: transparent;
    color: inherit;
  }

  .site-primary .dropdown-toggle::after,
  .site-account .dropdown-toggle::after {
    transition: transform 0.2s ease;
  }

  /* keyboard focus: an outline that shows on whatever colour the bar is */
  .site-mainbar a:focus-visible,
  .site-mainbar button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -3px;
  }

  .site-primary [aria-expanded="true"]::after,
  .site-account [aria-expanded="true"]::after {
    transform: rotate(180deg);
  }

  /* hover / current page */
  .site-primary > .nav-item:hover,
  .site-primary > .nav-item:focus-within {
    background: rgba(255, 255, 255, 0.14);
  }

  .site-primary > .nav-item.active {
    box-shadow: inset 0 -3px 0 currentColor;
  }

  .site-mainbar--light .site-primary > .nav-item:hover,
  .site-mainbar--light .site-primary > .nav-item:focus-within {
    background: rgba(var(--journal-primary-rgb, 13, 110, 253), 0.08);
  }

  .site-mainbar--light .site-primary > .nav-item.active {
    box-shadow: inset 0 -3px 0 var(--journal-primary);
  }

  .site-mainbar--light .site-primary > .nav-item > .nav-link:hover,
  .site-mainbar--light .site-primary > .nav-item.active > .nav-link {
    color: var(--journal-primary);
  }

  /* --- submenus: open on hover with a mouse, on tap / click / keyboard otherwise --- */
  .site-primary .dropdown-menu,
  .site-account .dropdown-menu {
    display: block;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
    top: 100%;
    left: 0;
    margin: 0;
    min-width: 15rem;
    width: max-content;
    max-width: min(24rem, 90vw);
    padding: 0.4rem 0;
    border: 0;
    border-radius: 0 0 0.5rem 0.5rem;
    background: var(--journal-primary);
    box-shadow: 0 0.6rem 1.2rem rgba(0, 0, 0, 0.2);
  }

  .site-account .dropdown-menu {
    left: auto;
    right: 0;
    border-radius: 0.5rem;
  }

  .site-primary .dropdown-menu.show,
  .site-account .dropdown-menu.show {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    transition-delay: 0s;
  }

  /* a mouse can just point at the item; touch screens and keyboards use the caret button */
  @media (hover: hover) {
    .site-primary .nav-item:hover > .dropdown-menu,
    .site-account .nav-item:hover > .dropdown-menu {
      visibility: visible;
      opacity: 1;
      pointer-events: auto;
      transform: none;
      transition-delay: 0s;
    }
  }

  .site-primary .dropdown-item,
  .site-account .dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    padding: 0.6rem 1.25rem;
    color: var(--journal-on-primary);
    white-space: normal;
  }

  .site-primary .dropdown-item:hover,
  .site-primary .dropdown-item:focus-visible,
  .site-account .dropdown-menu .dropdown-item:hover,
  .site-account .dropdown-menu .dropdown-item:focus-visible {
    background: rgba(255, 255, 255, 0.14);
    color: var(--journal-on-primary);
    box-shadow: inset 3px 0 0 currentColor;
  }

  .site-primary .dropdown-item[aria-current="page"] {
    background: transparent;
    font-weight: 600;
    box-shadow: inset 3px 0 0 currentColor;
  }

  /* the Top Bar's own submenus sit on white, so they read dark */
  .site-account .dropdown-menu {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
  }

  .site-account .dropdown-menu .dropdown-item {
    color: var(--bs-body-color, #212529);
  }

  .site-account .dropdown-menu .dropdown-item:hover,
  .site-account .dropdown-menu .dropdown-item:focus-visible {
    background: var(--bs-tertiary-bg, #f8f9fa);
    color: var(--journal-primary);
  }

  /* --- search and buttons --- */
  .site-search { flex: 0 0 auto; width: 14rem; }

  .site-search .form-control,
  .site-search .btn {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    font-size: 0.95rem;
  }

  .site-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
  }

  .site-actions .btn {
    padding: 0.4rem 0.9rem;
  }

  .site-mainbar--bar .btn-submit,
  .site-mainbar--bar .btn-guide {
    background: transparent;
    border-color: var(--journal-on-primary);
    color: var(--journal-on-primary);
  }

  .site-mainbar--bar .btn-submit:hover,
  .site-mainbar--bar .btn-submit:focus-visible,
  .site-mainbar--bar .btn-guide:hover,
  .site-mainbar--bar .btn-guide:focus-visible {
    background: var(--journal-on-primary);
    border-color: var(--journal-on-primary);
    color: var(--journal-primary);
  }

  .site-mainbar--light .btn-submit {
    background: transparent;
    color: var(--journal-primary);
  }

  .site-mainbar--light .btn-submit:hover,
  .site-mainbar--light .btn-submit:focus-visible {
    background: var(--journal-primary);
    color: var(--journal-on-primary);
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  /* 992-1199px: tighter, so the bar stays on one line */
  .site-primary > .nav-item > .nav-link { padding-left: 0.6rem; padding-right: 0.6rem; font-size: 0.95rem; }
  .site-primary > .nav-item-split > .nav-link { padding-right: 0.1rem; }
  .site-search { width: 10.5rem; }
}

@supports (background: color-mix(in srgb, red 10%, blue)) {
  /* hover tint that works whether the bar text is light or dark */
  @media (min-width: 992px) {
    .site-primary > .nav-item:hover,
    .site-primary > .nav-item:focus-within,
    .site-primary .dropdown-item:hover,
    .site-primary .dropdown-item:focus-visible {
      background: color-mix(in srgb, var(--journal-on-primary) 16%, transparent);
    }

    .site-mainbar--light .site-primary > .nav-item:hover,
    .site-mainbar--light .site-primary > .nav-item:focus-within {
      background: color-mix(in srgb, var(--journal-primary) 9%, transparent);
    }
  }
}


/* ==========================================================================
   4. PRIMARY NAVIGATION: MENU DRAWER (phones and tablets, below 992px)
   The Menu button in the brand bar slides this panel in from the right.
   ========================================================================== */

@media (max-width: 991.98px) {

  /* the drawer is out of the page flow, so its bar takes no room */
  .site-mainbar {
    min-height: 0;
  }

  .site-drawer {
    --bs-offcanvas-width: min(88vw, 380px);
    --bs-offcanvas-padding-x: 0;
    --bs-offcanvas-padding-y: 0;
    --bs-offcanvas-bg: var(--bs-body-bg, #fff);
    --bs-offcanvas-color: var(--bs-body-color, #212529);
    --bs-offcanvas-border-width: 4px;
    --bs-offcanvas-border-color: var(--journal-primary);
  }

  /* below the admin bar, for logged-in editors */
  .offcanvas.site-drawer { top: var(--wp-admin--admin-bar--height, 0px); } /* Bootstrap's .offcanvas.offcanvas-end is two classes deep */

  .site-drawer__head {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
  }

  .site-drawer__title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.15rem;
    font-weight: 700;
  }

  .site-drawer__head .btn-close {
    box-sizing: border-box;
    width: 2.75rem;
    height: 2.75rem;
    margin: -0.25rem -0.5rem -0.25rem auto;
    padding: 0;
    background-size: 1rem;
  }

  .site-drawer__body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1rem 0 calc(1.25rem + env(safe-area-inset-bottom, 0px));
    overscroll-behavior: contain;
  }

  .site-drawer .site-search {
    padding: 0 1rem;
  }

  /* --- the menu: big, tappable rows --- */
  .site-primary {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .site-primary > .nav-item {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    border-top: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.1));
  }

  .site-primary > .nav-item:last-child {
    border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.1));
  }

  .site-primary .nav-link {
    display: flex;
    align-items: center;
    flex: 1 1 0;
    min-width: 0;
    min-height: 3rem;
    padding: 0.7rem 1rem;
    color: var(--bs-body-color, #212529);
    font-weight: 500;
  }

  .site-primary .nav-link:hover,
  .site-primary .nav-link:focus-visible {
    background: var(--bs-tertiary-bg, #f8f9fa);
    color: var(--bs-body-color, #212529);
  }

  /* a parent that is also a page: link + caret button side by side */
  .site-primary .submenu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 3.25rem;
    align-self: stretch;
    min-height: 3rem;
    padding: 0;
    border: 0;
    border-left: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.1));
    background: transparent;
    color: var(--bs-body-color, #212529);
  }

  .site-primary .submenu-toggle:hover,
  .site-primary .submenu-toggle:focus-visible {
    background: var(--bs-tertiary-bg, #f8f9fa);
  }

  .site-primary .submenu-toggle::after {
    margin: 0;
  }

  /* a parent that only opens its submenu: caret at the far right */
  .site-primary .nav-link.dropdown-toggle::after {
    margin-left: auto;
  }

  .site-primary .dropdown-toggle::after {
    transition: transform 0.2s ease;
  }

  .site-primary [aria-expanded="true"]::after {
    transform: rotate(180deg);
  }

  /* the submenu opens in place, like an accordion */
  .site-primary .dropdown-menu {
    position: static;
    flex: 0 0 100%;
    float: none;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-top: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.1));
    border-radius: 0;
    background: var(--bs-tertiary-bg, #f8f9fa);
    box-shadow: none;
  }

  .site-primary .dropdown-item {
    display: flex;
    align-items: center;
    min-height: 2.9rem;
    padding: 0.6rem 1rem 0.6rem 2.75rem;
    color: var(--bs-body-color, #212529);
    white-space: normal;
  }

  .site-primary .dropdown-item:hover,
  .site-primary .dropdown-item:focus-visible {
    background: var(--bs-secondary-bg, #e9ecef);
    color: var(--bs-body-color, #212529);
  }

  /* where you are */
  .site-primary > .nav-item.active > .nav-link,
  .site-primary .dropdown-item[aria-current="page"] {
    font-weight: 700;
    box-shadow: inset 4px 0 0 var(--journal-primary);
  }

  /* --- account links (Login / Registration ...) as two buttons side by side --- */
  .site-drawer__account {
    padding: 0 1rem;
  }

  .site-drawer__account .navbar-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.5rem;
    margin: 0;
    padding: 0;
  }

  .site-drawer__account .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    color: var(--bs-body-color, #212529);
    font-weight: 500;
  }

  .site-drawer__account .nav-link:hover,
  .site-drawer__account .nav-link:focus-visible {
    background: var(--bs-tertiary-bg, #f8f9fa);
  }

  .site-drawer__account .dropdown-menu {
    position: static;
    border: 0;
    box-shadow: none;
  }

  /* --- Submit button --- */
  .site-actions {
    display: grid;
    gap: 0.6rem;
    padding: 0 1rem;
  }

  .site-actions .btn {
    min-height: 3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-primary .dropdown-menu,
  .site-account .dropdown-menu,
  .site-primary .dropdown-toggle::after {
    transition: none !important;
  }
}


/* ==========================================================================
   5. MENU ICONS (inc/menu-icons.php puts one <i class="bi ... nav-icon"> in
   front of every menu item)
   ========================================================================== */

.nav-icon {
  display: inline-block;
  flex: 0 0 auto;
  margin-inline-end: 0.45rem;
  font-size: 1.05em;
  line-height: 1;
  vertical-align: -0.125em;
}

/* the walker wraps each link's text in <span itemprop="name">: that span is the row holding icon + text */
.site-primary .nav-link > span,
.site-primary .dropdown-item > span,
.site-account .nav-link > span,
.site-drawer__account .nav-link > span {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.site-primary .dropdown-item .nav-icon {
  opacity: 0.85;
}

@media (max-width: 991.98px) {
  .site-primary .nav-icon {
    flex: 0 0 1.5rem;
    width: 1.5rem;
    margin-inline-end: 0.75rem;
    text-align: center;
    font-size: 1.2rem;
    color: var(--journal-primary);
  }

  .site-primary .dropdown-item .nav-icon {
    flex-basis: 1.25rem;
    width: 1.25rem;
    font-size: 1.05rem;
  }
}

footer .nav-icon {
  width: 1.25em;
  margin-inline-end: 0.5rem;
  text-align: center;
  opacity: 0.8;
}


/* ==========================================================================
   6. HOME PAGE (index.php)
   ========================================================================== */

/* --- header band: cover, journal name, impact figures ---
   With a portrait cover the band is a colour strip that the cover stands on: the cover is taller than the
   strip, rises above it (--cover-over) and its bottom edge sits exactly on the strip's bottom edge. The strip
   is as tall as the cover minus that rise, so it follows the cover's proportions. Tune the two variables
   below (or override them in Additional CSS). A wide or square logo is not a cover: it is placed inside an
   ordinary band (home-band--flat, set by the onload in index.php). */
.home-band {
  --cover-w: 120px;   /* width of the cover */
  --cover-over: 48px; /* how far the cover rises above the strip */
  padding: 1.25rem 0;
}

@media (min-width: 576px) {
  .home-band { --cover-w: 170px; --cover-over: 76px; }
}

@media (min-width: 992px) {
  .home-band { --cover-w: 225px; --cover-over: 100px; }
}

.home-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}

/* Wide banner, square mark, transparent PNG: fitted inside a limit without distortion and set on a white
   plate so it stays visible on any band colour. A logo that is WHITE on a transparent background needs no
   plate: in Appearance > Customize > Additional CSS add
   :root { --journal-logo-plate: transparent; --journal-logo-pad: 0; --journal-logo-shadow: none; } */
.home-band__logo {
  display: block;
  flex: 0 0 auto;
  width: auto;
  height: auto;
  max-width: min(100%, 320px);
  max-height: 170px;
  object-fit: contain;
  padding: var(--journal-logo-pad, 3px);
  background: var(--journal-logo-plate, #fff);
  border-radius: 8px;
  box-shadow: var(--journal-logo-shadow, 0 2px 10px rgba(0, 0, 0, 0.25));
}

.home-band__text {
  display: flex;
  flex: 1 1 16rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  min-width: 0;
}

.home-band__titles {
  flex: 1 1 16rem;
  min-width: 0;
}

.home-band__title {
  margin: 0;
  font-size: clamp(1.45rem, 5.5vw, 2rem);
  line-height: 1.2;
}

.home-band__tagline {
  margin: 0.35rem 0 0;
}

.home-band__stats {
  display: flex;
  flex: 0 0 auto;
  gap: 1.5rem;
  text-align: center;
}

.home-band__stats h4 {
  margin: 0;
  font-size: 1.5rem;
}

@media (min-width: 768px) {
  .home-band {
    margin-top: 1.5rem;
    padding: 1.5rem 0;
  }

  .home-band__logo {
    max-width: min(100%, 380px);
    max-height: 130px;
  }
}

/* the cover layout (any logo that has not been marked as flat) */
.home-band--logo:not(.home-band--flat) {
  margin-top: calc(var(--cover-over) + 1.5rem); /* room for the part of the cover that rises above the strip */
  padding: 0;                                   /* nothing under the cover: it stands on the strip's edge */
}

.home-band--logo:not(.home-band--flat) .home-band__inner {
  flex-wrap: nowrap;
  gap: 0 clamp(1rem, 4vw, 3.5rem);
}

.home-band--logo:not(.home-band--flat) .home-band__logo {
  position: relative;
  z-index: 2;
  align-self: flex-end;                          /* bottom edge = the strip's bottom edge */
  width: var(--cover-w);
  height: auto;
  max-width: none;
  min-height: calc(var(--cover-over) + 96px);    /* never shorter than its rise plus a little */
  max-height: calc(var(--cover-w) * 1.9);        /* a very tall image is not allowed to make a huge strip */
  aspect-ratio: auto 9 / 16;                     /* room is kept while the image loads */
  object-fit: contain;
  margin: calc(-1 * var(--cover-over)) 0 0;      /* rises above the strip */
  padding: 0;
  background: var(--journal-logo-plate, #fff);
  border-radius: 8px 8px 0 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.home-band--logo:not(.home-band--flat) .home-band__text {
  padding: 1.5rem 0;
}

.home-band--logo:not(.home-band--flat) .home-band__title {
  font-size: clamp(1.15rem, 4.6vw, 2rem);
}

@media (max-width: 575.98px) {
  .home-band--logo:not(.home-band--flat) .home-band__text { padding: 1rem 0; gap: 0.5rem 1rem; }
  .home-band--logo:not(.home-band--flat) .home-band__tagline { font-size: 0.9rem; }
  .home-band--logo:not(.home-band--flat) .home-band__stats { gap: 1rem; }
  .home-band--logo:not(.home-band--flat) .home-band__stats h4 { font-size: 1.15rem; }
}

/* --- about box + publishing options --- */
.home-about {
  border-radius: 0.5rem;
}

/* --- key figures --- */
.home-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem 0;
  align-items: start;
  text-align: center;
}

.metric-box {
  padding: 0.5rem 1rem;
}

.home-metrics__more {
  grid-column: 1 / -1;
  align-self: center;
}

@media (max-width: 767.98px) {
  .metric-box:nth-child(even) {
    border-left: 1px solid #ccc;
  }
}

@media (min-width: 768px) {
  .home-metrics {
    grid-template-columns: repeat(4, 1fr);
  }

  .home-metrics--more {
    grid-template-columns: repeat(4, 1fr) auto;
  }

  .metric-box + .metric-box {
    border-left: 1px solid #ccc;
  }

  .home-metrics__more {
    grid-column: auto;
    padding-left: 1rem;
  }
}

/* --- editors in chief --- */
.home-editors__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
}

.editor-card {
  transition: all 0.3s ease;
  color: var(--journal-header-text, #fff);
}

.editor-card a {
  color: var(--journal-header-text, #fff) !important;
}

.editor-card a:hover {
  color: var(--journal-header-text, #fff) !important;
}

.editor-card .text-muted {
  color: var(--journal-header-text, #fff) !important;
}

.editor-card:hover {
  transform: translateY(-3px);
}

.editor-card img {
  width: 60px;
  height: 60px;
  object-fit: cover;
}

.editor-card .editor-content {
  min-width: 0;
  overflow-wrap: anywhere;
}

.editor-details {
  margin-top: 0.3rem;
}

.object-fit-cover {
  object-fit: cover;
}

.hover-shadow {
  transition: box-shadow 0.3s ease;
}

.hover-shadow:hover {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.hover-primary:hover {
  color: var(--journal-primary, var(--bs-primary)) !important;
}

/* --- recent articles ([recent_papers]) --- */
.paper-category,
.date-pub {
  display: block;
  font-size: 0.8rem;
}

.big-dot-green {
  font-size: 10px;
  color: #01a519;
  text-shadow: 0;
  margin: 0;
}

.big-dot-black {
  font-size: 10px;
  color: #000000;
  text-shadow: 0;
  margin: 0;
}

.authors-list {
  display: block;
  padding-top: 10px;
  font-size: 0.8rem;
}

.clamp-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 100px;
  margin-bottom: -20px;
  font-size: 1.0rem;
}

@media (max-width: 575.98px) {
  /* one column on phones: no need to reserve four lines */
  .clamp-text {
    min-height: 0;
    margin-bottom: 0;
  }
}

.article-tags {
  font-size: 0.8rem;
  color: #888;
}

/* --- conferences / announcements / news tabs ([journal_tabs]) --- */
.journal-tabs .nav-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  border-bottom: none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.journal-tabs .nav-tabs::-webkit-scrollbar {
  display: none;
}

.journal-tabs .nav-tabs .nav-link {
  padding: 0.25rem clamp(0.4rem, 2.4vw, 1.9rem);
  border: none;
  border-bottom: 3px solid transparent;
  color: #333;
  font-size: clamp(0.95rem, 4.6vw, 2rem);
  white-space: nowrap;
}

.journal-tabs .nav-tabs .nav-link.active {
  border-bottom: 3px solid var(--journal-primary);
  font-weight: 600;
}

.journal-tabs .tab-content {
  padding: 1rem 0 0.5rem;
  border-top: 1px solid #dee2e6;
}

@media (min-width: 768px) {
  .journal-tabs .tab-content {
    padding: 1rem 1.5rem 0.75rem;
  }
}

.journal-tabs .journal-item {
  margin-bottom: 1.5rem;
}

.journal-tabs .journal-item h6 {
  margin-bottom: 0.25rem;
}

.journal-tabs .view-all {
  display: inline-block;
  margin-top: 1rem;
  font-weight: 500;
}

.journal-tabs .tab-item-title {
  display: block;
  font-size: clamp(1.1rem, 4.2vw, 1.5rem);
  line-height: 1.3;
}


/* ==========================================================================
   7. ARTICLE PAGE (single-journal_article.php)
   ========================================================================== */

.article-masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}

.article-masthead__logo img {
  display: block;
  max-width: 100px;
  height: auto;
}

.article-masthead__logo--journal img {
  max-width: 67px;
}

.article-masthead__text {
  flex: 1 1 100%;
  order: 3;
  min-width: 0;
  text-align: center;
}

@media (min-width: 576px) {
  .article-masthead__text {
    flex: 1 1 14rem;
    order: 2;
  }
}

.article-title {
  font-size: clamp(1.4rem, 4.8vw, 2rem);
  line-height: 1.25;
}

.pub-history {
  font-size: 14px;
}

.pub-history a {
  overflow-wrap: anywhere;
}

.abstract-box {
  padding: 0.25rem 1.25rem 1rem;
}

@media (min-width: 992px) {
  .abstract-box {
    margin-left: -20px;
    padding-left: 20px;
  }
}

.article-graphic img {
  max-width: 100%;
  height: auto;
}

.sup {
  vertical-align: super;
  font-size: smaller;
  line-height: 0;
}

.breadcrumbs {
  padding: 0;
  font-size: 14px;
}

.breadcrumbs a {
  color: var(--journal-link, #0073aa);
  text-decoration: none;
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

.breadcrumbs .current {
  color: #333;
}

.citation-box {
  background: #f8f9fa;
  border-left: 4px solid var(--journal-primary, #0073aa);
  padding: 20px;
  margin-bottom: 25px;
  font-size: 14px;
  border-radius: 0 4px 4px 0;
}

.citation-style {
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid #eaecef;
}

.citation-style:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.citation-style h4 {
  margin: 0 0 8px 0;
  color: #2c3e50;
  font-size: 15px;
  font-weight: 600;
}

.citation-downloads {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.download-label {
  font-weight: bold;
  margin-right: 5px;
  color: #555;
}

.download-link {
  color: var(--journal-link, #0073aa);
  text-decoration: none;
  background: #e7f2f9;
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 13px;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
}

.download-link:hover {
  background: #d0e3f1;
  text-decoration: none;
  transform: translateY(-1px);
}

.download-link:active {
  transform: translateY(0);
}

@media (max-width: 480px) {
  .citation-downloads {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* View / Download PDF buttons ([journal_article_pdf_buttons]) */
.journal-article-pdf-buttons .card-body {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.journal-article-pdf-buttons .card-body > .card-text {
  flex: 1 1 100%;
  margin-bottom: 0;
}


/* ==========================================================================
   8. ARCHIVES, LISTS AND PAGINATION
   ========================================================================== */

/* article buttons on each row of a listing (Abstract + PDF) */
.article-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.article-actions .journal-article-pdf-buttons {
  margin: 0 !important;
}

.article-actions .journal-article-pdf-buttons .card-body {
  padding: 0;
}

/* volumes / issues navigator: folded away on phones so the articles come first */
.archive-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 3rem;
  padding: 0.6rem 1rem;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.5rem;
  background: var(--bs-body-bg, #fff);
  color: var(--bs-body-color, #212529);
  font-weight: 600;
}

.archive-toggle[aria-expanded="true"] .archive-toggle__chevron {
  transform: rotate(180deg);
}

.archive-toggle__chevron {
  transition: transform 0.2s ease;
}

/* Journal archive cards */
.journal-archive .card {
  border: none;
  border-radius: 0.5rem;
  overflow: hidden;
}

.journal-archive .card-header {
  border-radius: 0 !important;
}

.journal-archive .list-group-item.active {
  background-color: #0d6efd;
  border-color: #0d6efd;
  z-index: auto;
}

.journal-archive .list-group-item-action {
  transition: all 0.2s ease;
  border-left: none;
  border-right: none;
}

.journal-archive .list-group-item-action:hover:not(.active) {
  background-color: #f8f9fa;
  transform: translateX(3px);
}

.journal-archive .list-group-item.py-3 {
  position: relative;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.journal-archive .stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  content: "";
}

.journal-archive .badge {
  font-weight: 500;
  font-size: 0.85em;
}

.journal-archive .list-group-flush .list-group-flush {
  border-left: 3px solid #dee2e6;
}

@media (max-width: 991.98px) {
  .journal-archive .col-lg-3 {
    margin-bottom: 1.25rem;
  }
}

/* Pagination: numbers wrap onto a second line instead of running off a phone */
.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem;
}

.journal-archive .pagination .page-numbers,
.pagination .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  margin: 0 2px;
  padding: 0 0.5rem;
  border-radius: 2rem !important;
}

.journal-archive .pagination .current,
.pagination .current {
  background-color: #0d6efd;
  color: white;
  border-color: #0d6efd;
}

.clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* News / conference / announcement lists in the sidebar */
.latest-cpt-posts-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.latest-cpt-post-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.latest-cpt-post-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.cpt-post-thumbnail-link {
  display: block;
  flex-shrink: 0;
  margin-right: 15px;
}

.cpt-post-thumbnail {
  max-width: 100%;
  border-radius: 3px;
  transition: opacity 0.2s ease;
  display: block;
}

.cpt-post-thumbnail:hover {
  opacity: 0.9;
}

/* a post without a featured image: a neutral box instead of a broken picture */
.cpt-post-thumbnail--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bs-tertiary-bg, #f1f3f5);
  color: var(--bs-secondary-color, #adb5bd);
  font-size: 1.5rem;
}

.cpt-post-content {
  flex-grow: 1;
  min-width: 0;
}

.cpt-post-title {
  text-decoration: none;
  color: inherit;
  font-weight: 500;
  transition: color 0.2s ease;
}

.cpt-post-title:hover {
  color: var(--journal-link, #0066cc);
}


/* ==========================================================================
   9. PAGES, SIDEBARS AND WIDGETS
   ========================================================================== */

/* a thin rule between the content column and its sidebar, wide screens only */
@media (min-width: 992px) {
  .has-divider {
    border-right: 1px solid var(--bs-border-color, #dee2e6);
  }
}

h3.widget-title {
  padding-top: 30px;
  padding-bottom: 10px;
  border-top: 1px solid #eee;
}


/* ==========================================================================
   10. PEOPLE: AUTHOR PROFILE, EDITORS
   ========================================================================== */

.user-bio {
  line-height: 1.8;
}

.user-bio p {
  margin-bottom: 1rem;
}

.user-bio ul,
.user-bio ol {
  margin-bottom: 1rem;
  padding-left: 2rem;
}

.user-bio ul {
  list-style-type: disc;
}

.user-bio ol {
  list-style-type: decimal;
}

.user-bio a {
  color: var(--journal-link, var(--bs-primary));
  text-decoration: none;
}

.user-bio a:hover {
  text-decoration: underline;
}

.user-bio strong,
.user-bio b {
  font-weight: 600;
}

.user-bio em,
.user-bio i {
  font-style: italic;
}

.card {
  border: none;
  border-radius: 0.5rem;
}

.shadow-sm {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

.list-group-item {
  border-left: 0;
  border-right: 0;
  padding: 1rem 0;
}

.list-group-item:first-child {
  border-top: 0;
  padding-top: 0;
}

.list-group-item:last-child {
  border-bottom: 0;
}

.author-photo {
  width: 200px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

/* Editors list */
.editors-list .list-group-item {
  transition: all 0.3s ease;
  border-left: 0;
  border-right: 0;
}

.editors-list .list-group-item:hover {
  background-color: #f8f9fa;
  transform: translateX(5px);
}

/* [editors_list]: the name and role take the row, the button wraps below on phones */
.editor-row-text {
  flex: 1 1 14rem;
  min-width: 0;
}

.editors-list .list-group-item img {
  object-fit: cover;
  border: 2px solid #dee2e6;
}

.editors-list .sidebar {
  position: sticky;
  top: 20px;
}

@media (max-width: 991px) {
  .editors-list .sidebar {
    position: static;
    margin-top: 2rem;
  }
}


/* ==========================================================================
   11. FOOTER
   ========================================================================== */

footer a {
  color: var(--journal-footer-link, rgba(255, 255, 255, 0.7));
  text-decoration: none;
  display: block;
  padding: 0.25rem 0;
  transition: color 0.3s ease;
}

footer a:hover {
  color: var(--journal-footer-link-hover, #fff);
}

footer h5 {
  color: var(--journal-footer-heading, #fff);
  font-size: 1.1rem;
  font-weight: 500;
}

footer ul {
  padding-left: 0;
  list-style: none;
}

address {
  font-style: normal;
  line-height: 1.6;
}

@media (max-width: 767.98px) {
  /* comfortable thumb targets for the footer links */
  footer .col li a {
    padding: 0.5rem 0;
  }
}