/* ==================================================================
   IConMTHS Theme  |  styles/iconmths-20260927-v3d.css
   (v3b: footer moved from grey to the deep sea panel, per the
   decision to replace every old navy and grey frame colour with sea.
   v3c: reCAPTCHA forms fit a 320px screen, see section 14.
   v3d: journal identity table moved under About and set as a plain
   black-on-white table; footer text colours and the duplicate OJS/PKP
   credit, see sections 15 and 16.
   v3e: Register/Login and the account menu sit at the right edge of
   the header on desktop instead of the centre, see section 6.)
   Child of OJS 3.5 Default. Page structure follows the SCIENTIST
   journal (journal.lontaradigitech.com/index.php/SCIENTIST): 1160px
   white page panel, dark header and nav, block title bars.
   v3 replaces the grey circuit canvas with a coral reef scene (reef,
   fish and divers) and moves the dark tones from the old navy to the
   deep sea blues of that scene. IConMTHS is a maritime tourism and
   hospitality conference, so the sea is its own motif.

   Design read: academic proceedings journal for tourism and
   hospitality researchers, SCIENTIST page structure on a sea canvas,
   dial ENERGY 2 / RHYTHM 1 / MOTION 1 (hover/focus colour only).

   Palette (2 cores + 1 accent + neutrals, all taken from the reef
   illustration or the Default link colour):
     --icm-deep   #032433  header, nav, footer, primary buttons (white 16.1:1)
     --icm-sea    #003e5b  block title bars, button hover (white 11.4:1)
     --icm-accent #61cbe8  hover/focus on dark only (on deep 8.6:1)
     --icm-surface #8ce4fa canvas base colour behind the illustration
     link blue    #006798  Default link colour (6.2:1 on white)

   OJS constraints honoured: nav switches at 992px; no display/position
   override on .pkp_site_nav_menu below 992px; no overflow-x:hidden on
   body; keyboard focus always visible.
   ================================================================== */

:root {
  --icm-deep: #032433;
  --icm-sea: #003e5b;
  --icm-accent: #61cbe8;
  --icm-surface: #8ce4fa;
  --icm-link: #006798;
  --icm-ink: rgba(0, 0, 0, 0.87);
  --icm-panel: #f1f1f1;
  --icm-line: #dddddd;
}

/* ---------- 1. Canvas: coral reef scene ---------------------------
   One wide scene (6500x3000), not a tile, so it is never repeated.
   The water colour fills the canvas while the SVG loads and wherever
   the scene does not reach. Only the gutters beside the white panel
   show it; no text sits on it.

   Desktop (992px up): the scene is fixed to the viewport and covers
   it, anchored at the bottom, so the tall reef masses at both edges
   of the picture land in the side gutters and stay put while the
   panel scrolls over them.

   Below 992px the panel is almost full width, so the scene scrolls
   with the page (fixed backgrounds misbehave on iOS and repaint on
   every scroll) and sits at the foot of the page at full viewport
   width: open water above, the reef showing beside and under the
   footer. */
body {
  background-color: var(--icm-surface);
  background-image: url("../images/coral-reef.svg");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
  background-attachment: scroll;
}
@media (min-width: 992px) {
  body {
    background-size: cover;
    background-attachment: fixed;
  }
}

/* ---------- 2. Focus: visible on dark and light surfaces ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--icm-sea);
  outline-offset: 2px;
}
/* Light sea blue on the dark header; the footer sits on light grey
   panels, so it keeps the dark outline above. */
body > .pkp_structure_page > .pkp_structure_head a:focus-visible,
body > .pkp_structure_page > .pkp_structure_head button:focus-visible {
  outline-color: var(--icm-accent);
}

/* ---------- 3. Header frame ---------------------------------------
   Outer header transparent so the canvas shows at the sides; the
   inner wrapper is the deep sea panel, same width as the content panel.
   "body >" scoping keeps these rules off the header markup that an
   editor pasted inside the homepage additional content, and beats the
   inline homepage-image header background from the parent theme. */
body > .pkp_structure_page > .pkp_structure_head {
  background: transparent;
  border-bottom: 0;
}
body > .pkp_structure_page > .pkp_structure_head .pkp_head_wrapper {
  background-color: var(--icm-deep);
}
.pkp_site_nav_menu {
  background: var(--icm-deep);
}

/* ---------- 4. Logo: full panel width, as on SCIENTIST ------------ */
.pkp_site_name_wrapper {
  padding-left: 0;
  padding-right: 0;
}
.pkp_site_name {
  padding-top: 0;
  padding-bottom: 0;
}
.pkp_site_name > a {
  padding-top: 0;
  padding-bottom: 0;
}
.pkp_site_name .is_img {
  display: block;
  margin: 0;
}
/* Default caps the logo at 2.143rem (mobile) and 80px (desktop). With
   width:100% that cap would squash the image, so the cap is lifted and
   the aspect ratio alone sets the height. */
.pkp_site_name .is_img img {
  width: 100%;
  max-width: 100%;
  max-height: none;
  height: auto;
}

/* ---------- 5. Primary navigation --------------------------------- */
.pkp_nav_list > li {
  background: var(--icm-deep);
}
.pkp_nav_list > li > a,
.pkp_navigation_search_wrapper a {
  color: #fff;
  font-weight: 700;
}
.pkp_navigation_primary > li > a {
  border-bottom: 3px solid transparent;
}
/* Same inset SCIENTIST gives the first and last items, so the labels
   do not touch the panel edge. */
.pkp_navigation_primary > li:first-child > a {
  margin-left: 0.5em;
}
.pkp_navigation_primary > li:last-child > a {
  margin-right: 0.5em;
}
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_search_wrapper a:hover,
.pkp_navigation_search_wrapper a:focus,
.pkp_navigation_user > li > a:hover,
.pkp_navigation_user > li > a:focus {
  color: var(--icm-accent);
  background: transparent;
  border-color: transparent;
}
/* Dropdown panel stays white (Default), recoloured to the palette.
   The left edge marks the hovered/focused item: a state signal. */
.pkp_nav_list ul a {
  color: var(--icm-sea);
}
.pkp_nav_list ul a:hover,
.pkp_nav_list ul a:focus,
.pkp_navigation_primary .dropdown-menu a:hover,
.pkp_navigation_primary .dropdown-menu a:focus {
  background: var(--icm-panel);
  border-color: var(--icm-sea);
  color: var(--icm-deep);
}

/* ---------- 6. User navigation (Register / Login / account) ------- */
.pkp_navigation_user > li.profile {
  border-radius: 5px;
}
.pkp_navigation_user > li > a {
  color: #fff;
}
.pkp_navigation_user .task_count {
  background: #d63b3b;
  color: #fff;
}
/* Default gives the user list a fixed desktop width; the longer
   signed-in menu pushed it past the viewport edge on this server. */
@media (min-width: 992px) {
  .pkp_navigation_user {
    width: auto;
    max-width: 100%;
  }
  /* v3e: Default centres the wrapper (left:50% + translateX(-50%)).
     With the list at width:auto the wrapper shrinks to its links and
     lands mid-header, so it is pinned to the right edge of the header
     row instead, the same edge the nav bar and white panel end on. */
  .pkp_navigation_user_wrapper {
    left: auto;
    right: 0;
    transform: none;
    padding-right: 0;
  }
  /* Default pulls the last link 0.714rem past the list edge; kept
     inside so the link box ends on the panel edge and its label lines
     up with the Search label in the nav bar below. */
  .pkp_navigation_user > li:last-child > a {
    margin-right: 0;
  }
  /* Account menu opens leftwards from the right edge of its item,
     so it never runs past the panel or the viewport. Only the open
     (hover) state is touched; the closed state stays off-screen. */
  .pkp_navigation_user > li:hover > ul {
    left: auto;
    right: 0;
  }
}

/* ---------- 7. Content canvas: white page panel -------------------
   The panel sits on the reef canvas at the Default content width
   (1160px from 1200px up), exactly as on SCIENTIST. */
.pkp_structure_content {
  background: #fff;
}
.pkp_structure_main,
.pkp_structure_sidebar {
  overflow-wrap: break-word;
}
.pkp_structure_main img,
.pkp_block img {
  max-width: 100%;
  height: auto;
}

/* ---------- 8. Sidebar block title bars ---------------------------
   A dark bar with white text is the SCIENTIST block signature, here
   in the mid sea blue so it sits one step lighter than the header.
   Uppercase with light tracking only here, so the bars read as labels
   and the block content keeps normal case. */
.pkp_block .title {
  margin: 0 0 0.857rem;
  padding: 0.571rem 0.857rem;
  background: var(--icm-sea);
  color: #fff;
  font-size: 0.93rem;
  line-height: 1.43rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.pkp_block .content a {
  color: var(--icm-link);
}
.pkp_block .content a:hover,
.pkp_block .content a:focus {
  color: var(--icm-deep);
}

/* ---------- 9. Headings in the main column ------------------------ */
.pkp_structure_main h1,
.pkp_structure_main h2,
.pkp_structure_main h3,
.pkp_structure_main .page_title {
  color: var(--icm-deep);
}
.pkp_page_index .current_issue .current_issue_title {
  color: var(--icm-deep);
}

/* ---------- 10. Issue TOC, article list, galleys ------------------
   Section names keep the Default rule-line layout, recoloured. Galley
   buttons keep the Default outline style, which SCIENTIST also uses. */
.obj_issue_toc .section > h2,
.obj_issue_toc .section > h3,
.obj_issue_toc .galleys > h2,
.obj_issue_toc .galleys > h3 {
  color: var(--icm-sea);
}
.obj_article_summary > .title a {
  color: var(--icm-deep);
}
.obj_article_summary > .title a:hover,
.obj_article_summary > .title a:focus {
  color: var(--icm-link);
  text-decoration: underline;
}
.obj_galley_link {
  border-color: var(--icm-link);
  color: var(--icm-link);
}
.obj_galley_link:hover,
.obj_galley_link:focus {
  background: var(--icm-link);
  color: #fff;
}

/* ---------- 11. Archive, article view, forms, tables -------------- */
.obj_issue_summary .title {
  color: var(--icm-deep);
}
.obj_issue_summary .title:hover,
.obj_issue_summary .title:focus {
  color: var(--icm-link);
}
.obj_article_details .item .label,
.obj_article_details .main_entry .item .label {
  color: var(--icm-sea);
}
/* Primary actions (search submit, form submit, make a submission):
   solid deep blue replaces the grey Default gradient so buttons match the
   header. One colour, no glow, 3px radius kept from Default. */
.cmp_button,
.cmp_form .buttons button,
.page_lost_password .buttons button,
.page_search .submit button,
.block_make_submission a {
  background: var(--icm-deep);
  border: 1px solid var(--icm-deep);
  box-shadow: none;
  color: #fff;
}
.cmp_button:hover,
.cmp_button:focus,
.cmp_form .buttons button:hover,
.cmp_form .buttons button:focus,
.page_lost_password .buttons button:hover,
.page_lost_password .buttons button:focus,
.page_search .submit button:hover,
.page_search .submit button:focus,
.block_make_submission a:hover,
.block_make_submission a:focus {
  background: var(--icm-sea);
  border-color: var(--icm-sea);
  box-shadow: none;
  color: #fff;
}
.cmp_form input[type="text"]:focus,
.cmp_form input[type="email"]:focus,
.cmp_form input[type="password"]:focus,
.cmp_form input[type="url"]:focus,
.cmp_form select:focus,
.cmp_form textarea:focus,
.page_search input[type="text"]:focus {
  border-color: var(--icm-sea);
}
/* Tables pasted into static pages scroll inside their own box on
   small screens instead of widening the page. */
.pkp_structure_main table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}
.pkp_structure_main th {
  background: var(--icm-panel);
  color: var(--icm-deep);
}
.pkp_structure_main th,
.pkp_structure_main td {
  border: 1px solid var(--icm-line);
  padding: 0.357rem 0.571rem;
}

/* ---------- 12. Footer --------------------------------------------
   Deep sea panel, same colour as the header, so the page is framed
   top and bottom in the reef's darkest blue. White text 16.1:1; the
   pale sand colour the editors set inline on the address block reads
   13.1:1 here (it was faint on the old grey). Links take the light
   water blue of the illustration, 11.2:1. */
.pkp_structure_footer_wrapper {
  background: transparent;
}
.pkp_footer_content,
.pkp_brand_footer {
  background: var(--icm-deep);
}
.pkp_footer_content {
  color: #fff;
}
.pkp_footer_content h1,
.pkp_footer_content h2,
.pkp_footer_content h3,
.pkp_footer_content h4 {
  color: #fff;
}
.pkp_footer_content a {
  color: var(--icm-surface);
}
.pkp_footer_content a:hover,
.pkp_footer_content a:focus {
  color: #fff;
}
.pkp_footer_content hr {
  border: 0;
  border-top: 1px solid var(--icm-sea);
}
.pkp_structure_footer_wrapper a:focus-visible {
  outline-color: var(--icm-accent);
}
/* The OJS/PKP credit is a dark-on-transparent PNG. Rendered white so
   it stays legible on the dark panel; the credit itself is unchanged. */
.pkp_brand_footer img {
  filter: brightness(0) invert(1);
}

/* ---------- 13. Below the 992px nav switch ------------------------
   Only colours and spacing. .pkp_site_nav_menu keeps its Default
   display/position so the hamburger toggle stays in control. */
@media (max-width: 991px) {
  /* Default positions the site name absolutely beside the toggle, sized
     for a one-line text title. The full-width logo is taller, so the
     name returns to normal flow (the wrapper then grows with the logo)
     and starts after the 2.857rem toggle, so the two never overlap. */
  body > .pkp_structure_page > .pkp_structure_head .pkp_site_name_wrapper {
    height: auto;
    min-height: 2.857rem;
  }
  body > .pkp_structure_page > .pkp_structure_head .pkp_site_name {
    position: relative;
    left: auto;
    right: auto;
    margin-left: 2.857rem;
    padding-left: 0.357rem;
    overflow: visible;
    white-space: normal;
  }
  .pkp_nav_list > li {
    background: transparent;
  }
  .pkp_nav_list ul a,
  .pkp_site_nav_menu a {
    color: #fff;
  }
  .pkp_nav_list ul a:hover,
  .pkp_nav_list ul a:focus,
  .pkp_site_nav_menu a:hover,
  .pkp_site_nav_menu a:focus {
    background: transparent;
    color: #fff;
    text-decoration: underline;
  }
  .pkp_block .title {
    font-size: 0.857rem;
  }
}

/* ---------- 14. Very narrow screens (under 360px) -----------------
   The reCAPTCHA widget on login and register is a fixed 304px iframe.
   Default pads both the content panel and the main column by 0.714rem,
   so the widget ends 4px past a 320px screen. Where that widget is
   present, only the panel padding remains (10px each side). */
@media (max-width: 359px) {
  .pkp_structure_main:has(.g-recaptcha) {
    padding-left: 0;
    padding-right: 0;
  }
}

/* ---------- 15. Homepage: journal identity table ------------------
   The "Additional Home Content" setting holds a journal identity table
   (title, ISSN, DOI, patron, advisors...) wrapped in header markup
   copied from another theme: div.pkp_structure_page >
   header#headerNavigationContainer.pkp_structure_head > div.additional_content.
   Because of those class names the parent theme painted the homepage
   poster behind it (the inline "homepage image as header" rule targets
   every .pkp_structure_head), so the table sat on the poster in olive.

   a) Order. The identity table describes the journal, so it belongs
      right after About, before Current Issue. The homepage column
      becomes a flex column and only the order changes; the DOM, and
      therefore the reading order for screen readers, stays as the
      editors wrote it. Everything not named keeps its own sequence. */
.pkp_page_index .page_index_journal {
  display: flex;
  flex-direction: column;
}
.pkp_page_index .page_index_journal > * {
  order: 3;
}
.pkp_page_index .page_index_journal > .homepage_image,
.pkp_page_index .page_index_journal > .homepage_about {
  order: 1;
}
.pkp_page_index .page_index_journal > .additional_content {
  order: 2;
  padding-bottom: 2.143rem;
}

/* b) The copied header shell becomes a plain block: no poster, no
      dark header colour, no header border. The inner .additional_content
      also received the parent theme's section padding, negative margins
      and top rule a second time; those are removed so the table lines
      up with the About text. */
.page_index_journal > .additional_content .pkp_structure_page,
.page_index_journal > .additional_content .pkp_structure_head,
.page_index_journal > .additional_content .additional_content {
  position: static;
  width: auto;
  height: auto;
  min-height: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
}
/* Empty leftovers of the copied markup: the blank paragraph before the
   shell, the empty #additional box after the table, and an announcements
   section that holds no announcement. Hidden only while they are empty
   of elements, so anything an editor adds later still shows. */
.page_index_journal > .additional_content > p:first-child:not(:has(*)):has(+ .pkp_structure_page),
.page_index_journal > .additional_content #additional:not(:has(*)),
.page_index_journal > .additional_content .pkp_structure_head > .cmp_announcements:not(:has(li, .obj_announcement_summary)) {
  display: none;
}

/* c) Heading: same size, weight, colour and rhythm as "About the
      Journal" and "Current Issue", left-aligned like them so the
      heading, the table and the text above share one left edge
      (the inline centring is overridden for that reason). */
.page_index_journal > .additional_content h1 {
  margin: -0.714rem 0 1.43rem;
  font-size: 1.285rem;
  line-height: 2.143rem;
  font-weight: 700;
  color: var(--icm-deep);
  text-align: left !important;
}

/* d) The table: white, black text, thin neutral rules, square corners.
      The inline olive background, white text and 10px radius are
      overridden here only. Label column kept narrow; values take the
      rest. Links use the theme link blue (6.2:1 on white). */
.page_index_journal > .additional_content table.data {
  display: table;
  width: 100% !important;
  margin: 0;
  border: 1px solid var(--icm-line) !important;
  border-collapse: collapse;
  border-radius: 0 !important;
  background: #fff !important;
  color: #000 !important;
}
.page_index_journal > .additional_content table.data td {
  padding: 0.571rem 0.714rem !important;
  border: 1px solid var(--icm-line);
  background: #fff;
  color: #000;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.page_index_journal > .additional_content table.data td:first-child {
  width: 10rem;
}
.page_index_journal > .additional_content table.data td > p {
  margin: 0 0 0.357rem;
}
.page_index_journal > .additional_content table.data td > p:last-child {
  margin-bottom: 0;
}
.page_index_journal > .additional_content table.data a {
  color: var(--icm-link);
  text-decoration: underline;
}
.page_index_journal > .additional_content table.data a:hover,
.page_index_journal > .additional_content table.data a:focus {
  color: var(--icm-deep);
}
/* Narrow screens: each row stacks, label above value, so nothing is
   squeezed into a 100px column or scrolls sideways. */
@media (max-width: 599px) {
  .page_index_journal > .additional_content table.data,
  .page_index_journal > .additional_content table.data tbody,
  .page_index_journal > .additional_content table.data tr,
  .page_index_journal > .additional_content table.data td {
    display: block;
    width: auto !important;
  }
  .page_index_journal > .additional_content table.data {
    border-width: 1px 0 0 !important;
  }
  .page_index_journal > .additional_content table.data tr {
    padding: 0.571rem 0;
    border-bottom: 1px solid var(--icm-line);
  }
  .page_index_journal > .additional_content table.data td {
    padding: 0 !important;
    border: 0;
  }
  .page_index_journal > .additional_content table.data td:first-child {
    margin-bottom: 0.143rem;
    font-size: 0.857rem;
  }
}

/* ---------- 16. Footer text and the duplicate OJS/PKP credit ------
   The footer content (Settings) ends with a copy of the OJS/PKP credit
   linking to another journal, and the theme then prints its own credit:
   two logos. The copy inside the content is hidden; the theme credit
   below it stays.
   Text colours on the deep sea panel #032433: body text white at 80%
   (renders #cdd3d6, 11.6:1) instead of the inline pale sand #fbe6af,
   labels and headings white (16.1:1), links light water blue (11.2:1).
   The rule is white at 18%, a quiet line that is still visible. */
.pkp_footer_content .pkp_brand_footer {
  display: none;
}
.pkp_footer_content,
.pkp_footer_content [style*="color"] {
  color: rgba(255, 255, 255, 0.8) !important;
}
.pkp_footer_content strong,
.pkp_footer_content b,
.pkp_footer_content [style*="bolder"] {
  color: #fff;
}
.pkp_footer_content a,
.pkp_footer_content a strong {
  color: var(--icm-surface);
}
.pkp_footer_content a:hover,
.pkp_footer_content a:focus {
  color: #fff;
}
.pkp_footer_content hr {
  margin: 1.43rem 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
/* Licence line: set as small print, not as a section heading. */
.pkp_footer_content h3.into-sub-title {
  margin: 0.357rem 0 0;
  font-size: 0.93rem;
  line-height: 1.43rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
}
.pkp_footer_content iframe {
  display: block;
  max-width: 100%;
  border: 0;
}