/*
 * Article body styling — the single source of truth, used by BOTH:
 *   - the live article page  (<link href="/article-content.css">), and
 *   - the Directus Articles editor (loaded live via the field's content_css).
 *
 * Edit this file directly, then deploy the storefront. The live site AND the editor
 * both fetch this exact file, so they can never disagree. (If the edge cached it,
 * purge /article-content.css at Cloudflare.)
 *
 * Scoped to `.article-content` (typography) + `.legacy-rich-html` (the ink-* grid)
 * so nothing leaks globally. The initial rules mirror the storefront's prose
 * typography + brand tokens from src/app.css — keep colours in sync if those change.
 */

/* ---- Base (mobile-first = prose-sm) ---- */

.article-content {
	font-family: 'Inter', 'Inter Fallback', 'Segoe UI Variable Text', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}
.article-content :is(h1, h2, h3, h4, h5, h6) {
	font-family: 'Inter', 'Inter Fallback', 'Segoe UI Variable Text', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

.article-content {
	color: #191919;
	font-size: 0.875rem;
	line-height: 1.7142857;
}

.article-content p {
	margin-top: 1.1428571em;
	margin-bottom: 1.1428571em;
}

.article-content [class~="lead"] {
	color: #5f5769;
	font-size: 1.2857143em;
	line-height: 1.5555556;
	margin-top: 0.8888889em;
	margin-bottom: 0.8888889em;
}

.article-content a {
	color: #8c35b4;
	text-decoration: underline;
	font-weight: 500;
}

.article-content strong {
	color: #191919;
	font-weight: 600;
}

.article-content a strong {
	color: inherit;
}

.article-content blockquote strong {
	color: inherit;
}

.article-content thead th strong {
	color: inherit;
}

.article-content ol {
	list-style-type: decimal;
	margin-top: 1.1428571em;
	margin-bottom: 1.1428571em;
	padding-inline-start: 1.5714286em;
}

.article-content ol[type="A"] {
	list-style-type: upper-alpha;
}

.article-content ol[type="a"] {
	list-style-type: lower-alpha;
}

.article-content ol[type="A" s] {
	list-style-type: upper-alpha;
}

.article-content ol[type="a" s] {
	list-style-type: lower-alpha;
}

.article-content ol[type="I"] {
	list-style-type: upper-roman;
}

.article-content ol[type="i"] {
	list-style-type: lower-roman;
}

.article-content ol[type="I" s] {
	list-style-type: upper-roman;
}

.article-content ol[type="i" s] {
	list-style-type: lower-roman;
}

.article-content ol[type="1"] {
	list-style-type: decimal;
}

.article-content ul {
	list-style-type: disc;
	margin-top: 1.1428571em;
	margin-bottom: 1.1428571em;
	padding-inline-start: 1.5714286em;
}

.article-content ol > li::marker {
	font-weight: 400;
	color: #5f5769;
}

.article-content ul > li::marker {
	color: #ded4eb;
}

.article-content dt {
	color: #4a1d67;
	font-weight: 600;
	margin-top: 1.1428571em;
}

.article-content hr {
	border-color: #ded4eb;
	border-top-width: 1px;
	margin-top: 2.8571429em;
	margin-bottom: 2.8571429em;
}

.article-content blockquote {
	font-weight: 500;
	font-style: italic;
	color: #4a1d67;
	border-inline-start-width: 0.25rem;
	border-inline-start-color: #8c35b4;
	quotes: "\201C""\201D""\2018""\2019";
	margin-top: 1.3333333em;
	margin-bottom: 1.3333333em;
	padding-inline-start: 1.1111111em;
}

.article-content blockquote p:first-of-type::before {
	content: open-quote;
}

.article-content blockquote p:last-of-type::after {
	content: close-quote;
}

.article-content h1 {
	color: #4a1d67;
	font-weight: 800;
	font-size: 2.1428571em;
	margin-top: 0;
	margin-bottom: 0.8em;
	line-height: 1.2;
}

.article-content h1 strong {
	font-weight: 900;
	color: inherit;
}

.article-content h2 {
	color: #4a1d67;
	font-weight: 700;
	font-size: 1.4285714em;
	margin-top: 1.6em;
	margin-bottom: 0.8em;
	line-height: 1.4;
}

.article-content h2 strong {
	font-weight: 800;
	color: inherit;
}

.article-content h3 {
	color: #4a1d67;
	font-weight: 600;
	font-size: 1.2857143em;
	margin-top: 1.5555556em;
	margin-bottom: 0.4444444em;
	line-height: 1.5555556;
}

.article-content h3 strong {
	font-weight: 700;
	color: inherit;
}

.article-content h4 {
	color: #4a1d67;
	font-weight: 600;
	margin-top: 1.4285714em;
	margin-bottom: 0.5714286em;
	line-height: 1.4285714;
}

.article-content h4 strong {
	font-weight: 700;
	color: inherit;
}

.article-content img {
	margin-top: 1.7142857em;
	margin-bottom: 1.7142857em;
}

.article-content picture {
	display: block;
	margin-top: 1.7142857em;
	margin-bottom: 1.7142857em;
}

.article-content video {
	margin-top: 1.7142857em;
	margin-bottom: 1.7142857em;
}

.article-content code {
	color: #4a1d67;
	font-weight: 600;
	font-size: 0.8571429em;
}

.article-content code::before {
	content: "`";
}

.article-content code::after {
	content: "`";
}

.article-content a code {
	color: inherit;
}

.article-content h1 code {
	color: inherit;
}

.article-content h2 code {
	color: inherit;
	font-size: 0.9em;
}

.article-content h3 code {
	color: inherit;
	font-size: 0.8888889em;
}

.article-content h4 code {
	color: inherit;
}

.article-content blockquote code {
	color: inherit;
}

.article-content thead th code {
	color: inherit;
}

.article-content pre {
	color: #ffffff;
	background-color: #191919;
	overflow-x: auto;
	font-weight: 400;
	font-size: 0.8571429em;
	line-height: 1.6666667;
	margin-top: 1.6666667em;
	margin-bottom: 1.6666667em;
	border-radius: 0.25rem;
	padding-top: 0.6666667em;
	padding-inline-end: 1em;
	padding-bottom: 0.6666667em;
	padding-inline-start: 1em;
}

.article-content pre code {
	background-color: transparent;
	border-width: 0;
	border-radius: 0;
	padding: 0;
	font-weight: inherit;
	color: inherit;
	font-size: inherit;
	font-family: inherit;
	line-height: inherit;
}

.article-content pre code::before {
	content: none;
}

.article-content pre code::after {
	content: none;
}

.article-content table {
	width: 100%;
	table-layout: auto;
	margin-top: 2em;
	margin-bottom: 2em;
	font-size: 0.8571429em;
	line-height: 1.5;
}

.article-content thead {
	border-bottom-width: 1px;
	border-bottom-color: #ded4eb;
}

.article-content thead th {
	color: #4a1d67;
	font-weight: 600;
	vertical-align: bottom;
	padding-inline-end: 1em;
	padding-bottom: 0.6666667em;
	padding-inline-start: 1em;
}

.article-content tbody tr {
	border-bottom-width: 1px;
	border-bottom-color: #ded4eb;
}

.article-content tbody tr:last-child {
	border-bottom-width: 0;
}

.article-content tbody td {
	vertical-align: baseline;
}

.article-content tfoot {
	border-top-width: 1px;
	border-top-color: #ded4eb;
}

.article-content tfoot td {
	vertical-align: top;
}

.article-content th, td {
	text-align: start;
}

.article-content figure > * {
	margin-top: 0;
	margin-bottom: 0;
}

.article-content figcaption {
	color: #5f5769;
	font-size: 0.8571429em;
	line-height: 1.3333333;
	margin-top: 0.6666667em;
}

.article-content picture > img {
	margin-top: 0;
	margin-bottom: 0;
}

.article-content li {
	margin-top: 0.2857143em;
	margin-bottom: 0.2857143em;
}

.article-content ol > li {
	padding-inline-start: 0.4285714em;
}

.article-content ul > li {
	padding-inline-start: 0.4285714em;
}

.article-content > ul > li p {
	margin-top: 0.5714286em;
	margin-bottom: 0.5714286em;
}

.article-content > ul > li > p:first-child {
	margin-top: 1.1428571em;
}

.article-content > ul > li > p:last-child {
	margin-bottom: 1.1428571em;
}

.article-content > ol > li > p:first-child {
	margin-top: 1.1428571em;
}

.article-content > ol > li > p:last-child {
	margin-bottom: 1.1428571em;
}

.article-content ul ul, ul ol, ol ul, ol ol {
	margin-top: 0.5714286em;
	margin-bottom: 0.5714286em;
}

.article-content dl {
	margin-top: 1.1428571em;
	margin-bottom: 1.1428571em;
}

.article-content dd {
	margin-top: 0.2857143em;
	padding-inline-start: 1.5714286em;
}

.article-content hr + * {
	margin-top: 0;
}

.article-content h2 + * {
	margin-top: 0;
}

.article-content h3 + * {
	margin-top: 0;
}

.article-content h4 + * {
	margin-top: 0;
}

.article-content thead th:first-child {
	padding-inline-start: 0;
}

.article-content thead th:last-child {
	padding-inline-end: 0;
}

.article-content tbody td, tfoot td {
	padding-top: 0.6666667em;
	padding-inline-end: 1em;
	padding-bottom: 0.6666667em;
	padding-inline-start: 1em;
}

.article-content tbody td:first-child, tfoot td:first-child {
	padding-inline-start: 0;
}

.article-content tbody td:last-child, tfoot td:last-child {
	padding-inline-end: 0;
}

.article-content figure {
	margin-top: 1.7142857em;
	margin-bottom: 1.7142857em;
}

.article-content > :first-child {
	margin-top: 0;
}

.article-content > :last-child {
	margin-bottom: 0;
}

/* ---- >= 768px (md:prose-base) ---- */

@media (min-width: 768px) {
	.article-content {
		font-size: 1rem;
		line-height: 1.75;
	}

	.article-content p {
		margin-top: 1.25em;
		margin-bottom: 1.25em;
	}

	.article-content [class~="lead"] {
		font-size: 1.25em;
		line-height: 1.6;
		margin-top: 1.2em;
		margin-bottom: 1.2em;
	}

	.article-content ol {
		margin-top: 1.25em;
		margin-bottom: 1.25em;
		padding-inline-start: 1.625em;
	}

	.article-content ul {
		margin-top: 1.25em;
		margin-bottom: 1.25em;
		padding-inline-start: 1.625em;
	}

	.article-content dt {
		margin-top: 1.25em;
	}

	.article-content hr {
		margin-top: 3em;
		margin-bottom: 3em;
	}

	.article-content blockquote {
		margin-top: 1.6em;
		margin-bottom: 1.6em;
		padding-inline-start: 1em;
	}

	.article-content h1 {
		font-size: 2.25em;
		margin-top: 0;
		margin-bottom: 0.8888889em;
		line-height: 1.1111111;
	}

	.article-content h2 {
		font-size: 1.5em;
		margin-top: 2em;
		margin-bottom: 1em;
		line-height: 1.3333333;
	}

	.article-content h3 {
		font-size: 1.25em;
		margin-top: 1.6em;
		margin-bottom: 0.6em;
		line-height: 1.6;
	}

	.article-content h4 {
		margin-top: 1.5em;
		margin-bottom: 0.5em;
		line-height: 1.5;
	}

	.article-content img {
		margin-top: 2em;
		margin-bottom: 2em;
	}

	.article-content picture {
		margin-top: 2em;
		margin-bottom: 2em;
	}

	.article-content video {
		margin-top: 2em;
		margin-bottom: 2em;
	}

	.article-content code {
		font-size: 0.875em;
	}

	.article-content h2 code {
		font-size: 0.875em;
	}

	.article-content h3 code {
		font-size: 0.9em;
	}

	.article-content pre {
		font-size: 0.875em;
		line-height: 1.7142857;
		margin-top: 1.7142857em;
		margin-bottom: 1.7142857em;
		border-radius: 0.375rem;
		padding-top: 0.8571429em;
		padding-inline-end: 1.1428571em;
		padding-bottom: 0.8571429em;
		padding-inline-start: 1.1428571em;
	}

	.article-content pre code {
		border-radius: 0;
		padding: 0;
		font-size: inherit;
		line-height: inherit;
	}

	.article-content table {
		margin-top: 2em;
		margin-bottom: 2em;
		font-size: 0.875em;
		line-height: 1.7142857;
	}

	.article-content thead th {
		padding-inline-end: 0.5714286em;
		padding-bottom: 0.5714286em;
		padding-inline-start: 0.5714286em;
	}

	.article-content figure > * {
		margin-top: 0;
		margin-bottom: 0;
	}

	.article-content figcaption {
		font-size: 0.875em;
		line-height: 1.4285714;
		margin-top: 0.8571429em;
	}

	.article-content picture > img {
		margin-top: 0;
		margin-bottom: 0;
	}

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

	.article-content ol > li {
		padding-inline-start: 0.375em;
	}

	.article-content ul > li {
		padding-inline-start: 0.375em;
	}

	.article-content > ul > li p {
		margin-top: 0.75em;
		margin-bottom: 0.75em;
	}

	.article-content > ul > li > p:first-child {
		margin-top: 1.25em;
	}

	.article-content > ul > li > p:last-child {
		margin-bottom: 1.25em;
	}

	.article-content > ol > li > p:first-child {
		margin-top: 1.25em;
	}

	.article-content > ol > li > p:last-child {
		margin-bottom: 1.25em;
	}

	.article-content ul ul, ul ol, ol ul, ol ol {
		margin-top: 0.75em;
		margin-bottom: 0.75em;
	}

	.article-content dl {
		margin-top: 1.25em;
		margin-bottom: 1.25em;
	}

	.article-content dd {
		margin-top: 0.5em;
		padding-inline-start: 1.625em;
	}

	.article-content hr + * {
		margin-top: 0;
	}

	.article-content h2 + * {
		margin-top: 0;
	}

	.article-content h3 + * {
		margin-top: 0;
	}

	.article-content h4 + * {
		margin-top: 0;
	}

	.article-content thead th:first-child {
		padding-inline-start: 0;
	}

	.article-content thead th:last-child {
		padding-inline-end: 0;
	}

	.article-content tbody td, tfoot td {
		padding-top: 0.5714286em;
		padding-inline-end: 0.5714286em;
		padding-bottom: 0.5714286em;
		padding-inline-start: 0.5714286em;
	}

	.article-content tbody td:first-child, tfoot td:first-child {
		padding-inline-start: 0;
	}

	.article-content tbody td:last-child, tfoot td:last-child {
		padding-inline-end: 0;
	}

	.article-content figure {
		margin-top: 2em;
		margin-bottom: 2em;
	}

	.article-content > :first-child {
		margin-top: 0;
	}

	.article-content > :last-child {
		margin-bottom: 0;
	}
}

/* ---- ink-* legacy grid (mirror of src/app.css, for the editor iframe) ---- */

.legacy-rich-html .ink-bootstrap-margin { margin-right: -15px; margin-left: -15px; }
.legacy-rich-html .ink-bootstrap-margin::before, .legacy-rich-html .ink-bootstrap-row::before,
.legacy-rich-html .ink-bootstrap-margin::after, .legacy-rich-html .ink-bootstrap-row::after { display: table; content: ''; }
.legacy-rich-html .ink-bootstrap-margin::after, .legacy-rich-html .ink-bootstrap-row::after { clear: both; }
.legacy-rich-html [class*='ink-xs-'], .legacy-rich-html [class*='ink-sm-'],
.legacy-rich-html [class*='ink-md-'], .legacy-rich-html [class*='ink-lg-'] {
	position: relative; min-height: 1px; max-width: 100%; padding-right: 15px; padding-left: 15px;
}
.legacy-rich-html [class*='ink-xs-'] { float: left; }
.legacy-rich-html .ink-xs-6:nth-child(odd) { clear: left; }
.legacy-rich-html .ink-xs-12 { width: 100%; }
.legacy-rich-html .ink-xs-11 { width: 91.66666667%; }
.legacy-rich-html .ink-xs-10 { width: 83.33333333%; }
.legacy-rich-html .ink-xs-9 { width: 75%; }
.legacy-rich-html .ink-xs-8 { width: 66.66666667%; }
.legacy-rich-html .ink-xs-7 { width: 58.33333333%; }
.legacy-rich-html .ink-xs-6 { width: 50%; }
.legacy-rich-html .ink-xs-5 { width: 41.66666667%; }
.legacy-rich-html .ink-xs-4 { width: 33.33333333%; }
.legacy-rich-html .ink-xs-3 { width: 25%; }
.legacy-rich-html .ink-xs-2 { width: 16.66666667%; }
.legacy-rich-html .ink-xs-1 { width: 8.33333333%; }
@media all and (min-width: 769px) {
	.legacy-rich-html .ink-xs-6:nth-child(odd) { clear: none; }
	.legacy-rich-html .ink-sm-6:nth-child(odd) { clear: left; }
	.legacy-rich-html [class*='ink-sm-'] { float: left; }
	.legacy-rich-html .ink-sm-12 { width: 100%; }
	.legacy-rich-html .ink-sm-11 { width: 91.66666667%; }
	.legacy-rich-html .ink-sm-10 { width: 83.33333333%; }
	.legacy-rich-html .ink-sm-9 { width: 75%; }
	.legacy-rich-html .ink-sm-8 { width: 66.66666667%; }
	.legacy-rich-html .ink-sm-7 { width: 58.33333333%; }
	.legacy-rich-html .ink-sm-6 { width: 50%; }
	.legacy-rich-html .ink-sm-5 { width: 41.66666667%; }
	.legacy-rich-html .ink-sm-4 { width: 33.33333333%; }
	.legacy-rich-html .ink-sm-3 { width: 25%; }
	.legacy-rich-html .ink-sm-2 { width: 16.66666667%; }
	.legacy-rich-html .ink-sm-1 { width: 8.33333333%; }
}
@media all and (min-width: 1001px) {
	.legacy-rich-html .ink-sm-6:nth-child(odd) { clear: none; }
	.legacy-rich-html .ink-md-6:nth-child(odd) { clear: left; }
	.legacy-rich-html [class*='ink-md-'] { float: left; }
	.legacy-rich-html .ink-md-12 { width: 100%; }
	.legacy-rich-html .ink-md-11 { width: 91.66666667%; }
	.legacy-rich-html .ink-md-10 { width: 83.33333333%; }
	.legacy-rich-html .ink-md-9 { width: 75%; }
	.legacy-rich-html .ink-md-8 { width: 66.66666667%; }
	.legacy-rich-html .ink-md-7 { width: 58.33333333%; }
	.legacy-rich-html .ink-md-6 { width: 50%; }
	.legacy-rich-html .ink-md-5 { width: 41.66666667%; }
	.legacy-rich-html .ink-md-4 { width: 33.33333333%; }
	.legacy-rich-html .ink-md-3 { width: 25%; }
	.legacy-rich-html .ink-md-2 { width: 16.66666667%; }
	.legacy-rich-html .ink-md-1 { width: 8.33333333%; }
}
@media all and (min-width: 1367px) {
	.legacy-rich-html .ink-md-6:nth-child(odd) { clear: none; }
	.legacy-rich-html .ink-lg-6:nth-child(odd) { clear: left; }
	.legacy-rich-html [class*='ink-lg-'] { float: left; }
	.legacy-rich-html .ink-lg-12 { width: 100%; }
	.legacy-rich-html .ink-lg-11 { width: 91.66666667%; }
	.legacy-rich-html .ink-lg-10 { width: 83.33333333%; }
	.legacy-rich-html .ink-lg-9 { width: 75%; }
	.legacy-rich-html .ink-lg-8 { width: 66.66666667%; }
	.legacy-rich-html .ink-lg-7 { width: 58.33333333%; }
	.legacy-rich-html .ink-lg-6 { width: 50%; }
	.legacy-rich-html .ink-lg-5 { width: 41.66666667%; }
	.legacy-rich-html .ink-lg-4 { width: 33.33333333%; }
	.legacy-rich-html .ink-lg-3 { width: 25%; }
	.legacy-rich-html .ink-lg-2 { width: 16.66666667%; }
	.legacy-rich-html .ink-lg-1 { width: 8.33333333%; }
}