/*------------------------------------------------------------
Simple content pages — Terms, Privacy, and anything else that is
just a title and some prose.

Same philosophy as faqs.css and lego-sets.css: plain CSS, no fixed
1920px stage, so it does not fight the homepage's layout system.
Colour tokens match the brand palette.

Applies to page.php, which is the fallback template for any page
without one of its own. Home, FAQs and Menu have their own.
------------------------------------------------------------*/

/* A page this short would otherwise leave the footer floating mid-screen.
   #container is the element in flow (body's only real child; .nav is
   position:fixed), so the sticky footer goes there. Scoped to the default
   template so the homepage's fixed 1920px stage is untouched — and this
   stylesheet only loads on those pages in any case. */
/* No width here on purpose. Above 1280px the design is a fixed 1920px
   stage that body's `align-items: center` centres; pinning this to 100%
   would size it to the viewport and let the stage overflow to the right
   instead of being centred. Left to size from its content. */
body.page-template-default #container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

body.page-template-default #container .site-footer {
	margin-top: auto;
}

.content-page {
	--cp-orange: #FF8200;
	--cp-ink: #111111;
	--cp-cream: #EADFCF;
	--cp-border: #E2DED6;
	font-family: 'DM Sans', sans-serif;
	color: var(--cp-ink);
	max-width: 760px;
	margin: 0 auto;
	/* Top padding clears the fixed nav, matching .faq-page. */
	padding: 160px 24px 96px;
}

.content-page__title {
	font-family: 'F37Analogue', sans-serif;
	font-size: 40px;
	line-height: 1.15;
	text-align: center;
	margin: 0 0 12px;
}

/* Short rule under the title, echoing the cafe's accent colour. */
.content-page__title::after {
	content: '';
	display: block;
	width: 64px;
	height: 4px;
	margin: 20px auto 0;
	border-radius: 2px;
	background: var(--cp-orange);
}

.content-page__updated {
	margin: 0 0 48px;
	text-align: center;
	font-size: 15px;
	opacity: 0.6;
}

/* ── Prose ────────────────────────────────────────────────── */

.content-page__body {
	font-size: 17px;
	line-height: 1.7;
}

.content-page__body > *:first-child { margin-top: 0; }
.content-page__body > *:last-child  { margin-bottom: 0; }

.content-page__body p {
	margin: 0 0 1.25em;
}

.content-page__body h2 {
	font-family: 'F37Analogue', sans-serif;
	font-size: 26px;
	line-height: 1.25;
	margin: 2em 0 0.5em;
}

.content-page__body h3 {
	font-size: 20px;
	font-weight: 700;
	margin: 1.75em 0 0.5em;
}

.content-page__body ul,
.content-page__body ol {
	margin: 0 0 1.25em;
	padding-left: 1.35em;
}

.content-page__body li {
	margin-bottom: 0.5em;
}

.content-page__body a {
	color: inherit;
	text-underline-offset: 3px;
}

.content-page__body a:hover,
.content-page__body a:focus-visible {
	color: var(--cp-orange);
}

.content-page__body blockquote {
	margin: 1.5em 0;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--cp-cream);
	font-style: italic;
}

.content-page__body hr {
	margin: 2.5em 0;
	border: 0;
	border-top: 1px solid var(--cp-border);
}

/* Wide content should scroll inside itself rather than pushing the
   page sideways. */
.content-page__body table {
	display: block;
	overflow-x: auto;
	width: 100%;
	border-collapse: collapse;
}

.content-page__body th,
.content-page__body td {
	padding: 10px 12px;
	border: 1px solid var(--cp-border);
	text-align: left;
}

.content-page__body img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}

/* ── Empty state ──────────────────────────────────────────── */

.content-page__empty {
	padding: 32px 24px;
	border: 1px dashed var(--cp-border);
	border-radius: 12px;
	text-align: center;
	opacity: 0.75;
}

@media (max-width: 700px) {

	.content-page {
		/* Top padding stays at 160px. The nav is fixed and its burger
		   reaches 140px down the viewport at this width, so trimming this
		   to match the tighter side padding put the title underneath it.
		   .faq-page holds 160px at every breakpoint for the same reason. */
		padding: 160px 20px 64px;
	}

	.content-page__title {
		font-size: 30px;
	}

	.content-page__body {
		font-size: 16px;
		line-height: 1.65;
	}

	.content-page__body h2 { font-size: 22px; }
	.content-page__body h3 { font-size: 18px; }

}