/**
 * base.css — document defaults
 *
 * Typography, colour and layout primitives for every SUP journal page.
 * Values measured from the approved Figma specification; per-journal
 * differences arrive through the tokens, never through overrides here.
 */

/* ---------------------------------------------------------------
   Document
   --------------------------------------------------------------- */
/* The parent theme pins the root at an absolute 14px, which ignores the
   reader's browser font-size preference. 87.5% of the browser default is the
   same 14px at standard settings, so nothing inherited from the parent theme
   shifts — but text now scales when the reader asks for larger type. */
html {
	font-size: 87.5%;
}

body {
	font-family: var(--sup-font-ui);
	font-size: var(--sup-text-sm);      /* 14px is the interface size in the design */
	line-height: var(--sup-leading-text);
	font-weight: var(--sup-weight-regular);
	color: var(--sup-color-text);
	background: var(--sup-color-surface);
	-webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------
   Headings — DM Sans display scale
   --------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--sup-font-display);
	color: var(--sup-color-heading);
	margin: 0 0 var(--sup-space-16);
}

/* The parent theme sizes headings through `.pkp_structure_main h2` and
   friends, so the scale is declared at the same specificity — one class plus
   one element — and wins on source order rather than on !important. */
.pkp_structure_page h1 { font-size: var(--sup-text-display); line-height: var(--sup-leading-display); font-weight: var(--sup-weight-medium); }
.pkp_structure_page h2 { font-size: var(--sup-text-h2); line-height: var(--sup-leading-display); font-weight: var(--sup-weight-medium); }
.pkp_structure_page h3 { font-size: var(--sup-text-h3); line-height: var(--sup-leading-display); font-weight: var(--sup-weight-semibold); }
.pkp_structure_page h4 { font-size: var(--sup-text-h4); line-height: var(--sup-leading-display); font-weight: var(--sup-weight-semibold); }
.pkp_structure_page h5 { font-size: var(--sup-text-body); line-height: var(--sup-leading-flat); font-weight: var(--sup-weight-semibold); }
.pkp_structure_page h6 { font-size: var(--sup-text-sm); line-height: var(--sup-leading-flat); font-weight: var(--sup-weight-semibold); }

/* The parent theme also sets a heading margin at that same specificity, so
   the reset is stated here rather than only on the bare element. */
.pkp_structure_page h1,
.pkp_structure_page h2,
.pkp_structure_page h3,
.pkp_structure_page h4,
.pkp_structure_page h5,
.pkp_structure_page h6 {
	font-family: var(--sup-font-display);
	color: var(--sup-color-heading);
	margin: 0 0 var(--sup-space-16);
}

/* Reading content — article text, abstracts, descriptions — steps up to 16/24. */
.sup-prose p,
.sup-prose li { font-size: var(--sup-text-body); line-height: var(--sup-leading-text); }
/* The parent theme sets its own size, leading and margin on `.pkp_structure_main
   p` and friends — a class plus an element. The theme's rhythm is therefore
   stated at that same specificity and wins on source order. */
p, li, dd, dt { font-size: inherit; line-height: inherit; }
p { margin: 0 0 var(--sup-space-16); }
.pkp_structure_page p,
.pkp_structure_page li,
.pkp_structure_page dd,
.pkp_structure_page dt { font-size: inherit; line-height: inherit; }
.pkp_structure_page p { margin: 0 0 var(--sup-space-16); }

/* Lists: the parent theme gives every list in the main column its own
   margin and indent. Editorial prose keeps them; a list the theme builds
   carries a class, and those are laid out by the component that owns them. */
.pkp_structure_page ul,
.pkp_structure_page ol { margin: 0 0 var(--sup-space-16); }
.pkp_structure_page ul[class],
.pkp_structure_page ol[class] { margin: 0; padding: 0; list-style: none; }

.sup-lead { font-size: var(--sup-text-lead); line-height: var(--sup-leading-text); }
.sup-text-sm { font-size: var(--sup-text-sm); line-height: var(--sup-leading-text); }
.sup-text-xs { font-size: var(--sup-text-xs); line-height: var(--sup-leading-text); }
.sup-muted { color: var(--sup-color-muted); }

/* ---------------------------------------------------------------
   Links — #006CB8 default, #00548F on hover/active
   --------------------------------------------------------------- */
a {
	color: var(--sup-color-link);
	text-decoration: none;
}

a:hover,
a:active {
	color: var(--sup-color-link-strong);
	text-decoration: underline;
}

.sup-link--underlined { text-decoration: underline; }

/* Focus is never removed — it is restyled (DESIGN_RULES.md §13). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--sup-color-focus);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------
   Layout containers

   The design draws the page on a 1160px content column. The grid steps
   down with the breakpoints recorded in tokens.css, and the column keeps
   the 20px page gutter on each side at every size.
   --------------------------------------------------------------- */
.sup-container {
	width: 100%;
	max-width: calc(var(--sup-container) + 2 * var(--sup-page-gutter));
	margin-inline: auto;
	padding-inline: var(--sup-page-gutter);
}

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

@media (max-width: 991.98px) {
	.sup-container { max-width: calc(var(--sup-container-sm) + 2 * var(--sup-page-gutter)); }
}

@media (max-width: 767.98px) {
	.sup-container { max-width: none; }
}

/* The content column beside the sidebar: 839px + 1px + 320px = 1160px.
   Stated as a grid so the main column reflows on the narrower grids while
   the sidebar keeps the width the design gives it. */
.sup-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--sup-col-side);
	gap: var(--sup-space-1);
	align-items: start;
}

.sup-layout__main { min-width: 0; }
.sup-layout__side { min-width: 0; }

.sup-layout--article { grid-template-columns: minmax(0, 1fr) var(--sup-col-article-side); }

/* Below the tablet breakpoint the sidebar stacks under the content. */
@media (max-width: 991.98px) {
	.sup-layout,
	.sup-layout--article { grid-template-columns: minmax(0, 1fr); gap: var(--sup-space-40); }
}

/* ---------------------------------------------------------------
   Rules and separators
   --------------------------------------------------------------- */
hr,
.sup-rule {
	border: 0;
	border-top: var(--sup-border-width) solid var(--sup-color-border);
	margin: var(--sup-space-24) 0;
}

.sup-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}