/**
 * VU Page Templates
 *
 * Layout glue and generic content typography for the reusable service/
 * application page templates (WEB-06):
 *   page-templates/template-service.php
 *   page-templates/template-application.php
 *   template-parts/content-page-family.php
 *
 * Structural sections (title, intro, media, CTA band, related-pages
 * list) are built entirely from existing WEB-03 primitives in
 * components.css (.vu-section, .vu-container, .vu-eyebrow,
 * .vu-heading-section, .vu-section-desc, .vu-media, .vu-cta-band,
 * .vu-btn--ghost) — nothing is duplicated here. This file only adds
 * what components.css does not already cover: typography for the
 * editor's own the_content() output (.vu-content), and layout for the
 * related-pages link row (.vu-related-links).
 */

/* ---------- Generic content typography ---------- */
/* Styles raw Gutenberg block output inside the_content() — headings,
   paragraphs, lists, links, emphasis, blockquote — so CONTENT-02/03
   copy is legible against the dark .vu-site background without each
   page needing its own custom classes. */

.vu-content {
	color: var(--vu-color-gray);
	font-family: var(--vu-font-body);
	font-size: var(--vu-text-lg);
	line-height: 1.7;
}
.vu-content > * + * {
	margin-top: 1.25em;
}
.vu-content h2 {
	font-family: var(--vu-font-display);
	font-weight: 400; /* Bebas Neue ships one weight only; Kadence's global h1-h6 default (700) has no matching face — see tokens.css */
	font-size: var(--vu-text-display-sm);
	line-height: 1.1;
	color: var(--vu-color-white);
}
.vu-content h3 {
	font-family: var(--vu-font-ui);
	font-size: var(--vu-text-xl);
	font-weight: 600;
	color: var(--vu-color-white);
}
.vu-content h4,
.vu-content h5,
.vu-content h6 {
	font-family: var(--vu-font-ui);
	font-weight: 600;
	color: var(--vu-color-white);
}
.vu-content a {
	color: var(--vu-color-red);
	text-decoration: underline;
	text-underline-offset: .15em;
}
.vu-content a:hover,
.vu-content a:focus-visible {
	color: var(--vu-color-white);
}
.vu-content strong {
	color: var(--vu-color-white);
	font-weight: 600;
}
.vu-content ul,
.vu-content ol {
	padding-left: 1.25em;
}
.vu-content li + li {
	margin-top: .4em;
}
.vu-content blockquote {
	padding-left: 1em;
	border-left: 3px solid var(--vu-color-red);
	color: var(--vu-color-white);
	font-style: italic;
}

/* ---------- Related-pages link row ---------- */
/* Same-family sibling pages (vu_get_family_sibling_pages(), matched by
   native WordPress page-template assignment). Plain flex-wrap row of
   .vu-btn--ghost links — not a grid of cards, so .vu-grid--hairline
   does not apply here. */

.vu-related-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.vu-related-links .vu-btn--ghost {
	flex: 0 0 auto;
}

/* ---------- Page-article section spacing ---------- */
/* .vu-section already sets top/bottom padding; the optional media
   block between the header and the content section is not a
   .vu-section itself, so it needs its own bottom spacing to avoid
   crowding the content that follows it. */

.vu-page-article__media {
	margin-bottom: var(--vu-section-py);
}

/*
 * WEB-TRUST-01: the first .vu-section right after the interior-page
 * hero/header doubles up on --vu-section-py — its own padding-top
 * stacks with whatever comes right before it, producing an oversized
 * gap Cristian flagged on /a-propos/. On Contact (no hero media) that's
 * the header's own padding-bottom; on About/Service/Application pages
 * (all of which have a hero image) it's .vu-page-article__media's
 * margin-bottom instead. Scoped to only the section immediately
 * following the header or the hero media — normal section-to-section
 * rhythm further down the page, --vu-section-py itself, and the
 * homepage (which never uses these classes) are all untouched. Halved
 * via calc() rather than a new literal, so it still scales with the
 * existing 640px breakpoint.
 */
.vu-page-article__header + .vu-section,
.vu-page-article__media + .vu-section {
	padding-top: calc(var(--vu-section-py) / 2);
}

/*
 * FORM-02: a bare-fallback Standard Page (template-standard.php's
 * else-branch) that actually embeds a CF7 form needs its own tighter
 * H1-to-content rhythm and a shared width measure across H1, intro
 * copy and the form. Scoped specifically to CF7's presence
 * (:has(+ .vu-page-article__content .wpcf7)), not to the bare-fallback
 * structure alone — so this stays tied to "a fallback page containing
 * a form" and does not become the default geometry for every future
 * bare-fallback Standard Page, or bleed onto every future CF7 form
 * regardless of context. .vu-page-article__header itself (shared by
 * content-page-detail.php/content-page-contact.php) is never touched
 * directly, so About/Contact/Service/Application cannot match this
 * regardless of template assignment.
 */
.vu-page-article__header:has(+ .vu-page-article__content .wpcf7) {
	padding-bottom: 0;
}

.vu-page-article__header:has(+ .vu-page-article__content .wpcf7) .vu-container,
.vu-page-article__content:has(.wpcf7) .vu-container {
	max-width: 820px;
}