/* ==========================================================================
   Rere Āwhio — Journal of Applied Research & Practice
   Custom journal stylesheet for OJS 3.x (Default theme)
   v3 — dark masthead, light footer, revised typography

   Upload via: Settings → Website → Appearance → Advanced → Journal style sheet
   Then hard-refresh the browser (Cmd+Shift+R / Ctrl+Shift+R).

   This file is ADDITIVE. It overrides the Default theme rather than
   replacing it. Everything worth tuning is a variable in the block below.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600;6..72,700&family=Literata:opsz,wght@7..72,400;7..72,500;7..72,600&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root {
  /* Palette ---------------------------------------------------------------
     Deep forest-teal carries the text and the masthead; kōwhai yellow is the
     single accent, used only for underlines and marks — never for text, where
     it fails contrast. Paper is barely warm: comfortable for long sessions
     without tipping into sepia. */
  --ra-ink:        #16302B;   /* headings, body text, masthead background */
  --ra-ink-soft:   #4A5F59;   /* metadata, captions, muted UI */
  --ra-paper:      #FCFBF8;   /* page background, masthead text */
  --ra-surface:    #F3F1EB;   /* cards, sidebar blocks, footer, table stripes */
  --ra-rule:       #DCD8CE;   /* borders and dividers */
  --ra-accent:     #E0A526;   /* kōwhai — underlines, marks, focus */
  --ra-link:       #1B5E56;   /* link text, distinct from body ink */

  /* Type ------------------------------------------------------------------
     Newsreader: editorial serif with an optical-size axis, refined at large
     sizes without becoming decorative.
     Literata: drawn specifically for long-form reading on screen — sturdier
     at body sizes than a print serif, which is what article text needs. */
  --ra-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --ra-body:    'Literata', Georgia, serif;
  --ra-ui:      'IBM Plex Sans', system-ui, -apple-system, sans-serif;

  /* Measure — the biggest single lever on readability. ~68 characters per
     line. Raise for wider columns, lower for narrower. */
  --ra-measure: 68ch;
}

/* --------------------------------------------------------------------------
   1. Foundations
   -------------------------------------------------------------------------- */

body,
.pkp_structure_page {
  background: var(--ra-paper);
  color: var(--ra-ink);
  font-family: var(--ra-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4,
.obj_article_summary .title,
.page_index_journal h2 {
  font-family: var(--ra-display);
  color: var(--ra-ink);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* Interface elements — navigation, metadata, buttons, forms — take the sans
   face so they stay out of the reading's way. */
.pkp_navigation_primary,
.pkp_navigation_user,
.cmp_button,
.pkp_block .title,
.obj_article_summary .meta,
.pkp_footer_content,
.cmp_form label,
.pkp_page_breadcrumbs {
  font-family: var(--ra-ui);
}

/* --------------------------------------------------------------------------
   2. Masthead — dark, so nothing depends on the theme's own text colour

   The Default theme keeps its header text white. Rather than fight that,
   the masthead inverts to ink and the theme's white text works with us.
   The !important flags are deliberate: theme header selectors are specific
   enough to win otherwise.
   -------------------------------------------------------------------------- */

.pkp_structure_head,
.pkp_head_wrapper {
  background: var(--ra-ink) !important;
  border-bottom: 3px solid var(--ra-accent);
}

.pkp_structure_head,
.pkp_structure_head a,
.pkp_head_wrapper,
.pkp_head_wrapper a,
.pkp_site_name,
.pkp_site_name a,
.pkp_site_name_wrapper,
.pkp_navigation_primary > li > a,
.pkp_navigation_user > li > a {
  color: var(--ra-paper) !important;
}

.pkp_site_name,
.pkp_site_name a {
  font-family: var(--ra-display);
  font-weight: 700;
  font-size: clamp(1.375rem, 3.2vw, 2.125rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-decoration: none !important;
  display: inline-block;
  padding: 0.5rem 0;
}

/* If a logo image is used instead of text, keep it to a sane height. */
.pkp_site_name .is_img img {
  max-height: 70px;
  width: auto;
}

.pkp_navigation_primary > li > a,
.pkp_navigation_user > li > a {
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  text-decoration: none !important;
  padding: 0.75rem 1rem;
  border-bottom: 3px solid transparent;
  background: transparent !important;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_primary > li.current > a,
.pkp_navigation_user > li > a:hover {
  border-bottom-color: var(--ra-accent);
  color: var(--ra-accent) !important;
}

/* Dropdown submenus overlay the page, not the masthead — so they need the
   inverse treatment, or they open white-on-white. */
.pkp_navigation_primary ul,
.pkp_navigation_primary ul li a,
.pkp_navigation_user ul,
.pkp_navigation_user ul li a {
  background: var(--ra-paper) !important;
  color: var(--ra-ink) !important;
  border-color: var(--ra-rule);
}

.pkp_navigation_primary ul li a:hover,
.pkp_navigation_user ul li a:hover {
  background: var(--ra-surface) !important;
  color: var(--ra-link) !important;
}

/* Mobile menu toggle */
.pkp_head_wrapper .pkp_site_nav_toggle,
.pkp_site_nav_toggle {
  background: transparent !important;
  color: var(--ra-paper) !important;
  border: 1px solid rgba(252, 251, 248, 0.35);
  border-radius: 3px;
}

/* --------------------------------------------------------------------------
   3. Signature — the flowing underline

   The journal's name carries motion, so links do too: a kōwhai rule sits low
   under the text and thickens on hover. Nothing shifts position, so a page of
   citations stays still as the cursor crosses it.
   -------------------------------------------------------------------------- */

.pkp_structure_main a,
.obj_article_summary .title a {
  color: var(--ra-link);
  text-decoration: underline;
  text-decoration-color: var(--ra-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
  transition: text-decoration-thickness 120ms ease, color 120ms ease;
}

.pkp_structure_main a:hover,
.obj_article_summary .title a:hover {
  color: var(--ra-ink);
  text-decoration-thickness: 5px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--ra-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* --------------------------------------------------------------------------
   4. Reading — article and issue pages

   Constraining the measure is the single biggest readability win. Full-width
   scholarly prose on a large monitor is genuinely hard to read.
   -------------------------------------------------------------------------- */

.obj_article_details .main_entry,
.obj_article_details .abstract,
.page_index_journal .description,
.cmp_static_page .description {
  max-width: var(--ra-measure);
  font-size: 1.125rem;
  line-height: 1.75;
}

.obj_article_details .main_entry p,
.cmp_static_page .description p {
  margin-bottom: 1.15em;
}

.obj_article_details .abstract {
  border-left: 3px solid var(--ra-accent);
  padding-left: 1.5rem;
  margin-bottom: 2.5rem;
}

.obj_article_details .page_title {
  font-family: var(--ra-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 600;
  max-width: 22ch;
  margin-bottom: 0.5rem;
}

.obj_article_details .authors,
.obj_article_details .item.published,
.obj_article_details .item.doi {
  font-family: var(--ra-ui);
  font-size: 0.9375rem;
  color: var(--ra-ink-soft);
}

/* Table of contents — one rule per article. The dividers encode real
   structure rather than decorating. */
.obj_issue_toc .articles > li,
.obj_article_summary {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--ra-rule);
}

.obj_article_summary .title {
  font-size: 1.3125rem;
  line-height: 1.3;
  margin-bottom: 0.35rem;
}

.obj_article_summary .authors {
  font-family: var(--ra-ui);
  font-size: 0.9375rem;
  color: var(--ra-ink-soft);
}

/* --------------------------------------------------------------------------
   5. Buttons and forms
   -------------------------------------------------------------------------- */

.cmp_button,
.obj_galley_link,
.pkp_button {
  background: var(--ra-ink);
  color: var(--ra-paper);
  font-family: var(--ra-ui);
  font-weight: 500;
  font-size: 0.9375rem;
  border: none;
  border-radius: 3px;
  padding: 0.6rem 1.25rem;
  text-decoration: none !important;
  transition: background 120ms ease;
}

.cmp_button:hover,
.obj_galley_link:hover,
.pkp_button:hover {
  background: var(--ra-link);
  color: var(--ra-paper);
}

.cmp_form input[type="text"],
.cmp_form input[type="email"],
.cmp_form input[type="password"],
.cmp_form textarea,
.cmp_form select {
  border: 1px solid var(--ra-rule);
  border-radius: 3px;
  padding: 0.5rem 0.75rem;
  font-family: var(--ra-ui);
  font-size: 0.9375rem;
  background: #FFFFFF;
  color: var(--ra-ink);
}

/* --------------------------------------------------------------------------
   6. Sidebar blocks
   -------------------------------------------------------------------------- */

.pkp_block {
  background: var(--ra-surface);
  border: 1px solid var(--ra-rule);
  border-radius: 4px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.pkp_block .title {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ra-ink-soft);
  margin-bottom: 0.75rem;
}

/* --------------------------------------------------------------------------
   7. Footer — light

   FIX (v3): v2 used a dark footer, which made the PKP mark invisible — the
   logo is a dark PNG with no light variant shipped. A light footer lets the
   mark render as intended and needs no image filtering. The kōwhai rule at
   the top ties it back to the masthead.

   For a DARK footer instead, see the commented block at the end of this file.
   -------------------------------------------------------------------------- */

.pkp_structure_footer_wrapper {
  background: var(--ra-surface);
  border-top: 3px solid var(--ra-accent);
  margin-top: 4rem;
}

.pkp_structure_footer_wrapper,
.pkp_structure_footer_wrapper p,
.pkp_structure_footer_wrapper div,
.pkp_structure_footer_wrapper span,
.pkp_footer_content,
.pkp_footer_content p {
  color: var(--ra-ink) !important;
}

.pkp_footer_content {
  font-size: 0.9375rem;
  line-height: 1.6;
}

.pkp_structure_footer_wrapper a {
  color: var(--ra-link) !important;
  text-decoration: underline;
  text-decoration-color: var(--ra-accent);
  text-underline-offset: 0.2em;
}

/* --------------------------------------------------------------------------
   8. PKP attribution — reduced, not removed

   PKP asks that self-hosted journals keep the attribution visible. Shrinking
   it respects that while stopping it dominating the sidebar. Adjust
   max-width to taste; 90px is roughly half the default.
   -------------------------------------------------------------------------- */

.pkp_brand_footer,
.pkp_block.pkp_brand_footer {
  background: transparent;
  border: none;
  padding: 0.5rem 0;
  opacity: 1;
}

.pkp_brand_footer img,
.pkp_block.pkp_brand_footer img {
  max-width: 90px;
  height: auto;
  opacity: 0.6;
  transition: opacity 150ms ease;
}

.pkp_brand_footer img:hover {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   9. Tables and figures
   -------------------------------------------------------------------------- */

.main_entry table,
.abstract table {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--ra-ui);
  font-size: 0.9375rem;
  margin: 1.5rem 0;
}

.main_entry table th {
  text-align: left;
  font-weight: 600;
  border-bottom: 2px solid var(--ra-ink);
  padding: 0.6rem 0.75rem;
}

.main_entry table td {
  border-bottom: 1px solid var(--ra-rule);
  padding: 0.6rem 0.75rem;
}

.main_entry table tbody tr:nth-child(even) {
  background: var(--ra-surface);
}

.main_entry figure figcaption {
  font-family: var(--ra-ui);
  font-size: 0.875rem;
  color: var(--ra-ink-soft);
  margin-top: 0.5rem;
}

/* --------------------------------------------------------------------------
   10. Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  body,
  .pkp_structure_page { font-size: 1rem; }

  .obj_article_details .main_entry,
  .obj_article_details .abstract { font-size: 1.0625rem; }

  .obj_article_details .abstract {
    padding-left: 1rem;
    margin-bottom: 1.75rem;
  }

  .pkp_block { padding: 1rem; }

  /* Stacked mobile nav sits on the dark masthead, so keep it light. */
  .pkp_navigation_primary > li > a,
  .pkp_navigation_user > li > a {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid rgba(252, 251, 248, 0.15);
  }
}

/* ==========================================================================
   OPTIONAL — dark footer variant

   To use a dark footer instead of the light one in section 7, uncomment
   everything below. The PKP mark is a dark PNG, so it has to be inverted
   with a CSS filter to stay visible against ink.
   ==========================================================================

.pkp_structure_footer_wrapper {
  background: var(--ra-ink);
  border-top: 3px solid var(--ra-accent);
}

.pkp_structure_footer_wrapper,
.pkp_structure_footer_wrapper p,
.pkp_structure_footer_wrapper div,
.pkp_structure_footer_wrapper span,
.pkp_footer_content,
.pkp_footer_content p {
  color: var(--ra-surface) !important;
}

.pkp_structure_footer_wrapper a {
  color: var(--ra-accent) !important;
  text-decoration-color: rgba(224, 165, 38, 0.4);
}

.pkp_structure_footer_wrapper .pkp_brand_footer img,
.pkp_structure_footer_wrapper img[src*="pkp"] {
  filter: invert(1) brightness(1.9);
  opacity: 0.7;
}

*/