/*
	Shared CSS – layout glue between the theme and the sections.
	Each section has its own scoped stylesheet in assets/css/sections/<name>.css.
	Only put rules here that are truly shared by several sections.
*/

/*
	The site-wide header is laid over the top of the page and takes no space. Sections built for the top
	of a page (hero, page-header) add --header-offset themselves; pages rendered by the theme
	templates without such a section (blog, article, 404) get the room here instead.
*/
.site-main {
	padding-top: calc(var(--header-offset, 0px) + var(--space-5));
}

/*
	Pages rendered by page.php start with the page-header section, which already
	clears the header. Plain content gets breathing room; Elementor content is
	left alone so its own sections can run edge to edge.
*/
.site-main.hec-main {
	padding-top: 0;
}

body:not(.elementor-page) .site-main.hec-main {
	padding: var(--space-7) var(--space-gutter);
}

/*
	Pages written in the WordPress editor, not with Elementor (page.php adds .hec-prose): privacy policy,
	legal notices… The text starts on the h1's edge (site container) in one reading column, with the same
	typography as a blog post (assets/css/sections/post-content.css).
*/
.site-main.hec-main:has(> .hec-prose) { width: 100%; max-width: none; margin: 0; }
.hec-prose {
	max-width: var(--container); margin: 0 auto; padding-block: var(--space-3) var(--space-7);
	color: var(--c-text-muted); font-family: var(--f-body); font-size: var(--fs-lg); line-height: 1.7;
}
.hec-prose > * { max-width: 46rem; margin: 0 0 var(--space-5); }
.hec-prose > :last-child { margin-bottom: 0; }
.hec-prose h2, .hec-prose h3, .hec-prose h4 { margin: var(--space-7) 0 var(--space-3); color: var(--c-heading); font-family: var(--f-heading); font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; }
.hec-prose > h2:first-child, .hec-prose > p:first-child + h2 { margin-top: var(--space-5); }
.hec-prose h2 { font-size: var(--fs-xl); }
.hec-prose h3 { font-size: var(--fs-lg); }
.hec-prose h4 { font-size: var(--fs-base); }
.hec-prose strong { color: var(--c-heading); }
.hec-prose a { color: var(--c-primary); font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; overflow-wrap: anywhere; }
.hec-prose a:hover, .hec-prose a:focus { color: var(--c-accent); }
.hec-prose a:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 3px; }
.hec-prose ul, .hec-prose ol { padding-left: 1.5rem; }
.hec-prose li { margin-bottom: var(--space-2); }
.hec-prose li::marker { color: var(--c-accent); font-weight: 700; }

/* Blog page (home.php): the list is a full-width section, edge to edge like the others */
body:not(.elementor-page) .site-main.hec-main--flush,
body:not([class*="elementor-page-"]) .site-main.hec-main--flush {
	width: 100%; max-width: none; margin: 0; padding: 0;
}

/*
	Entrance of the sections' blocks, site-wide. sections.js adds .hec-reveal to
	a block that is still below the screen, then .is-in the first time it comes
	on screen: it rises into place, the blocks of a section one after the other
	(--hec-i = position in the section). Same movement as the hero's on load.
	Nothing is hidden without the script or with "reduce motion".
*/
.hec-reveal:not(.is-in) {
	opacity: 0;
}

.hec-reveal.is-in {
	animation: hec-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
	animation-delay: calc(var(--hec-i, 0) * 0.09s);
}

@keyframes hec-rise {
	from {
		opacity: 0;
		transform: translateY(1.25rem);
	}
}

@media print, (prefers-reduced-motion: reduce) {
	.hec-reveal:not(.is-in) {
		opacity: 1;
	}

	.hec-reveal.is-in {
		animation: none;
	}
}