/*
 * OAW content pages — the site's own palette and page-title treatment applied
 * to ordinary editor content.
 *
 * The privacy policy was the page that prompted this: it renders with nothing
 * but Neve's defaults, so it read as a different website from the shop, the
 * account pages and the home page, all of which now share one palette and the
 * Fraunces/Public Sans pair.
 *
 * Deliberately conservative. It sets colour, type and rhythm and touches no
 * layout: no wrapper widths, no backgrounds on Neve's containers, no floats.
 * That is what makes it safe on the pages whose content is a shortcode — the
 * trade application and the order form bring their own styling, and anything
 * they set wins on specificity.
 *
 * Not loaded on: the WooCommerce pages and the home page (each has its own
 * stylesheet) or any SiteOrigin Page Builder page (the builder owns those
 * layouts, and its widgets carry their own inline styles). See the enqueue in
 * oaw-home.php for exactly what that leaves.
 *
 * The palette is a copy of lt-shop-tokens.css, which is the source of truth —
 * if a value changes there it has to change here.
 */

body.oaw-content-page {
	--ground: #f4f6f9;
	--surface: #ffffff;
	--ink: #1d2a38;
	--ink-soft: #4c5b6d;
	--line: #dce3ec;
	--brand: #2f5aae;
	--deep: #132c54;
	--amber: #d98a2b;
	--amber-soft: #f8ecdb;
	--amber-ink: #8a5410;
	--display: "Fraunces", Georgia, serif;
}

/* ---------- the page title, as on the shop and account pages ---------- */

/*
 * Neve reads the title's alignment from its own --textalign, so centring is a
 * matter of setting the theme's variable rather than fighting its rule — and a
 * per-page alignment set in the editor is an inline style and still wins.
 *
 * The 20px replaces Neve's 60px, the same as the rest of the shop family, so
 * every page on the site starts its content at the same height.
 */
body.oaw-content-page .nv-page-title-wrap {
	--textalign: center;
	margin-top: 20px;
}

body.oaw-content-page .nv-page-title-wrap .nv-page-title h1 {
	font-family: var(--display);
	font-weight: 600;
	font-size: clamp(24px, 3vw, 32px);
	line-height: 1.15;
	margin: 0;
}

/* The 56px amber rule under the title, drawn on the theme's own h1. */
body.oaw-content-page .nv-page-title-wrap .nv-page-title h1::after {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	border-radius: 2px;
	background: var(--amber);
	margin: 12px auto 0;
}

/* Neve leaves this wrapper behind empty on pages with no meta to show. */
body.oaw-content-page .nv-page-title-wrap .nv-meta-list:empty {
	display: none;
}

/* ---------- the prose ---------- */

body.oaw-content-page .nv-content-wrap {
	color: var(--ink);
	font-size: 16.5px;
	line-height: 1.7;
}

/*
 * A readable measure. Applied to the text elements rather than to the wrapper,
 * so a table, a figure or a shortcode's own markup can still use the full
 * column width — capping the container would squeeze those too.
 */
body.oaw-content-page .nv-content-wrap > :is(p, ul, ol, blockquote, dl) {
	max-width: 68ch;
}

body.oaw-content-page .nv-content-wrap :is(h1, h2, h3, h4) {
	font-family: var(--display);
	font-weight: 600;
	line-height: 1.2;
	color: var(--ink);
	text-wrap: balance;
}

body.oaw-content-page .nv-content-wrap h2 {
	font-size: clamp(22px, 2.4vw, 27px);
	margin: 34px 0 10px;
}

body.oaw-content-page .nv-content-wrap h3 {
	font-size: clamp(18px, 2vw, 21px);
	margin: 26px 0 8px;
}

body.oaw-content-page .nv-content-wrap h4 {
	font-size: 17px;
	margin: 22px 0 6px;
}

/* The first heading of the page sits under the title already — no double gap. */
body.oaw-content-page .nv-content-wrap > :is(h1, h2, h3, h4):first-child {
	margin-top: 0;
}

body.oaw-content-page .nv-content-wrap p {
	margin: 0 0 16px;
}

body.oaw-content-page .nv-content-wrap :is(ul, ol) {
	margin: 0 0 16px;
	padding-left: 22px;
}

body.oaw-content-page .nv-content-wrap li {
	margin-bottom: 6px;
}

body.oaw-content-page .nv-content-wrap a {
	color: var(--brand);
	text-decoration: underline;
	text-underline-offset: 2px;
}

body.oaw-content-page .nv-content-wrap a:hover,
body.oaw-content-page .nv-content-wrap a:focus {
	color: var(--deep);
}

/* Named states as well: Neve's `a:focus, a:hover` sets the accent colour at a
   specificity that beats a single class, which is what made the shop's Add
   button lose its label. Here the two colours are both legible, but the rule
   is stated so the page cannot drift. */
body.oaw-content-page .nv-content-wrap a:visited {
	color: var(--brand);
}

body.oaw-content-page .nv-content-wrap blockquote {
	margin: 0 0 18px;
	padding: 12px 18px;
	color: var(--ink-soft);
	background: var(--ground);
	border: 0;
	border-left: 3px solid var(--amber);
	border-radius: 9px;
}

body.oaw-content-page .nv-content-wrap blockquote p:last-child {
	margin-bottom: 0;
}

body.oaw-content-page .nv-content-wrap hr {
	height: 1px;
	margin: 30px 0;
	background: var(--line);
	border: 0;
}

body.oaw-content-page .nv-content-wrap :is(code, kbd, samp) {
	font-size: .92em;
	padding: 2px 5px;
	background: var(--ground);
	border: 1px solid var(--line);
	border-radius: 5px;
}

/* Wide content scrolls in its own box rather than pushing the page sideways. */
body.oaw-content-page .nv-content-wrap table {
	width: 100%;
	display: block;
	overflow-x: auto;
	border-collapse: collapse;
	font-size: 14.5px;
	margin: 0 0 20px;
}

body.oaw-content-page .nv-content-wrap :is(th, td) {
	padding: 9px 12px;
	border: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}

body.oaw-content-page .nv-content-wrap th {
	background: var(--ground);
	font-weight: 700;
}

body.oaw-content-page .nv-content-wrap :is(a, button, input, select, textarea):focus-visible {
	outline: 3px solid var(--amber);
	outline-offset: 2px;
}