@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* ==========================================================================
   ASNT theme overrides for RNDE on Open Journal Systems (OJS)
   Adapted from the ASNT OpenWater stylesheet (v14), which came from the
   EventsAir stylesheet.

   Built for the OJS Default theme (3.4/3.5). Selectors were checked against
   the Default theme's LESS source on GitHub, not a live RNDE page yet.
   Anything marked VERIFY needs a look in the browser before launch.

   Setup
   1. Settings > Website > Appearance > Theme: Default theme
   2. Colour: #01376D. The theme uses this for the header background and
      works out header text and border colors from it, so it has to match
      the navy below.
   3. Typography: leave as is. This file loads Barlow Semi Condensed and
      overrides the theme's fonts.
   4. Settings > Website > Appearance > Advanced > Journal style sheet:
      upload this file.
   5. Clear the data and template caches (Administration) and hard-refresh.

   To update the file later, upload over the existing one. Deleting the
   style sheet first can drop its database record, and re-uploads then fail.

   The @import must stay the first line of the file or browsers ignore it.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Tokens
   Primary is ASNT Navy. Brand Blue and Brand Gray are the secondaries.
   Contrast on white: navy 11.9:1, blue 7.5:1, gray 8.4:1 (all pass AA).
   On Light Gray (#f1f1f1): navy 10.5:1, blue 6.6:1, gray 7.5:1.
   -------------------------------------------------------------------------- */
:root {
  --asnt-primary: #01376d;              /* ASNT Navy: headings, links, buttons */
  --asnt-primary-rgb: 1, 55, 109;
  --asnt-secondary: #0054a5;            /* ASNT Brand Blue: hover/active, accents */
  --asnt-secondary-rgb: 0, 84, 165;
  --asnt-gray: #4d4d4f;                 /* ASNT Brand Gray: body text */
  --asnt-gray-light: #f1f1f1;           /* Light Gray: panel background */
  --asnt-line: #d0d0d0;                 /* Line Accent: dividers only */
  --asnt-input-border: #8a8a8c;         /* 3:1 on white for WCAG 1.4.11 */
  --asnt-font: 'Barlow Semi Condensed', Arial, sans-serif;
  --asnt-radius-pill: 100px;            /* same as asnt.org buttons */
  --asnt-radius-card: 8px;
  /* Header gradient: Brand Blue top left, Navy by 25%, Black by 75%,
     tilted 20 degrees off horizontal (110deg = left to right, angled down) */
  --asnt-header-gradient: linear-gradient(110deg, var(--asnt-secondary) 0%, var(--asnt-primary) 25%, #000 75%);
}


/* --------------------------------------------------------------------------
   2. Base size and typography
   The Default theme runs at 14px and sizes everything in rem from that.
   PKP's own accessibility review flags text under 1rem (16px), and Barlow
   Semi Condensed reads small at 14px, so the base goes to 16px. Spacing
   scales with it. If the layout feels too loose, try 15px.
   -------------------------------------------------------------------------- */
html,
body {
  font-size: 16px;
}

body {
  font-family: var(--asnt-font);
  font-weight: 400;
  color: var(--asnt-gray);
}

h1, h2, h3, h4, h5, h6,
.pkp_block .title,
.obj_issue_toc .sections h2,
.obj_article_details .page_title {
  font-family: var(--asnt-font);
  font-weight: 700;
  color: var(--asnt-primary);
}

/* Force Barlow everywhere on the page. The theme sets fonts with more
   specific selectors (.pkp_structure_main h1, the header nav, breadcrumbs),
   and on RNDE another style sheet is also setting a different font on the
   nav, breadcrumbs, and headings. !important on every element beats both.
   Icon fonts are excluded: Font Awesome icons carry .fa / .fa-* classes,
   and icons drawn with ::before set their own font, which this doesn't touch. */
.pkp_structure_page,
.pkp_structure_page *:not(.fa):not([class*="fa-"]) {
  font-family: var(--asnt-font) !important;
}

a {
  color: var(--asnt-primary);
}
a:hover,
a:focus {
  color: var(--asnt-secondary);
}

/* The theme's light gray text (rgba black at 54%) falls below 4.5:1 on its
   gray backgrounds. Brand Gray passes everywhere. */
.obj_article_summary .meta,
.obj_article_summary .authors,
.obj_article_summary .pages,
.obj_article_details .item .label,
.obj_issue_toc .published,
.obj_issue_summary .description,
.cmp_form .description,
.block_browse .title,
.pkp_block .title {
  color: var(--asnt-gray);
}
/* Sidebar block titles go navy, overriding the gray above */
.pkp_structure_sidebar .pkp_block .title {
  color: var(--asnt-primary);
}

/* Rich text pasted into journal settings (About, policies, author
   guidelines) often carries inline font-family. Inline styles beat the
   style sheet, so this needs !important. Icons are excluded. */
.pkp_structure_main [style*="font-family"]:not(i):not([class*="fa-"]) {
  font-family: var(--asnt-font) !important;
}


/* --------------------------------------------------------------------------
   3. Buttons
   OJS has two button styles: .cmp_button (gray fill) and .cmp_button_wire
   (outline). They show up as form submits, the "Make a Submission" sidebar
   block, article galley links (PDF, HTML), and .PkpButton.
   Primary: navy fill, white text. Secondary: white with navy outline.
   -------------------------------------------------------------------------- */

/* Shared pill shape */
.cmp_button,
.cmp_button_wire,
.cmp_form .buttons button,
.block_make_submission a,
.obj_galley_link,
.PkpButton,
.page_search .submit button {
  display: inline-block;
  font-family: var(--asnt-font) !important;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  text-transform: uppercase;
  letter-spacing: .08em;            /* 1.28px at 16px, matches asnt.org */
  padding: 8px 24px;
  height: auto;
  border-radius: var(--asnt-radius-pill);
  text-decoration: none;
  box-shadow: none;
  transition: background-color .2s ease-in, border-color .2s ease-in, color .2s ease-in;
}

/* Primary: form submits, Make a Submission */
.cmp_button,
.cmp_form .buttons button,
.block_make_submission a,
.page_search .submit button {
  background: var(--asnt-primary);
  border: 1px solid var(--asnt-primary);
  color: #fff;
}
.cmp_button:hover,
.cmp_button:focus,
.cmp_form .buttons button:hover,
.cmp_form .buttons button:focus,
.block_make_submission a:hover,
.block_make_submission a:focus,
.page_search .submit button:hover,
.page_search .submit button:focus {
  background: var(--asnt-secondary);
  border-color: var(--asnt-secondary);
  color: #fff;
}

/* Secondary: galley links (PDF, HTML) and wire buttons stay outlined
   so a row of downloads doesn't read as a row of primary actions */
.cmp_button_wire,
.obj_galley_link,
.PkpButton {
  background: #fff;
  border: 1px solid var(--asnt-primary);
  color: var(--asnt-primary);
}
.cmp_button_wire:hover,
.cmp_button_wire:focus,
.obj_galley_link:hover,
.obj_galley_link:focus,
.PkpButton:hover,
.PkpButton:focus {
  background: var(--asnt-primary);
  border-color: var(--asnt-primary);
  color: #fff;
}

/* Search page button. The theme draws the magnifier as a separate
   square tab (::after, absolutely positioned on the left) and reserves
   padding for it. The pill padding above removed that space, so the tab
   sat on top of the "S". Put the icon inline, inside the pill, before
   the label. */
.page_search .submit button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 24px 8px 20px !important;
  border: 1px solid var(--asnt-primary) !important;
}
.page_search .submit button::after {
  position: static !important;
  order: -1;                 /* icon before the text */
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: inherit !important;
}
.page_search .submit button:hover::after,
.page_search .submit button:focus::after {
  background: none !important;
  box-shadow: none !important;
}

/* Restricted galleys show a lock icon via ::before. Keep it visible on hover. */
.obj_galley_link.restricted:hover::before,
.obj_galley_link.restricted:focus::before {
  color: #fff;
}

/* "Cancel" and similar text links next to form buttons */
.cmp_form .buttons a {
  font-size: 1rem;
  font-weight: 500;
}

/* Disabled should look disabled */
.cmp_form .buttons button:disabled,
.PkpButton:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* Visible keyboard focus (WCAG 2.4.7) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.obj_galley_link:focus-visible {
  outline: 3px solid var(--asnt-secondary);
  outline-offset: 2px;
  box-shadow: none;
}
/* Light outline on the navy header so focus shows up */
.pkp_structure_head a:focus-visible,
.pkp_structure_head button:focus-visible {
  outline-color: #fff;
}


/* --------------------------------------------------------------------------
   4. Form fields (login, register, search, contact)
   -------------------------------------------------------------------------- */
.cmp_form input[type="text"],
.cmp_form input[type="email"],
.cmp_form input[type="password"],
.cmp_form input[type="url"],
.cmp_form input[type="tel"],
.cmp_form select,
.cmp_form textarea,
.page_search input[type="text"],
.page_search select {
  border: 1px solid var(--asnt-input-border);
  border-radius: 6px;
  padding: .5rem .75rem;
  height: auto;
  line-height: 1.5;
  font-size: 1rem;
}
.cmp_form textarea {
  min-height: 8em;
}

.cmp_form input:focus,
.cmp_form select:focus,
.cmp_form textarea:focus,
.page_search input:focus,
.page_search select:focus {
  border-color: var(--asnt-primary);
  box-shadow: 0 0 0 3px rgba(var(--asnt-primary-rgb), .2);
  outline: none;
}

.cmp_form legend,
.cmp_form label {
  font-weight: 600;
  color: var(--asnt-gray);
}
.cmp_form fieldset > legend {
  color: var(--asnt-primary);
  font-weight: 700;
}

/* Login and register: light gray panel, like the OpenWater login box */
.page_login .cmp_form,
.page_register .cmp_form,
.page_lost_password .cmp_form {
  background: var(--asnt-gray-light);
  padding: 24px 28px;
  border-radius: var(--asnt-radius-card);
  max-width: 40rem;
}

/* Error messages: keep the theme's red, round them to match */
.cmp_form .pkp_form_error,
#formErrors {
  border-radius: 6px;
}


/* --------------------------------------------------------------------------
   5. Header, navigation, footer
   Header background comes from the theme Colour setting (#01376D).
   The background is also set here so the header matches even if that
   setting drifts.
   -------------------------------------------------------------------------- */
/* Page background: white behind the boxed layout. The original gray came
   from the other style sheet on RNDE, not the theme, hence the !important.
   A 1px Line Accent edge keeps the box defined against the white. */
html,
body {
  background: #fff !important;
}
.pkp_structure_page {
  background: #fff !important;
  box-shadow: 0 0 0 1px var(--asnt-line) !important;
}

/* ASNT utility bar ("Back to asnt.org"), carried over from OpenWater.
   OJS has no header HTML field, so a short script in the Custom Header
   plugin's Footer Content inserts this markup at the top of the page box:
   <div class="asnt-utility-bar"><div class="asnt-utility-inner"><a ...></a></div></div> */
.asnt-utility-bar {
  background: var(--asnt-gray-light);
  border-bottom: 1px solid var(--asnt-line);
  font-size: .875rem;
  line-height: 1.4;
}
.asnt-utility-inner {
  padding: .5rem 1.5rem;
  display: flex;
  align-items: center;
}
.asnt-utility-bar a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--asnt-gray) !important;
  font-weight: 600;
  text-decoration: none;
}
.asnt-utility-bar a:hover,
.asnt-utility-bar a:focus-visible {
  color: var(--asnt-primary) !important;
  text-decoration: underline;
}
/* VERIFY: 1.5rem left padding should line the link up with the logo.
   Nudge it if it sits off. */

/* No-plugin version: the bar's HTML lives in the Page Footer field
   (Settings > Website > Appearance > Setup > Page Footer) and is lifted to
   the top of the page here. Body gets matching top padding so nothing
   is covered. The footer containers are normally positioned, which would
   trap the bar in the footer, so they're released only when the bar is
   present. */
body:has(.pkp_footer_content .asnt-utility-bar) {
  position: relative;
  padding-top: 38px;
}
.pkp_structure_footer:has(.asnt-utility-bar),
.pkp_footer_content:has(.asnt-utility-bar) {
  position: static !important;
}
.pkp_footer_content .asnt-utility-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 38px;
  margin: 0 !important;
  z-index: 10;
}
.pkp_footer_content .asnt-utility-bar a {
  line-height: 38px;
}
/* Line the link up with the page content at each theme breakpoint */
.pkp_footer_content .asnt-utility-inner {
  box-sizing: border-box;
  height: 100%;
  margin: 0 auto;
  padding: 0 1rem;
}
@media (min-width: 768px)  { .pkp_footer_content .asnt-utility-inner { width: 728px;  padding: 0; } }
@media (min-width: 992px)  { .pkp_footer_content .asnt-utility-inner { width: 952px; } }
@media (min-width: 1200px) { .pkp_footer_content .asnt-utility-inner { width: 1160px; } }

/* Logo bar: Brand Blue to Navy to Black (see --asnt-header-gradient).
   White text and icons pass contrast across the whole gradient. */
.pkp_structure_head {
  background-color: var(--asnt-primary);
  background-image: var(--asnt-header-gradient) !important;
  border-bottom: 4px solid var(--asnt-secondary);
}

/* Text journal title (when no logo is uploaded) */
.pkp_site_name .is_text {
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.1;
  color: #fff;
}

/* Primary nav row: transparent, so the navy-to-black header gradient
   runs behind the menu. */
.pkp_structure_head .pkp_navigation_primary_row,
.pkp_structure_head .pkp_navigation_primary_wrapper {
  background: transparent !important;
}
/* The theme paints the whole nav container (.pkp_site_nav_menu) with the
   theme Colour, which covered the gradient with flat navy. On desktop it
   goes clear so the header gradient shows through. On phones it's a
   drop-down panel over the page, so it gets the same gradient instead. */
@media (min-width: 992px) {
  .pkp_structure_head .pkp_site_nav_menu {
    background: transparent !important;
  }
}
@media (max-width: 991px) {
  .pkp_structure_head .pkp_site_nav_menu {
    background: var(--asnt-header-gradient) !important;
  }
}

/* Primary nav links and Search: white on the gradient, white underline
   on hover. Title case as entered in Navigation Menus (no all caps).
   20px, set in px (not rem) so it holds if the base size changes.
   White on navy is 11.9:1 and on black 21:1, so it passes everywhere. */
.pkp_structure_head .pkp_navigation_primary > li > a,
.pkp_structure_head .pkp_navigation_search_wrapper a {
  color: #fff !important;
  font-size: 20px !important;
  font-weight: 600;
  text-transform: none !important;
  letter-spacing: normal;
  border-bottom: 2px solid transparent;
  text-decoration: none;
}
.pkp_structure_head .pkp_navigation_primary > li > a:hover,
.pkp_structure_head .pkp_navigation_primary > li > a:focus,
.pkp_structure_head .pkp_navigation_search_wrapper a:hover,
.pkp_structure_head .pkp_navigation_search_wrapper a:focus {
  color: #fff !important;
  background: transparent !important;
  border-bottom-color: #fff;
}
/* Current page in the nav */
.pkp_structure_head .pkp_navigation_primary > li > a[aria-current="page"] {
  border-bottom-color: rgba(255, 255, 255, .6);
}
/* Search icon and the About dropdown caret follow the link color */
.pkp_structure_head .pkp_navigation_search_wrapper .fa,
.pkp_structure_head .pkp_navigation_search_wrapper a::before,
.pkp_structure_head .pkp_navigation_primary > li > a::after {
  color: #fff !important;
}

/* Dropdown menus (About, user menu)
   The panel was picking up the navy header color, which hid the navy
   links until hover. Panel is white; hover shows Brand Blue text and a
   blue bar on the left instead of a gray fill. */
.pkp_structure_head .pkp_navigation_primary ul,
.pkp_structure_head .dropdown-menu {
  background: #fff !important;
  border: 1px solid var(--asnt-line);
  border-radius: var(--asnt-radius-card);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
  padding: 8px 0;
  overflow: hidden;
}
.pkp_structure_head .pkp_navigation_primary ul li,
.pkp_structure_head .dropdown-menu li {
  background: #fff !important;
}
.pkp_structure_head .pkp_navigation_primary ul a,
.pkp_structure_head .dropdown-menu a {
  display: block;
  padding: 8px 16px !important;
  background: #fff !important;
  border: 0;
  border-left: 4px solid transparent;
  border-radius: 0;
  color: var(--asnt-primary) !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  font-weight: 500;
  text-transform: none !important;
  letter-spacing: normal;
  text-align: left;
  white-space: nowrap;
}
.pkp_structure_head .pkp_navigation_primary ul a:hover,
.pkp_structure_head .pkp_navigation_primary ul a:focus,
.pkp_structure_head .dropdown-menu a:hover,
.pkp_structure_head .dropdown-menu a:focus {
  background: #fff !important;
  border-left-color: var(--asnt-secondary);
  color: var(--asnt-secondary) !important;
  text-decoration: underline;
}

/* User nav (username, Register, Login) sits on navy */
.pkp_structure_head .pkp_navigation_user > li > a {
  color: #fff !important;
  font-weight: 500;
}
.pkp_structure_head .pkp_navigation_user > li > a:hover,
.pkp_structure_head .pkp_navigation_user > li > a:focus {
  color: #fff !important;
  text-decoration: underline;
}
/* The theme fills the username (and Search) with white when it has focus,
   which happens on click and stays while the menu is open. White text on
   white made the name vanish. Keep it transparent; keyboard users still
   get the white focus outline. */
.pkp_structure_head .pkp_navigation_user > li > a:focus,
.pkp_structure_head .pkp_navigation_user > li > a[aria-expanded="true"],
.pkp_structure_head .pkp_navigation_search_wrapper a:focus {
  background: transparent !important;
  color: #fff !important;
}
.pkp_structure_head a:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: 2px;
}
.pkp_structure_head .dropdown-menu a:focus-visible {
  outline-color: var(--asnt-secondary) !important;
  outline-offset: -2px;
}

/* Notification count bubble next to the username */
.pkp_structure_head .pkp_navigation_user .task_count {
  background: rgba(255, 255, 255, .15);
  color: #fff;
}

/* Mobile menu: the theme paints this panel navy with white links.
   Undo the navy link color above inside it. VERIFY at phone width. */
@media (max-width: 991px) {
  .pkp_site_nav_menu .pkp_navigation_primary > li > a,
  .pkp_site_nav_menu .pkp_navigation_search_wrapper a,
  .pkp_site_nav_menu .pkp_navigation_primary ul a {
    color: #fff !important;
  }
  .pkp_site_nav_menu .pkp_navigation_primary_row {
    background: transparent;
  }
  /* Submenus open inline in the navy panel, not as a white dropdown */
  .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary ul,
  .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary ul li,
  .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary ul a {
    background: transparent !important;
    border: 0;
    box-shadow: none;
  }
  .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary ul a {
    color: #fff !important;
    padding: 4px 0 4px 12px;
  }
}

/* Footer: Light Gray throughout, including the bottom banner that was
   navy. That banner isn't part of the stock theme, so these cover the
   likely sources. VERIFY: if a navy strip still shows, inspect it and
   send the class name. */
.pkp_structure_footer_wrapper,
.pkp_structure_footer,
.pkp_footer_content,
.pkp_brand_footer {
  background: var(--asnt-gray-light) !important;
  border-bottom: 0 !important;
}
.pkp_structure_footer_wrapper {
  border-top: 4px solid var(--asnt-primary);
}
.pkp_structure_footer_wrapper::after,
.pkp_structure_page::after {
  background: var(--asnt-gray-light) !important;
}
.pkp_footer_content {
  font-size: .9rem;
  color: var(--asnt-gray);
}
/* Footer row: RNDE logo on the left, OJS/PKP mark on the right, both
   vertically centered on one line. The theme stacks these two blocks
   (footer content, then brand mark), so the row is rebuilt with flex. */
.pkp_structure_footer {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.pkp_structure_footer::before,
.pkp_structure_footer::after {
  display: none !important;    /* theme clearfix, not needed in flex */
}
.pkp_structure_footer .pkp_footer_content,
.pkp_structure_footer .pkp_brand_footer {
  float: none;
  padding: 32px 0;
}
.pkp_structure_footer .pkp_brand_footer a {
  float: none;
}

/* RNDE logo. Sized on any image in the footer content, not just a class,
   because the editor can strip classes. !important beats the width/height
   attributes the editor writes onto the image. */
.pkp_footer_content p {
  margin: 0;
}
.pkp_footer_content img {
  display: block;
  width: 240px !important;
  max-width: 100% !important;
  height: auto !important;
}
.pkp_footer_content a:has(img) {
  display: inline-block;
}

/* "Platform & workflow by OJS/PKP" mark: keep it, just smaller */
.pkp_brand_footer img {
  max-width: 120px;
  height: auto;
}


/* --------------------------------------------------------------------------
   6. Sidebar blocks
   -------------------------------------------------------------------------- */
.pkp_structure_sidebar .pkp_block .title {
  font-size: 1.125rem;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--asnt-line);
}

/* White sidebar with a single Line Accent rule between it and the main
   column, full height of the content area on desktop. The theme floats
   main and sidebar side by side; flex makes the sidebar (and its rule)
   stretch to match the main column. On smaller screens the sidebar drops
   below the content, so the rule moves to its top edge. */
.pkp_structure_sidebar {
  background: #fff;
  border-top: 1px solid var(--asnt-line);
}
@media (min-width: 992px) {
  .pkp_structure_content.has_sidebar {
    display: flex;
    align-items: stretch;
    padding-top: 0;
  }
  .pkp_structure_content.has_sidebar::before,
  .pkp_structure_content.has_sidebar::after {
    display: none;            /* clearfix pseudo-elements, not needed in flex */
  }
  .pkp_structure_content.has_sidebar .pkp_structure_main {
    float: none;
    flex: 1 1 auto;
    padding-top: 3rem;
  }
  .pkp_structure_content.has_sidebar .pkp_structure_sidebar {
    float: none;
    flex: 0 0 300px;
    padding-top: 1rem;
    border-top: 0;
    border-left: 1px solid var(--asnt-line);
  }
}

/* Light Gray card so it stands out in the white sidebar */
.block_make_submission {
  background: var(--asnt-gray-light);
  border-radius: var(--asnt-radius-card);
  padding: 24px;
}


/* --------------------------------------------------------------------------
   7. Issues, article lists, article page
   -------------------------------------------------------------------------- */

/* Section headings in an issue table of contents */
.obj_issue_toc .sections .section > h2 {
  border-left: 4px solid var(--asnt-secondary);
  padding-left: 12px;
  font-size: 1.25rem;
}

/* Article titles in lists */
.obj_article_summary .title a {
  color: var(--asnt-primary);
  font-weight: 600;
  text-decoration: none;
}
.obj_article_summary .title a:hover,
.obj_article_summary .title a:focus {
  color: var(--asnt-secondary);
  text-decoration: underline;
}

/* Article page: metadata labels (Keywords, How to Cite, Issue, Section) */
.obj_article_details .item .label {
  font-weight: 700;
  text-transform: none;
}

/* Abstract gets the light gray panel to set it apart from metadata.
   VERIFY: class comes from article_details.tpl, not the theme LESS. */
.obj_article_details .item.abstract {
  background: var(--asnt-gray-light);
  border-radius: var(--asnt-radius-card);
  padding: 20px 24px;
}

/* Notices and confirmations */
.cmp_notification {
  background: var(--asnt-gray-light);
  border-left-color: var(--asnt-primary);
  border-radius: 0 var(--asnt-radius-card) var(--asnt-radius-card) 0;
}

/* Breadcrumbs: sentence case like the page title ("HOME" was coming
   through in caps), readable size, Brand Gray for the current page */
.cmp_breadcrumbs ol,
.cmp_breadcrumbs a,
.cmp_breadcrumbs .current,
.cmp_breadcrumbs .current span {
  font-size: 1rem;
  text-transform: none !important;
  letter-spacing: normal;
}
.cmp_breadcrumbs a {
  color: var(--asnt-primary);
  font-weight: 500;
}
.cmp_breadcrumbs a:hover,
.cmp_breadcrumbs a:focus {
  color: var(--asnt-secondary);
  text-decoration: underline;
}
.cmp_breadcrumbs .separator {
  color: var(--asnt-gray);
}
.cmp_breadcrumbs .current {
  color: var(--asnt-gray);
  font-weight: 600;
}

/* Pagination (archive, search results) */
.cmp_pagination a {
  font-weight: 600;
}


/* --------------------------------------------------------------------------
   8. Body lines and journal home page
   The theme draws thin gray rules around the main column and between
   home page sections. All removed for a cleaner page.
   -------------------------------------------------------------------------- */

/* Full-height vertical rules on each side of the main column */
.pkp_structure_main::before,
.pkp_structure_main::after {
  display: none !important;
}

/* Horizontal rules between home page sections (announcements,
   additional content) and the dividers between announcement columns */
.pkp_page_index .homepage_about,
.pkp_page_index .current_issue,
.pkp_page_index .cmp_announcements,
.pkp_page_index .additional_content {
  border-top: 0 !important;
  border-bottom: 0 !important;
}
.pkp_page_index .cmp_announcements .obj_announcement_summary::before,
.pkp_page_index .cmp_announcements .more::before {
  border-left: 0 !important;
}
.pkp_page_index .current_issue .current_issue_title {
  font-weight: 600;
  color: var(--asnt-gray);
}
.pkp_page_index .read_more {
  font-weight: 600;
}


/* --------------------------------------------------------------------------
   9. Optional components for custom content
   Carried over from the OpenWater home page. Paste matching markup into
   rich-text fields (About the Journal, Additional Content on the home page)
   by switching the editor to source code view. Delete if unused.
   -------------------------------------------------------------------------- */
.asnt-intro {
  font-size: 1.125rem;
  line-height: 1.5;
  max-width: 60ch;
  margin: 8px 0 28px;
}

.asnt-steps {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  counter-reset: asnt-step;
}
.asnt-step {
  counter-increment: asnt-step;
  background: var(--asnt-gray-light);
  border-top: 4px solid var(--asnt-secondary);
  border-radius: var(--asnt-radius-card);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.asnt-step::before {
  content: counter(asnt-step);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--asnt-primary);
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.asnt-step h3 {
  margin: 0;
  font-size: 1.25rem;
}
.asnt-step p {
  margin: 0;
  line-height: 1.5;
}

.asnt-callout {
  border-left: 4px solid var(--asnt-secondary);
  background: var(--asnt-gray-light);
  padding: 16px 20px;
  margin: 0 0 28px;
  max-width: 70ch;
}
.asnt-callout p {
  margin: 0;
}

/* A plain link styled as a button, for CTAs inside custom content */
a.asnt-btn {
  display: inline-block;
  background: var(--asnt-primary);
  border: 1px solid var(--asnt-primary);
  color: #fff;
  border-radius: var(--asnt-radius-pill);
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 6px 16px;
  transition: background-color .2s ease-in;
}
a.asnt-btn:hover,
a.asnt-btn:focus {
  background: var(--asnt-secondary);
  border-color: var(--asnt-secondary);
  color: #fff;
}