/* ==========================================================
   APPROACH - MASTER JOURNAL STYLESHEET
   OJS 3.5 | Default Theme
   Version: R13-HOMEPAGE / v2.0

   Journal: APPROACH
   Scope: Journal-specific Additional CSS

   CONTENTS:
   1. Full-width journal header
   2. Homepage section order and two-column Announcements
   3. PKP footer branding
   4. Static Pages title typography
   5. Responsive Static Pages titles
   6. Contact page (native OJS)
   7. Submissions and Author Guidance
   8. Journal Highlights heading and image sizing

   IMPORTANT:
   This stylesheet is intended for APPROACH only.
   ========================================================== */


/* ==========================================================
   1. FULL-WIDTH HEADER + CLOUDFLARE CACHE BUSTING
   ========================================================== */

/* Expand the journal header container */
#headerNavigationContainer .pkp_head_wrapper {
    width: 94% !important;
    max-width: 1500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Expand logo wrapper and journal identity */
#headerNavigationContainer .pkp_site_name_wrapper,
#headerNavigationContainer .pkp_site_name {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

#headerNavigationContainer .pkp_site_name > a,
#headerNavigationContainer .pkp_site_name > a.is_img {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Preserve the versioned APPROACH header asset */
#headerNavigationContainer .pkp_site_name img {
    content: url("/public/journals/1/approach-header-20261112-r3.webp") !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    margin: 0 auto !important;
}

/* Header: tablet and mobile */
@media (max-width: 991px) {
    #headerNavigationContainer .pkp_head_wrapper {
        width: 100% !important;
        max-width: none !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        box-sizing: border-box !important;
    }

    #headerNavigationContainer .pkp_site_name_wrapper,
    #headerNavigationContainer .pkp_site_name {
        width: 100% !important;
        max-width: none !important;
    }
}


/* ==============================================================
   2. APPROACH HOMEPAGE + ANNOUNCEMENTS - R13 v1.8
   OJS 3.5 Default Theme / OJS 3.5.0.6

   Correct order: Journal Profile > Current Issue > Announcements
   Announcement desktop: native img LEFT, native details RIGHT
   Title and date across top, no display:contents on desktop.
   Heading: CSS visual label while native h2 stays accessible.

   IMPORTANT: Replaces all earlier homepage / announcement rules.
   ============================================================== */

/* 2.1 Homepage ordering: actual Journal Profile is additional_content. */
body.pkp_page_index .pkp_structure_main .page_index_journal {
  display: flex !important;
  flex-direction: column !important;
  width: 100%;
  min-width: 0;
}
body.pkp_page_index .page_index_journal > .additional_content {
  order: -30 !important;
  display: block !important;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0 0 28px !important;
}
body.pkp_page_index .page_index_journal > .homepage_about {
  order: -20 !important;
  min-width: 0;
}
body.pkp_page_index .page_index_journal > .current_issue {
  order: -10 !important;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  margin-bottom: 0 !important;
}
body.pkp_page_index .page_index_journal > section.cmp_announcements {
  order: 0 !important;
  display: block !important;
  position: relative !important;
  float: none !important;
  clear: both !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  box-sizing: border-box;
  padding: 0 !important;
  margin: 30px 0 18px !important;
  border: 0 !important;
  font-family: Arial, Helvetica, sans-serif;
}

/* 2.2 Visually show a stable section heading.
   Native OJS h2 remains in the DOM for screen readers; theme
   may clip it, so render one VISUAL heading with ::before.
   No dependence on the native h2 visibility rules. */
body.pkp_page_index .pkp_structure_main section.cmp_announcements::before {
  content: "ANNOUNCEMENTS" !important;
  display: block !important;
  position: relative !important;
  float: none !important;
  clear: both !important;
  visibility: visible !important;
  opacity: 1 !important;
  clip: auto !important;
  clip-path: none !important;
  width: 100% !important;
  height: auto !important;
  box-sizing: border-box;
  font: 700 21px/1.4 Arial, Helvetica, sans-serif !important;
  letter-spacing: .45px;
  color: #173B63 !important;
  background: linear-gradient(#00619F,#00619F) left bottom / 175px 3px no-repeat !important;
  padding: 0 0 17px !important;
  margin: 0 0 24px !important;
  border: 0 !important;
}
/* Keep the original semantic heading visually hidden to avoid
   duplicates. It remains available to assistive technology. */
body.pkp_page_index .pkp_structure_main section.cmp_announcements > h2 {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
body.pkp_page_index .pkp_structure_main section.cmp_announcements > h2::after {
  content: none !important;
  display: none !important;
}

/* 2.3 First featured announcement: TWO ACTUAL GRID ITEMS.
   Native template:
   <article class="obj_announcement_summary_has_image">
     <img class="obj_announcement_summary_image">
     <div class="obj_announcement_summary_details">
       <h3>...</h3><div class="date">...</div>
       <div class="summary">...</div>
     </div>
   </article>
   Details is a real grid item. DO NOT use display:contents here.
*/
body.pkp_page_index .pkp_structure_main
section.cmp_announcements > article.obj_announcement_summary {
  display: grid !important;
  grid-template-columns: minmax(0, 42%) minmax(0, 1fr) !important;
  grid-template-rows: auto !important;
  grid-template-areas: "poster description" !important;
  grid-auto-flow: row !important;
  gap: 0 22px !important;
  align-items: start !important;
  align-content: start !important;
  position: relative !important;
  float: none !important;
  clear: both !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  box-sizing: border-box;
  padding: 75px 0 22px !important;
  margin: 0 0 12px !important;
  border: 0 !important;
  border-bottom: 1px solid #DCE6EF !important;
  background: transparent !important;
}
/* OJS default pseudo separators and clearfix must not occupy room. */
body.pkp_page_index .pkp_structure_main
section.cmp_announcements > article.obj_announcement_summary::before,
body.pkp_page_index .pkp_structure_main
section.cmp_announcements > article.obj_announcement_summary::after {
  content: none !important;
  display: none !important;
}

/* Left grid item: poster. Target direct element, by tag and class. */
body.pkp_page_index .pkp_structure_main
section.cmp_announcements > article.obj_announcement_summary > .obj_announcement_summary_image {
  grid-area: poster !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: block !important;
  position: relative !important;
  float: none !important;
  clear: none !important;
  justify-self: start !important;
  align-self: start !important;
  width: 100% !important;
  max-width: 310px !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #DCE6EF;
  border-radius: 4px;
  box-sizing: border-box;
  box-shadow: 0 2px 9px rgba(23,59,99,.07);
}

/* Right grid item: keep nested contents together. */
body.pkp_page_index .pkp_structure_main
section.cmp_announcements > article.obj_announcement_summary > .obj_announcement_summary_details {
  grid-area: description !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: block !important;
  position: static !important;
  float: none !important;
  clear: none !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}

/* Native title + date sit above both columns using positioning
   relative to article (details wrapper is position:static). */
body.pkp_page_index .pkp_structure_main
section.cmp_announcements > article.obj_announcement_summary
> .obj_announcement_summary_details > :is(h2,h3,h4) {
  position: absolute !important;
  display: block !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  font: 700 17px/1.5 Arial, Helvetica, sans-serif !important;
  color: #173B63 !important;
  margin: 0 !important;
  padding: 0 0 8px !important;
  border: 0 !important;
  border-bottom: 1px solid #DCE6EF !important;
  box-sizing: border-box;
}
body.pkp_page_index .pkp_structure_main
section.cmp_announcements > article.obj_announcement_summary
> .obj_announcement_summary_details > :is(h2,h3,h4) a {
  color: #173B63 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
body.pkp_page_index .pkp_structure_main
section.cmp_announcements > article.obj_announcement_summary
> .obj_announcement_summary_details > :is(h2,h3,h4) a:hover {
  color: #00619F !important;
  text-decoration: underline !important;
}
body.pkp_page_index .pkp_structure_main
section.cmp_announcements > article.obj_announcement_summary
> .obj_announcement_summary_details > .date {
  position: absolute !important;
  display: block !important;
  top: 41px !important;
  left: 0 !important;
  width: auto !important;
  height: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font: 12px/1.6 Arial, Helvetica, sans-serif !important;
  color: #687B8C !important;
}

/* Short description, in the right column from the very top. */
body.pkp_page_index .pkp_structure_main
section.cmp_announcements > article.obj_announcement_summary
> .obj_announcement_summary_details > .summary {
  position: static !important;
  display: block !important;
  float: none !important;
  clear: none !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  font: 14px/1.75 Arial, Helvetica, sans-serif !important;
  color: #34465A !important;
  overflow-wrap: anywhere;
}
body.pkp_page_index .cmp_announcements .obj_announcement_summary .summary p {
  margin: 0 0 11px !important;
  line-height: 1.75;
}
body.pkp_page_index .cmp_announcements .obj_announcement_summary .summary a {
  color: #00619F;
}
body.pkp_page_index .cmp_announcements .obj_announcement_summary .summary .read_more {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  margin: 12px 0 0;
  text-decoration: none;
}

/* Reset the native .more sidebar column that creates vertical space. */
body.pkp_page_index .pkp_structure_main section.cmp_announcements > .more {
  display: block;
  float: none !important;
  clear: both !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
body.pkp_page_index .pkp_structure_main section.cmp_announcements > .more::before {
  content: none !important;
  display: none !important;
}
body.pkp_page_index .pkp_structure_main section.cmp_announcements > .more:not(:has(.obj_announcement_summary)) {
  display: none !important;
}

/* 2.4 Mobile: restore natural document flow without absolute title.
   On mobile, use contents only to order individual elements in one
   column: title, date, poster, summary. Desktop remains two grid items. */
@media (max-width: 700px) {
  body.pkp_page_index .page_index_journal > .additional_content {
    margin-bottom: 20px !important;
  }
  body.pkp_page_index .pkp_structure_main section.cmp_announcements::before {
    font-size: 19px !important;
    margin-bottom: 18px !important;
  }
  body.pkp_page_index .pkp_structure_main
  section.cmp_announcements > article.obj_announcement_summary {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto !important;
    grid-template-areas: "title" "date" "poster" "description" !important;
    row-gap: 11px !important;
    column-gap: 0 !important;
    padding-top: 0 !important;
  }
  body.pkp_page_index .pkp_structure_main
  section.cmp_announcements > article.obj_announcement_summary > .obj_announcement_summary_details {
    display: contents !important;
  }
  body.pkp_page_index .pkp_structure_main
  section.cmp_announcements > article.obj_announcement_summary
  > .obj_announcement_summary_details > :is(h2,h3,h4) {
    position: static !important;
    grid-area: title !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
  }
  body.pkp_page_index .pkp_structure_main
  section.cmp_announcements > article.obj_announcement_summary
  > .obj_announcement_summary_details > .date {
    position: static !important;
    grid-area: date !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
  }
  body.pkp_page_index .pkp_structure_main
  section.cmp_announcements > article.obj_announcement_summary > .obj_announcement_summary_image {
    grid-area: poster !important;
    grid-column: 1 !important;
    grid-row: 3 !important;
    justify-self: center !important;
    max-width: 310px !important;
  }
  body.pkp_page_index .pkp_structure_main
  section.cmp_announcements > article.obj_announcement_summary
  > .obj_announcement_summary_details > .summary {
    grid-area: description !important;
    grid-column: 1 !important;
    grid-row: 4 !important;
  }
}

/* END: R13 HOMEPAGE v1.8 */

/* ==========================================================
   3. HIDE DEFAULT OJS/PKP FOOTER BRANDING
   ========================================================== */

/* Hide default PKP platform branding */
.pkp_structure_footer_wrapper .pkp_brand_footer {
    display: none !important;
}

/* Remove spacing left by hidden branding */
.pkp_structure_footer_wrapper .pkp_structure_footer {
    padding-bottom: 0 !important;
}


/* ==========================================================
   4. STATIC PAGES - AUTOMATIC PAGE TITLE
   R13-STATIC / v1.4

   Supports OJS Static Pages preview and all planned
   APPROACH Static Page public URLs.

   The body class of a public Static Page is based
   on its slug, while preview uses pkp_page_pages.

   Only explicitly listed page classes are targeted.
   ========================================================== */


/* ----------------------------------------------------------
   4.1 MAIN PAGE HEADING

   Current pages:
   - focus-and-scope
   - journal-history
   - editorial-team
   - reviewers

   Planned pages:
   - author-guidelines
   - author-fees
   - peer-review-process
   - publication-ethics
   - copyright-and-licensing
   - open-access-policy
   - indexing-and-abstracting
   ---------------------------------------------------------- */

body:is(
    .pkp_page_pages,
    .pkp_page_focus-and-scope,
    .pkp_page_journal-history,
    .pkp_page_editorial-team,
    .pkp_page_reviewers,
    .pkp_page_author-guidelines,
    .pkp_page_author-fees,
    .pkp_page_peer-review-process,
    .pkp_page_publication-ethics,
    .pkp_page_copyright-and-licensing,
    .pkp_page_open-access-policy,
    .pkp_page_indexing-and-abstracting,
    .pkp_page_announcement
) .pkp_structure_main > .page > h2 {

    /* Typography */
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.3px !important;

    /* Aviation navy */
    color: #173B63 !important;

    /* Layout */
    position: relative !important;
    display: block !important;

    /* Space below the primary navigation */
    margin-top: 38px !important;
    margin-right: 0 !important;
    margin-bottom: 28px !important;
    margin-left: 0 !important;

    /* Space between heading and decorative line */
    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 17px !important;
    padding-left: 0 !important;

    /* Light blue divider */
    border: 0 !important;
    border-bottom: 2px solid #DCE6EF !important;

    overflow: visible !important;
}


/* ----------------------------------------------------------
   4.2 AVIATION GOLD ACCENT
   ---------------------------------------------------------- */

body:is(
    .pkp_page_pages,
    .pkp_page_focus-and-scope,
    .pkp_page_journal-history,
    .pkp_page_editorial-team,
    .pkp_page_reviewers,
    .pkp_page_author-guidelines,
    .pkp_page_author-fees,
    .pkp_page_peer-review-process,
    .pkp_page_publication-ethics,
    .pkp_page_copyright-and-licensing,
    .pkp_page_open-access-policy,
    .pkp_page_indexing-and-abstracting
) .pkp_structure_main > .page > h2::after {

    content: "" !important;
    display: block !important;

    position: absolute !important;
    left: 0 !important;
    bottom: -2px !important;

    width: 70px !important;
    height: 4px !important;

    background-color: #D8AA54 !important;
    border: 0 !important;
}


/* ==========================================================
   5. RESPONSIVE STATIC PAGE TITLES
   ========================================================== */


/* ----------------------------------------------------------
   5.1 TABLET - UP TO 991PX
   ---------------------------------------------------------- */

@media (max-width: 991px) {

    body:is(
        .pkp_page_pages,
        .pkp_page_focus-and-scope,
        .pkp_page_journal-history,
        .pkp_page_editorial-team,
        .pkp_page_reviewers,
        .pkp_page_author-guidelines,
        .pkp_page_author-fees,
        .pkp_page_peer-review-process,
        .pkp_page_publication-ethics,
        .pkp_page_copyright-and-licensing,
        .pkp_page_open-access-policy,
        .pkp_page_indexing-and-abstracting
    ) .pkp_structure_main > .page > h2 {

        font-size: 25px !important;

        margin-top: 30px !important;
        margin-bottom: 25px !important;

        padding-bottom: 15px !important;
    }
}


/* ----------------------------------------------------------
   5.2 MOBILE - UP TO 576PX
   ---------------------------------------------------------- */

@media (max-width: 576px) {

    body:is(
        .pkp_page_pages,
        .pkp_page_focus-and-scope,
        .pkp_page_journal-history,
        .pkp_page_editorial-team,
        .pkp_page_reviewers,
        .pkp_page_author-guidelines,
        .pkp_page_author-fees,
        .pkp_page_peer-review-process,
        .pkp_page_publication-ethics,
        .pkp_page_copyright-and-licensing,
        .pkp_page_open-access-policy,
        .pkp_page_indexing-and-abstracting
    ) .pkp_structure_main > .page > h2 {

        font-size: 23px !important;
        line-height: 1.4 !important;

        margin-top: 24px !important;
        margin-bottom: 22px !important;

        padding-bottom: 14px !important;
    }

    /* Shorter gold underline on mobile */
    body:is(
        .pkp_page_pages,
        .pkp_page_focus-and-scope,
        .pkp_page_journal-history,
        .pkp_page_editorial-team,
        .pkp_page_reviewers,
        .pkp_page_author-guidelines,
        .pkp_page_author-fees,
        .pkp_page_peer-review-process,
        .pkp_page_publication-ethics,
        .pkp_page_copyright-and-licensing,
        .pkp_page_open-access-policy,
        .pkp_page_indexing-and-abstracting
    ) .pkp_structure_main > .page > h2::after {

        width: 54px !important;
    }
}


/* ==========================================
   APPROACH - CONTACT PAGE
   R13-CONTACT-01
   OJS 3.5 | Native Contact Page

   INTEGRATED IN MASTER CSS v1.6
   DO NOT APPEND AN OLDER CSS BLOCK
========================================== */

/* 1. Contact page title */
body.pkp_page_about.pkp_op_contact
.pkp_structure_main > .page > h2,
body.pkp_page_about.pkp_op_contact
.pkp_structure_main > .page_contact > h2 {
  position: relative;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.35;
  color: #173b63;
  margin: 38px 0 28px;
  padding-bottom: 17px;
  border-bottom: 2px solid #dce6ef;
}

body.pkp_page_about.pkp_op_contact
.pkp_structure_main > .page > h2::after,
body.pkp_page_about.pkp_op_contact
.pkp_structure_main > .page_contact > h2::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 70px;
  height: 4px;
  background: #d8aa54;
}

/* 2. Contact information sections */
body.pkp_page_about.pkp_op_contact
.pkp_structure_main .page_contact
.contact_section,
body.pkp_page_about.pkp_op_contact
.pkp_structure_main .page_contact
.contact_primary,
body.pkp_page_about.pkp_op_contact
.pkp_structure_main .page_contact
.contact_support {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  background: #ffffff;
  border: 1px solid #dce6ef;
  border-left: 4px solid #d8aa54;
  border-radius: 8px;
  padding: 21px 23px;
  margin: 0 0 18px;
  box-shadow: 0 2px 10px rgba(23,59,99,0.05);
  overflow-wrap: anywhere;
}

/* 3. Section headings */
body.pkp_page_about.pkp_op_contact
.page_contact .contact_section h3,
body.pkp_page_about.pkp_op_contact
.page_contact .contact_primary h3,
body.pkp_page_about.pkp_op_contact
.page_contact .contact_support h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
  line-height: 1.4;
  font-weight: 700;
  color: #173b63;
  margin: 0 0 13px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e5edf3;
}

/* 4. Text content */
body.pkp_page_about.pkp_op_contact
.page_contact .contact_section,
body.pkp_page_about.pkp_op_contact
.page_contact .contact_primary,
body.pkp_page_about.pkp_op_contact
.page_contact .contact_support {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.85;
  color: #34465a;
}

/* 5. Email links */
body.pkp_page_about.pkp_op_contact
.page_contact a[href^="mailto:"] {
  color: #00619f;
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}

body.pkp_page_about.pkp_op_contact
.page_contact a[href^="mailto:"]:hover,
body.pkp_page_about.pkp_op_contact
.page_contact a[href^="mailto:"]:focus {
  color: #173b63;
  text-decoration: underline;
}

/* 6. Phone links */
body.pkp_page_about.pkp_op_contact
.page_contact a[href^="tel:"] {
  color: #00619f;
  text-decoration: none;
}

body.pkp_page_about.pkp_op_contact
.page_contact a[href^="tel:"]:hover {
  text-decoration: underline;
}

/* 7. Tablet */
@media (max-width: 991px) {
  body.pkp_page_about.pkp_op_contact
  .pkp_structure_main > .page > h2,
  body.pkp_page_about.pkp_op_contact
  .pkp_structure_main > .page_contact > h2 {
    font-size: 25px;
    margin-top: 30px;
  }
}

/* 8. Mobile */
@media (max-width: 767px) {
  body.pkp_page_about.pkp_op_contact
  .pkp_structure_main > .page > h2,
  body.pkp_page_about.pkp_op_contact
  .pkp_structure_main > .page_contact > h2 {
    font-size: 23px;
    margin-top: 24px;
  }

  body.pkp_page_about.pkp_op_contact
  .pkp_structure_main > .page > h2::after,
  body.pkp_page_about.pkp_op_contact
  .pkp_structure_main > .page_contact > h2::after {
    width: 54px;
  }

  body.pkp_page_about.pkp_op_contact
  .pkp_structure_main .page_contact
  .contact_section,
  body.pkp_page_about.pkp_op_contact
  .pkp_structure_main .page_contact
  .contact_primary,
  body.pkp_page_about.pkp_op_contact
  .pkp_structure_main .page_contact
  .contact_support {
    padding: 17px 16px;
    margin-bottom: 15px;
  }
}

/* END - APPROACH CONTACT PAGE */

/* ==================================================
   APPROACH - SUBMISSIONS & AUTHOR GUIDELINES
   R13-WORKFLOW-CSS v1.0
   OJS 3.5 | Default Theme

   Scope: Public /about/submissions page only
   Palette:
   Navy       #173B63
   Blue       #00619F
   Gold       #D8AA54
   Light Blue #F0F6FA

   INTEGRATED IN MASTER CSS v1.6
================================================== */


/* -----------------------------------------------
   1. PAGE TYPOGRAPHY
------------------------------------------------ */

body.pkp_page_about.pkp_op_submissions
.pkp_structure_main {
  font-family: Arial, Helvetica, sans-serif;
  color: #34465a;
  font-size: 14px;
  line-height: 1.85;
}

body.pkp_page_about.pkp_op_submissions
.pkp_structure_main p,
body.pkp_page_about.pkp_op_submissions
.pkp_structure_main li {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.85;
  color: #34465a;
}


/* -----------------------------------------------
   2. MAIN PAGE TITLE - SUBMISSIONS
------------------------------------------------ */

body.pkp_page_about.pkp_op_submissions
.pkp_structure_main > .page > h2,
body.pkp_page_about.pkp_op_submissions
.pkp_structure_main > .page_submissions > h2 {
  position: relative;
  color: #173b63;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.35;
  margin: 38px 0 28px;
  padding-bottom: 17px;
  border-bottom: 2px solid #dce6ef;
}

body.pkp_page_about.pkp_op_submissions
.pkp_structure_main > .page > h2::after,
body.pkp_page_about.pkp_op_submissions
.pkp_structure_main > .page_submissions > h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 70px;
  height: 4px;
  background: #d8aa54;
}


/* -----------------------------------------------
   3. NEW SUBMISSION INFORMATION BOX
------------------------------------------------ */

body.pkp_page_about.pkp_op_submissions
.pkp_structure_main .cmp_notification {
  background: #f0f6fa;
  border: 1px solid #dce6ef;
  border-left: 4px solid #d8aa54;
  border-radius: 7px;
  padding: 18px 22px;
  margin: 0 0 30px;
  box-shadow: 0 2px 9px rgba(23,59,99,0.04);
}

body.pkp_page_about.pkp_op_submissions
.pkp_structure_main .cmp_notification p {
  color: #34465a;
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
}

body.pkp_page_about.pkp_op_submissions
.pkp_structure_main .cmp_notification a {
  color: #00619f;
  font-weight: 700;
  text-decoration: none;
}

body.pkp_page_about.pkp_op_submissions
.pkp_structure_main .cmp_notification a:hover {
  color: #173b63;
  text-decoration: underline;
}


/* -----------------------------------------------
   4. SECTION HEADINGS
   Author Guidelines, Checklist, Copyright
------------------------------------------------ */

body.pkp_page_about.pkp_op_submissions
.pkp_structure_main .page_submissions h2,
body.pkp_page_about.pkp_op_submissions
.pkp_structure_main .page_submissions h3,
body.pkp_page_about.pkp_op_submissions
.pkp_structure_main .page_submissions h4 {
  font-family: Arial, Helvetica, sans-serif;
  color: #173b63;
  font-weight: 700;
  line-height: 1.4;
}

body.pkp_page_about.pkp_op_submissions
.pkp_structure_main .page_submissions h2 {
  font-size: 22px;
  margin: 30px 0 18px;
}

body.pkp_page_about.pkp_op_submissions
.pkp_structure_main .page_submissions h3 {
  font-size: 18px;
  margin: 27px 0 14px;
}

body.pkp_page_about.pkp_op_submissions
.pkp_structure_main .page_submissions h4 {
  font-size: 15px;
  margin: 22px 0 12px;
}


/* -----------------------------------------------
   5. AUTHOR GUIDELINES SECTION
------------------------------------------------ */

body.pkp_page_about.pkp_op_submissions
.pkp_structure_main .author_guidelines {
  font-family: Arial, Helvetica, sans-serif;
  color: #34465a;
  line-height: 1.85;
  overflow-wrap: anywhere;
}

body.pkp_page_about.pkp_op_submissions
.pkp_structure_main .author_guidelines > p {
  margin: 0 0 16px;
}

body.pkp_page_about.pkp_op_submissions
.pkp_structure_main .author_guidelines strong,
body.pkp_page_about.pkp_op_submissions
.pkp_structure_main .author_guidelines b {
  color: #173b63;
  font-weight: 700;
}

body.pkp_page_about.pkp_op_submissions
.pkp_structure_main .author_guidelines a {
  color: #00619f;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* -----------------------------------------------
   6. ALL HEADINGS INSIDE AUTHOR GUIDANCE
------------------------------------------------ */

body.pkp_page_about.pkp_op_submissions
.pkp_structure_main .author_guidelines h2,
body.pkp_page_about.pkp_op_submissions
.pkp_structure_main .author_guidelines h3,
body.pkp_page_about.pkp_op_submissions
.pkp_structure_main .author_guidelines h4 {
  color: #173b63;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  line-height: 1.45;
  padding-bottom: 9px;
  border-bottom: 1px solid #dce6ef;
  margin: 27px 0 16px;
}

body.pkp_page_about.pkp_op_submissions
.pkp_structure_main .author_guidelines h2 {
  font-size: 19px;
}

body.pkp_page_about.pkp_op_submissions
.pkp_structure_main .author_guidelines h3 {
  font-size: 17px;
}

body.pkp_page_about.pkp_op_submissions
.pkp_structure_main .author_guidelines h4 {
  font-size: 15px;
}


/* -----------------------------------------------
   7. SUBSECTION TITLES AS BOLD PARAGRAPHS
   Useful for OJS rich-text editor content
------------------------------------------------ */

body.pkp_page_about.pkp_op_submissions
.pkp_structure_main .author_guidelines p > strong:only-child,
body.pkp_page_about.pkp_op_submissions
.pkp_structure_main .author_guidelines p > b:only-child {
  display: inline-block;
  color: #173b63;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  margin-top: 7px;
}


/* -----------------------------------------------
   8. ORDERED AND UNORDERED LISTS
------------------------------------------------ */

body.pkp_page_about.pkp_op_submissions
.pkp_structure_main .author_guidelines ol,
body.pkp_page_about.pkp_op_submissions
.pkp_structure_main .author_guidelines ul {
  margin: 12px 0 22px;
  padding-left: 27px;
  list-style-position: outside;
}

body.pkp_page_about.pkp_op_submissions
.pkp_structure_main .author_guidelines li {
  margin: 0 0 9px;
  padding-left: 3px;
  line-height: 1.75;
}

body.pkp_page_about.pkp_op_submissions
.pkp_structure_main .author_guidelines li::marker {
  color: #b98b38;
  font-weight: 700;
}

body.pkp_page_about.pkp_op_submissions
.pkp_structure_main .author_guidelines li strong {
  color: #173b63;
}


/* -----------------------------------------------
   9. PARAGRAPH SPACING
------------------------------------------------ */

body.pkp_page_about.pkp_op_submissions
.pkp_structure_main .author_guidelines p {
  font-size: 14px;
  line-height: 1.85;
  margin-bottom: 16px;
}

body.pkp_page_about.pkp_op_submissions
.pkp_structure_main .author_guidelines em {
  color: #34465a;
}


/* -----------------------------------------------
   10. SUBMISSION CHECKLIST & COPYRIGHT
------------------------------------------------ */

body.pkp_page_about.pkp_op_submissions
.pkp_structure_main .submission_checklist,
body.pkp_page_about.pkp_op_submissions
.pkp_structure_main .copyright_notice {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.85;
  color: #34465a;
  overflow-wrap: anywhere;
}

body.pkp_page_about.pkp_op_submissions
.pkp_structure_main .submission_checklist li {
  padding-bottom: 8px;
}

body.pkp_page_about.pkp_op_submissions
.pkp_structure_main .copyright_notice a {
  color: #00619f;
  text-decoration: underline;
}


/* -----------------------------------------------
   11. LINKS AND EDIT CONTROL
------------------------------------------------ */

body.pkp_page_about.pkp_op_submissions
.pkp_structure_main a {
  color: #00619f;
}

body.pkp_page_about.pkp_op_submissions
.pkp_structure_main a:hover,
body.pkp_page_about.pkp_op_submissions
.pkp_structure_main a:focus {
  color: #173b63;
}

body.pkp_page_about.pkp_op_submissions
.pkp_structure_main a:focus-visible {
  outline: 2px solid #d8aa54;
  outline-offset: 3px;
}


/* -----------------------------------------------
   12. TABLET
------------------------------------------------ */

@media (max-width: 991px) {

  body.pkp_page_about.pkp_op_submissions
  .pkp_structure_main > .page > h2,
  body.pkp_page_about.pkp_op_submissions
  .pkp_structure_main > .page_submissions > h2 {
    font-size: 25px;
    margin-top: 30px;
  }

  body.pkp_page_about.pkp_op_submissions
  .pkp_structure_main .cmp_notification {
    padding: 17px 19px;
  }

}


/* -----------------------------------------------
   13. MOBILE
------------------------------------------------ */

@media (max-width: 767px) {

  body.pkp_page_about.pkp_op_submissions
  .pkp_structure_main {
    font-size: 13px;
    line-height: 1.75;
  }

  body.pkp_page_about.pkp_op_submissions
  .pkp_structure_main > .page > h2,
  body.pkp_page_about.pkp_op_submissions
  .pkp_structure_main > .page_submissions > h2 {
    font-size: 23px;
    margin-top: 24px;
  }

  body.pkp_page_about.pkp_op_submissions
  .pkp_structure_main > .page > h2::after,
  body.pkp_page_about.pkp_op_submissions
  .pkp_structure_main > .page_submissions > h2::after {
    width: 54px;
  }

  body.pkp_page_about.pkp_op_submissions
  .pkp_structure_main .cmp_notification {
    padding: 15px 17px;
    margin-bottom: 25px;
  }

  body.pkp_page_about.pkp_op_submissions
  .pkp_structure_main .author_guidelines ol,
  body.pkp_page_about.pkp_op_submissions
  .pkp_structure_main .author_guidelines ul {
    padding-left: 23px;
  }

  body.pkp_page_about.pkp_op_submissions
  .pkp_structure_main .author_guidelines li {
    margin-bottom: 8px;
    padding-left: 0;
  }

}

/* END - APPROACH SUBMISSIONS CSS v1.0 */
/* ==========================================================
   8. APPROACH - JOURNAL HIGHLIGHTS
   R13-HOMEPAGE / v2.0
   Native OJS 3.5 Highlights block.

   Scope: journal homepage only. No theme template edits.
   Keeps the existing order:
   Journal Profile > Current Issue > Highlights > Announcements.
   ========================================================== */

body.pkp_page_index .pkp_structure_main
.page_index_journal > .highlights {
    order: -5 !important;
    display: block !important;
    position: relative !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 30px 0 0 !important;
    padding: 0 !important;
    clear: both !important;
}

/* Visual section heading, without changing OJS templates. */
body.pkp_page_index .pkp_structure_main
.page_index_journal > .highlights::before {
    content: "JOURNAL HIGHLIGHTS" !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font: 700 21px/1.4 Arial, Helvetica, sans-serif !important;
    letter-spacing: .45px !important;
    color: #173B63 !important;
    padding: 0 0 17px !important;
    margin: 0 0 24px !important;
    border: 0 !important;
    border-bottom: 2px solid #DCE6EF !important;
    background: linear-gradient(#D8AA54, #D8AA54) left bottom / 90px 4px no-repeat !important;
}

/* Override theme image sizes inside the highlights only.
   Avoid affecting images in Current Issue and Announcements.
   For the 800x600 (4:3) highlight portrait, preserve aspect ratio. */
body.pkp_page_index .pkp_structure_main
.page_index_journal > .highlights img {
    max-width: 100% !important;
    height: auto;
}

/* Avoid overgrowing image panels in themes with image wrappers. */
body.pkp_page_index .pkp_structure_main
.page_index_journal > .highlights :is(.highlight-image, .highlight_image, .image) img {
    display: block;
    width: 100%;
    height: auto !important;
    max-height: 360px;
    object-fit: contain;
    object-position: center top;
}

@media (max-width: 700px) {
    body.pkp_page_index .pkp_structure_main
    .page_index_journal > .highlights {
        margin-top: 20px !important;
    }

    body.pkp_page_index .pkp_structure_main
    .page_index_journal > .highlights::before {
        font-size: 19px !important;
        margin-bottom: 18px !important;
        padding-bottom: 14px !important;
        background-size: 70px 4px !important;
    }

    body.pkp_page_index .pkp_structure_main
    .page_index_journal > .highlights :is(.highlight-image, .highlight_image, .image) img {
        max-height: none;
    }
}

/* ==========================================================
   END - APPROACH MASTER STYLESHEET v2.0
   ========================================================== */