/**
 * Static, breakpoint-agnostic rules for the Helloprev article layout.
 * All typography, colors and configurable spacing come from the CSS
 * custom properties generated by HP_Articles_Css_Generator — nothing
 * here should need to change when an admin edits the design settings.
 */

.hp-article {
	max-width: calc(var(--hp-content-max-width, 720px) + var(--hp-toc-width, 260px) + var(--hp-gutter, 48px));
	margin: 0 auto;
	padding: 0 var(--hp-padding, 32px);
	font-family: var(--hp-font-body, "Poppins", sans-serif);
	color: var(--hp-color-brand-blue-dark, #201e73);
}

.hp-article h1,
.hp-article h2,
.hp-article h3,
.hp-article h4,
.hp-article h5,
.hp-article h6 {
	font-family: var(--hp-font-heading, inherit);
}

/* Headings + text components: each level maps 1:1 to its --hp-{level}-* vars. */
.hp-article__title,
.hp-article__content h1 { font-family: var(--hp-h1-font-family); font-size: var(--hp-h1-font-size); font-weight: var(--hp-h1-font-weight); font-style: var(--hp-h1-font-style); text-transform: var(--hp-h1-text-transform); letter-spacing: var(--hp-h1-letter-spacing); line-height: var(--hp-h1-line-height); color: var(--hp-h1-color); margin-block-start: var(--hp-h1-margin-top); margin-block-end: var(--hp-h1-margin-bottom); }

.hp-article__content h2 { font-family: var(--hp-h2-font-family); font-size: var(--hp-h2-font-size); font-weight: var(--hp-h2-font-weight); font-style: var(--hp-h2-font-style); text-transform: var(--hp-h2-text-transform); letter-spacing: var(--hp-h2-letter-spacing); line-height: var(--hp-h2-line-height); color: var(--hp-h2-color); margin-block-start: var(--hp-h2-margin-top); margin-block-end: var(--hp-h2-margin-bottom); scroll-margin-top: var(--hp-header-offset, 32px); }

.hp-article__content h3 { font-family: var(--hp-h3-font-family); font-size: var(--hp-h3-font-size); font-weight: var(--hp-h3-font-weight); font-style: var(--hp-h3-font-style); text-transform: var(--hp-h3-text-transform); letter-spacing: var(--hp-h3-letter-spacing); line-height: var(--hp-h3-line-height); color: var(--hp-h3-color); margin-block-start: var(--hp-h3-margin-top); margin-block-end: var(--hp-h3-margin-bottom); scroll-margin-top: var(--hp-header-offset, 32px); }

.hp-article__content h4 { font-family: var(--hp-h4-font-family); font-size: var(--hp-h4-font-size); font-weight: var(--hp-h4-font-weight); font-style: var(--hp-h4-font-style); text-transform: var(--hp-h4-text-transform); letter-spacing: var(--hp-h4-letter-spacing); line-height: var(--hp-h4-line-height); color: var(--hp-h4-color); margin-block-start: var(--hp-h4-margin-top); margin-block-end: var(--hp-h4-margin-bottom); }

.hp-article__content h5 { font-family: var(--hp-h5-font-family); font-size: var(--hp-h5-font-size); font-weight: var(--hp-h5-font-weight); font-style: var(--hp-h5-font-style); text-transform: var(--hp-h5-text-transform); letter-spacing: var(--hp-h5-letter-spacing); line-height: var(--hp-h5-line-height); color: var(--hp-h5-color); margin-block-start: var(--hp-h5-margin-top); margin-block-end: var(--hp-h5-margin-bottom); }

.hp-article__content h6 { font-family: var(--hp-h6-font-family); font-size: var(--hp-h6-font-size); font-weight: var(--hp-h6-font-weight); font-style: var(--hp-h6-font-style); text-transform: var(--hp-h6-text-transform); letter-spacing: var(--hp-h6-letter-spacing); line-height: var(--hp-h6-line-height); color: var(--hp-h6-color); margin-block-start: var(--hp-h6-margin-top); margin-block-end: var(--hp-h6-margin-bottom); }

.hp-article__content p { font-family: var(--hp-paragraph-font-family); font-size: var(--hp-paragraph-font-size); font-weight: var(--hp-paragraph-font-weight); line-height: var(--hp-paragraph-line-height); letter-spacing: var(--hp-paragraph-letter-spacing); color: var(--hp-paragraph-color); margin-block-start: var(--hp-paragraph-margin-top); margin-block-end: var(--hp-paragraph-margin-bottom); }

.hp-article__chapo { font-family: var(--hp-chapo-font-family); font-size: var(--hp-chapo-font-size); font-weight: var(--hp-chapo-font-weight); line-height: var(--hp-chapo-line-height); letter-spacing: var(--hp-chapo-letter-spacing); color: var(--hp-chapo-color); margin-block-start: var(--hp-chapo-margin-top); margin-block-end: var(--hp-chapo-margin-bottom); max-width: 640px; }

.hp-article__content a,
.hp-article__cta-button { color: var(--hp-link-color); font-weight: var(--hp-link-font-weight); text-decoration: underline; }
.hp-article__content a:hover,
.hp-article__content a:focus-visible { text-decoration-thickness: 2px; }

.hp-article__content ul,
.hp-article__content ol { font-family: var(--hp-list-font-family); font-size: var(--hp-list-font-size); line-height: var(--hp-list-line-height); color: var(--hp-list-color); margin-block-start: var(--hp-list-margin-top); margin-block-end: var(--hp-list-margin-bottom); padding-inline-start: 1.4em; }
.hp-article__content li + li { margin-top: 0.5em; }

.hp-article__content blockquote { font-family: var(--hp-quote-font-family); font-size: var(--hp-quote-font-size); font-style: var(--hp-quote-font-style); line-height: var(--hp-quote-line-height); color: var(--hp-quote-color); margin-block-start: var(--hp-quote-margin-top); margin-block-end: var(--hp-quote-margin-bottom); border-inline-start: 4px solid var(--hp-color-brand-orange, #f7802f); padding-inline-start: 1em; }

.hp-article__surtitre { font-family: var(--hp-surtitre-font-family); font-size: var(--hp-surtitre-font-size); font-weight: var(--hp-surtitre-font-weight); letter-spacing: var(--hp-surtitre-letter-spacing); text-transform: var(--hp-surtitre-text-transform); color: var(--hp-surtitre-color); margin: 0 0 var(--hp-surtitre-margin-bottom); }
.hp-article__surtitre a { color: inherit; text-decoration: none; }

.hp-article__meta { font-family: var(--hp-meta-font-family); font-size: var(--hp-meta-font-size); color: var(--hp-meta-color); display: flex; flex-wrap: wrap; gap: 0.75em; margin-top: 1em; }
.hp-article__meta span + span::before { content: "·"; margin-inline-end: 0.75em; }

/* Structural layout: hero, TOC, cards. */
.hp-article__hero { display: grid; grid-template-columns: 1fr 1fr; gap: var(--hp-gutter, 48px); align-items: center; padding-block: 2em; }
.hp-article__hero-image img { width: 100%; height: auto; border-radius: var(--hp-radius, 12px); display: block; }

.hp-article__body { display: grid; grid-template-columns: var(--hp-toc-width, 260px) minmax(0, 1fr); gap: var(--hp-gutter, 48px); align-items: start; padding-block: 1em 3em; }
.hp-article__body--no-toc { grid-template-columns: 1fr; }

.hp-article__toc--desktop { position: sticky; top: var(--hp-header-offset, 32px); }
.hp-article__toc-list { list-style: none; margin: 0; padding: 0; border-inline-start: 2px solid var(--hp-color-gray-light, #f3f3ff); }
.hp-article__toc-list a { display: block; padding: 0.4em 0 0.4em 1em; color: var(--hp-color-brand-blue-dark, #201e73); text-decoration: none; }
.hp-article__toc-list a.is-active { color: var(--hp-color-brand-orange, #f7802f); border-inline-start: 2px solid var(--hp-color-brand-orange, #f7802f); margin-inline-start: -2px; }
.hp-article__toc-item--level-3 a { padding-inline-start: 2em; font-size: 0.9em; }

.hp-article__toc--accordion { display: none; margin-bottom: 1.5em; }
.hp-article__toc-toggle { width: 100%; text-align: left; padding: 0.75em 1em; background: var(--hp-color-gray-light, #f3f3ff); border: none; border-radius: var(--hp-radius, 12px); font-weight: 600; cursor: pointer; }
.hp-article__toc-panel[hidden] { display: none; }
.hp-article__toc-panel { padding: 0.5em 1em; }

.hp-article__content { min-width: 0; }
.hp-article__content img { max-width: 100%; height: auto; border-radius: var(--hp-radius, 12px); }

.hp-article__cta { display: flex; justify-content: space-between; align-items: center; gap: 1.5em; background: var(--hp-color-gray-light, #f3f3ff); border-radius: var(--hp-radius, 12px); padding: 1.5em 2em; margin-block: 2em; }
.hp-article__cta-button { background: var(--hp-color-brand-orange, #f7802f); color: #fff !important; text-decoration: none !important; padding: 0.75em 1.5em; border-radius: 999px; font-weight: 600; white-space: nowrap; }

.hp-article__author { display: flex; align-items: center; gap: 1em; padding-block: 1.5em; border-top: 1px solid var(--hp-color-gray-light, #f3f3ff); }
.hp-article__author-avatar img { border-radius: 50%; display: block; }
.hp-article__author-name { font-weight: 600; margin: 0; }
.hp-article__author-bio { margin: 0.25em 0 0; color: var(--hp-meta-color); }

.hp-article__related { padding-block: 2em; }
.hp-article__related-title { font-weight: 700; font-size: 1.25em; margin-bottom: 1em; }
.hp-article__related-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5em; }
.hp-article__related-card { display: flex; flex-direction: column; gap: 0.4em; text-decoration: none; color: inherit; }
.hp-article__related-card img { border-radius: var(--hp-radius, 12px); width: 100%; height: auto; }
.hp-article__related-cat { color: var(--hp-color-brand-orange, #f7802f); font-size: 0.8em; font-weight: 700; text-transform: uppercase; }
.hp-article__related-name { font-weight: 600; }
.hp-article__related-time { font-size: 0.85em; color: var(--hp-meta-color); }

@media (prefers-reduced-motion: reduce) {
	.hp-article * { scroll-behavior: auto !important; }
}