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

/* ==========================================================================
   IPSF Journal theme for OJS 3.x (Default Theme)
   Built to follow the official IPSF Branding Book v2.3.
   --------------------------------------------------------------------------
   HOW TO USE
   1. Settings -> Website -> Appearance -> Advanced -> Custom Stylesheet
   2. Upload this file. Save. Reload the site.
   3. Recolor the whole site from one line: --teal below.

   BRAND MAPPING (Branding Book -> web)
   Colours  : primary  #08aea5 teal, #267475 dark teal, #88ccd5 light cyan
              secondary #fde358 yellow, #d7660a orange, #a4a3a4 grey
              accessory #ffffff white, #292929 near-black
   Fonts    : Myriad Pro/Montserrat -> Montserrat (display, web-safe equivalent)
              Roboto                 -> Roboto (UI / nav / labels)
              Tahoma/Proxima Nova    -> Lato + Tahoma fallback (body / articles)
              (Myriad Pro & Proxima Nova are not web-embeddable, so their
               brand-listed companions Montserrat & Lato are used.)
   ========================================================================== */

:root {
  /* ---- IPSF identity colours (exact brand hex) ---- */
  --teal:       #08aea5;   /* primary  */
  --teal-deep:  #267475;   /* dark teal */
  --cyan:       #88ccd5;   /* light cyan */
  --yellow:     #fde358;   /* secondary */
  --orange:     #d7660a;   /* secondary */
  --grey:       #a4a3a4;   /* secondary */
  --near-black: #292929;   /* accessory */

  /* ---- Derived accents (all keyed off --teal, so swap one line) ---- */
  --accent:          var(--teal);
  --accent-deep:     var(--teal-deep);
  --link:            #1c7f7a;                                  /* teal, AA on white */
  --accent-soft:     color-mix(in oklab, var(--teal) 12%, white);
  --accent-tint:     color-mix(in oklab, var(--teal) 22%, white);
  --accent-contrast: #ffffff;

  /* ---- Neutrals: near-white tinted toward teal (never pure #fff/#000) ---- */
  --paper:    oklch(0.992 0.003 200);
  --surface:  oklch(0.972 0.006 200);
  --surface-2:oklch(0.948 0.008 200);
  --ink:      #292929;
  --ink-soft: #585a5b;
  --ink-faint:#7d8081;
  --line:     oklch(0.905 0.006 200);
  --line-2:   oklch(0.845 0.009 200);

  /* ---- Type ---- */
  --font-display: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --font-ui:      "Roboto", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Lato", "Tahoma", "Segoe UI", system-ui, sans-serif;

  /* ---- Header banner (your homepage image is used as the header) ---- */
  --header-image-pos: center 55%;  /* change the % to frame a different slice of the cover */
  --header-band:      5.5rem;      /* taller banner: more image shown between logo and nav */

  /* ---- Home image, only if you later switch OFF "use image as header" ---- */
  --home-img-height: 340px;   /* taller = bigger banner */
  --home-img-shift:  14px;    /* bigger = sits higher, tucked under the header */

  --measure: 72ch;
  --radius: 10px;
  --radius-sm: 7px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);   /* ease-out-quint */
}

/* ==========================================================================
   Motion keyframes
   ========================================================================== */
@keyframes ipsf_rise   { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ipsf_reveal { from { opacity: 0; transform: scale(1.04); }      to { opacity: 1; transform: none; } }

/* ==========================================================================
   1. Base
   ========================================================================== */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body.pkp_page {
  font-family: var(--font-body) !important;
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--ink) !important;
  background: var(--paper) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.pkp_structure_page {
  background: var(--paper) !important;
  display: flex;               /* lets the footer sit at the bottom via margin-top:auto */
  flex-direction: column;
  min-height: 100vh;
}

::selection { background: var(--accent-tint); color: var(--accent-deep); }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px;
    transition: color 0.18s var(--ease); }
a:hover { color: var(--teal); }

:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 3px; }

img { max-width: 100%; height: auto; }

h1, h2, h3, h4,
.pkp_structure_main h1, .pkp_structure_main h2, .pkp_structure_main h3, .pkp_structure_main h4 {
  font-family: var(--font-display) !important;
  color: var(--ink) !important;
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.012em;
}
.pkp_structure_main h1 { font-size: clamp(2rem, 1.5rem + 2vw, 2.85rem); margin-bottom: 0.55em; }
.pkp_structure_main h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); }
.pkp_structure_main h3 { font-size: 1.3rem; font-weight: 600; }

/* Main page heading gets a short brand underline */
.pkp_structure_main > h1:first-child,
.page_title {
  position: relative;
  padding-bottom: 0.45rem;
}
.pkp_structure_main > h1:first-child::after,
.page_title::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 64px; height: 4px; border-radius: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--teal));
}

/* ==========================================================================
   2. Header  (light logo area + teal-gradient nav bar, IPSF wave motif)
   ========================================================================== */
/* The header carries your homepage image as a full-bleed background banner
   ("Use homepage image as header" is ON). We must NOT repaint it, so we set
   ONLY background-color (a fallback for any page without the image) and the
   position; we never touch the `background` / `background-image` shorthand. */
.pkp_structure_head {
  position: relative;
  z-index: 100;                /* keep the header + its dropdowns above everything */
  isolation: isolate;
  background-color: var(--paper) !important;            /* fallback only */
  background-position: var(--header-image-pos) !important;
  border-bottom: 0;
}
/* Brand accent strip pinned to the very top edge */
.pkp_structure_head::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 3;
  background: linear-gradient(90deg, var(--cyan), var(--teal), var(--teal-deep));
}
/* Gentle teal scrim: keeps the logo plaque + white nav legible while the
   image stays clearly visible (heavier only at the very top and bottom). */
.pkp_structure_head::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(18,52,53,0.26) 0%, rgba(18,52,53,0.06) 30%,
    rgba(18,52,53,0.0) 58%, rgba(18,52,53,0.03) 100%);
}
.pkp_head_wrapper {
  position: relative; z-index: 1;
  padding-top: 1.6rem; padding-bottom: 0;
}
/* Opens a band of the banner image between the logo and the nav bar */
.pkp_site_nav_menu { margin-top: var(--header-band); }

/* Logo on a white plaque (the brand permits the colour logo on white); keeps
   the teal emblem legible over the teal science image. */
.pkp_site_name {
  display: inline-block;
  background: #ffffff;
  padding: 10px 16px;
  border-radius: var(--radius);
  box-shadow: 0 14px 32px -14px rgba(20,55,56,0.6);
}
.pkp_site_name img { max-height: 82px; width: auto; display: block; }
.pkp_site_name .is_text,
.pkp_site_name a {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.05rem) !important;
  letter-spacing: -0.02em;
  color: var(--ink) !important;
}

/* User nav (Register / Login) sits over the image: white + readable */
.pkp_navigation_user { font-family: var(--font-ui) !important; }
.pkp_navigation_user > li > a {
  font-size: 0.84rem; font-weight: 600;
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.45);
}
.pkp_navigation_user > li > a:hover { color: var(--cyan) !important; }

/* --- The primary navigation bar --------------------------------------------
   The visible teal bar is .pkp_navigation_primary_row (it holds the primary
   menu + search). The user menu is a separate sibling, so tinting the row only
   colours the bar. We paint the row and clear every other nav background so the
   theme's flat teal can't sit on top of our gradient. ----------------------- */
.pkp_site_nav_menu .pkp_navigation_primary_row {
  background:
    radial-gradient(130% 200% at 8% -60%,  rgba(136,204,213,0.45), transparent 42%),
    radial-gradient(120% 180% at 98% 150%, rgba(15,40,41,0.40),    transparent 46%),
    linear-gradient(102deg, var(--teal-deep) 0%, #168f88 60%, #0a9f97 100%) !important;
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: 0 10px 26px -18px rgba(38,116,117,0.7);
}
.pkp_site_nav_menu,
.pkp_navigation_primary_wrapper,
.pkp_navigation_primary { background: transparent !important; }

/* Top-level nav links: white text on teal, animated cyan underline on hover */
.pkp_navigation_primary_row a {
  font-family: var(--font-ui) !important;
  font-weight: 500; font-size: 0.95rem;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.20);
}
.pkp_navigation_primary > li > a {
  position: relative !important;
  padding: 0.85rem 1rem !important;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: background 0.2s var(--ease);
}
.pkp_navigation_primary > li > a::after {
  content: ""; position: absolute; left: 1rem; right: 1rem; bottom: 0.5rem;
  height: 3px; border-radius: 2px; background: var(--cyan);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.32s var(--ease);
}
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus { background: rgba(255,255,255,0.12) !important; }
.pkp_navigation_primary > li > a:hover::after,
.pkp_navigation_primary > li > a:focus::after,
.pkp_navigation_primary > li.current > a::after,
.pkp_navigation_primary > li[aria-current] > a::after { transform: scaleX(1); }

/* Search link in the bar */
.pkp_navigation_search_wrapper .pkp_search { font-family: var(--font-ui) !important; font-weight: 500; }
.pkp_navigation_search_wrapper .pkp_search:hover { color: var(--cyan) !important; }

/* Dropdown submenu (e.g. About): dark text on a light panel, never white-on-white */
.pkp_navigation_primary li ul {
  background: var(--paper) !important;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: 0 14px 30px -14px rgba(38,116,117,0.45);
  padding: 0.3rem 0;
  z-index: 200;                /* above page content */
}
.pkp_navigation_primary li ul li a {
  color: var(--ink) !important; text-shadow: none !important;
  padding: 0.5rem 1rem !important;
}
.pkp_navigation_primary li ul li a:hover {
  background: var(--accent-soft) !important; color: var(--teal-deep) !important;
}

/* ==========================================================================
   3. Breadcrumbs
   ========================================================================== */
.cmp_breadcrumbs, .cmp_breadcrumbs ol {
  font-family: var(--font-ui) !important;
  font-size: 0.82rem;
  color: var(--ink-faint) !important;
}
.cmp_breadcrumbs a { color: var(--ink-soft) !important; }
.cmp_breadcrumbs a:hover { color: var(--teal) !important; }
.cmp_breadcrumbs .separator { color: var(--line-2); }

/* ==========================================================================
   4. Main content + reading measure + animation
   ========================================================================== */
.pkp_structure_content { padding-top: 2.2rem; padding-bottom: 3rem; }
.pkp_structure_main  { animation: ipsf_rise 0.55s var(--ease) both; }
.pkp_structure_sidebar { animation: ipsf_rise 0.55s var(--ease) 0.08s both; }

.pkp_structure_main p, .pkp_structure_main li { color: var(--ink); }
.pkp_structure_main .item.abstract,
.obj_article_details .main_entry,
.static_page_content { max-width: var(--measure); }

hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

/* Notifications / callouts: replace OJS left-stripe with a full tinted box */
.pkp_notification, .cmp_notification, .pkpNotification,
.pkp_structure_main .description {
  border: 1px solid var(--line-2) !important;
  border-left-width: 1px !important;
  border-radius: var(--radius) !important;
  background: var(--accent-soft) !important;
  color: var(--ink) !important;
  padding: 1rem 1.25rem !important;
}

/* ==========================================================================
   5. Homepage image  (kept, made taller, lifted higher under the header)
   ========================================================================== */
.pkp_page_index .pkp_structure_content { padding-top: 1.4rem; }

.homepage_image, .homepage_intro img,
.pkp_page_index .pkp_structure_main > img,
.homepage_image img {
  display: block;
  width: 100%;
}
.homepage_image img,
.homepage_intro img,
.pkp_page_index .pkp_structure_main > img {
  min-height: var(--home-img-height);
  max-height: var(--home-img-height);
  object-fit: cover;
  border-radius: var(--radius);
  margin-top: calc(-1 * var(--home-img-shift));
  margin-bottom: 1.75rem;
  box-shadow: 0 16px 38px -18px rgba(38,116,117,0.45);
  animation: ipsf_reveal 0.9s var(--ease) both;
}

/* ==========================================================================
   6. Homepage listings: issue TOC, sections, article summaries
   ========================================================================== */
.obj_issue_toc > .heading, .obj_issue_toc h2,
.sections .section > h2 {
  font-family: var(--font-display) !important;
  font-weight: 700; color: var(--ink) !important;
  padding-bottom: 0.35rem; border-bottom: 3px solid var(--teal);
  display: inline-block;
}
.obj_article_summary {
  border-bottom: 1px solid var(--line);
  padding: 1.15rem 0.4rem;
  border-radius: var(--radius-sm);
  transition: background 0.22s var(--ease);
}
.obj_article_summary:hover { background: var(--accent-soft); }
.obj_article_summary .title a {
  font-family: var(--font-display) !important;
  font-weight: 600; font-size: 1.18rem;
  color: var(--ink) !important; text-decoration: none;
}
.obj_article_summary .title a:hover { color: var(--teal-deep) !important; }
.obj_article_summary .authors, .obj_article_summary .meta {
  font-family: var(--font-ui) !important; font-size: 0.88rem; color: var(--ink-soft) !important;
}

/* ==========================================================================
   7. Announcements
   ========================================================================== */
.cmp_announcement {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
  transition: transform 0.24s var(--ease), box-shadow 0.24s var(--ease);
}
.cmp_announcement:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -20px rgba(38,116,117,0.5);
}
.cmp_announcement .title { font-family: var(--font-display) !important; font-weight: 700; color: var(--ink) !important; }
.cmp_announcement .date  { font-family: var(--font-ui) !important; font-size: 0.82rem; color: var(--ink-faint) !important; }

/* ==========================================================================
   8. Sidebar blocks + search
   ========================================================================== */
.pkp_block { margin-bottom: 2rem; }
.pkp_block .pkp_block_title, .pkp_block .title {
  font-family: var(--font-ui) !important;
  font-weight: 700; font-size: 0.74rem;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--teal-deep) !important;
  padding-bottom: 0.5rem; margin-bottom: 0.8rem;
  border-bottom: 2px solid var(--accent-tint);
}
.pkp_block_content { font-size: 0.95rem; }
.pkp_block_content ul li { padding: 0.22rem 0; }

/* ==========================================================================
   9. Buttons + galley (PDF/HTML) links
   ========================================================================== */
.pkp_button, a.cmp_button, button.submitFormButton,
.pkp_form button[type="submit"], input[type="submit"] {
  font-family: var(--font-ui) !important; font-weight: 500; letter-spacing: 0.01em;
  color: var(--accent-contrast) !important;
  background: var(--teal) !important;
  border: 1px solid var(--teal) !important;
  border-radius: var(--radius-sm) !important;
  padding: 0.58rem 1.15rem !important;
  box-shadow: 0 6px 16px -10px rgba(8,174,165,0.9) !important;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease) !important;
}
.pkp_button:hover, a.cmp_button:hover, button.submitFormButton:hover,
.pkp_form button[type="submit"]:hover, input[type="submit"]:hover {
  background: var(--teal-deep) !important; border-color: var(--teal-deep) !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 22px -12px rgba(38,116,117,0.85) !important;
}

.galleys_links .obj_galley_link, .galleys .obj_galley_link {
  display: inline-flex; align-items: center;
  font-family: var(--font-ui) !important; font-weight: 500; font-size: 0.85rem;
  color: var(--teal-deep) !important;
  background: var(--accent-soft) !important;
  border: 1px solid transparent; border-radius: 999px;
  padding: 0.34rem 0.9rem !important; text-decoration: none;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
.galleys_links .obj_galley_link:hover, .galleys .obj_galley_link:hover {
  background: var(--teal) !important; color: #fff !important; transform: translateY(-1px);
}

/* ==========================================================================
   10. Forms + inputs
   ========================================================================== */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="url"], input[type="number"], textarea, select {
  font-family: var(--font-ui) !important; font-size: 0.95rem;
  color: var(--ink) !important; background: var(--paper) !important;
  border: 1px solid var(--line-2) !important; border-radius: var(--radius-sm) !important;
  padding: 0.55rem 0.7rem !important;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus,
input[type="search"]:focus, input[type="url"]:focus, input[type="number"]:focus,
textarea:focus, select:focus {
  border-color: var(--teal) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important; outline: none !important;
}

/* ==========================================================================
   11. Article / reading page
   ========================================================================== */
.page_title h1, .obj_article_details .page_title {
  font-family: var(--font-display) !important; font-weight: 700 !important; line-height: 1.14;
}
.obj_article_details .item .label {
  font-family: var(--font-ui) !important; font-size: 0.76rem;
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
  color: var(--ink-faint) !important;
}
.obj_article_details .item.abstract { line-height: 1.7; }
.obj_article_details .item.doi a { color: var(--teal) !important; }

/* ==========================================================================
   12. Pagination + tabs
   ========================================================================== */
.cmp_pagination { font-family: var(--font-ui) !important; color: var(--ink-soft); }
.cmp_pagination a { color: var(--teal) !important; }
.pkp_nav_list .ui-tabs-active a, .tabs .ui-state-active a {
  color: var(--teal-deep) !important; border-bottom: 3px solid var(--teal) !important;
}

/* ==========================================================================
   13. Footer  (deep-teal gradient bookend, mirrors the header)
   ========================================================================== */
.pkp_structure_footer_wrapper {
  margin-top: auto;                          /* sticks the footer to the bottom */
  background: var(--surface) !important;     /* light + teal-tinted, not a heavy dark slab */
  color: var(--ink-soft) !important;
  border-top: 3px solid var(--teal);
}
.pkp_structure_footer {
  position: relative;
  padding: 2.25rem 0 1.25rem;
  background:
    radial-gradient(70% 160% at 100% 0%,
      color-mix(in oklab, var(--cyan) 30%, transparent), transparent 62%) !important;
}
.pkp_footer_content {
  font-family: var(--font-ui) !important; font-size: 0.92rem;
  color: var(--ink-soft) !important;
}
.pkp_footer_content a { color: var(--link) !important; text-underline-offset: 2px; }
.pkp_footer_content a:hover { color: var(--teal) !important; }
/* PKP/OJS brand strip: its logo art is dark, so keep it on the light ground */
.pkp_brand_footer {
  background: transparent !important;
  font-family: var(--font-ui) !important; font-size: 0.82rem;
  color: var(--ink-faint) !important;
  padding-top: 0.5rem;
}
.pkp_brand_footer a { color: var(--ink-soft) !important; }
.pkp_brand_footer img { opacity: 0.8; }

/* ==========================================================================
   14. Small screens
   ========================================================================== */
@media (max-width: 768px) {
  body.pkp_page { font-size: 1rem; }
  .pkp_structure_content { padding-top: 1.3rem; }
  .pkp_site_name img { max-height: 60px; }
  :root { --home-img-height: 220px; --home-img-shift: 8px; }
  .pkp_navigation_primary_wrapper, .pkp_site_nav_menu { border-radius: 0; }
}

/* ==========================================================================
   15. Respect reduced-motion preferences (accessibility / conformance)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
}