/*
 * An article's text, scoped .ab: on the article page (article_v2/_page.html) and in the admin's
 * editor, whose editable body gets the class (CKEDITOR_CONFIGS['article']: bodyClass, contentsCss
 * with article_editor.css for its fonts and frame), so a staff member sees the article as it
 * will look while writing it. Self-contained: its own tokens (the index kit's colours), no
 * page-only classes.
 *
 * What the editor makes, and how it shows:
 * - h2, h3, h4 and paragraphs; lists; links (pasted Google Docs colours are undone below)
 * - figure.image with its caption (image2), images in paragraphs
 * - a <div> without a class: a callout, the tinted box (63 of them, most opening with <strong>);
 *   not one holding a figure (the image plugin centres figures in one)
 * - blockquote: a pull quote; hr; small; tables (nutrition amounts)
 * In the editor, the image plugin wraps each figure in its own classed div, with a drag handle
 * image: the image rules are for figures and paragraphs only.
 */

.ab {
	--ab-ink: #1A2518;
	--ab-text: #3F483D;
	--ab-muted: #5F6B5B;
	--ab-green: #507137;
	--ab-green-dark: #3E5530;
	--ab-lime: #BEE378;
	--ab-wash: #EDF3E5;
	--ab-line: rgba(26, 37, 24, .12);
	--ab-display: 'Cotoris Bold', 'Hind Vadodara', sans-serif;
	--ab-sans: 'Hind Vadodara', sans-serif;

	color: var(--ab-text);
	font-family: var(--ab-sans);
	font-size: clamp(1.0625rem, 1rem + .25vw, 1.125rem);   /* 17px on phones, 18px from ~800px */
	font-weight: 400;
	line-height: 1.75;
	text-align: left;
	overflow-wrap: break-word;
}

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

.ab p {
	margin: 0 0 1.15em;
	padding: 0;
}

.ab h2,
.ab h3,
.ab h4 {
	padding: 0;
	font-weight: normal;
	scroll-margin-top: 6rem;
}

.ab h2 {
	margin: 2.4em 0 .55em;
	color: var(--ab-ink);
	font-family: var(--ab-display);
	font-size: clamp(1.75rem, 4.2vw, 2.25rem);
	line-height: 1.12;
	letter-spacing: -.01em;
}

.ab h3 {
	margin: 1.9em 0 .45em;
	color: var(--ab-green-dark);
	font-family: var(--ab-display);
	font-size: clamp(1.35rem, 3vw, 1.6rem);
	line-height: 1.2;
}

.ab h4 {
	margin: 1.6em 0 .35em;
	color: var(--ab-ink);
	font-family: var(--ab-sans);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.4;
}

.ab strong,
.ab b {
	color: var(--ab-ink);
	font-weight: 600;
}

.ab small {
	color: var(--ab-muted);
	font-size: .875em;
	line-height: 1.5;
}

.ab u {
	text-decoration: none;
}

.ab big {
	font-family: var(--ab-display);
	font-size: 1.3em;
}

/* ---------- Lists ---------- */

.ab ul,
.ab ol {
	margin: 0 0 1.15em;
	padding: 0 0 0 1.4rem;
	list-style-position: outside;
}

.ab ul {
	list-style-type: disc;
}

.ab ol {
	list-style-type: decimal;
}

.ab li {
	margin: 0 0 .45em;
	padding-left: .2rem;
}

.ab li::marker {
	color: var(--ab-green);
}

.ab ol > li::marker {
	font-weight: 600;
}

.ab li > ul,
.ab li > ol {
	margin: .45em 0 0;
}

.ab li > p {
	margin-bottom: .45em;
}

/* ---------- Links (and the colours pasted from Google Docs) ---------- */

.ab a {
	border-radius: 3px;
	color: var(--ab-green-dark) !important;   /* over pasted inline colours */
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: rgba(80, 113, 55, .4);
	text-decoration-thickness: .08em;
	text-underline-offset: .18em;
	transition: background-color .2s, text-decoration-color .2s;
}

.ab a:hover {
	background: rgba(190, 227, 120, .35);
	text-decoration-color: currentColor;
}

.ab a span,
.ab a u {
	color: inherit !important;
	text-decoration: none;
}

.ab [style*="color:#000000"],
.ab [style*="color:#212529"],
.ab [style*="color:#1155cc"],
.ab [style*="color:#2980b9"] {
	color: inherit !important;
}

/* ---------- Pictures ---------- */

.ab figure {
	margin: 2em 0;
	padding: 0;
}

.ab figure img,
.ab p img {
	display: block;
	max-width: 100%;
	height: auto !important;
	border-radius: 18px;
}

.ab figure.image img {
	width: 100% !important;
}

.ab figcaption {
	margin-top: .65em;
	color: var(--ab-muted);
	font-size: .875rem;
	line-height: 1.45;
	text-align: center;
}

/* ---------- Callouts: a <div> without a class ----------
   Every one, then not the one around a figure: a browser without :has() keeps the callouts */

.ab div:not([class]) {
	margin: 1.75em 0;
	padding: 1.15rem 1.35rem;
	border-radius: 18px;
	background: var(--ab-wash);
	color: var(--ab-ink);
	font-size: 1.0625rem;
	line-height: 1.65;
}

.ab div:not([class]) > :last-child {
	margin-bottom: 0;
}

.ab div:not([class]):has(> figure) {
	margin: 0;
	padding: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

/* ---------- Pull quotes ---------- */

.ab blockquote {
	margin: 1.8em 0;
	padding: .15em 0 .15em 1.3rem;
	border-left: 4px solid var(--ab-lime);
	color: var(--ab-green-dark);
	font-family: var(--ab-display);
	font-size: 1.45rem;
	line-height: 1.35;
}

.ab blockquote p {
	margin-bottom: .5em;
}

.ab blockquote > :last-child {
	margin-bottom: 0;
}

/* ---------- Rules and tables ---------- */

.ab hr {
	height: 1px;
	margin: 2.5em 0;
	border: 0;
	background: var(--ab-line);
}

.ab table {
	width: 100% !important;
	margin: 1.8em 0;
	border-collapse: collapse;
	font-size: 1rem;
	line-height: 1.5;
}

.ab td,
.ab th {
	padding: .65rem .8rem;
	border-bottom: 1px solid var(--ab-line);
	text-align: left;
	vertical-align: top;
}

.ab tr:nth-child(even) {
	background: rgba(80, 113, 55, .05);
}

.ab td:first-child {
	color: var(--ab-ink);
	font-weight: 600;
}

.ab td p {
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	.ab a {
		transition: none;
	}
}