/* OVALNEWS 2026: styles that theme.json can't express. Colors come from the theme.json palette. */

:root {
	--on-rail-width: 300px;
	--on-gap: 2.5rem;
}

/* ---------- Header ---------- */

.on-topbar {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--on-navy);
	font-size: var(--wp--preset--font-size--x-small);
	padding-block: 0.35rem;
}
.on-topbar .wp-block-site-tagline { margin: 0; }

.on-header {
	border-bottom: 3px solid var(--wp--preset--color--navy);
	padding-block: 1rem;
}
.on-header__row { gap: 1rem 1.75rem; }

.on-logo { margin: 0; line-height: 0; }
.on-logo img { width: 100%; max-width: 260px; height: auto; }
@media (max-width: 600px) {
	.on-logo img { max-width: 210px; }
}

/* The site title stays in the page for screen readers (and is the home page H1), hidden from view. */
.on-sitetitle {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.on-nav { flex: 1 1 auto; }
.on-nav .wp-block-navigation-item__content { color: var(--wp--preset--color--ink); }
.on-nav .wp-block-navigation__submenu-container { border-color: var(--wp--preset--color--line) !important; font-weight: 500; }

.on-search { min-width: 12rem; }
.on-search .wp-block-search__input { border-color: var(--wp--preset--color--line); }

/* ---------- Two-column layout: content + right rail ---------- */

.on-main { padding-block: 1.75rem 3rem; }

.on-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--on-gap);
}
@media (min-width: 960px) {
	.on-layout { grid-template-columns: minmax(0, 1fr) var(--on-rail-width); }
}
.on-layout > * { margin-block: 0; min-width: 0; }

/* ---------- Posts on the home page (full posts) ---------- */

.on-stream .wp-block-post-template { margin: 0; padding: 0; list-style: none; }
/* Every post after the first gets the same clear divider. (A "post after a
   post" rule missed the post that follows the phone-only ad item.) */
.on-stream .wp-block-post:not(:first-child) {
	border-top: 2px solid var(--wp--preset--color--navy);
	margin-top: 3rem;
	padding-top: 2.5rem;
}
.on-stream .wp-block-post .on-entry > :last-child { margin-bottom: 0; }

.on-kicker {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 0.4rem;
}
.on-kicker a { text-decoration: none; }

.on-post__title,
.on-item__title { margin-top: 0; }
.on-post__title a,
.on-item__title a { text-decoration: none; }

.on-meta { gap: 0.25rem 0.9rem; margin-top: 0.4rem; }
.on-meta > * { margin: 0; }

/* Classic-editor content from 2004 onward: keep images, tables and code inside the column. */
/* Long paths, keys and URLs wrap instead of pushing the page wider than a phone screen. */
.on-entry { overflow-wrap: break-word; }
.on-entry img { max-width: 100%; height: auto; }
.on-entry table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
}
.on-entry th,
.on-entry td { border-bottom: 1px solid var(--wp--preset--color--line); padding: 0.4rem 0.6rem; text-align: left; vertical-align: top; }
.on-entry pre,
.on-entry code { white-space: pre-wrap; overflow-wrap: anywhere; }
.on-entry iframe { max-width: 100%; }
.on-entry .alignleft { float: left; margin: 0.3rem 1.25rem 0.75rem 0; }
.on-entry .alignright { float: right; margin: 0.3rem 0 0.75rem 1.25rem; }
.on-entry .aligncenter { display: block; margin-inline: auto; }
.on-entry::after { content: ""; display: table; clear: both; }

/* Block tables (e.g. the Dimensions pages) scroll inside their figure instead. */
.on-entry .wp-block-table { overflow-x: auto; margin-inline: 0; }
.on-entry .wp-block-table table { display: table; width: 100%; min-width: 34rem; font-variant-numeric: tabular-nums; }
.on-entry .wp-block-table thead th { background: var(--wp--preset--color--surface); border-bottom: 2px solid var(--wp--preset--color--navy); }
.on-entry .wp-block-table figcaption { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }

.more-link {
	display: inline-block;
	font-weight: 700;
	text-decoration: none;
	border-bottom: 2px solid currentColor;
}

/* ---------- Listing pages (category, date, search) ---------- */

.on-archive__title { margin-top: 0; }
.on-archive__intro { color: var(--wp--preset--color--muted); }
.on-list .wp-block-post-template { margin: 0; padding: 0; list-style: none; }
.on-list .wp-block-post { border-bottom: 1px solid var(--wp--preset--color--line); padding-block: 1.25rem; }
.on-item__title { font-size: var(--wp--preset--font-size--large); margin-block: 0.25rem 0.4rem; }
.on-item__date { font-family: var(--wp--preset--font-family--mono); }
.on-item__excerpt p { margin: 0; }

.on-pagination { margin-top: 2rem; font-weight: 600; gap: 1rem; }
/* Page numbers: roomier, with the current page marked. */
.on-pagination .wp-block-query-pagination-numbers { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.on-pagination .page-numbers { display: inline-block; min-width: 2.25rem; padding: 0.35rem 0.6rem; text-align: center; text-decoration: none; border: 1px solid var(--wp--preset--color--line); }
.on-pagination .page-numbers.current { background: var(--wp--preset--color--navy); border-color: var(--wp--preset--color--navy); color: var(--wp--preset--color--white); }
.on-pagination .page-numbers.dots { border-color: transparent; min-width: 0; padding-inline: 0.2rem; }
.on-pagination a.page-numbers:hover { border-color: var(--wp--preset--color--navy); }
/* Same divider above the page numbers as between posts, so the last post is closed off too. */
.on-stream .on-pagination { border-top: 2px solid var(--wp--preset--color--navy); margin-top: 3rem; padding-top: 2rem; }

/* ---------- Single post ---------- */

.on-single__title { margin-block: 0 0.25rem; }
.on-tags { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }
/* Older / newer post links (and the matching release-notes links): two cards. */
.on-postnav,
.on-release-nav {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-top: 2.5rem;
	padding-top: 0;
	border-top: 0;
}
.on-postnav,
.on-release-nav { align-items: stretch !important; }
.on-postnav > * { max-width: none; margin: 0 !important; display: flex; }
.on-postnav > * > a { flex: 1; }
.on-postnav a,
.on-release-nav a {
	position: relative;
	display: grid;
	gap: 0.35rem;
	height: 100%;
	padding: 1rem 1.25rem 1.1rem;
	background: var(--wp--preset--color--surface);
	border-top: 3px solid var(--wp--preset--color--navy);
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.on-postnav a:hover,
.on-postnav a:focus-visible,
.on-release-nav a:hover,
.on-release-nav a:focus-visible {
	background: #eceef3;
	border-top-color: var(--wp--preset--color--orange);
}
.on-postnav .post-navigation-link__label,
.on-release-nav .on-release-nav__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--orange-ink);
}
.on-postnav .post-navigation-link__title,
.on-release-nav .on-release-nav__title {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--ink);
}
.on-postnav .post-navigation-link-previous .post-navigation-link__label::before { content: "←"; display: inline-block; margin-right: 0.35em; transition: transform 0.15s ease; }
.on-postnav .post-navigation-link-next { text-align: right; grid-column: 2; }
.on-postnav .post-navigation-link-next .post-navigation-link__label::after { content: "→"; display: inline-block; margin-left: 0.35em; transition: transform 0.15s ease; }
.on-postnav .post-navigation-link-previous a:hover .post-navigation-link__label::before { transform: translateX(-4px); }
.on-postnav .post-navigation-link-next a:hover .post-navigation-link__label::after { transform: translateX(4px); }
.on-release-nav .on-release-nav__newer { text-align: right; grid-column: 2; }
.on-release-nav .is-empty { display: none; }
@media (max-width: 600px) {
	.on-postnav,
	.on-release-nav { grid-template-columns: 1fr; }
	.on-postnav .post-navigation-link-next,
	.on-release-nav .on-release-nav__newer { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
	.on-postnav a,
	.on-release-nav a,
	.on-postnav .post-navigation-link__label::before,
	.on-postnav .post-navigation-link__label::after { transition: none; }
}

/* ---------- Release notes (Pivi Pro, InControl) ---------- */

.on-release__notes .on-rn__group {
	font-size: var(--wp--preset--font-size--medium);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--navy);
	margin-block: 1.75rem 0.4rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--wp--preset--color--line);
}
.on-rn__list { margin-block: 0.25rem 1rem; padding-left: 1.25rem; }
.on-rn__list li { margin-bottom: 0.3rem; }
.on-rn__list li::marker { color: var(--wp--preset--color--orange); }

/* ---------- Right rail ---------- */

.on-rail { display: grid; gap: 1.5rem; align-content: start; }
.on-box {
	border: 1px solid var(--wp--preset--color--line);
	padding: 1rem;
	font-size: var(--wp--preset--font-size--small);
}
.on-box__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0 0 0.6rem;
}
.on-rail__nav { gap: 0.45rem; font-size: var(--wp--preset--font-size--small); }

/* ---------- House ads ---------- */

.on-ad { margin: 0; }
.on-ad a { display: block; line-height: 0; }
.on-ad img { width: 100%; height: auto; }
.on-ad__label {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-bottom: 0.3rem;
	line-height: 1.2;
}
.on-ad--bottom { max-width: 336px; margin: 2rem auto 0; }

/* One ad per screen size: the rail ad on desktop, the in-list ad on phones. */
.on-ad--listing { max-width: 336px; margin: 0 auto; }
.on-stream .on-ad-item,
.on-list .on-ad-item { list-style: none; padding-block: 2rem; border-top: 1px solid var(--wp--preset--color--line); }
@media (max-width: 959px) {
	.on-ad--rail { display: none; }
}
@media (min-width: 960px) {
	.on-ad-item { display: none; }
}

/* ---------- Footer ---------- */

.on-footer {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--on-navy);
	padding-block: 2.5rem 1.5rem;
	font-size: var(--wp--preset--font-size--small);
}
.on-footer a { color: var(--wp--preset--color--white); }
.on-footer__title {
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0 0 0.6rem;
}
.on-footer__nav { gap: 0.4rem; font-weight: 400; font-size: var(--wp--preset--font-size--small); }
.on-footer__base {
	border-top: 1px solid rgba(199, 207, 230, 0.25);
	margin-top: 2rem;
	padding-top: 1rem;
}
.on-footer__base p { margin: 0; }
.on-footer__legal { gap: 0.4rem 1.25rem; font-size: var(--wp--preset--font-size--small); font-weight: 400; }

/* Google AdSense unit on the Dimensions pages */
.on-adsense { margin-block: 2rem; min-height: 100px; }

/* ---------- Raw text box (Code block / <pre class="wp-block-code">) ---------- */
/* Long raw text, such as app strings, stays readable, searchable and copyable,
   but scrolls inside a box about 25 lines tall instead of filling the page. */
.on-entry pre.wp-block-code,
.on-entry .on-rawbox {
	max-height: 34rem;
	overflow: auto;
	margin-block: 1.25rem;
	padding: 1rem 1.15rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-left: 3px solid var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	line-height: 1.55;
	white-space: pre;
	overflow-wrap: normal;
}
.on-entry pre.wp-block-code code,
.on-entry .on-rawbox code { white-space: inherit; font: inherit; background: none; padding: 0; }
.on-entry pre.wp-block-code:focus-visible,
.on-entry .on-rawbox:focus-visible { outline: 2px solid var(--wp--preset--color--orange); outline-offset: 2px; }

/* ---------- "Did you know?" callouts (Land Rover Timeline) ---------- */
.on-didyouknow {
	background: var(--wp--preset--color--surface);
	border-left: 3px solid var(--wp--preset--color--orange);
	padding: 0.9rem 1.15rem;
	margin-block: 1.25rem;
}
.on-didyouknow > p { margin: 0; }
.on-didyouknow > p:first-child { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--x-small); letter-spacing: 0.08em; color: var(--wp--preset--color--orange-ink); margin-bottom: 0.3rem; }

/* ---------- Contact page (quick fix; the old form is kept as is) ---------- */
/* Its layout tables become plain blocks, and the form matches the site. */
.page-id-1163 .on-entry table,
.page-id-1163 .on-entry tbody,
.page-id-1163 .on-entry tr,
.page-id-1163 .on-entry td { display: block; width: auto; border: 0; padding: 0; font-size: inherit; }
.page-id-1163 .on-entry label { display: grid; gap: 0.35rem; font-weight: 600; max-width: 36rem; }
.page-id-1163 .on-entry input[type="text"],
.page-id-1163 .on-entry input[type="email"],
.page-id-1163 .on-entry textarea {
	width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px solid #c9ced8;
	border-radius: 2px;
	font: inherit;
	font-weight: 400;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
}
.page-id-1163 .on-entry input[type="text"]:focus,
.page-id-1163 .on-entry textarea:focus { outline: 2px solid var(--wp--preset--color--orange); outline-offset: 1px; border-color: var(--wp--preset--color--navy); }
.page-id-1163 .on-entry textarea { min-height: 9rem; }
.page-id-1163 .on-entry input[type="submit"],
.page-id-1163 .on-entry input[type="reset"] {
	padding: 0.6rem 1.2rem;
	border: 0;
	border-radius: 2px;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.page-id-1163 .on-entry input[type="submit"] { background: var(--wp--preset--color--navy); color: var(--wp--preset--color--white); }
.page-id-1163 .on-entry input[type="submit"]:hover { background: var(--wp--preset--color--orange); color: var(--wp--preset--color--ink); }
.page-id-1163 .on-entry input[type="reset"] { background: var(--wp--preset--color--line); color: var(--wp--preset--color--ink); margin-left: 0.5rem; }
.page-id-1163 .on-entry form br { display: none; }
.page-id-1163 .on-entry hr { border: 0; border-top: 1px solid var(--wp--preset--color--line); margin-block: 1.5rem; }
.page-id-1163 .on-entry .cpr { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }

/* ---------- Phone header: one slim row (logo, search icon, menu) ---------- */
.on-search-mobile { display: none; }
@media (max-width: 599px) {
	.on-topbar { display: none; }
	.on-header { padding-block: 0.6rem; }
	.on-header__row { flex-wrap: nowrap !important; gap: 0.75rem; }
	.on-header__row .on-logo { margin-right: auto; }
	.on-header__row .on-search { display: none; }
	.on-header__row .on-search-mobile { display: block; order: 2; min-width: 0; }
	.on-header__row .on-nav { flex: 0 0 auto; order: 3; }
	.on-search-mobile .wp-block-search__button { background: transparent; color: var(--wp--preset--color--ink); border: 0; padding: 0.35rem; }
	.on-search-mobile.wp-block-search__searchfield-hidden .wp-block-search__input { width: 0; padding: 0; border: 0; }
	.on-search-mobile:not(.wp-block-search__searchfield-hidden) .wp-block-search__input { width: 9.5rem; }
}

/* ---------- Pivi Pro: strip under the header below 960px, rail box above ---------- */
.on-pivi-strip { display: none; }
@media (max-width: 959px) {
	.on-pivi-strip { display: block; }
	.on-rail .on-pivi { display: none; }
}

/* ---------- Old post content ---------- */
/* Captions inserted with a fixed width never run wider than the column. */
.on-entry .wp-caption,
.on-entry figure { max-width: 100% !important; height: auto; }
.on-entry .wp-caption { width: auto !important; }
.on-entry .wp-caption img { max-width: 100%; height: auto; }
.on-entry .wp-caption-text { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); margin-top: 0.4rem; }
/* Early-web <font> and <center> tags use the site's normal font and size. */
.on-entry font { font-family: inherit !important; font-size: inherit !important; }
.on-entry center { font-family: inherit; font-size: inherit; }
/* Converted Flash videos and playlists: 16:9 embeds; notes for removed ones. */
.on-entry .on-video { position: relative; aspect-ratio: 16 / 9; max-width: 100%; margin-block: 1.25rem; background: var(--wp--preset--color--surface); }
.on-entry .on-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.on-entry .on-video-gone { color: var(--wp--preset--color--muted); font-style: italic; }