/* Palmyra Academic Press — OJS theme.
 *
 * A restyle of the stock Default theme, not a replacement for it. Selectors
 * therefore target the markup OJS already emits (.pkp_*, .obj_*, .cmp_*).
 *
 * Every value below resolves to a token in tokens.css. If you find yourself
 * typing a hex code here, stop: add the token, run brand/check_contrast.py,
 * then use it. The reasoning behind each colour is in brand/BRAND.md.
 */

/* ---------------------------------------------------------------- ground - */

body,
.pkp_structure_page {
  background: var(--pal-limestone);
  color: var(--pal-ink);
  font-family: var(--pal-font-body);
  font-size: var(--pal-text-base);
  line-height: var(--pal-leading-body);
}

/* Nothing may make the page wider than the screen. A single over-long
   element used to do exactly that and silently clipped every line of text on
   a phone. This is the guard, not the fix — fix the element too. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* DOIs, ORCIDs and raw URLs are long unbreakable strings and appear on every
   article page. */
.pkp_structure_main a,
.pkp_structure_main p,
.pkp_structure_main li {
  overflow-wrap: break-word;
}

/* OJS sets its own stacks on a lot of chrome; take the UI face back so DOIs,
   ORCIDs and ISSNs render in the disambiguated face they were chosen for. */
.pkp_navigation_primary,
.pkp_navigation_user,
.pkp_search,
button,
input,
select,
textarea,
.pkp_block,
.obj_article_summary .meta,
.article_meta,
table {
  font-family: var(--pal-font-ui);
}

/* The parent theme sets Noto Sans on `.pkp_structure_main h1|h2|h3` and on the
   various `.title` elements. A bare `h1` selector loses to those on
   specificity and the headings silently stay sans — which is exactly what
   happened on the first deploy, and is only visible by looking at the page.
   Match their specificity, and enumerate the same selectors they use. */
h1, h2, h3, h4, h5, h6,
.pkp_structure_main h1,
.pkp_structure_main h2,
.pkp_structure_main h3,
.pkp_structure_main h4,
.pkp_structure_main h5,
.pkp_structure_main h6,
.cmp_breadcrumbs .current h1,
.obj_article_summary > .title,
.obj_issue_summary .title,
.page_title {
  font-family: var(--pal-font-display);
  color: var(--pal-ink);
  line-height: var(--pal-leading-tight);
  font-weight: 600;
  letter-spacing: 0.005em;
}

.pkp_structure_main h1,
.pkp_structure_main h2 { font-size: var(--pal-text-2xl); }
.pkp_structure_main h3 { font-size: var(--pal-text-xl); }

.obj_article_summary > .title a,
.obj_issue_summary .title a,
.pkp_structure_main h2 a {
  color: var(--pal-palm);
  text-decoration: none;
}

/* --------------------------------------------------------------- masthead - */

/* The colonnade: a deep band of stone with the imprint cut into it. */
.pkp_structure_head {
  background: var(--pal-palm);
  border-bottom: 3px solid var(--pal-brass);
}

.pkp_site_name,
.pkp_site_name .is_img img {
  padding-top: var(--pal-space-3);
  padding-bottom: var(--pal-space-2);
}

/* The Zenobia medallion, set beside the wordmark.
 *
 * Applied as a CSS mask rather than an <img> so the mark inherits the text
 * colour: limestone on the palm masthead, ink on a light surface, brass when
 * it needs to. An external SVG cannot inherit `currentColor` through <img>,
 * and duplicating the file once per colour is how brand assets drift apart. */
.pkp_site_name a::before,
.pkp_site_name .is_text::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 2.6em;
  height: 2.6em;
  margin-right: 0.6em;
  background-color: currentColor;
  -webkit-mask: url("logo/zenobia-mark.svg") center / contain no-repeat;
  mask: url("logo/zenobia-mark.svg") center / contain no-repeat;
}

/* One mark per masthead. Both selectors above exist because OJS renders the
   site name as a bare <a> at site level and wraps it in .is_text inside a
   journal — without this, a journal page would show two. */
.pkp_site_name a:has(.is_text)::before {
  content: none;
}

.pkp_site_name .is_text,
.pkp_site_name a {
  font-family: var(--pal-font-inscription);
  font-weight: 700;
  /* Inscriptional capitals, spaced as they would be cut in stone. */
  text-transform: uppercase;
  color: var(--pal-limestone);
  text-decoration: none;

  /* "PALMYRA JOURNAL OF BUSINESS STRATEGY & INNOVATION" in spaced caps is
     wider than a phone. At a fixed 25px it pushed the whole page wider than
     the viewport and clipped every line of body text off the right edge —
     invisible at 1440px, obvious the moment the page was shot at 390px.
     Scale with the viewport, tighten the tracking as it shrinks, and let it
     wrap onto a second line rather than widen the page. */
  font-size: clamp(1rem, 3.6vw, var(--pal-text-xl));
  letter-spacing: clamp(0.04em, 0.5vw, 0.12em);
  display: inline-block;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
  line-height: 1.25;
}

.pkp_site_name .is_text:hover,
.pkp_site_name a:hover {
  color: #fff;
}

/* Below 768px the parent theme squeezes the journal name into a fixed 40px
   band beside the hamburger, with `white-space: nowrap; overflow: hidden;
   text-overflow: ellipsis` — it is built to truncate. Left alone, "Palmyra
   Journal of Business Strategy & Innovation" became "PALMYRA JOURNAL OF
   BUSINE…"; with wrapping added but the band still 40px tall, the second line
   was sheared off instead.
   For a journal the full title is the one thing in the masthead that must
   survive, so grow the band rather than cut the name. The hamburger stays
   absolutely positioned at top-left; the text is padded clear of it. */
@media (max-width: 767px) {
  .pkp_site_name_wrapper {
    height: auto;
  }

  .pkp_site_name {
    position: static;
    left: auto;
    right: auto;
    padding-left: 3.4rem;
    padding-right: 0.714rem;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    min-height: 2.857rem;
    display: flex;
    align-items: center;
  }

  .pkp_site_name > a {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }

  .pkp_site_name .is_text,
  .pkp_site_name a {
    /* Tighter tracking buys roughly one word per line at this width. */
    letter-spacing: 0.05em;
    font-size: 0.95rem;
  }
}

.pkp_navigation_primary_wrapper,
.pkp_navigation_primary_row {
  background: var(--pal-palm-deep);
}

.pkp_navigation_primary > li > a,
.pkp_navigation_user > li > a {
  font-family: var(--pal-font-ui);
  color: var(--pal-limestone);
  text-transform: none;
  letter-spacing: 0.02em;
  transition: background var(--pal-transition), color var(--pal-transition);
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_user > li > a:hover,
.pkp_navigation_user > li > a:focus {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

/* ------------------------------------------------------------------ text - */

a {
  color: var(--pal-palm);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--pal-transition);
}

a:hover,
a:focus {
  color: var(--pal-brass);
}

/* Keyboard focus must be obvious. Two-tone so it survives on both the
   limestone ground and the palm masthead. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--pal-brass);
  outline-offset: 2px;
  border-radius: var(--pal-radius);
}

/* The parent theme frames the content column with two absolutely-positioned
   1px #ddd rules. Keep them, they are the colonnade's vertical rhythm, but in
   the brand's stone rather than a grey that belongs to no palette.

   The parent positions the right-hand rule at a HARD-CODED left offset equal to
   the old column width (`left: @screen-desktop-container - @sidebar-width`).
   Once the sidebar column is reclaimed below, that offset strands the rule in
   the middle of the text. Anchor both rules to the column's own box instead, so
   they follow whatever width the column actually has. */
.pkp_structure_main {
  position: relative;
}

.pkp_structure_main::before,
.pkp_structure_main::after {
  background: var(--pal-border);
}

/* The parent already detects the no-sidebar case and centres the column, but it
   then insets the two rules by a fixed 150px:

     .pkp_structure_main:first-child:last-child:before { left: 150px }
     .pkp_structure_main:first-child:last-child:after  { left:auto; right:150px }

   That inset was calibrated for its own 860px column. Against the narrower
   reading column set below, 150px lands the rules inside the text. The
   selector is specificity 0,3,0, so a plain `.pkp_structure_main::after`
   cannot override it. Match the specificity and anchor the rules to the
   column's own edges, whatever width it ends up. */
.pkp_structure_main:first-child:last-child::before {
  left: 0;
  right: auto;
}

.pkp_structure_main:first-child:last-child::after {
  left: auto;
  right: 0;
}

/* ------------------------------------------------- layout balance (fix) - */
/* The parent theme reserves a sidebar column on every page. Palmyra renders no
   sidebar anywhere: `has_sidebar` and `pkp_sidebar` are both absent from the
   markup on the press home, both journal homes, article pages and policy
   pages. The reserved column was therefore left empty, and at 1440px the main
   column sat 860px inside a 1160px container, leaving roughly 300px of dead
   space down the right of every page. It read as a broken layout rather than a
   restrained one. Reclaim the column. */
/* Scoped to desktop deliberately. The dead column only exists where the parent
   sets an explicit `width: 860px`, which it does inside its own min-width media
   queries. An unscoped override leaked into mobile, where the parent leaves the
   column auto-width on purpose, and forced it to 100% of a container wider than
   a 390px viewport. The page then overflowed and `overflow-x: hidden` silently
   clipped every line instead of wrapping it. Match the parent's breakpoint. */
@media (min-width: 992px) {
  .pkp_structure_main {
    width: auto;
    max-width: none;
    float: none;
  }
}

/* Reading measure. An article body running the full width of a 1440px screen
   is unreadable no matter how good the type is.

   On prose pages the measure is applied to the whole main column, not to the
   paragraphs alone. Constraining only the prose would leave headings, metadata
   and rules running full width while the text sat narrow beneath them, so
   nothing would share a left edge. Constraining the column keeps one edge for
   everything and centres the block, which is what makes it look deliberate
   rather than unfinished. */
@media (min-width: 992px) {
  .pkp_page_index .pkp_structure_main,
  .pkp_page_about .pkp_structure_main,
  .pkp_page_article .pkp_structure_main,
  .pkp_page_issue .pkp_structure_main,
  .pkp_page_announcement .pkp_structure_main,
  .pkp_page_editorialTeam .pkp_structure_main {
    max-width: var(--pal-measure-page);
    margin-inline: auto;
  }
}

/* Listing pages keep the wider column: an issue table of contents and a set of
   article cards are scanned, not read line by line. Prose inside them still
   takes the narrow measure. */
.obj_article_details .abstract,
.obj_article_details .main_entry,
.page_about .about_content,
.cmp_page_content,
.additional_content {
  max-width: var(--pal-measure);
}

/* ----------------------------------------------------------------- cards - */

.pkp_block,
.obj_article_summary,
.obj_issue_summary,
.cmp_announcements .obj_announcement_summary {
  background: var(--pal-card);
  border: var(--pal-rule);
  border-radius: var(--pal-radius);
  padding: var(--pal-space-3);
}

.pkp_block .title,
.obj_issue_summary .title {
  font-family: var(--pal-font-inscription);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--pal-text-sm);
  font-weight: 700;
  color: var(--pal-stone);
  border-bottom: var(--pal-rule);
  padding-bottom: var(--pal-space-1);
}

/* Metadata — DOI, dates, page ranges, author affiliations. */
.obj_article_summary .meta,
.obj_article_summary .authors,
.article_meta,
.date_published,
.published,
.pages,
.doi {
  color: var(--pal-ink-muted);
  font-size: var(--pal-text-sm);
}

/* ------------------------------------------- issue table of contents - */
/* Four separate margins stacked up between the issue's published date and the
   first article, roughly 149px of empty page, so the current issue read as two
   disconnected blocks with a hole between them:
       .obj_issue_toc .published  margin  1.43rem
       .section                   margin  2.143rem
       .section:before            top     45px      (the tab rule)
       .obj_issue_toc .articles   margin  calc(2.143rem + 1.43rem)
   The 45px belongs to the design: it is what lets the section label sit ON the
   horizontal rule like a tab. The other three are simply additive. Tighten
   those and leave the tab alone. */
.obj_issue_toc .published {
  margin: var(--pal-space-1) 0 var(--pal-space-2);
}

/* The section box also carries 2.143rem of its own padding above the tab rule.
   Halve it on the first section only, so the list starts nearer the issue
   metadata without collapsing the tab onto it. */
.obj_issue_toc .sections .section:first-child {
  margin-top: 0;
  padding-top: var(--pal-space-1);
}

.obj_issue_toc .articles {
  margin-top: var(--pal-space-2);
}

/* Sections after the first keep real separation between them. */
.obj_issue_toc .sections .section + .section {
  margin-top: var(--pal-space-6);
}

/* --------------------------------------------------------------- buttons - */

/* OJS 3.5's form submit is a bare `<button class="submit" type="submit">`,
   and the parent theme paints it grey via `.cmp_form .buttons button`
   (specificity 0,2,1) with an inset shadow. `button.submit` (0,1,1) loses to
   that, so the login button stayed a grey OS-looking control after the first
   fix — invisible to every automated check, obvious on the screenshot.
   Enumerate the parent's own selectors, and cancel its inset shadow. */
.pkp_button,
.cmp_button,
button.submit,
button[type="submit"],
button.submitFormButton,
input[type="submit"],
.cmp_form .buttons button,
.pkp_form .buttons button,
.page_lost_password .buttons button,
.page_search .submit button,
.obj_galley_link {
  box-shadow: none;
  font-family: var(--pal-font-ui);
  background: var(--pal-palm);
  color: var(--pal-on-primary);
  border: 1px solid var(--pal-palm);
  border-radius: var(--pal-radius);
  padding: 0.55em 1.2em;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background var(--pal-transition), border-color var(--pal-transition);
}

.pkp_button:hover,
.cmp_button:hover,
.cmp_button:focus,
button.submit:hover,
button[type="submit"]:hover,
button.submitFormButton:hover,
input[type="submit"]:hover,
.cmp_form .buttons button:hover,
.cmp_form .buttons button:focus,
.pkp_form .buttons button:hover,
.page_lost_password .buttons button:hover,
.page_search .submit button:hover,
.page_search .submit button:focus,
.obj_galley_link:hover {
  background: var(--pal-palm-deep);
  border-color: var(--pal-palm-deep);
  color: var(--pal-on-primary);
  box-shadow: none;
}

/* Brass is the single call to action — "Make a Submission". If it starts
   appearing on three things per page it has stopped meaning anything. */
.cmp_button_wire,
.block_make_submission_link,
.pkp_block.block_make_submission a {
  display: inline-block;
  font-family: var(--pal-font-ui);
  background: var(--pal-brass);
  color: var(--pal-on-accent);
  border: 1px solid var(--pal-brass);
  border-radius: var(--pal-radius);
  padding: 0.6em 1.3em;
  font-weight: 700;
  text-decoration: none;
  transition: background var(--pal-transition);
}

.block_make_submission_link:hover,
.pkp_block.block_make_submission a:hover {
  background: #6F4713;
  color: var(--pal-on-accent);
}

/* ---------------------------------------------------------------- fields - */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
select,
textarea {
  background: var(--pal-card);
  color: var(--pal-ink);
  border: 1px solid var(--pal-border-strong);
  border-radius: var(--pal-radius);
  padding: 0.5em 0.7em;
}

/* Checkboxes and radios otherwise render in the operating system's accent
   colour — bright blue on Windows, which is the one colour this palette does
   not contain. */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--pal-palm);
}

/* The secondary action beside a submit button ("Register" next to "Login")
   is a bare link; give it the weight of a button without the fill, so the
   primary action stays unambiguous. */
.pkp_form .buttons a,
.cmp_form .buttons a {
  font-family: var(--pal-font-ui);
  font-weight: 700;
  color: var(--pal-palm);
  padding: 0.55em 1em;
  border: 1px solid var(--pal-border-strong);
  border-radius: var(--pal-radius);
  text-decoration: none;
  margin-right: var(--pal-space-1);
}

.pkp_form .buttons a:hover,
.cmp_form .buttons a:hover {
  color: var(--pal-brass);
  border-color: var(--pal-brass);
}

/* ---------------------------------------------------------------- tables - */

table {
  border-collapse: collapse;
  width: 100%;
}

table th {
  background: var(--pal-sand);
  color: var(--pal-ink);
  font-family: var(--pal-font-ui);
  font-weight: 700;
  text-align: left;
  border-bottom: 2px solid var(--pal-border-strong);
  padding: var(--pal-space-1) var(--pal-space-2);
}

table td {
  border-bottom: var(--pal-rule);
  padding: var(--pal-space-1) var(--pal-space-2);
}

/* Wide tables must scroll inside themselves, never push the page sideways. */
.table_wrapper,
.pkp_table_wrapper {
  overflow-x: auto;
}

/* ---------------------------------------------------------------- footer - */

.pkp_structure_footer_wrapper {
  background: var(--pal-palm-deep);
  color: var(--pal-sand);
  border-top: 3px solid var(--pal-brass);
}

.pkp_structure_footer a,
.pkp_brand_footer a {
  color: var(--pal-brass-light);
}

.pkp_structure_footer a:hover {
  color: #fff;
}

/* The PKP attribution is a fixed dark-ink PNG (templates/images/ojs_brand.png)
   drawn for the stock #ddd footer. On the palm-green footer it rendered black
   on dark green and was unreadable — caught by looking at the screenshot, not
   by any check that passed. Give it its own limestone strip: legible, and it
   reads as a deliberate separation between the press's footer and the
   software credit rather than as a patch. */
.pkp_brand_footer {
  background: var(--pal-sand);
  border-top: 1px solid var(--pal-border-strong);
  margin-top: var(--pal-space-4);
}

.pkp_brand_footer img {
  max-width: 150px;
  height: auto;
}

/* --------------------------------------------------------------- motion -- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------------ print */

@media print {
  .pkp_structure_head,
  .pkp_structure_footer_wrapper,
  .pkp_navigation_primary_wrapper,
  .pkp_block {
    display: none;
  }
  body { background: #fff; color: #000; }
}