@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&display=swap');

:root {
  --hukum-primary: #1b3a5c;
  --hukum-primary-dark: #0f2440;
  --hukum-accent: #b8860b;
  --hukum-bg: #f5f6f8;
  --hukum-card: #ffffff;
  --hukum-text: #1c2733;
  --hukum-muted: #5c6b7a;
  --hukum-border: #dde3ea;
  /* Stronger border, used where a real boundary has to be visible:
     the boxes of the sidebar entries, the main/sidebar divider and the
     top edge of the footer. */
  --hukum-border-strong: #c3cedb;
  --hukum-radius: 6px;
  /* Shared layout band: the header image, the navigation, the
     content + sidebar columns and the footer all use these two values,
     so their left/right edges are guaranteed to line up. */
  --hukum-band-width: 1260px;
  --hukum-band-pad: 32px;
  /* Maximum height of the header image: the picture is cropped to this
     band, so it always spans the full content + sidebar width. */
  --hukum-header-image-height: 300px;
  /* Gap between the main column and the sidebar. */
  --hukum-column-gap: 24px;
}

body {
  background: #f5f6f8;
  color: var(--hukum-text);
  font-family: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  line-height: 1.65;
}

a { color: var(--hukum-primary); }
a:hover { color: var(--hukum-accent); }

/* Header */
.pkp_structure_head {
  background-color: #f5f6f8 !important;
}
.pkp_head_wrapper,
.has_site_logo .pkp_head_wrapper {
  width: 100%;
  max-width: var(--hukum-band-width);
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
  /* No empty strip above the picture: the banner starts at the very top
     of the page (the default theme reserves room here for the user nav). */
  padding-top: 0;
  padding-bottom: 4px;
  box-sizing: border-box;
  border-bottom: 4px solid #b8860b;
}
/* The banner fills the whole band, so this wrapper has no side padding:
   the picture is exactly as wide as the content + sidebar column below it
   (both use the same 1260px band). */
.pkp_site_name_wrapper {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
  height: auto;
}
/* Nav wrapper follows the same content width (keeps default OJS nav styling) */
.pkp_navigation_primary_wrapper,
.has_site_logo .pkp_navigation_primary_wrapper {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding-left: var(--hukum-band-pad);
  padding-right: var(--hukum-band-pad);
  box-sizing: border-box;
}
@media (max-width: 991px) {
  :root {
    --hukum-band-pad: 16px;
    --hukum-header-image-height: 120px;
  }
  .pkp_navigation_primary_wrapper {
    padding-left: var(--hukum-band-pad);
    padding-right: var(--hukum-band-pad);
  }
  /* Leave room for the hamburger button, which sits on the left of the
     header on small screens. */
  .has_site_logo .pkp_site_name,
  .pkp_site_name {
    margin-left: 8.571rem;
  }
}
.has_site_logo .pkp_site_name,
.pkp_site_name {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  position: relative !important;
  left: auto;
  right: auto;
  margin: 0;
  padding: 0;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
}
.pkp_site_name .is_img {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}
/* Header image: a real banner. It starts at the very top of the page and
   its width is exactly the width of the content column + sidebar (both
   use the same 1260px band), so the left and right edges line up with
   the block below. The picture fills that band (object-fit: cover) and its
   height is capped, so the header no longer grows to several hundred
   pixels. The crop keeps the middle of the image, where the logo text and
   the banner artwork sit. */
.pkp_site_name .is_img img {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: var(--hukum-header-image-height);
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  margin: 0;
  padding: 0;
}

/* User menu (Login / Register / profile). On the default theme it sits in
   the blue bar above the logo; here the logo is a full width banner, so the
   menu becomes a small chip in the top right corner of the picture.
   The default theme gives that list a fixed page width (952px, resp.
   1160px) and two clearfix table rows, which turns the chip into a wide
   dark bar across the banner - both are reset here. */
@media (min-width: 992px) {
  .has_site_logo .pkp_navigation_user_wrapper,
  .pkp_navigation_user_wrapper {
    top: 0.714rem;
    right: 0.714rem;
    left: auto;
    transform: none;
    margin: 0;
    padding: 0;
    background: rgba(15, 36, 64, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--hukum-radius);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    z-index: 1001;
  }
  /* The list: no page width, no clearfix rows, items next to each other */
  .pkp_navigation_user_wrapper .pkp_navigation_user {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 2px;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    text-align: right;
  }
  .pkp_navigation_user_wrapper .pkp_navigation_user:before,
  .pkp_navigation_user_wrapper .pkp_navigation_user:after {
    display: none !important;
  }
  .pkp_navigation_user_wrapper .pkp_navigation_user > li:last-child > a {
    margin-right: 0;
  }
  .pkp_navigation_user_wrapper .pkp_navigation_user > li > a {
    display: inline-block;
    padding: 7px 12px;
    color: #ffffff;
    text-decoration: none;
    border-radius: 4px;
  }
  .pkp_navigation_user_wrapper .pkp_navigation_user > li > a:hover,
  .pkp_navigation_user_wrapper .pkp_navigation_user > li > a:focus {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    text-decoration: none;
  }
  /* Profile dropdown: light panel, right aligned so it never leaves the page */
  .pkp_navigation_user_wrapper .pkp_navigation_user > li > ul {
    top: 100%;
    left: auto;
    right: 0;
    transform: none;
    width: 12em;
    margin: 0;
    padding: 6px 0;
    background: #ffffff;
    border: 1px solid var(--hukum-border);
    border-radius: var(--hukum-radius);
    box-shadow: 0 6px 18px rgba(15, 36, 64, 0.18);
  }
  .pkp_navigation_user_wrapper .pkp_navigation_user > li > ul a {
    display: block;
    padding: 8px 14px;
    color: var(--hukum-primary);
    border-left: 3px solid transparent;
  }
  .pkp_navigation_user_wrapper .pkp_navigation_user > li > ul a:hover,
  .pkp_navigation_user_wrapper .pkp_navigation_user > li > ul a:focus {
    background: rgba(184, 134, 11, 0.08);
    border-left-color: var(--hukum-accent);
    color: var(--hukum-primary);
  }
}

/* Content spacing + two-column layout (main + sidebar) */
/* One shared 1260px band, identical to the footer band:
     - main text   : x=32  .. x=884
     - sidebar card: x=908 .. x=1228
   Both edges match the footer text edges exactly. */
.pkp_structure_content {
  width: 100%;
  max-width: var(--hukum-band-width);
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0 var(--hukum-band-pad);
  background: #ffffff;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--hukum-column-gap);
  align-items: flex-start;
}
/* Reset the default theme's float/fixed-width layout */
.pkp_structure_main,
.pkp_structure_main:first-child:last-child {
  float: none !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 28px 0;
  background: transparent;
  flex: 1 1 0%;
}
/* Remove the decorative border lines of the default theme: no thin line
   between the main column and the sidebar. The two areas are separated by
   the 24px gap and by the boxed cards of the sidebar. */
.pkp_structure_main:before,
.pkp_structure_main:after {
  display: none !important;
}
/* Remove the .pkp_helpers_clear pseudo elements: as flex items they would
   add phantom gaps around the main column and the sidebar */
.pkp_structure_content:before,
.pkp_structure_content:after {
  display: none !important;
  content: none !important;
}
.pkp_structure_sidebar {
  float: none !important;
  width: auto !important;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 28px 0 28px 0;
  flex: 0 0 320px;
}

/* --- Sidebar blocks: clean, evenly spaced menu --- */
.pkp_structure_sidebar .pkp_block {
  background: var(--hukum-card);
  border: 1px solid var(--hukum-border);
  border-radius: var(--hukum-radius);
  box-shadow: 0 2px 8px rgba(15, 36, 64, .06);
  padding: 16px 18px;
  margin: 0 0 16px;
  font-size: inherit;
  line-height: inherit;
}
.pkp_structure_sidebar .pkp_block:last-child {
  margin-bottom: 0;
}
.pkp_structure_sidebar .pkp_block .title {
  display: block;
  margin: 0 0 12px;
  padding-bottom: 0;
  font-family: "Figtree", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--hukum-primary);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.pkp_structure_sidebar .pkp_block .content ul {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.pkp_structure_sidebar .pkp_block .content ul li {
  margin: 0 0 8px;
  padding: 0;
  line-height: 1.5;
  text-align: left;
}
.pkp_structure_sidebar .pkp_block .content ul li:last-child {
  margin-bottom: 0;
}
/* Every entry gets its own box: the dotted hairline separators of the
   default theme are gone. The box border is the visible boundary of the
   entry. */
.pkp_structure_sidebar .pkp_block .content ul li + li {
  border-top: 0;
}
.pkp_structure_sidebar .pkp_block .content a {
  display: block;
  padding: 9px 12px;
  border: 1px solid var(--hukum-border-strong);
  border-radius: var(--hukum-radius);
  background: #f8fafc;
  color: var(--hukum-text);
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.pkp_structure_sidebar .pkp_block .content a:hover,
.pkp_structure_sidebar .pkp_block .content a:focus {
  color: var(--hukum-primary);
  border-color: var(--hukum-accent);
  background: #ffffff;
}
/* Browse block: submenu indentation kept tidy */
.pkp_structure_sidebar .block_browse .has_submenu {
  margin: 0;
  font-weight: 700;
  color: var(--hukum-primary);
}
.pkp_structure_sidebar .block_browse .has_submenu > ul {
  margin: 0 0 4px;
  padding: 0;
}
.pkp_structure_sidebar .block_browse .has_submenu ul li a {
  padding-left: 24px;
  font-weight: 400;
  color: var(--hukum-muted);
}
.pkp_structure_sidebar .block_browse .is_sub {
  margin-left: 0;
}
.pkp_structure_sidebar .block_browse .current a {
  border-color: var(--hukum-primary);
  color: var(--hukum-primary);
  font-weight: 600;
  cursor: default;
}
/* "Make a Submission" button in the sidebar */
.pkp_structure_sidebar .block_make_submission .content a,
.pkp_structure_sidebar .block_make_submission_link {
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 10px 16px;
  background: var(--hukum-primary);
  color: #ffffff !important;
  border: none;
  border-radius: var(--hukum-radius);
  font-weight: 600;
  text-align: center;
  transition: background .15s ease;
}
.pkp_structure_sidebar .block_make_submission .content a:hover,
.pkp_structure_sidebar .block_make_submission_link:hover {
  background: var(--hukum-primary-dark);
  color: #ffffff !important;
}
@media (max-width: 991px) {
  .pkp_structure_content {
    padding: 0 var(--hukum-band-pad);
    display: block;
  }
  .pkp_structure_sidebar {
    max-width: 100%;
    width: 100% !important;
    flex: none;
    margin-top: 18px;
    padding: 0 0 28px 0;
  }
  .pkp_structure_main,
  .pkp_structure_main:first-child:last-child {
    padding: 20px 0;
  }
}
.cmp_announcements h2,
.page_header h1 {
  font-family: "Figtree", sans-serif;
  color: var(--hukum-primary);
}
.cmp_announcements .obj_announcement_summary {
  background: var(--hukum-card);
  border: 1px solid var(--hukum-border);
  border-radius: var(--hukum-radius);
  padding: 16px 18px;
  margin-bottom: 14px;
}
.obj_issue_toc .galleys_links li {
  margin-right: 8px;
}
.obj_article_summary,
.obj_issue_summary,
.pkp_block {
  background: var(--hukum-card);
  border: 1px solid var(--hukum-border);
  border-radius: var(--hukum-radius);
  padding: 18px;
  box-shadow: 0 2px 8px rgba(15, 36, 64, .06);
  margin-bottom: 18px;
  transition: box-shadow .2s ease;
}
.obj_article_summary:hover,
.obj_issue_summary:hover {
  box-shadow: 0 8px 20px rgba(15, 36, 64, .12);
}
/* Journal summary text justify */
.obj_issue_summary {
  text-align: justify;
}
.obj_issue_summary .title,
.obj_issue_summary .title a {
  text-align: left;
}
/* Justified running text:
   - the "About the Journal" panel on the homepage (.homepage_about)
   - the About the Journal page (.page_about)
   - the article abstract
   Headings, labels and the breadcrumb stay left aligned. */
.homepage_about,
.page_about {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  word-break: break-word;
}
.homepage_about p,
.homepage_about div,
.homepage_about li,
.homepage_about dd,
.homepage_about dt,
.homepage_about blockquote,
.homepage_about td,
.homepage_about th,
.page_about p,
.page_about div,
.page_about li,
.page_about dd,
.page_about dt,
.page_about blockquote,
.page_about td,
.page_about th {
  text-align: justify !important;
  text-justify: inter-word;
  hyphens: auto;
}
.homepage_about h1,
.homepage_about h2,
.homepage_about h3,
.homepage_about h4,
.homepage_about h5,
.homepage_about h6,
.homepage_about .label,
.homepage_about .title,
.page_about h1,
.page_about h2,
.page_about h3,
.page_about h4,
.page_about h5,
.page_about h6,
.page_about .label,
.page_about .title,
.page_about .cmp_edit_link,
.page_about .cmp_breadcrumbs,
.page_about .cmp_breadcrumbs * {
  text-align: left !important;
  hyphens: manual;
}

/* Article abstract: justified text, same as the About the Journal text.
   The "Abstract" heading keeps its normal left alignment.
   The abstract sits in a soft panel with a gold left bar, so it is
   clearly separated from the white article page. */
.obj_article_details .item.abstract {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  word-break: break-word;
  background: #f7f9fb;
  border: 1px solid var(--hukum-border);
  border-left: 4px solid var(--hukum-accent);
  border-radius: var(--hukum-radius);
  padding: 20px 24px;
  margin-bottom: 28px;
}
.obj_article_details .item.abstract p,
.obj_article_details .item.abstract div,
.obj_article_details .item.abstract li,
.obj_article_details .item.abstract blockquote {
  text-align: justify !important;
  text-justify: inter-word;
  hyphens: auto;
}
.obj_article_details .item.abstract .label {
  text-align: left !important;
  hyphens: manual;
  margin-bottom: 10px;
  color: var(--hukum-primary);
  font-weight: 700;
}
.obj_article_summary .title a { color: var(--hukum-text); font-weight: 700; }
/* DOI in article summary */
.obj_article_summary .meta .doi {
  margin-top: 4px;
  font-size: 0.82rem;
}
.obj_article_summary .meta .doi .label {
  color: var(--hukum-muted);
  font-weight: 600;
}
.obj_article_summary .meta .doi a {
  color: var(--hukum-primary);
}
.obj_article_summary .meta .doi a:hover {
  color: var(--hukum-accent);
}
/* Buttons */
button, .btn, .pkp_button, .obj_galley_link {
  background: var(--hukum-primary);
  color: #ffffff !important;
  border: none;
  border-radius: var(--hukum-radius);
  padding: 8px 16px;
  font-family: "Figtree", sans-serif;
  text-decoration: none;
  display: inline-block;
}
button:hover, .btn:hover, .pkp_button:hover {
  background: var(--hukum-primary-dark);
}
/* Pagination */
.pagination a,
.paging a {
  color: var(--hukum-primary);
  border: 1px solid var(--hukum-border);
  padding: 6px 12px;
  margin: 0 2px;
  border-radius: var(--hukum-radius);
}
.pagination .current,
.paging .current {
  background: var(--hukum-primary);
  color: #fff;
  border-color: var(--hukum-primary);
}
/* Tables: a plain table (the layout tables that are written in the admin
   UI, e.g. in the footer) stays completely borderless, so no thin lines
   show up there. Only the real data tables (.cmp_table) get boxes. */
table {
  border-collapse: collapse;
  width: 100%;
}
th {
  font-family: "Figtree", sans-serif;
  font-weight: 700;
  padding: 10px;
  text-align: left;
}
td {
  padding: 10px;
}
.cmp_table {
  border-collapse: separate;
  border-spacing: 0 8px;
}
.cmp_table th {
  background: var(--hukum-primary);
  color: #fff;
  border-radius: var(--hukum-radius) var(--hukum-radius) 0 0;
}
.cmp_table td {
  background: #ffffff;
  border: 1px solid var(--hukum-border);
  border-radius: var(--hukum-radius);
}

/* --- No hairlines (except on the article page) ---
   The default theme draws a 1px #dddddd line between almost every
   section of the page. All of those decorative lines are switched off
   here, in every part of the frontend: header, navigation, homepage,
   issue pages, catalog, search, sidebar and footer. The areas are
   separated by white space, by colour blocks and by the strong borders
   that were asked for (the boxes of the sidebar entries, the abstract
   panel, the gold top edge of the footer).
   The article page keeps its own lines: the metadata block, the items
   inside it, the vertical line between the text and the metadata column
   and the citation box stay exactly as the default theme draws them. */

/* Separating lines under titles and list items */
.pkp_helpers_dotted_underline,
.cmp_announcements.cmp_announcements > li {
  border-bottom: 0 !important;
}
/* Separating lines above blocks, announcements and sections */
.pkp_navigation_user.pkp_navigation_user,
.pkp_navigation_search_wrapper,
.pkp_page_index .journals > ul > li,
.pkp_page_index .cmp_announcements,
.pkp_page_index .additional_content,
.page_catalog_category .subcategories,
.page_issue_archive .issues_archive,
.obj_issue_toc .section:before {
  border-top: 0 !important;
}
/* Vertical line next to the announcement block */
.pkp_page_index .cmp_announcements > .obj_announcement_summary:before,
.pkp_page_index .cmp_announcements .more:before {
  border-left: 0 !important;
  border-right: 0 !important;
}
/* Outer frames of the head area and of the data tables */
.pkp_structure_head,
.cmp_table {
  border: 0 !important;
}
/* The horizontal rule of the editor is a real 2px rule, not a hairline */
hr {
  border: 0;
  height: 2px;
  background: var(--hukum-border-strong);
  margin: 22px 0;
}
/* The active item of the browse block keeps a marker, but in the accent
   colour instead of the almost invisible grey of the default theme */
.block_browse .current a {
  border-left: 4px solid var(--hukum-accent) !important;
}
/* Form fields keep their frame (they are controls, not decoration). The
   generic button of the default theme had a very light grey frame, it is
   replaced by the stronger border colour so the button stays readable. */
.pkp_button_link {
  border-color: var(--hukum-border-strong);
}
/* The advanced search panel is a box; without a hairline it is marked by
   a soft background instead */
.page_search .search_advanced {
  border: 0;
  background: #f7f9fb;
  padding: 18px 20px;
  border-radius: var(--hukum-radius);
}

/* --- Grid for DB-authored content (journal settings, static pages) ---
   The footer and the homepage panels are edited as HTML in the admin UI
   and use Bootstrap 3 markup (.row / .col-md-* / .panel). The default OJS
   theme ships no grid, so those blocks collapse into one stacked column.
   A float-based grid is used on purpose: the default theme's .row is
   already a clearfix container (.pkp_helpers_clear), so floated columns
   are contained without overriding .row itself -- overriding it would
   break the float-based .obj_article_details layout that also uses .row.
   Gutters are applied as padding-right only (no negative margins), which
   keeps the first and last column flush with the surrounding text edges. */
.row > [class*="col-md-"]:not([class*="offset"]):not([class*="push"]):not([class*="pull"]) {
  float: left;
  box-sizing: border-box;
  padding-right: 15px;
}
.row > [class*="col-md-"]:not([class*="offset"]):not([class*="push"]):not([class*="pull"]):last-child {
  padding-right: 0;
}
.col-md-1 { width: 8.33333333%; }
.col-md-2 { width: 16.66666667%; }
.col-md-3 { width: 25%; }
.col-md-4 { width: 33.33333333%; }
.col-md-5 { width: 41.66666667%; }
.col-md-6 { width: 50%; }
.col-md-7 { width: 58.33333333%; }
.col-md-8 { width: 66.66666667%; }
.col-md-9 { width: 75%; }
.col-md-10 { width: 83.33333333%; }
.col-md-11 { width: 91.66666667%; }
.col-md-12 { width: 100%; }
@media (max-width: 767px) {
  .row > [class*="col-md-"]:not([class*="offset"]):not([class*="push"]):not([class*="pull"]) {
    float: none;
    width: 100%;
    padding-right: 0;
  }
}
/* Panels used by the homepage "additional content" blocks */
.panel {
  background: var(--hukum-card);
  border: 1px solid var(--hukum-border);
  border-radius: var(--hukum-radius);
  box-shadow: 0 2px 8px rgba(15, 36, 64, .06);
  margin-bottom: 18px;
  overflow: hidden;
}
.panel-heading {
  background: var(--hukum-primary);
  color: #ffffff;
  padding: 12px 16px;
}
.panel-title {
  margin: 0;
  color: #ffffff;
  font-family: "Figtree", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}
.panel-body {
  padding: 16px;
  font-size: 0.95rem;
}
.text-muted { color: var(--hukum-muted); }
.text-center { text-align: center; }
.pkp_footer_content hr {
  border: 0;
  height: 3px;
  width: 56px;
  margin: 20px auto;
  border-radius: 3px;
  background: var(--hukum-accent);
}
/* Footer: exactly the same 1260px band as the header banner and as the
   content column, so the three blocks share the same left and right edge.
   The band keeps its own white background and gets a solid gold top edge
   (mirroring the gold line under the header banner) as the visible
   boundary between the content column and the footer. */
.pkp_structure_footer_wrapper {
  background: transparent !important;
  border-top: 0 none !important;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}
.pkp_structure_footer {
  background: #ffffff !important;
  color: #1c2733 !important;
  border-top: 4px solid var(--hukum-accent);
  width: 100%;
  max-width: var(--hukum-band-width);
  margin: 0 auto;
  box-sizing: border-box;
  padding: 24px var(--hukum-band-pad);
  text-align: left;
}
.pkp_footer_content {
  padding: 0;
  text-align: left;
}
@media (max-width: 991px) {
  .pkp_structure_footer {
    padding: 24px var(--hukum-band-pad);
  }
}
.pkp_structure_footer a { color: var(--hukum-primary) !important; }
.pkp_structure_footer a:hover { color: var(--hukum-accent) !important; }
/* Hide PKP platform/workshop branding */
.pkp_brand_footer { display: none !important; }
/* Homepage image wrapped by text */
.pkp_page_index .homepage_image {
  margin: 0 !important;
  padding: 0;
}
.pkp_page_index .homepage_image img {
  float: left;
  margin: 0 24px 16px 0;
  border-radius: var(--hukum-radius);
  max-width: 42%;
  height: auto;
  box-shadow: 0 4px 14px rgba(15, 36, 64, .12);
}
.pkp_page_index .homepage_about {
  margin: 0;
  padding: 0 0 16px 0;
}
.pkp_page_index .homepage_about h2 {
  margin-top: 0;
  color: var(--hukum-primary-dark);
}
.pkp_page_index .cmp_announcements,
.pkp_page_index .current_issue,
.pkp_page_index .additional_content {
  clear: both;
}
@media (max-width: 768px) {
  .pkp_page_index .homepage_image img {
    float: none;
    display: block;
    max-width: 100%;
    margin: 0 0 14px 0;
  }
  .page_about img {
    float: none;
    display: block;
    max-width: 100%;
    margin: 0 0 14px 0;
  }

}
/* --- Optional submit-button group (3 segments) ---
   Not used by any core template; kept for custom pages that paste this
   markup. It is intentionally scoped to .btn-group-triple so it can
   never leak into the standard OJS buttons. */
/* --- GROUP CONTAINER (pill wrapper) --- */
    .btn-group-triple {
      display: inline-flex;
      align-items: stretch;
      justify-content: center;
      padding: 0;
      border-radius: 100px;
      background: transparent;
      box-shadow: 0 10px 20px -8px rgba(0, 60, 120, 0.4);
      transition: box-shadow 0.25s ease;
      isolation: isolate;
      /* remove any default list/flex gap */
      gap: 0;
    }

    /* Lift the whole group subtly on hover */
    .btn-group-triple:hover {
      box-shadow: 0 18px 30px -10px rgba(0, 70, 140, 0.5);
    }

    /* --- INDIVIDUAL BUTTON SEGMENTS --- */
    .btn-triple {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.55rem;
      padding: 0.9rem 1.6rem;
      font-size: 1.02rem;
      font-weight: 600;
      line-height: 1.2;
      letter-spacing: 0.01em;
      white-space: nowrap;
      text-decoration: none;        /* for <a> */
      border: none;
      cursor: pointer;
      font-family: inherit;
      transition: background 0.2s ease, color 0.2s ease,
                  transform 0.15s cubic-bezier(0.2, 0, 0, 1);
      outline: none;
      -webkit-tap-highlight-color: transparent;
      /* each segment is a flex child; no margin needed */
    }

    /* Focus ring (accessible) */
    .btn-triple:focus-visible {
      outline: 3px solid #1e88e5;
      outline-offset: 3px;
      z-index: 2;
    }

    /* Press effect --- slight inward scale per segment */
    .btn-triple:active {
      transform: scale(0.96);
    }

    /* SVG icons inside buttons */
    .btn-triple svg {
      width: 1.25em;
      height: 1.25em;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
      display: inline-block;
      vertical-align: middle;
      transition: transform 0.2s ease;
      flex-shrink: 0;
    }

    /* ---------- SEGMENT 1: AUTHOR GUIDELINES ---------- */
    .btn-guidelines {
      background: linear-gradient(135deg, #e8f0fe, #d4e3fc);
      color: #0f3a6b;
      border-radius: 100px 0 0 100px;   /* round left side only */
      border-right: 1px solid rgba(255, 255, 255, 0.9);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }

    .btn-guidelines:hover {
      background: linear-gradient(135deg, #dce9ff, #c2d8fc);
      color: #0a2e57;
    }

    .btn-guidelines:active {
      background: linear-gradient(135deg, #c9defa, #b0cbf7);
    }

    /* ---------- SEGMENT 2: ARTICLE TEMPLATE ---------- */
    .btn-template {
      background: linear-gradient(135deg, #d9e8fc, #bdd4f8);
      color: #0b3d6f;
      border-right: 1px solid rgba(255, 255, 255, 0.8);
      border-left: 1px solid rgba(255, 255, 255, 0.8);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    }

    .btn-template:hover {
      background: linear-gradient(135deg, #c7dcf9, #a9c6f4);
      color: #062d54;
    }

    .btn-template:active {
      background: linear-gradient(135deg, #b4d0f6, #96b8f0);
    }

    /* ---------- SEGMENT 3: SUBMIT ARTICLE ---------- */
    .btn-submit {
      background: linear-gradient(135deg, #0b4a9e, #07377a);
      color: white;
      border-radius: 0 100px 100px 0;   /* round right side only */
      border-left: 1px solid rgba(255, 255, 255, 0.25);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
      font-weight: 700;
      letter-spacing: 0.02em;
    }

    .btn-submit:hover {
      background: linear-gradient(135deg, #0e60c7, #094294);
    }

    .btn-submit:active {
      background: linear-gradient(135deg, #094494, #062e66);
    }

    /* icon micro-animations on group hover */
    .btn-group-triple:hover .btn-guidelines svg {
      transform: translateX(2px);
    }

    .btn-group-triple:hover .btn-template svg {
      transform: translateY(2px);
    }

    .btn-group-triple:hover .btn-submit svg {
      transform: translateX(3px);
    }

    /* --- RESPONSIVE: stack on very small screens? No --- 
       but we compress padding & font to keep it on one line. --- */
    @media (max-width: 640px) {
      .btn-triple {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
        gap: 0.35rem;
      }
      .btn-triple svg {
        width: 1.1em;
        height: 1.1em;
      }
    }

    @media (max-width: 480px) {
      .btn-triple {
        padding: 0.6rem 0.75rem;
        font-size: 0.82rem;
        gap: 0.25rem;
      }
      .btn-triple svg {
        width: 1em;
        height: 1em;
      }
      /* hide text? We keep it readable --- but allow wrapping if needed */
      .btn-triple span {
        /* text is inside a span to allow hiding if needed --- but we keep it */
      }
    }

    @media (max-width: 380px) {
      /* Option: hide the text and keep only icons for ultra narrow, 
         but here we compress further and allow 2-line if unavoidable. */
      .btn-triple {
        padding: 0.5rem 0.6rem;
        font-size: 0.75rem;
      }
      .btn-triple svg {
        width: 0.9em;
        height: 0.9em;
      }
    }

    /* --- demo extra --- */
    .demo-extra {
      color: #29445e;
      font-size: 0.85rem;
      text-align: center;
      margin-top: 0.25rem;
    }

    .demo-extra code {
      background: rgba(0, 0, 0, 0.05);
      padding: 0.2rem 0.5rem;
      border-radius: 30px;
      font-family: 'SF Mono', 'Fira Code', monospace;
      font-size: 0.8rem;
    }

    /* --- Accessibility: motion reduction --- */
    @media (prefers-reduced-motion: reduce) {
      .btn-triple,
      .btn-group-triple,
      .btn-triple svg {
        transition: none;
        animation: none;
      }
      .btn-triple:active {
        transform: none;
      }
    }
     .ed-team .ed-section { margin-bottom: 26px; }
    .ed-team .ed-title {
      font-family: Georgia, 'Times New Roman', serif;
      font-size: 17px;
      font-weight: bold;
      color: #800000;
      border-left: 4px solid #ffd700;
      padding-left: 10px;
      margin: 0 0 12px 0;
      letter-spacing: .3px;
      text-transform: uppercase;
    }
    .ed-team .ed-card {
      background: #fdfcf8;
      border: 1px solid #ece4d4;
      border-left: 4px solid #800000;
      border-radius: 6px;
      padding: 12px 16px;
      margin-bottom: 10px;
      box-shadow: 0 1px 3px rgba(0,0,0,.06);
      transition: all .2s ease;
    }
    .ed-team .ed-card:hover {
      box-shadow: 0 3px 10px rgba(128,0,0,.18);
      border-left-color: #ffd700;
      transform: translateY(-1px);
    }
    .ed-team .ed-name {
      font-size: 15px;
      font-weight: bold;
      color: #5a0000;
      margin: 0 0 3px 0;
      line-height: 1.3;
    }
    .ed-team .ed-scopus {
      display: inline-block;
      background: #800000;
      color: #ffd700;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 11px;
      font-weight: bold;
      padding: 1px 8px;
      border-radius: 10px;
      margin-left: 6px;
      vertical-align: middle;
    }
    .ed-team .ed-affil {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 13px;
      color: #666;
      line-height: 1.45;
      margin: 0;
    }
    @media (max-width:600px) {
      .ed-team .ed-title { font-size: 15px; }
      .ed-team .ed-card { padding: 10px 12px; }
      .ed-team .ed-name { font-size: 14px; }
    }