/* OpenPress static pages (page.php) and the 404 page (404.php). Loaded on those templates only.
   Theme tokens only, so light and dark mode follow the rest of the site. */

/* Shared header spacing ------------------------------------------------- */
.op-page__header { padding-block: var(--op-space-7) var(--op-space-5); border-bottom: 1px solid var(--op-border); }
.op-page__column { max-width: var(--op-reading-width); margin-inline: auto; min-width: 0; }
.op-page__crumbs { margin-bottom: var(--op-space-4); }
.op-page__title {
	margin: 0;
	font-size: clamp(2rem, 1.4rem + 3vw, 3.25rem);
	line-height: 1.1;
	letter-spacing: -0.03em;
	overflow-wrap: anywhere;
	text-wrap: balance;
}
.op-page__body { padding-block: var(--op-space-6) var(--op-space-7); }

/* Header: breadcrumb above the H1, H1 in the normal heading colour.
   Only links inside the page content are underlined (see Links below). */
.op-page__header { position: relative; }
.op-page__header .op-page__crumbs { display: block; visibility: visible; margin-bottom: var(--op-space-4); color: var(--op-text-muted); font-size: var(--op-text-small); }
.op-page__header .op-breadcrumbs__list { display: flex; flex-wrap: wrap; color: var(--op-text-muted); }
.op-page__header .op-breadcrumbs a { color: var(--op-text-muted); text-decoration: none; }
.op-page__header .op-breadcrumbs a:hover,
.op-page__header .op-breadcrumbs a:focus-visible { color: var(--op-text); text-decoration: underline; }
.op-page__header .op-breadcrumbs [aria-current="page"] { color: var(--op-text); }
.op-page__header .op-page__title,
.op-page__header .op-page__title a,
.op-page__header .op-page__title a:hover { color: var(--op-text); text-decoration: none; -webkit-text-fill-color: currentcolor; background: none; }

/* Content ---------------------------------------------------------------- */
.op-page__content {
	display: flow-root;
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
	line-height: 1.75;
	overflow-wrap: break-word;
}
.op-page__content > :first-child { margin-top: 0; }
.op-page__content > :last-child { margin-bottom: 0; }
.op-page__content > * { max-width: 100%; }

.op-page__content p,
.op-page__content ul,
.op-page__content ol,
.op-page__content dl,
.op-page__content blockquote,
.op-page__content pre,
.op-page__content figure,
.op-page__content table,
.op-page__content .wp-block-table { margin-block: 0 1.4em; }
.op-page__content p { text-wrap: pretty; }

.op-page__content h2,
.op-page__content h3,
.op-page__content h4,
.op-page__content h5,
.op-page__content h6 { scroll-margin-top: var(--op-space-7); text-wrap: balance; overflow-wrap: break-word; }
.op-page__content h2 {
	margin: 2.2em 0 0.7em;
	padding-bottom: 0.35em;
	border-bottom: 1px solid var(--op-border);
	font-size: clamp(1.5rem, 1.3rem + 1vw, 1.9rem);
	line-height: 1.25;
}
.op-page__content h3 { margin: 1.9em 0 0.55em; font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.45rem); line-height: 1.3; }
.op-page__content h4 { margin: 1.7em 0 0.5em; font-size: var(--op-text-h4); line-height: 1.35; }
.op-page__content h5,
.op-page__content h6 { margin: 1.5em 0 0.5em; font-size: 1rem; line-height: 1.4; }
.op-page__content h2 + h3,
.op-page__content h3 + h4 { margin-top: 1em; }

/* Links: underlined so colour is not the only cue; buttons keep their own look. */
.op-page__content a:not(.wp-block-button__link):not(.wp-element-button):not(.op-btn) {
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: color-mix(in srgb, var(--op-link) 55%, transparent);
	text-underline-offset: 0.2em;
	overflow-wrap: anywhere;
}
.op-page__content a:not(.wp-block-button__link):not(.wp-element-button):not(.op-btn):hover {
	text-decoration-thickness: 2px;
	text-decoration-color: currentcolor;
}

/* Lists */
.op-page__content ul,
.op-page__content ol { padding-left: 1.6em; }
.op-page__content ul { list-style: disc; }
.op-page__content ol { list-style: decimal; }
.op-page__content li { margin-bottom: 0.5em; padding-left: 0.2em; }
.op-page__content li:last-child { margin-bottom: 0; }
.op-page__content li > ul,
.op-page__content li > ol { margin-block: 0.5em 0; }
.op-page__content li > ul { list-style-type: circle; }
.op-page__content li::marker { color: var(--op-text-muted); }

.op-page__content blockquote {
	margin-inline: 0;
	padding: var(--op-space-4) var(--op-space-5);
	background: color-mix(in srgb, var(--op-link) 6%, transparent);
	border: 0;
	border-left: 3px solid var(--op-link);
	border-radius: 0 var(--op-radius) var(--op-radius) 0;
}
.op-page__content blockquote > :last-child { margin-bottom: 0; }
.op-page__content hr { margin-block: 2.5em; border: 0; border-top: 1px solid var(--op-border); }
.op-page__content img { display: block; max-width: 100%; height: auto; border-radius: var(--op-radius); }
.op-page__content figcaption { margin-top: var(--op-space-3); color: var(--op-text-muted); font-size: var(--op-text-small); text-align: center; }
.op-page__content .alignleft { float: left; max-width: 50%; margin: 0.4em 1.5em 1em 0; }
.op-page__content .alignright { float: right; max-width: 50%; margin: 0.4em 0 1em 1.5em; }
.op-page__content .aligncenter { margin-inline: auto; text-align: center; }
.op-page__content iframe,
.op-page__content video { max-width: 100%; }
.op-page__content code,
.op-page__content kbd {
	padding: 0.12em 0.4em;
	background: color-mix(in srgb, var(--op-text) 7%, transparent);
	border-radius: var(--op-radius-sm);
	font-family: var(--op-font-mono);
	font-size: 0.875em;
	overflow-wrap: anywhere;
}
.op-page__content pre {
	padding: var(--op-space-4) var(--op-space-5);
	overflow-x: auto;
	background: var(--op-bg-elevated);
	border: 1px solid var(--op-border);
	border-radius: var(--op-radius);
	font-size: 0.875rem;
	line-height: 1.65;
}
.op-page__content pre code { padding: 0; background: none; font-size: inherit; overflow-wrap: normal; }

/* Tables scroll inside their own box on small screens; the page never scrolls sideways. */
.op-page__content table {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	font-size: 0.9375rem;
	line-height: 1.5;
}
.op-page__content .wp-block-table { max-width: 100%; overflow-x: auto; border: 1px solid var(--op-border); border-radius: var(--op-radius); }
.op-page__content .wp-block-table table { display: table; min-width: 28rem; margin: 0; }
.op-page__content th,
.op-page__content td { padding: var(--op-space-3) var(--op-space-4); border: 0; border-bottom: 1px solid var(--op-border); text-align: left; vertical-align: top; }
.op-page__content thead th { background: var(--op-bg-elevated); border-bottom: 2px solid var(--op-border); font-weight: var(--op-weight-semibold); }
.op-page__content tbody tr:last-child td { border-bottom: 0; }
.op-page__content > table { border: 1px solid var(--op-border); border-radius: var(--op-radius); }

/* Trust pages: "Last updated" line and short summary callout (optional classes used in page content). */
.op-page__content .op-page__meta { margin-bottom: 1.4em; color: var(--op-text-muted); font-size: var(--op-text-small); }
.op-page__content .op-page__note {
	margin-block: 0 1.6em;
	padding: var(--op-space-4) var(--op-space-5);
	background: var(--op-bg-elevated);
	border: 1px solid var(--op-border);
	border-radius: var(--op-radius);
}
.op-page__content .op-page__note > :last-child { margin-bottom: 0; }

.op-page__pages { margin-top: var(--op-space-5); font-size: var(--op-text-small); }

@media (max-width: 599px) {
	.op-page__content { line-height: 1.7; }
	.op-page__content ul,
	.op-page__content ol { padding-left: 1.4em; }
	.op-page__content table { font-size: 0.875rem; }
	.op-page__content th,
	.op-page__content td { padding: var(--op-space-2) var(--op-space-3); }
	.op-page__content .alignleft,
	.op-page__content .alignright { float: none; max-width: 100%; margin: 0 auto 1.4em; }
}

/* 404 -------------------------------------------------------------------- */
.op-notfound { padding-block: var(--op-space-8); }
.op-notfound__inner { display: grid; justify-items: center; gap: var(--op-space-4); max-width: 40rem; margin-inline: auto; text-align: center; min-width: 0; }
.op-notfound__code {
	margin: 0;
	color: var(--op-link);
	font-family: var(--op-font-display);
	font-size: var(--op-text-h3);
	font-weight: var(--op-weight-bold);
	letter-spacing: 0.12em;
}
.op-notfound__title {
	margin: 0;
	font-size: clamp(2rem, 1.4rem + 3vw, 3.25rem);
	line-height: 1.1;
	letter-spacing: -0.03em;
	overflow-wrap: anywhere;
}
.op-notfound__text { margin: 0; max-width: 32rem; color: var(--op-text-muted); font-size: var(--op-text-lead); }
.op-notfound__search { width: 100%; max-width: 32rem; margin-top: var(--op-space-3); }
.op-notfound__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--op-space-3); margin-top: var(--op-space-3); }

@media (max-width: 479.98px) {
	.op-notfound { padding-block: var(--op-space-7); }
	.op-notfound__links { width: 100%; }
	.op-notfound__links .op-btn { width: 100%; }
}