/**
 * styles/pages.css
 *
 * SUP Journals Theme — inner pages and the editorial prose inside them.
 *
 * The shell: the 1160px container, the 840px reading column beside the
 * sidebar, the breadcrumb row and the page title, all measured from the
 * approved frames.
 *
 * The prose: whatever a journal writes into one of OJS's rich text
 * settings. The theme reads nothing from that content and infers nothing
 * about it — it styles each element OJS allows, so any page the editor
 * produces comes out in the design's typography, and a journal that
 * rewrites its text from scratch gets the same result.
 *
 * Several rules are restated one level deeper, inside `.pkp_structure_page`,
 * because the parent theme sizes headings, paragraphs and lists by element
 * within that wrapper. That is how this theme outweighs it without
 * reaching for !important.
 */

/* ---------------------------------------------------------------
   Page shell
   --------------------------------------------------------------- */
.sup-page { padding-block: var(--sup-space-40); }

/* Breadcrumbs, 16px, title, 16px — the rhythm of the page header. The row
   keeps the interface leading the breadcrumb component already carries. */
.sup-page .cmp_breadcrumbs,
.sup-page .sup-breadcrumbs { margin: 0 0 var(--sup-space-16); }

.sup-page__title,
.pkp_structure_page .sup-page__title {
	margin: 0 0 var(--sup-space-16);
	font-family: var(--sup-font-display);
	font-size: var(--sup-text-display);
	line-height: var(--sup-leading-display);
	font-weight: var(--sup-weight-semibold);
	color: var(--sup-color-heading);
}

/* ---------------------------------------------------------------
   Editorial prose

   The reading measure is 700px inside the 840px column, as the design
   sets it. Blocks sit 12px apart; a heading takes more air above itself
   so sections stay legible however the journal orders them.
   --------------------------------------------------------------- */
.sup-prose {
	max-width: var(--sup-col-prose);
	color: var(--sup-color-heading);
}

.sup-prose > *,
.pkp_structure_page .sup-prose > * { margin: 0 0 var(--sup-space-12); }
.sup-prose > *:last-child,
.pkp_structure_page .sup-prose > *:last-child { margin-bottom: 0; }

.sup-prose h1, .sup-prose h2, .sup-prose h3,
.sup-prose h4, .sup-prose h5, .sup-prose h6,
.pkp_structure_page .sup-prose h1, .pkp_structure_page .sup-prose h2,
.pkp_structure_page .sup-prose h3, .pkp_structure_page .sup-prose h4,
.pkp_structure_page .sup-prose h5, .pkp_structure_page .sup-prose h6 {
	margin: var(--sup-space-32) 0 var(--sup-space-12);
}
.sup-prose > :first-child,
.pkp_structure_page .sup-prose > :first-child { margin-top: 0; }

/* ---------------------------------------------------------------
   The elements OJS's allowed_html lets a journal write
   --------------------------------------------------------------- */
.sup-prose p,
.pkp_structure_page .sup-prose p {
	font-size: var(--sup-text-body);
	line-height: var(--sup-leading-text);
}

.sup-prose ul,
.sup-prose ol,
.pkp_structure_page .sup-prose ul,
.pkp_structure_page .sup-prose ol {
	padding-left: var(--sup-space-20);
	list-style-position: outside;
}
.sup-prose ul, .pkp_structure_page .sup-prose ul { list-style-type: disc; }
.sup-prose ol, .pkp_structure_page .sup-prose ol { list-style-type: decimal; }
.sup-prose li ul, .pkp_structure_page .sup-prose li ul { list-style-type: circle; }

.sup-prose li,
.pkp_structure_page .sup-prose li {
	margin: 0 0 var(--sup-space-4);
	padding: 0;
	font-size: var(--sup-text-body);
	line-height: var(--sup-leading-text);
}
.sup-prose li:last-child,
.pkp_structure_page .sup-prose li:last-child { margin-bottom: 0; }
.sup-prose li > ul,
.sup-prose li > ol,
.pkp_structure_page .sup-prose li > ul,
.pkp_structure_page .sup-prose li > ol { margin: var(--sup-space-4) 0 0; }

/* Definition lists survive OJS's filter, so they are given the same
   term-and-detail treatment the rest of the design uses for labelled rows. */
.sup-prose dl,
.pkp_structure_page .sup-prose dl { font-size: var(--sup-text-body); line-height: var(--sup-leading-text); }
.sup-prose dt,
.pkp_structure_page .sup-prose dt { font-weight: var(--sup-weight-semibold); }
.sup-prose dd,
.pkp_structure_page .sup-prose dd { margin: 0 0 var(--sup-space-12) var(--sup-space-20); }
.sup-prose dd:last-child,
.pkp_structure_page .sup-prose dd:last-child { margin-bottom: 0; }

/* A link in running text is underlined, so it reads as one without relying
   on colour alone (DESIGN_RULES.md §13). */
.sup-prose a { text-decoration: underline; }
.sup-prose a:hover,
.sup-prose a:focus-visible { color: var(--sup-color-link-strong); }

/* Pictures the journal uploads through the editor keep their own size but
   never exceed the column. */
.sup-prose img {
	display: block;
	max-width: 100%;
	height: auto;
}

.sup-prose strong, .sup-prose b { font-weight: var(--sup-weight-semibold); }
.sup-prose cite { font-style: italic; }
.sup-prose code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .9em;
}
.sup-prose sup, .sup-prose sub { font-size: .75em; line-height: 0; }

/* ---------------------------------------------------------------
   Narrow screens
   --------------------------------------------------------------- */
@media (max-width: 767.98px) {
	.sup-page { padding-block: var(--sup-space-32); }
	.sup-page__title,
	.pkp_structure_page .sup-page__title { font-size: var(--sup-text-h2); }
}

/* ---------------------------------------------------------------
   Archive — the journal's past issues

   Measured from the JMSACL Past Issues frame: breadcrumbs, 16px, the
   current issue module, 48px, then the list — a ruled bar with the
   archive's name and the page count, 12px, a three-column grid of
   279×326 cells, 12px, and the same count centred under a closing rule.
   --------------------------------------------------------------- */
.sup-archive__body { display: flex; flex-direction: column; gap: var(--sup-space-48); }
.sup-archive__list { display: flex; flex-direction: column; gap: var(--sup-space-12); }

.sup-archive__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sup-space-8) var(--sup-space-12);
}
/* The design draws the bars' rules inside their 12px and 20px of padding;
   a CSS border sits outside it, so the padding gives that 1px back. */
.sup-archive__bar--top {
	justify-content: space-between;
	padding-top: calc(var(--sup-space-12) - var(--sup-border-width));
	border-top: var(--sup-border-width) solid var(--sup-color-border);
}
.sup-archive__bar--bottom {
	justify-content: center;
	padding-bottom: calc(var(--sup-space-20) - var(--sup-border-width));
	border-bottom: var(--sup-border-width) solid var(--sup-color-border);
}

.sup-archive__label,
.pkp_structure_page .sup-archive__label {
	margin: 0;
	font-family: var(--sup-font-ui);
	font-size: var(--sup-text-sm);
	line-height: var(--sup-leading-flat);
	font-weight: var(--sup-weight-medium);
	color: var(--sup-color-muted);
	text-transform: uppercase;
}

.sup-archive__pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sup-space-12); }

.sup-archive__count,
.pkp_structure_page .sup-archive__count {
	margin: 0;
	font-size: var(--sup-text-sm);
	line-height: var(--sup-leading-text);
	font-weight: var(--sup-weight-medium);
	color: var(--sup-color-muted);
}

.sup-archive__step {
	display: inline-flex;
	align-items: center;
	gap: var(--sup-space-2);
	font-size: var(--sup-text-sm);
	line-height: var(--sup-leading-flat);
	font-weight: var(--sup-weight-regular);
	color: var(--sup-color-link);
	text-decoration: none;
}
.sup-archive__step:hover,
.sup-archive__step:focus-visible { color: var(--sup-color-link-strong); text-decoration: underline; }
.sup-archive__step-back { transform: scaleX(-1); }

/* Cells share their rules: each carries a full border and overlaps its
   neighbours by 1px, so full rows read as one ruled grid and a shorter
   last row still reads as complete cards. */
.sup-archive__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0;
	padding: 0 1px 1px 0;
	list-style: none;
}
.sup-archive__cell {
	display: flex;
	margin: 0 -1px -1px 0;
	border: var(--sup-border-width) solid var(--sup-color-border);
}

/* The archive card: the compact issue card at the archive's measures —
   a 120×170 cover, the numbering in the interface face at 20/25, the date
   at 14/21, and an underlined "See Issue →". */
.sup-issue--archive .sup-issue__cover img {
	width: 120px;
	max-width: 100%;
	aspect-ratio: 120 / 170;
}

.sup-issue--archive .sup-issue__identification,
.sup-issue--archive .sup-issue__identification a,
.pkp_structure_page .sup-issue--archive .sup-issue__identification {
	font-family: var(--sup-font-ui);
	font-size: var(--sup-text-h4);
	line-height: var(--sup-leading-display);
	font-weight: var(--sup-weight-medium);
	color: var(--sup-color-heading);
}

/* 32px of air in the design, measured inside the cell's rule */
.sup-issue--archive .sup-issue__body { padding: calc(var(--sup-space-32) - var(--sup-border-width)); }
.sup-issue--archive .sup-issue__naming { display: flex; flex-direction: column; align-items: center; gap: var(--sup-space-4); }

.sup-issue--archive .sup-issue__line {
	font-size: var(--sup-text-sm);
	line-height: var(--sup-leading-text);
	color: var(--sup-color-heading);
}

.sup-issue__see {
	font-size: var(--sup-text-sm);
	line-height: var(--sup-leading-flat);
	font-weight: var(--sup-weight-regular);
	color: var(--sup-color-link);
	text-decoration: underline;
}
.sup-issue__see:hover,
.sup-issue__see:focus-visible { color: var(--sup-color-link-strong); }

.sup-archive__empty { margin: 0; color: var(--sup-color-muted); }

/* Phones — two cards across, then one; the cells keep their proportions
   by giving up some of their 32px of air. */
@media (max-width: 767.98px) {
	.sup-archive__body { gap: var(--sup-space-32); }
	.sup-archive__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sup-issue--archive .sup-issue__body { padding: var(--sup-space-20); }
}
@media (max-width: 479.98px) {
	.sup-archive__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------
   Issue — the landing page of a single issue

   Measured from the JMSACL Issue Page frame: 40px above the breadcrumbs,
   16px to the issue module, 32px to its table of contents, and 192px under
   the last card, as on the homepage. The module and the cards are the
   homepage's own components.

   The Past Issues frame stands its content on the same 40px and 192px.
   --------------------------------------------------------------- */
.sup-issue-page,
.sup-archive { padding-block: var(--sup-space-40) var(--sup-page-end); }

@media (max-width: 991.98px) {
	.sup-issue-page,
	.sup-archive { padding-block: var(--sup-space-32) var(--sup-space-64); }
}
@media (max-width: 767.98px) {
	.sup-issue-page,
	.sup-archive { padding-block: var(--sup-space-24) var(--sup-space-40); }
}

/* ---------------------------------------------------------------
   Informational pages — Journal Overview, Contact, Privacy Statement,
   the three Information pages, About Open Journal Systems, and every page
   the journal writes itself through Static Pages (Aims and Scope,
   Policies, Guide for Authors, Reviewer Information, Diamond Open Access).

   Measured from their twelve frames: breadcrumbs, 16px, the page title,
   16px, then the text in the 700px reading column beside the sidebar.
   The frames draw the gap under the title at 8, 16, 20 and 32px for the
   same relationship; 16 is the value most of them use.
   --------------------------------------------------------------- */
.sup-info__body { margin-top: var(--sup-space-16); }

/* The text of these pages — whatever the journal writes into OJS's rich
   text. Measured from the frames' prose:
     body     16/24, 28px after a paragraph or a list
     heading  DM Sans 600 at 20/25, 8px to what it introduces
     subhead  DM Sans 600 at 18/25.2, 8px to what it introduces
     lists    a filled bullet at every level, the text 24px in, each level
              24px further, items 4px apart
   Stated as a modifier of the shared prose rather than a change to it, so
   the homepage's own text keeps the rhythm it was validated with. */
.sup-prose--page > *,
.pkp_structure_page .sup-prose--page > * { margin: 0 0 var(--sup-space-28); }
.sup-prose--page > :last-child,
.pkp_structure_page .sup-prose--page > :last-child { margin-bottom: 0; }

.pkp_structure_page .sup-prose--page h1,
.pkp_structure_page .sup-prose--page h2,
.pkp_structure_page .sup-prose--page h3,
.pkp_structure_page .sup-prose--page h4,
.pkp_structure_page .sup-prose--page h5,
.pkp_structure_page .sup-prose--page h6 {
	margin: 0 0 var(--sup-space-8);
	font-family: var(--sup-font-display);
	font-weight: var(--sup-weight-semibold);
	color: var(--sup-color-heading);
}
.pkp_structure_page .sup-prose--page > :first-child { margin-top: 0; }

.pkp_structure_page .sup-prose--page h1,
.pkp_structure_page .sup-prose--page h2 {
	font-size: var(--sup-text-h4);
	line-height: var(--sup-leading-display);
}
.pkp_structure_page .sup-prose--page h3 {
	font-size: var(--sup-text-lead);
	line-height: var(--sup-leading-card);
}
/* The frames go no deeper than two levels; anything below is the body
   size in the heading face, so a journal's structure still reads. */
.pkp_structure_page .sup-prose--page h4,
.pkp_structure_page .sup-prose--page h5,
.pkp_structure_page .sup-prose--page h6 {
	font-size: var(--sup-text-body);
	line-height: var(--sup-leading-display);
}

.pkp_structure_page .sup-prose--page ul,
.pkp_structure_page .sup-prose--page ol { padding-left: var(--sup-space-24); }
.pkp_structure_page .sup-prose--page li ul { list-style-type: disc; }

/* A word longer than the column — an address a journal pastes in, such as
   a licence URL — breaks rather than pushing the page sideways on a phone.
   Words that fit are never broken. */
.sup-prose--page { overflow-wrap: break-word; }

/* An in-page link — the Guide for Authors' table of contents — lands its
   heading clear of the browser's edge. */
.sup-prose--page [id] { scroll-margin-top: var(--sup-space-24); }

/* ---------------------------------------------------------------
   Contact

   The Contact module of its frame: the mailing address at 14/21, 44px,
   then one 180px column per contact — the heading at 16/24, 16px, the
   person at 14/21, 6px, the phone, 14px, and the email as a 12px text
   link. The module sets its text in black, where the rest of the page
   uses the heading colour.
   --------------------------------------------------------------- */
.sup-contact {
	display: flex;
	flex-direction: column;
	gap: var(--sup-space-44);
}

.sup-contact__address {
	max-width: var(--sup-col-prose);
	font-size: var(--sup-text-sm);
	line-height: var(--sup-leading-text);
	color: var(--sup-color-heading);
}

.sup-contact__people {
	display: flex;
	flex-wrap: wrap;
	row-gap: var(--sup-space-44);
}

/* 180px as drawn; a longer email widens its own column rather than
   running into the next one. */
.sup-contact__person {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--sup-space-16);
	min-width: 180px;
	padding-inline-end: var(--sup-space-20);
	color: var(--sup-color-ink);
}

.sup-contact__heading,
.pkp_structure_page .sup-contact__heading {
	margin: 0;
	font-family: var(--sup-font-ui);
	font-size: var(--sup-text-body);
	line-height: var(--sup-leading-text);
	font-weight: var(--sup-weight-semibold);
	color: var(--sup-color-ink);
}

.sup-contact__details { display: flex; flex-direction: column; gap: var(--sup-space-14); }
.sup-contact__lines { display: flex; flex-direction: column; gap: var(--sup-space-6); }

.sup-contact__line {
	font-size: var(--sup-text-sm);
	line-height: var(--sup-leading-text);
}
.sup-contact__label { font-weight: var(--sup-weight-semibold); }

/* The link sits on its own 12px line, as drawn, rather than inside the
   21px line the rest of the module keeps. */
.sup-contact__email {
	font-size: var(--sup-text-xxs);
	line-height: var(--sup-leading-flat);
}
.sup-contact__email a {
	color: var(--sup-color-link-small);
	text-decoration: underline;
	overflow-wrap: anywhere;
}
.sup-contact__email a:hover,
.sup-contact__email a:focus-visible { color: var(--sup-color-link-strong); }

/* ---------------------------------------------------------------
   Submissions

   Measured from the Submissions frame: the page title, 32px, the notice,
   32px, then the journal's instructions in the same prose as the
   informational pages — each of OJS's blocks under a 20/25 heading.

   The notice is the "Submission User Auth Alert" component: an 800px band
   with a 0.5px rule in the journal's accent drawn inside it, 20px above
   and below and 32px at the sides; its links are the 14px medium text
   link, the words between them 13/19.5, 4px apart.
   --------------------------------------------------------------- */
.sup-notice {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	max-width: var(--sup-col-notice);
	margin-top: var(--sup-space-32);
	padding: calc(var(--sup-space-20) - var(--sup-notice-stroke)) calc(var(--sup-space-32) - var(--sup-notice-stroke));
	border: var(--sup-notice-stroke) solid var(--sup-color-accent);
}

.sup-notice__actions,
.pkp_structure_page .sup-notice__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sup-space-4);
	margin: 0;
}

.sup-notice__text,
.pkp_structure_page .sup-notice__text {
	margin: 0;
	font-family: var(--sup-font-ui);
	font-size: var(--sup-text-xs);
	line-height: var(--sup-leading-text);
	color: var(--sup-color-text);
}

.sup-submissions__body { margin-top: var(--sup-space-32); }