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

   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

   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 */

/* ==========================================================
   END - APPROACH MASTER STYLESHEET v1.8
   ========================================================== */