/**
 * layout.css — page shell
 *
 * Top bar, masthead, primary navigation, sidebar column and footer. All
 * measurements come from the approved design; per-journal values arrive
 * through the tokens and through OJS settings.
 */

/* ---------------------------------------------------------------
   Top bar — 34px band, account links flush with the content column
   --------------------------------------------------------------- */
.sup-topbar {
	border-bottom: var(--sup-border-width) solid var(--sup-color-border-strong);
	background: var(--sup-color-surface);
}

.sup-topbar__inner {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	/* the band's height in the design includes its own rule */
	min-height: calc(var(--sup-topbar-height) - var(--sup-border-width));
}

.sup-topbar__menu {
	display: flex;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sup-topbar__item { margin: 0; }

.sup-topbar__item > a {
	display: inline-flex;
	align-items: center;
	gap: var(--sup-space-4);
	padding: 9px var(--sup-space-10);
	border-radius: var(--sup-radius-sm);
	font-size: var(--sup-text-sm);
	line-height: var(--sup-leading-flat);
	font-weight: var(--sup-weight-medium);
	color: var(--sup-color-subtle);
	text-decoration: none;
}

/* The last link sits flush with the right edge of the content column. */
.sup-topbar__item:last-child > a { padding-right: 0; }

.sup-topbar__item > a:hover,
.sup-topbar__item > a:focus-visible { text-decoration: underline; color: var(--sup-color-subtle); }

/* ---------------------------------------------------------------
   Masthead — 42px of air, the 64px logo row, 22px, the 39px menu row and
   a 1px rule: 168px, which with the 34px top bar closes the Header at the
   202px of the design.
   --------------------------------------------------------------- */
.sup-masthead {
	border-bottom: var(--sup-border-width) solid var(--sup-color-border);
	background: var(--sup-color-surface);
}

.sup-masthead__inner {
	display: flex;
	flex-direction: column;
	gap: var(--sup-space-22);
	padding-top: var(--sup-masthead-top);
}

.sup-masthead__logos {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--sup-space-20);
}

.sup-masthead__journal { display: flex; align-items: flex-end; min-width: 0; }
/* The journal logo fits a box, keeping its own proportions: at most 64px
   high and 281px wide, the two measures of the logos the design draws —
   JMSACL's 261x64 meets the height, PBMT's 281x51 the width. A logo is a
   PNG, JPG, GIF or WebP (OJS refuses SVG), so it has a size of its own to
   scale from. The row takes the logo's height. */
.sup-masthead__logo {
	display: block;
	width: auto;
	height: auto;
	max-width: min(var(--sup-logo-width), 100%);
	max-height: var(--sup-logo-height);
}
.sup-masthead__wordmark {
	font-family: var(--sup-font-display);
	font-size: var(--sup-text-h3);
	line-height: var(--sup-leading-display);
	font-weight: var(--sup-weight-semibold);
	color: var(--sup-color-heading);
	text-decoration: none;
}

.sup-masthead__press { display: flex; align-items: flex-end; flex: 0 0 auto; }
.sup-masthead__press-logo { display: block; width: var(--sup-press-logo-width); height: auto; }

.sup-masthead__toggle { display: none; }

/* ---------------------------------------------------------------
   Primary navigation — links flush left, actions flush right. The rules
   in this section are the navigation as it collapses below 992px; the
   desktop row is the Navbar Button component, further down.
   --------------------------------------------------------------- */
/* The parent theme paints this element: it gives `.pkp_site_nav_menu` a solid
   blue panel and takes it out of flow below 992px. The masthead in this design
   is white and in flow, so both are reset here. */
.sup-nav {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--sup-space-34);
	min-height: var(--sup-navrow-height);
	position: static;
	background: transparent;
	padding: 0;
}

.sup-nav__primary { min-width: 0; }

.sup-nav__menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sup-space-16);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sup-nav__item { margin: 0; position: relative; }

.sup-nav__item > a,
.sup-nav__search {
	display: inline-flex;
	align-items: center;
	gap: var(--sup-space-4);
	padding: var(--sup-space-14) var(--sup-space-8);
	border-radius: var(--sup-radius-sm);
	font-size: var(--sup-text-body);
	line-height: var(--sup-leading-flat);
	color: var(--sup-color-heading);
	text-decoration: none;
}

/* The first menu item aligns with the left edge of the content column. */
.sup-nav__menu > .sup-nav__item:first-child > a { padding-left: 0; }

.sup-nav__item > a:hover,
.sup-nav__item > a:focus-visible,
.sup-nav__item > a[aria-current],
.sup-nav__item.is-open > a,
.sup-nav__search:hover,
.sup-nav__search:focus-visible { text-decoration: underline; color: var(--sup-color-heading); }

/* A menu item that opens a submenu carries the chevron from the design. */
.sup-nav__item:has(> ul) > a::after {
	content: "";
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: center / 10px 10px no-repeat url('../images/nav-chevron.svg');
	mask: center / 10px 10px no-repeat url('../images/nav-chevron.svg');
}

/* Second level — the dropdown panel of the Menu Dropdown frame: 186px
   wide, 4px corners, a soft shadow and no border, and no padding of its own.

   The parent theme parks its own submenus at `left: -9999px` and pins them
   to `width: 15em`, so both are restated here. The panel is 186px at this
   journal's labels and grows with a longer one. */
.sup-nav__item > ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	width: max-content;
	min-width: 186px;
	max-width: 280px;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
	background: var(--sup-color-surface);
	border-radius: var(--sup-radius);
	box-shadow: 0 0 5px rgba(0, 0, 0, .3);
}

.sup-nav__item:hover > ul,
.sup-nav__item:focus-within > ul { display: block; }

/* Each row reserves the 4px accent bar that the hover state fills, so the
   label sits 12px from the edge in both states and nothing moves. Rows are
   38px: 12px, the 14px label, 12px. */
.sup-nav__item ul a {
	position: relative;
	display: block;
	padding: var(--sup-space-12) var(--sup-space-12) var(--sup-space-12) var(--sup-space-8);
	border-left: 4px solid transparent;
	font-size: var(--sup-text-sm);
	line-height: var(--sup-leading-flat);
	font-weight: var(--sup-weight-regular);
	color: var(--sup-color-text);
	text-decoration: none;
}

.sup-nav__item ul a:hover,
.sup-nav__item ul a:focus-visible,
.sup-nav__item ul a[aria-current] {
	background: var(--sup-color-brand-tint-focus);
	border-left-color: var(--sup-color-accent);
	font-weight: var(--sup-weight-medium);
	color: var(--sup-color-link);
	text-decoration: underline;
}


.sup-nav__actions {
	display: flex;
	align-items: center;
	gap: var(--sup-space-24);
	flex: 0 0 auto;
}

/* `.pkp_site_nav_menu a` in the parent theme is a class plus an element and
   resets padding and display on everything inside the nav. The two controls
   that are not plain menu items are restated one level deeper. */
.sup-nav .sup-nav__search,
.sup-nav .sup-nav__submit {
	display: inline-flex;
	align-items: center;
}
.sup-nav .sup-nav__search {
	padding: var(--sup-space-14) var(--sup-space-10);
	gap: var(--sup-space-10);
	font-weight: var(--sup-weight-medium);
	/* the parent theme's nav is a dark panel and paints its links white */
	color: var(--sup-color-heading);
}
.sup-nav .sup-nav__search:hover,
.sup-nav .sup-nav__search:focus-visible { color: var(--sup-color-heading); }
.sup-nav .sup-nav__submit,
.sup-nav .sup-nav__submit:hover { color: var(--sup-color-brand-contrast); }
/* The parent theme's nav rule would reset the button's padding, so the
   component's own is restated at that depth. */
.sup-nav .sup-nav__submit {
	padding: calc(var(--sup-space-12) - var(--sup-border-width)) calc(var(--sup-space-14) - var(--sup-border-width));
}

/* ---------------------------------------------------------------
   Desktop navigation — the Navbar Button component

   From 992px the menu row is the design's: every menu item and Search is
   one Navbar Button — 12px above and below and 10px at the sides, 15/15
   regular, the body colour, 2px corners, 39px tall — 8px apart, the first
   one included. Search carries its 14px glass 4px from its label, and
   stands 16px from the call to action. A submenu's chevron is 14px, drawn
   at the scale of its frame.

   The component's states: hover and active underline the label; focus
   gives it the pale tint and a 2px stroke drawn inside; a disabled item
   is greyed on the raised surface.

   Below 992px the navigation collapses behind the toggle and keeps the
   rules above, as it does today.
   --------------------------------------------------------------- */
@media (min-width: 992px) {
	.sup-nav__menu { gap: var(--sup-space-8); }

	.sup-nav__item > a,
	.sup-nav .sup-nav__search {
		gap: var(--sup-space-4);
		padding: var(--sup-space-12) var(--sup-space-10);
		border-radius: var(--sup-radius-sm);
		font-size: var(--sup-text-ui);
		line-height: var(--sup-leading-flat);
		font-weight: var(--sup-weight-regular);
		color: var(--sup-color-text);
	}
	.sup-nav__menu > .sup-nav__item:first-child > a { padding-left: var(--sup-space-10); }

	.sup-nav__item > a:hover,
	.sup-nav__item > a:active,
	.sup-nav__item > a[aria-current],
	.sup-nav__item.is-open > a,
	.sup-nav .sup-nav__search:hover,
	.sup-nav .sup-nav__search:active {
		color: var(--sup-color-text);
		text-decoration: underline;
	}

	.sup-nav__item > a:focus-visible,
	.sup-nav .sup-nav__search:focus-visible {
		background: var(--sup-color-brand-tint);
		outline: 2px solid var(--sup-color-focus);
		outline-offset: -2px;
		color: var(--sup-color-text);
		text-decoration: underline;
	}

	.sup-nav__item > a[aria-disabled="true"],
	.sup-nav .sup-nav__search[aria-disabled="true"] {
		background: var(--sup-color-surface-raised);
		color: var(--sup-color-disabled-link);
		text-decoration: none;
		pointer-events: none;
	}

	.sup-nav__item:has(> ul) > a::after {
		width: 14px;
		height: 14px;
		-webkit-mask-size: 14px 14px;
		mask-size: 14px 14px;
	}

	.sup-nav .sup-nav__search .sup-icon { width: 14px; height: 14px; }

	.sup-nav__actions { gap: var(--sup-space-16); }
}

/* ---------------------------------------------------------------
   Page shell
   --------------------------------------------------------------- */
/* The parent theme lays the shell out itself: it centres the content on a
   fixed column, floats the main element beside a floated sidebar and adds its
   own padding. This theme draws the same page on its own container, so the
   shell is reset to a plain block. Each rule is written one level deeper than
   the parent's so it wins without !important. */
.pkp_structure_page .pkp_structure_content {
	display: block;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
}

.pkp_structure_page .pkp_structure_main,
.pkp_structure_page .pkp_structure_main:first-child:last-child {
	display: block;
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
}

/* The parent theme draws the column rules of its own grid as pseudo-elements
   on the main element. This design has no such rules. */
.pkp_structure_page .pkp_structure_main::before,
.pkp_structure_page .pkp_structure_main::after { content: none; }

.pkp_structure_page .pkp_structure_sidebar {
	float: none;
	width: auto;
	padding: 0;
}

/* The sidebar column: 320px wide with 40px of inner gutter, so its content
   is the 280px the design draws. */
.sup-sidebar {
	box-sizing: border-box;
	width: 100%;
	padding-left: var(--sup-gutter);
}

@media (max-width: 991.98px) {
	.sup-sidebar { padding-left: 0; }
}

/* ---------------------------------------------------------------
   The content row when the native sidebar is on the page

   Some pages draw their own side column and switch the shared sidebar
   off. The others keep it — Announcements, Search, Login, Register — and
   for them the row that holds the main element and the sidebar becomes
   the 840 + 320 the canvas draws.

   The canvas stands both columns on the same line, 40px under the header,
   and closes the row 192px above the footer, whichever column is longer.
   The row carries that air, so the sidebar starts level with the
   breadcrumbs rather than above them.
   --------------------------------------------------------------- */
.pkp_structure_page .pkp_structure_content.has_sidebar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--sup-col-side);
	align-items: start;
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--sup-container) + 2 * var(--sup-page-gutter));
	margin-inline: auto;
	padding: var(--sup-space-40) var(--sup-page-gutter) var(--sup-page-end);
}

/* The parent theme clears its floats with a pseudo-element at each end of
   this row. They would count as grid items and take the first cell, so
   they are taken back. */
.pkp_structure_page .pkp_structure_content.has_sidebar::before,
.pkp_structure_page .pkp_structure_content.has_sidebar::after { content: none; }

/* The page's own wrapper no longer pads itself: the row does it for both
   columns at once. */
.pkp_structure_page .has_sidebar .sup-page { padding-block: 0; }

/* The sidebar keeps its 40px inner gutter here too, so its blocks are the
   280px the canvas draws. The parent theme zeroes the sidebar's padding
   one level deeper than .sup-sidebar, so this is stated at that level. */
.pkp_structure_page .has_sidebar > .pkp_structure_sidebar { padding-left: var(--sup-gutter); }

/* The Announcements frames close the row 40px above the footer. */
.pkp_page_announcement .pkp_structure_content.has_sidebar { padding-bottom: var(--sup-space-40); }

@media (max-width: 1199.98px) {
	.pkp_structure_page .pkp_structure_content.has_sidebar {
		max-width: calc(var(--sup-container-md) + 2 * var(--sup-page-gutter));
	}
}

/* Below the tablet breakpoint the sidebar stacks under the content, 40px
   lower, as it does beside the pages that draw their own side column. */
@media (max-width: 991.98px) {
	.pkp_structure_page .pkp_structure_content.has_sidebar {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--sup-space-40);
		max-width: calc(var(--sup-container-sm) + 2 * var(--sup-page-gutter));
		padding-block: var(--sup-space-32) var(--sup-space-64);
	}
	.pkp_structure_page .has_sidebar > .pkp_structure_sidebar { padding-left: 0; }
}

@media (max-width: 767.98px) {
	.pkp_structure_page .pkp_structure_content.has_sidebar {
		max-width: none;
		padding-block: var(--sup-space-24) var(--sup-space-40);
	}
}

/* ---------------------------------------------------------------
   Footer — dark panel under the accent rule
   --------------------------------------------------------------- */
.sup-footer {
	background: var(--sup-color-text);
	color: var(--sup-color-surface);
}

.sup-footer__rule { height: var(--sup-footer-rule); background: var(--sup-color-accent); }

.sup-footer__inner {
	/* the footer column is 1200px wide in the design, wider than the page,
	   and its 32px gutter is inside that measure so it never overflows */
	box-sizing: border-box;
	max-width: calc(1200px + 2 * var(--sup-space-32));
	/* the design's footer panel is 328px tall under the 12px rule; content
	   that needs more simply grows it */
	min-height: 328px;
	padding: var(--sup-space-48) var(--sup-space-32);
	display: flex;
	flex-direction: column;
	gap: var(--sup-space-24);
}

.sup-footer__main {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--sup-space-64);
}

.sup-footer__journal { display: flex; flex-direction: column; gap: var(--sup-space-12); }
.sup-footer__logo {
	display: block;
	width: auto;
	height: auto;
	max-width: min(var(--sup-logo-width), 100%);
	max-height: var(--sup-logo-height);
	filter: brightness(0) invert(1);
}
.sup-footer__wordmark {
	font-family: var(--sup-font-display);
	font-size: var(--sup-text-h4);
	line-height: var(--sup-leading-display);
	font-weight: var(--sup-weight-semibold);
}

/* Measured per line: the publisher sits flat at 13/13, the ISSNs and the
   address read at 13/19.5, and only the ISSNs carry the footer tracking. */
.sup-footer__meta,
.sup-footer__address {
	font-size: var(--sup-text-xs);
	line-height: var(--sup-leading-text);
	font-weight: var(--sup-weight-medium);
}

.sup-footer__meta { display: flex; flex-direction: column; }
.sup-footer__publisher { line-height: var(--sup-leading-flat); }
.sup-footer__issn { letter-spacing: var(--sup-tracking-footer); }
.sup-footer__issn-label { font-weight: var(--sup-weight-semibold); }
.sup-footer__address p { margin: 0; }

.sup-footer__press { display: flex; gap: 72px; align-items: flex-start; }
.sup-footer__press-col { display: flex; flex-direction: column; gap: var(--sup-space-12); }
/* the credit starts 10px below the press mark's top edge */
.sup-footer__press-col:last-child { padding-top: var(--sup-space-10); }

/* The press mark is white in the footer: one asset, masked to the colour
   the panel needs. */
.sup-footer__press-logo {
	display: block;
	width: 179px;
	height: 42px;
	background-color: var(--sup-color-surface);
	-webkit-mask: left center / contain no-repeat url('../images/sup-logo.svg');
	mask: left center / contain no-repeat url('../images/sup-logo.svg');
}

.sup-footer__pkp {
	display: inline-block;
	max-width: 72px;
	font-size: var(--sup-text-xxs);
	line-height: var(--sup-leading-credit);
	font-weight: var(--sup-weight-bold);
	letter-spacing: var(--sup-tracking-footer);
}

.sup-footer a { color: var(--sup-color-surface); }
.sup-footer a:hover { color: var(--sup-color-surface); text-decoration: underline; }

.sup-footer__divider { height: 1px; background: var(--sup-color-border); opacity: .5; }

.sup-footer__legal {
	display: flex;
	align-items: center;   /* the licence and the privacy link share a centre line */
	justify-content: space-between;
	gap: var(--sup-space-48);
	font-size: var(--sup-text-xs);
	line-height: var(--sup-leading-text);
}

.sup-footer__licence { display: flex; align-items: center; gap: var(--sup-space-12); }
.sup-footer__licence-marks { display: inline-flex; align-items: center; gap: var(--sup-space-8); }
.sup-footer__licence-text { font-weight: var(--sup-weight-medium); }
/* a link the journal writes into its licence terms reads as a link */
.sup-footer__licence-text a { text-decoration: underline; }
.sup-footer__licence-text p { margin: 0; }
.sup-footer__privacy {
	flex: 0 0 auto;
	/* stays on the right even when the journal sets no licence */
	margin-left: auto;
	font-size: var(--sup-text-sm);
	line-height: var(--sup-leading-flat);
	font-weight: var(--sup-weight-regular);
	text-decoration: underline;
}

/* ---------------------------------------------------------------
   Responsive
   --------------------------------------------------------------- */

/* Tablet and below — the navigation collapses behind the toggle */
@media (max-width: 991.98px) {
	/* The top bar and the journal logo keep the measures they have below
	   992px today; the design's 34px band and 64px logo are the desktop
	   Header's. There is no approved frame at these widths. */
	.sup-topbar__inner { min-height: calc(33px - var(--sup-border-width)); }
	.sup-masthead__logo { max-height: 60px; max-width: min(calc(var(--sup-logo-width) * 60 / 64), 100%); }
	.sup-masthead__inner { gap: var(--sup-space-16); padding-top: var(--sup-space-24); }
	.sup-masthead__logos { align-items: center; }
	.sup-masthead__toggle {
		position: relative;
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
		border: var(--sup-border-width) solid var(--sup-color-border);
		border-radius: var(--sup-radius);
		background: var(--sup-color-surface);
		cursor: pointer;
	}
	.sup-masthead__toggle::before,
	.sup-masthead__toggle::after,
	.sup-masthead__toggle > span::before {
		content: "";
		position: absolute;
		left: 50%;
		top: 50%;
		width: 18px;
		height: 2px;
		margin-left: -9px;
		background: var(--sup-color-heading);
	}
	.sup-masthead__toggle::before { transform: translateY(-6px); }
	.sup-masthead__toggle::after { transform: translateY(6px); }
	/* The parent theme outlines this button on focus in its header text
	   colour, which follows its baseColour option, and at a specificity
	   that beats the theme's focus ring. The ring is stated here. */
	.pkp_site_nav_toggle.sup-masthead__toggle:focus { outline: 0; }
	.pkp_site_nav_toggle.sup-masthead__toggle:focus-visible {
		outline: 2px solid var(--sup-color-focus);
		outline-offset: 2px;
	}

	.sup-nav {
		display: none;
		position: static;
		background: var(--sup-color-surface);
		flex-direction: column;
		align-items: stretch;
		gap: var(--sup-space-16);
		padding-bottom: var(--sup-space-20);
	}
	.sup-nav.pkp_site_nav_menu--isOpen { display: flex; }

	.sup-nav__menu { flex-direction: column; align-items: stretch; gap: 0; }
	.sup-nav__item > a { display: flex; justify-content: space-between; padding: var(--sup-space-12) 0; border-bottom: var(--sup-border-width) solid var(--sup-color-border); }
	.sup-nav__menu > .sup-nav__item:first-child > a { padding-left: 0; }
	/* On a phone the second level is an inline accordion rather than an
	   overlay: no panel, no accent bar and no hover chevron. */
	.sup-nav__item > ul {
		position: static;
		display: block;
		width: auto;
		min-width: 0;
		max-width: none;
		border-radius: 0;
		box-shadow: none;
		padding: 0 0 var(--sup-space-8) var(--sup-space-16);
	}
	.sup-nav__item ul a { padding-inline: 0; border-left: 0; }
	.sup-nav__actions { flex-direction: column; align-items: stretch; gap: var(--sup-space-12); }
	.sup-nav__search { justify-content: flex-start; padding-inline: 0; }
	.sup-nav__submit { justify-content: center; }

	.sup-footer__main { flex-direction: column; gap: var(--sup-space-32); }
	.sup-footer__press { gap: var(--sup-space-40); align-items: flex-start; }
	.sup-footer__legal { flex-direction: column; align-items: flex-start; gap: var(--sup-space-16); }
}

/* Phones — the press mark steps down with the rest of the masthead. There is
   no approved phone frame for this page, so the masthead keeps the desktop
   order and only loses scale (DESIGN_RULES.md §9). */
@media (max-width: 767.98px) {
	.sup-masthead__logos { gap: var(--sup-space-16); }
	.sup-masthead__press-logo { width: 120px; }
	.sup-masthead__logo { max-height: 48px; max-width: min(calc(var(--sup-logo-width) * 48 / 64), 100%); }
	.sup-footer__inner { padding: var(--sup-space-32) var(--sup-space-20); }
	.sup-footer__licence { align-items: flex-start; flex-direction: column; gap: var(--sup-space-8); }
}

/* Mobile portrait — the three marks in the masthead still share one row */
@media (max-width: 479.98px) {
	.sup-masthead__logos { gap: var(--sup-space-12); }
	.sup-masthead__logo { max-height: 40px; max-width: min(calc(var(--sup-logo-width) * 40 / 64), 100%); }
	.sup-masthead__press-logo { width: 96px; }
	.sup-footer__press { flex-direction: column; gap: var(--sup-space-24); }
}