/*
 * Content pages (non-Elementor WordPress pages: privacy, terms, accessibility, …).
 * Standalone design — its OWN classes/tokens, independent of the blog (blog.css)
 * so the two can diverge. Hero + framed white card + prose column; the content
 * column is bounded by Elementor's global Content Width (set inline per-request
 * from the active Kit, see prilinq_blog_container_max_width()).
 * Kit values are hardcoded on purpose — the Customizer's --prilinq-accent still
 * defaults to the stale teal and must not leak in here.
 */

.content-page-main {
	--content-page-primary: #47A7F2;
	--content-page-heading: #1E293B;
	--content-page-body: #64748B;
	--content-page-band: #294483;
	--content-page-bg: #294483;
	--content-page-on-bg: #FFFFFF;
	--content-page-surface: #FFFFFF;
	--content-page-border: #E2E8F0;
	--content-page-muted: #94A3B8;
	--content-page-soft: #F8FAFC;
}

/* The hero absorbs the header offset (same as the blog/About recipe). */
.prilinq-standard-page .site-content > .site-main.content-page-main:first-child {
	padding-block-start: 0;
}

/* ---------- Hero (title column + optional description column) ---------- */
.content-page-hero {
	background: var(--content-page-bg, #294483);
	min-height: 500px;
	/* Side padding tracks the theme header's inline padding (Customizer var,
	   responsive at the header's own breakpoints) so the page title lines up
	   with the header content edge on every screen. Only top/bottom are tuned
	   per-breakpoint below. */
	padding-block: 96px 10px;
	padding-inline: var(--prilinq-header-padding-inline, 32px);
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

/* Optional per-page hero video (set via the "Hero video" page field — picks a
   Media Library video, falls back to the plain flat-color hero above when
   unset). Background video + navy gradient overlay matches the Elementor
   page-hero recipe (About/Contact/Pricing/Features): transparent navy fading
   to solid var(--content-page-bg), so hero text stays legible over any footage.
   Own dedicated classes — NOT shared with the Elementor hero recipe. */
.content-page-hero--video {
	position: relative;
	overflow: hidden;
}

.content-page-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.content-page-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 0%, var(--content-page-bg, #294483) 100%);
	z-index: 1;
}

.content-page-hero--video .content-page-hero__title-col,
.content-page-hero--video .content-page-hero__desc-col {
	position: relative;
	z-index: 2;
}

.content-page-hero__title-col {
	width: 60%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.content-page-hero__title {
	margin: 0;
	font-family: var(--prilinq-font-family);
	font-size: 120px;
	font-weight: 700;
	line-height: 1em;
	letter-spacing: -2px;
	text-align: right;
	color: var(--content-page-on-bg, #FFFFFF);
}

.content-page-hero__desc-col {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 40px;
	max-width: 480px;
}

.content-page-hero__description {
	margin: 0 0 20px;
	font-size: 21px;
	line-height: 1.7;
	text-align: right;
	color: var(--content-page-on-bg, #FFFFFF);
}

/* ---------- Frame band + white card (full-bleed; inner content is bounded) ---------- */
.content-page-frame {
	background: var(--content-page-band, #294483);
	padding: 10px 38px 60px 38px;
}

.content-page-frame__card {
	background: var(--content-page-surface, #FFFFFF);
	border-radius: 40px;
	padding: 40px 0;
}

/* Bounds the content to Elementor's global Content Width (set inline per-request
   from the active Kit) — independent of the theme's boxed/full-width toggle. */
.content-page-container {
	max-width: var(--content-page-container-max-width, 1140px);
	margin-inline: auto;
	padding-inline: var(--prilinq-container-padding-inline, 24px);
}

/* ---------- Prose (fills the container = global container width) ---------- */
.content-page__content {
	font-size: 18px;
	line-height: 1.7;
	color: var(--content-page-body, #64748B);
}

.content-page__content h2,
.content-page__content h3,
.content-page__content h4 {
	color: var(--content-page-heading, #1E293B);
	font-weight: 700;
	line-height: 1.25;
	margin: 1.6em 0 0.6em;
}

.content-page__content h2 { font-size: 30px; letter-spacing: -0.5px; }
.content-page__content h3 { font-size: 24px; }
.content-page__content h4 { font-size: 20px; }

.content-page__content p {
	margin: 0 0 1.2em;
}

.content-page__content a {
	color: var(--content-page-primary, #47A7F2);
}

.content-page__content ul,
.content-page__content ol {
	margin: 0 0 1.2em;
	padding-inline-start: 1.4em;
}

.content-page__content li {
	margin-block-end: 0.4em;
}

.content-page__content blockquote {
	margin: 1.4em 0;
	padding: 4px 0;
	padding-inline-start: 20px;
	border-inline-start: 3px solid var(--content-page-primary, #47A7F2);
	color: var(--content-page-heading, #1E293B);
	font-weight: 500;
}

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

/* ---------- Shared content-page CTA button (404, etc.) ---------- */
.content-page-btn {
	display: inline-flex;
	align-items: center;
	padding: 16px 30px;
	border-radius: 10px;
	background: var(--content-page-primary, #47A7F2);
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
}

.content-page-btn:hover,
.content-page-btn:focus-visible {
	color: #fff;
}

/* ---------- 404 empty state (centered inside the framed card) ---------- */
.error-404__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 16px;
	padding-block: 40px;
}

.error-404__title {
	margin: 0;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.5px;
	color: var(--content-page-heading, #1E293B);
}

.error-404__text {
	margin: 0;
	font-size: 18px;
	line-height: 1.7;
	color: var(--content-page-body, #64748B);
}

.error-404__body .content-page-btn {
	margin-block-start: 8px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.content-page-hero {
		flex-direction: column;
		/* Pin the title to the bottom of the hero (single-column stack). */
		justify-content: flex-end;
		/* Trimmed top spacing — the header scrolls with the page, so this
		   padding is decorative, not clearance. */
		min-height: 240px;
		padding-block: 40px 10px;
	}

	.content-page-hero__title-col,
	.content-page-hero__desc-col {
		width: 100%;
	}

	/* Content/legal pages use a lighter hero than marketing pages — step the
	   title down from the 120/50/46 marketing-hero scale. */
	.content-page-hero__title {
		font-size: 42px;
	}

	.content-page-hero__desc-col {
		padding: 10px 0 0;
		max-width: none;
	}

	.content-page-hero__description {
		font-size: 19px;
	}

	.content-page-frame {
		padding: 20px 28px 40px 28px;
	}
}

@media (max-width: 767px) {
	.content-page-hero {
		min-height: 200px;
		padding-block: 28px 10px;
	}

	.content-page-hero__title {
		font-size: 34px;
	}

	.content-page-hero__description {
		font-size: 14px;
	}

	.content-page-frame {
		padding: 20px;
	}

	.content-page-frame__card {
		border-radius: 20px;
		padding: 20px 0;
	}

	/* Reduce in-content headings on mobile, one step down the scale. */
	.content-page__content h2 { font-size: 26px; }
	.content-page__content h3 { font-size: 22px; }
	.content-page__content h4 { font-size: 18px; }

	.error-404__title { font-size: 26px; }
	.error-404__body { padding-block: 24px; }
}