/**
 * plugins/themes/yarmouk/styles/yarmouk.css
 *
 * Al-Yarmouk College branding, layered over the PKP Default theme.
 *
 * Palette sampled from yarmouk-college.edu.sd so the journal and the college
 * site read as one institution:
 *   navy  #1B3A6B   section bands, headings, primary buttons
 *   ink   #112347   top strip, footer
 *   gold  #C9A227   call-to-action pills and accents
 *
 * Only selectors that OJS 3.5.0-5 actually emits are targeted; each block
 * notes the template it comes from so this stays checkable after an upgrade.
 */

/* ------------------------------------------------------------------ fonts */
/* Self-hosted so no request leaves the server: Google Fonts would expose
   every visitor's IP and would sit behind Cloudflare on a slow link. */

@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cairo-arabic-400.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF,
    U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74,
    U+FE76-FEFC;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cairo-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/cairo-arabic-600.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF,
    U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74,
    U+FE76-FEFC;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/cairo-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/cairo-arabic-700.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF,
    U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74,
    U+FE76-FEFC;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/cairo-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------ tokens */

:root {
  --yc-navy: #1b3a6b;
  --yc-navy-deep: #183360;
  --yc-ink: #112347;
  --yc-gold: #c9a227;
  --yc-gold-dark: #a9881f;
  --yc-line: #e3e8f0;
  --yc-text: #26324a;
  --yc-muted: #5f6e8a;
  --yc-bg: #f4f6fa;
  --yc-radius: 14px;
  --yc-shadow: 0 1px 2px rgba(17, 35, 71, .05), 0 10px 30px rgba(17, 35, 71, .08);
  --yc-font: 'Cairo', 'Segoe UI', Tahoma, system-ui, -apple-system, sans-serif;
}

/* -------------------------------------------------------------------- base */

body {
  font-family: var(--yc-font);
  background: var(--yc-bg);
  color: var(--yc-text);
  -webkit-font-smoothing: antialiased;
}

body.pkp_page_index,
body.pkp_page_login,
body.pkp_page_user {
  font-size: 16px;
  line-height: 1.7;
}

.pkp_structure_page {
  max-width: none;
  background: transparent;
}

.pkp_structure_content {
  width: auto;
  background: transparent;
}

.pkp_structure_main {
  float: none;
  width: auto;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
  background: transparent;
  box-shadow: none;
}

/* The parent theme draws two full-height 1px rules either side of the
   content column (body.less, "Full-height borders wrapping primary content
   column"). They hang in mid-air once the column is centred on a tinted
   background, so switch them off. */
.pkp_structure_main::before,
.pkp_structure_main::after {
  display: none;
}

h1, h2, h3, h4 {
  font-family: var(--yc-font);
  color: var(--yc-navy);
  font-weight: 700;
  letter-spacing: 0;
}

a {
  color: var(--yc-navy);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover,
a:focus {
  color: var(--yc-gold-dark);
}

/* ------------------------------------------------------- header / templates
   lib/pkp/templates/frontend/components/headerHead.tpl + header.tpl */

.pkp_structure_head {
  background: #fff;
  border: 0;
  border-bottom: 1px solid var(--yc-line);
  box-shadow: 0 1px 14px rgba(17, 35, 71, .06);
}

/* The institutional strip the college site runs above its header. It is a
   real element (this theme's skipLinks.tpl override) rather than a ::before,
   because it carries the language switcher. */
.yc_topbar {
  background: var(--yc-ink);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.yc_topbar_inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 16px;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.yc_lang {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.yc_lang_link {
  display: inline-block;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
  border-radius: 6px;
  transition: background-color .15s ease, color .15s ease;
}

.yc_lang_link:hover,
.yc_lang_link:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, .1);
}

.yc_lang_link.is_current {
  color: var(--yc-gold);
  background: rgba(201, 162, 39, .14);
}

.yc_lang_link:focus-visible {
  outline: 2px solid var(--yc-gold);
  outline-offset: 1px;
}

.pkp_head_wrapper {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  background: transparent;
}

/* The parent theme stacks the logo and the navigation: it gives
   .pkp_site_name_wrapper / .pkp_site_name a width of 100% (or a fixed
   container width) and reserves room above for the user nav. Both have to
   go to auto, or the logo claims the whole row and pushes the buttons onto
   a line of their own. */
.pkp_site_name_wrapper {
  width: auto;
  padding: 14px 0;
  margin: 0;
  background: transparent;
}

.pkp_site_name,
.pkp_site_name .is_img {
  width: auto;
  background: transparent;
  padding: 0;
  margin: 0;
  display: block;
}

/* The logo is uploaded through Site Settings -> Appearance, so an
   administrator can swap it later without touching this theme. */
.pkp_site_name .is_img img {
  max-height: 62px;
  width: auto;
  height: auto;
  max-width: 100%;
  display: block;
}

/* Site title when no image has been uploaded yet */
.pkp_site_name > a:not(.is_img) {
  font-size: 22px;
  font-weight: 700;
  color: var(--yc-navy);
  text-decoration: none;
}

/* --- navigation --- */

.pkp_navigation_primary_row {
  background: transparent;
  border: 0;
}

/* IMPORTANT: .pkp_site_nav_menu is two different things.
   At >= 992px (@screen-desktop) it is the inline nav inside the header.
   Below that it is the drop-down panel: the parent theme gives it
   position:absolute; top:100%; width:100%; background:#fff (head.less,
   "Mobile navigation menu"). Resetting its background/width/padding
   unconditionally leaves the open menu with no panel behind it, so the
   Register/Login pills float transparently over the page. Desktop only. */
@media (min-width: 992px) {
  .pkp_site_nav_menu {
    background: transparent;
    flex: 0 0 auto;
    width: auto;
    padding: 0;
  }

  .pkp_navigation_primary_wrapper,
  .pkp_navigation_user_wrapper {
    width: auto;
    padding: 0;
    background: transparent;
    float: none;
    position: static;
  }
}

.pkp_nav_list a,
.pkp_navigation_primary > li > a,
.pkp_navigation_user > li > a {
  color: var(--yc-navy);
  font-weight: 600;
  font-size: 14.5px;
  padding: 9px 14px;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
  background: rgba(27, 58, 107, .07);
  color: var(--yc-navy);
}

.pkp_navigation_user {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  width: auto;
  margin: 0;
  padding: 0;
}

.pkp_navigation_user > li {
  float: none;
  margin: 0;
}

/* Register reads as the primary action, Login as the quieter outline —
   the same pairing the college site uses. */
.pkp_navigation_user > li.profile:first-child > a {
  background: var(--yc-gold);
  color: #fff;
  border-radius: 999px;
  padding: 9px 20px;
}

.pkp_navigation_user > li.profile:first-child > a:hover,
.pkp_navigation_user > li.profile:first-child > a:focus {
  background: var(--yc-gold-dark);
  color: #fff;
}

.pkp_navigation_user > li.profile + li.profile > a {
  border: 1.5px solid var(--yc-navy);
  border-radius: 999px;
  padding: 7.5px 20px;
}

.pkp_navigation_user > li.profile + li.profile > a:hover,
.pkp_navigation_user > li.profile + li.profile > a:focus {
  background: var(--yc-navy);
  color: #fff;
}

.pkp_site_nav_toggle {
  background: var(--yc-navy);
  border-radius: 8px;
}

/* ------------------------------------------- accessible-hiding, RTL-safe
   lib/pkp/styles/helpers.less hides screen-reader-only text with
   `left: -2000px`, and the default theme's rtl.less flips that to
   `right: -2000px`. In an RTL document that pushes the element 2000px past
   the right edge, so every Arabic page gets a 2000px horizontal scroll and
   a huge empty gutter. Use the clip technique instead: it hides the text
   just as well without ever leaving the page box. */

body[dir] .pkp_screen_reader,
body[dir] .cmp_skip_to_content a,
body[dir].pkp_page_index .cmp_announcements h2,
body[dir] .page_register .context_optin .roles legend {
  left: auto;
  right: auto;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ...but they must still appear when tabbed to */
body[dir] .pkp_screen_reader:focus,
body[dir] .cmp_skip_to_content a:focus {
  width: auto;
  height: auto;
  margin: 0;
  padding: 1em;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
}

body[dir] .cmp_skip_to_content a:focus {
  position: fixed;
  top: 0;
  inset-inline-start: 50%;
  z-index: 99999;
  background: #fff;
  color: var(--yc-navy);
  border-radius: 0 0 8px 8px;
  box-shadow: var(--yc-shadow);
}

/* ------------------------------------------------------------ breadcrumbs */

.cmp_breadcrumbs {
  font-size: 13px;
  color: var(--yc-muted);
  padding: 18px 0 0;
}

.cmp_breadcrumbs a {
  color: var(--yc-muted);
  text-decoration: none;
}

.cmp_breadcrumbs a:hover {
  color: var(--yc-navy);
  text-decoration: underline;
}

/* ================================================================== LOGIN
   templates/frontend/pages/userLogin.tpl -> .page_login
   Rendered as a single centred card instead of a bare form on a white page. */

body.pkp_page_login .pkp_structure_main {
  max-width: 560px;
  padding: 0 20px;
}

body.pkp_page_login .cmp_breadcrumbs {
  display: none;
}

.page_login,
.page_lost_password,
.page_register,
.page_error {
  background: #fff;
  border: 1px solid var(--yc-line);
  border-radius: var(--yc-radius);
  box-shadow: var(--yc-shadow);
  padding: 40px 38px 34px;
  margin: 52px auto 64px;
  position: relative;
  overflow: hidden;
}

.page_login::before,
.page_lost_password::before,
.page_register::before,
.page_error::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--yc-navy) 0%, var(--yc-gold) 100%);
}

.page_login h1,
.page_lost_password h1,
.page_register h1,
.page_error h1 {
  text-align: center;
  font-size: 27px;
  margin: 4px 0 6px;
  padding: 0;
  border: 0;
}

/* "Required fields are marked with an asterisk" */
.page_login > p,
.page_lost_password > p {
  text-align: center;
  font-size: 13px;
  color: var(--yc-muted);
  margin: 0 0 26px;
}

/* The parent theme caps these forms at 17em (= 272px) and floats their
   buttons right - sized for a form sitting in a full-width page, not in a
   centred card. Left alone, the fields occupy barely half the card and sit
   hard against one edge. Let the form fill the card instead.
   (pages/login.less, lostPassword.less, register.less) */
.page_login .cmp_form.login,
.page_lost_password .cmp_form,
.page_register .cmp_form {
  max-width: none;
  width: auto;
  margin: 0;
}

/* The parent caps every .cmp_form field at 20em above 480px wide
   (components.less). At our 15px base that is exactly 300px, so inside a
   520px card the inputs stopped two-thirds of the way across while the
   label and button ran the full width - the misalignment that shows up as
   a lopsided card. Lift the cap on the card pages only; elsewhere the cap
   is right, because those forms sit on full-width pages. */
@media (min-width: 480px) {
  .page_login .cmp_form input[type='text'],
  .page_login .cmp_form input[type='email'],
  .page_login .cmp_form input[type='password'],
  .page_login .cmp_form input[type='url'],
  .page_login .cmp_form select,
  .page_lost_password .cmp_form input[type='text'],
  .page_lost_password .cmp_form input[type='email'],
  .page_lost_password .cmp_form select,
  .page_register .cmp_form input[type='text'],
  .page_register .cmp_form input[type='email'],
  .page_register .cmp_form input[type='password'],
  .page_register .cmp_form input[type='url'],
  .page_register .cmp_form select {
    max-width: none;
  }
}

.page_login .buttons button,
.page_lost_password .buttons button,
.page_register .buttons button,
.page_login .buttons a,
.page_lost_password .buttons a {
  float: none;
}

.cmp_form fieldset.fields {
  border: 0;
  margin: 0;
  padding: 0;
}

/* The parent reserves padding-bottom: @triple under every field so an
   absolutely-positioned .error can sit there. That is far more room than
   the message needs and leaves the form looking loose, so tighten it while
   keeping enough space for the error to land clear of the next label. */
.cmp_form .fields > div {
  padding-bottom: 22px;
  margin-bottom: 0;
}

.cmp_form .fields > div.remember.checkbox {
  padding-bottom: 4px;
}

.cmp_form label {
  display: block;
}

.cmp_form .label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--yc-navy);
  margin-bottom: 7px;
}

.cmp_form .required {
  color: #c0392b;
}

.cmp_form input[type='text'],
.cmp_form input[type='email'],
.cmp_form input[type='password'],
.cmp_form input[type='url'],
.cmp_form select {
  width: 100%;
  box-sizing: border-box;
  height: 46px;
  padding: 0 14px;
  font-family: var(--yc-font);
  font-size: 15px;
  color: var(--yc-text);
  background: #fbfcfe;
  border: 1.5px solid #d7dee9;
  border-radius: 10px;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.cmp_form input[type='text']:focus,
.cmp_form input[type='email']:focus,
.cmp_form input[type='password']:focus,
.cmp_form select:focus {
  outline: 0;
  background: #fff;
  border-color: var(--yc-navy);
  box-shadow: 0 0 0 3px rgba(27, 58, 107, .14);
}

/* Chrome paints autofilled fields a hard yellow that no `background` can
   override; only an inset shadow covers it. Without this, a returning user
   sees two yellow boxes in the middle of the card. */
.cmp_form input:-webkit-autofill,
.cmp_form input:-webkit-autofill:hover,
.cmp_form input:-webkit-autofill:focus,
.cmp_form input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--yc-text);
  -webkit-box-shadow: 0 0 0 1000px #fbfcfe inset;
  box-shadow: 0 0 0 1000px #fbfcfe inset;
  caret-color: var(--yc-text);
  /* the long transition keeps the override from being repainted away */
  transition: background-color 100000s ease-in-out 0s;
}

.cmp_form input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset, 0 0 0 3px rgba(27, 58, 107, .14);
  box-shadow: 0 0 0 1000px #fff inset, 0 0 0 3px rgba(27, 58, 107, .14);
}

/* Username, e-mail and password are always Latin even on the Arabic site.
   Left in an RTL context the "@" and dots render in the wrong visual order,
   so give just these fields LTR semantics while keeping them aligned with
   the right-to-left column. */
body[dir='rtl'] .cmp_form input[type='text'],
body[dir='rtl'] .cmp_form input[type='email'],
body[dir='rtl'] .cmp_form input[type='password'],
body[dir='rtl'] .cmp_form input[type='url'] {
  direction: ltr;
  text-align: right;
}

/* "Forgot your password?" sits inside the password <label> */
.cmp_form .password a {
  display: inline-block;
  margin-top: 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--yc-navy);
  text-decoration: none;
}

.cmp_form .password a:hover {
  color: var(--yc-gold-dark);
  text-decoration: underline;
}

.cmp_form .remember.checkbox label {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
}

.cmp_form .remember.checkbox input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--yc-navy);
  flex: none;
}

.cmp_form .remember.checkbox .label {
  margin: 0;
  font-weight: 500;
  color: var(--yc-text);
  font-size: 14px;
}

.cmp_form .buttons {
  margin-top: 26px;
}

.cmp_form .buttons button.submit,
.cmp_form .buttons .submit {
  display: block;
  width: 100%;
  height: 48px;
  font-family: var(--yc-font);
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: var(--yc-navy);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(27, 58, 107, .22);
  transition: background-color .15s ease, transform .1s ease, box-shadow .15s ease;
}

.cmp_form .buttons button.submit:hover,
.cmp_form .buttons .submit:hover {
  background: var(--yc-ink);
}

.cmp_form .buttons button.submit:active {
  transform: translateY(1px);
  box-shadow: 0 3px 10px rgba(27, 58, 107, .22);
}

.cmp_form .buttons button.submit:focus-visible {
  outline: 3px solid var(--yc-gold);
  outline-offset: 2px;
}

/* a "Register" link offered under the login button, when present */
.page_login .buttons a {
  display: block;
  text-align: center;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 600;
}

/* ============================================================== SITE HOME
   templates/frontend/pages/indexSite.tpl

   Site About text is rendered inside .about_site. config.inc.php
   allowed_html permits only p/strong/em/a/ul/li, no divs or classes, so the
   hero is built by styling those elements positionally. */

.page_index_site {
  padding-bottom: 56px;
}

.about_site {
  position: relative;
  margin: 32px 0 44px;
  padding: 54px 48px 52px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(17, 35, 71, .94) 0%, rgba(27, 58, 107, .92) 100%),
    url('../images/logo-white.png') no-repeat;
  background-size: auto, 300px auto;
  background-position: center, left -40px bottom -30px;
  color: #fff;
  box-shadow: 0 18px 48px rgba(17, 35, 71, .22);
  overflow: hidden;
}

body[dir='rtl'] .about_site {
  background-position: center, right -40px bottom -30px;
}

.about_site::after {
  content: '';
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--yc-gold);
}

.about_site p {
  max-width: 62ch;
  color: rgba(255, 255, 255, .88);
  font-size: 16.5px;
  margin: 0 0 14px;
}

/* first paragraph of the About text becomes the headline */
.about_site p:first-child {
  font-size: 34px;
  line-height: 1.35;
  font-weight: 700;
  color: #fff;
  margin-bottom: 14px;
}

.about_site p:last-child {
  margin-bottom: 0;
}

.about_site a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--yc-gold);
  text-decoration-thickness: 2px;
}

.about_site a:hover {
  color: var(--yc-gold);
}

/* --- the journal list --- */

.journals {
  margin-top: 8px;
}

/* The default theme hides this heading from sighted readers
   (indexSite.less extends .pkp_screen_reader). With journals presented as
   cards it reads as a real section title, so bring it back. The parent
   marks position absolute !important, hence the !important here. */
body[dir].pkp_page_index .journals > h2 {
  position: relative !important;  /* relative, so ::after can be placed on it */
  left: auto;
  right: auto;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  font-size: 24px;
  margin: 0 0 22px;
  padding: 0 0 12px;
  border-bottom: 2px solid var(--yc-line);
}

.journals > h2::after {
  content: '';
  position: absolute;
  bottom: -2px;
  inset-inline-start: 0;
  width: 68px;
  height: 2px;
  background: var(--yc-gold);
}

.journals > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 22px;
}

.journals > ul > li {
  margin: 0;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--yc-line);
  border-radius: var(--yc-radius);
  box-shadow: 0 1px 3px rgba(17, 35, 71, .05);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.journals > ul > li:hover {
  transform: translateY(-3px);
  border-color: #cfd8e6;
  box-shadow: var(--yc-shadow);
}

.journals .thumb img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.journals h3 {
  font-size: 19px;
  margin: 0 0 10px;
}

.journals h3 a {
  text-decoration: none;
}

.journals .description {
  font-size: 14.5px;
  color: var(--yc-muted);
  margin-bottom: 16px;
}

.journals ul.links {
  list-style: none;
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.journals ul.links li {
  margin: 0;
}

.journals ul.links a {
  display: inline-block;
  padding: 8px 16px;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 999px;
  text-decoration: none;
}

.journals ul.links .view a {
  background: var(--yc-navy);
  color: #fff;
}

.journals ul.links .view a:hover {
  background: var(--yc-ink);
  color: #fff;
}

.journals ul.links .current a {
  border: 1.5px solid var(--yc-line);
  color: var(--yc-navy);
}

.journals ul.links .current a:hover {
  border-color: var(--yc-navy);
}

/* ================================================================= FOOTER
   lib/pkp/templates/frontend/components/footer.tpl */

.pkp_structure_footer_wrapper {
  background: var(--yc-ink);
  border: 0;
  margin-top: 56px;
}

.pkp_structure_footer {
  width: auto;
  max-width: 1120px;
  margin: 0 auto;
  padding: 40px 24px 30px;
  text-align: center;
}

/* the white wordmark, above whatever the administrator puts in Page Footer */
.pkp_structure_footer::before {
  content: '';
  display: block;
  width: 230px;
  height: 58px;
  margin: 0 auto 18px;
  background: url('../images/logo-white.png') no-repeat center / contain;
}

.pkp_footer_content {
  padding: 0;
  text-align: center;
}

.pkp_footer_content,
.pkp_footer_content p {
  color: rgba(255, 255, 255, .72);
  font-size: 14px;
  line-height: 1.9;
  margin: 0 0 6px;
}

.pkp_footer_content a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid var(--yc-gold);
}

.pkp_footer_content a:hover {
  color: var(--yc-gold);
}

/* PKP attribution stays (the licence asks for it) but stops competing */
.pkp_brand_footer {
  margin-top: 22px;
  padding: 18px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
  float: none;
  text-align: center;
}

/* the parent floats the mark hard right; centre it under everything else */
.pkp_brand_footer a {
  float: none;
  display: inline-block;
  max-width: 130px;
}

.pkp_brand_footer img {
  filter: brightness(0) invert(1);
  opacity: .42;
  max-width: 130px;
  height: auto;
  transition: opacity .15s ease;
}

.pkp_brand_footer a:hover img {
  opacity: .75;
}

/* ------------------------------------------------- touch target sizing
   WCAG 2.5.8 asks for at least 24x24 CSS px. Three links inherit smaller
   boxes from the parent theme: "Forgot your password?", the remember-me
   checkbox and the footer links. Widened for touch input and narrow
   screens, which leaves the desktop layout as it is. */

@media (pointer: coarse), (max-width: 767px) {
  .cmp_form .password a {
    padding: 6px 0;
    margin-top: 4px;
  }

  .cmp_form .remember.checkbox label {
    min-height: 32px;
    padding: 4px 0;
  }

  .cmp_form .remember.checkbox input {
    width: 24px;
    height: 24px;
  }

  .pkp_footer_content p {
    line-height: 2.2;
  }

  .pkp_footer_content a {
    display: inline-block;
    padding: 3px 2px;
  }

  .page_login .buttons a {
    padding: 6px 0;
  }

  /* breadcrumb trail (shown on register, lost-password, etc.) */
  .cmp_breadcrumbs a,
  .cmp_breadcrumbs span[aria-current] {
    display: inline-block;
    padding: 4px 2px;
  }
}

/* ============================================================ responsive */

@media (max-width: 991px) {
  /* Below @screen-desktop the parent theme absolutely positions .pkp_site_name
     against .pkp_head_wrapper and gives the wrapper a fixed nav-bar height.
     Combined with the flex header that collapses the logo to zero width, so
     a phone shows only the menu button and no college branding at all. Put
     the logo and the toggle in normal flow, side by side, instead. */
  .pkp_head_wrapper {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 12px;
  }

  .pkp_site_name_wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    height: auto;
    padding: 10px 0;
  }

  .pkp_site_name {
    position: static;
    left: auto;
    right: auto;
    flex: 0 1 auto;
    min-width: 0;
    padding: 0;
  }

  .pkp_site_name .is_img {
    display: block;
    margin: 0;
  }

  /* relative, not static: the button's inner <span> draws the three bars
     with position:absolute against it (components/nav-toggle.less), so
     removing its positioning context makes the icon vanish. */
  .pkp_site_nav_toggle {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    flex: 0 0 auto;
    order: 2;           /* menu button after the logo in both directions */
    margin-inline-start: 6px;
  }

  .pkp_site_name .is_img img {
    max-height: 44px;
  }

  /* --- the open drop-down menu --- */
  .pkp_site_nav_menu {
    background: #fff;
    width: 100%;
    left: 0;
    right: 0;
    padding: 10px 16px 16px;
    border-top: 1px solid var(--yc-line);
    border-bottom: 1px solid var(--yc-line);
    box-shadow: 0 14px 30px rgba(17, 35, 71, .16);
  }

  /* the parent centres this list and gives it a top rule meant for a bare
     panel; inside ours it should simply be a row of the same pills used in
     the desktop header */
  .pkp_site_nav_menu .pkp_navigation_user {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
    margin: 0;
    padding: 0;
    border-top: 0;
  }

  .pkp_site_nav_menu .pkp_navigation_primary {
    display: block;
    margin: 0 0 4px;
    padding: 0;
  }

  .pkp_site_nav_menu .pkp_navigation_primary > li > a {
    display: block;
    padding: 10px 12px;
  }

  .about_site {
    padding: 36px 24px;
    background-size: auto, 200px auto;
  }

  .about_site p:first-child {
    font-size: 26px;
  }

  .page_login,
  .page_register,
  .page_lost_password {
    padding: 30px 22px 26px;
    margin: 28px auto 44px;
  }

  .pkp_structure_main {
    padding: 0 16px;
  }
}

/* Respect a reader's reduced-motion setting */
@media (prefers-reduced-motion: reduce) {
  .journals > ul > li,
  .cmp_form .buttons button.submit,
  .pkp_nav_list a {
    transition: none;
  }

  .journals > ul > li:hover {
    transform: none;
  }
}