/*
 * Taudhih Al-Hukmi articles.
 *
 * Scholarly articles pasted out of Word: a ruling, its reasoning, Arabic
 * sources, and numbered footnotes citing classical texts. The markup arrived
 * with the author's local file paths in every footnote link, no language on any
 * of the Arabic, and Word's own print layout inline.
 *
 * Every custom property carries a fallback. The plugin owns this markup
 * (ADR-001) and has to keep looking like itself under a theme that has never
 * heard of these tokens.
 */

/* ------------------------------------------------------------- footnotes -- */

/*
 * The marker in the prose.
 *
 * `.jmns-taudhih__marker` is the `<sup>` the repair adds: Word exported these
 * markers as a bare `<a>[1]</a>` sitting on the baseline in all 106 articles,
 * where a bracketed number reads as part of the sentence rather than as a
 * reference. The element carries the meaning and the shift; the anchor inside
 * it carries only colour and a hit area, so the two never compound.
 *
 * Where Word did write a `<sup>` it wrote two, one inside the other, which
 * compounds the shift and the size reduction until [12] is unreadable and
 * unclickable. The second rule flattens that to a single step.
 */
.entry-content .jmns-taudhih__marker,
.entry-content .jmns-taudhih__ref sup {
	font-size: 0.72em;
	vertical-align: super;
	line-height: 0;
}

.entry-content .jmns-taudhih__marker sup,
.entry-content .jmns-taudhih__ref sup sup {
	font-size: 1em;
	vertical-align: baseline;
}

.entry-content .jmns-taudhih__ref {
	/*
	 * A citation marker is a target the size of two characters. Padding gives
	 * it a hit area without moving the baseline it sits on, since the anchor is
	 * inline (SC 2.5.8 exempts inline targets, but the padding costs nothing
	 * and a thumb is not exempt from physics).
	 */
	padding-inline: 0.15em;
	color: var(--wp--preset--color--interactive, #245746);
	font-weight: 700;
	text-decoration: none;
}

.entry-content .jmns-taudhih__ref:hover,
.entry-content .jmns-taudhih__ref:focus-visible {
	background-color: var(--wp--preset--color--surface-tint, #EAF1EC);
	text-decoration: underline;
}

/* The marker beside the citation at the foot, which returns to the prose. */
.entry-content .jmns-taudhih__backlink {
	color: var(--wp--preset--color--interactive, #245746);
	font-weight: 700;
	text-decoration: none;
}

.entry-content .jmns-taudhih__backlink:hover,
.entry-content .jmns-taudhih__backlink:focus-visible {
	text-decoration: underline;
}

/*
 * The footnote arrived at is marked while it is targeted. Landing at the foot
 * of a long article otherwise gives no sign of having arrived at note 7 rather
 * than note 6.
 */
.entry-content .jmns-taudhih__backlink:target,
.entry-content [id^="jmns-ftn-"]:target {
	outline: 2px solid var(--wp--preset--color--interactive, #245746);
	outline-offset: 3px;
	border-radius: var(--r-input, 4px);
}

/* Returning to the prose marks the sentence you left, for the same reason. */
.entry-content .jmns-taudhih__ref:target {
	background-color: var(--wp--preset--color--surface-tint, #EAF1EC);
	outline: 2px solid var(--wp--preset--color--interactive, #245746);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------- arabic -- */

/*
 * The theme already carries Noto Naskh Arabic — self-hosted, subset by
 * `unicode-range`, sized at 1.15em with doubled leading for `[lang="ar"]`.
 * Nothing here re-declares any of that; these are the things that only matter
 * once a passage is correctly tagged and set as a block.
 */
.entry-content [lang="ar"] {
	/*
	 * Never justified. Arabic set with full harakat and justified opens gaps a
	 * line can be lost in, and Word pasted `text-align: justify` on every
	 * quotation. The inline style is stripped server-side; this is the floor
	 * under it.
	 */
	text-align: start;
	/*
	 * Kashida and contextual forms need the shaping engine left alone; letter
	 * spacing breaks the joins between letters outright.
	 */
	letter-spacing: normal;
	word-spacing: normal;
}

/*
 * A quoted passage, which is what most of these are: a Quranic verse or a
 * hadith standing apart from the Malay argument around it. Given a rule on the
 * side it starts from, so it reads as a quotation rather than as a paragraph
 * that changed direction.
 */
.entry-content p[lang="ar"] {
	margin-block: var(--wp--preset--spacing--40, 1.25rem);
	padding-inline-start: var(--wp--preset--spacing--30, 1rem);
	border-inline-start: 3px solid var(--wp--preset--color--border-strong, #6F8D7A);
}

/* ----------------------------------------------------------- readability -- */

/*
 * A measure on the prose.
 *
 * `ch` overstates badly in this theme — its zero is 0.62em, so 66ch measures
 * about 84 characters a line. 54ch lands near 70, which is the band these
 * articles want; they run to several thousand words of argument.
 *
 * Not applied to the Arabic, which has its own metrics, nor to tables.
 */
/*
 * One measure, stated absolutely.
 *
 * It was written `54ch`, which is the honest way to say "about seventy
 * characters" — and `ch` is relative to the font size of the element it is
 * written on. On a 34px heading `54ch` resolves to 1296px rather than the 540px
 * it means on the body, so the cap never bit and every heading ran the full
 * width of the article.
 *
 * A custom property does not fix that either: `--jmns-measure: 54ch` inherits
 * as the *token* `54ch` and is resolved wherever it is used, so a heading
 * re-resolves it at its own size and lands right back at 1296px. Measured, not
 * assumed — that was the first attempt.
 *
 * 33.75rem is what 54ch computes to at the body's 16px in this theme, whose
 * zero is 0.62em. Stated in rem it means the same thing to a paragraph and to a
 * heading, which is the whole point of a measure.
 */
.entry-content {
	--jmns-measure: 42rem;
}

/*
 * The measure sits at the left edge, not in the middle of the band.
 *
 * The prose was centred inside a 1200px article while the title and the poster
 * above it started at the left — three different left edges, and 330px of empty
 * page beside every paragraph. A column of text floating in the middle of a
 * wider block reads as a mistake even when the line length is right.
 *
 * `margin-inline: 0` overrides the theme's `.entry-content > *` centring for
 * the elements that carry the measure. Everything now begins where the heading
 * begins.
 */
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4 {
	margin-inline: 0;
}

.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4 {
	max-inline-size: var(--jmns-measure);
}

/*
 * The headings share the measure, and that is the point of listing them above.
 *
 * They used to keep the theme's 42rem while the prose was held to 54ch, and
 * because both are centred the two left edges disagreed by 66px — every heading
 * hanging out to the left of the paragraphs it introduced. One measure, one
 * edge.
 */

.entry-content > p[lang="ar"],
.entry-content > div[lang="ar"] {
	/* Naskh at 1.15em fits fewer characters in the same width; letting it use
	   the full measure keeps the line count comparable to the Malay. */
	max-inline-size: 62ch;
}

@media (max-width: 30rem) {
	.entry-content p[lang="ar"] {
		padding-inline-start: var(--wp--preset--spacing--20, 0.75rem);
	}
}

/* ---------------------------------------------------------- contents -- */

/*
 * The contents list, in the margin the measure leaves.
 *
 * These articles run to nine screens. The prose is held to 42rem for reading,
 * which on a 75rem band left 528px of empty page beside it — so the list goes
 * there rather than pushing the article down, and the space stops being empty.
 *
 * Sticky, not scripted: no handler, nothing to throttle, and nothing that
 * `prefers-reduced-motion` needs to switch off. Below 64rem it is simply a list
 * above the article, which is what it should be when there is no margin to
 * occupy.
 */
.jmns-toc {
	margin-block: 0 var(--wp--preset--spacing--50, 2rem);
	padding: var(--wp--preset--spacing--40, 1rem);
	border: 1px solid var(--wp--preset--color--border, #DCE4DF);
	border-radius: var(--r-card, 16px);
	background-color: var(--wp--preset--color--surface-tint, #EAF1EC);
}

.jmns-toc__title {
	margin-block: 0 var(--wp--preset--spacing--20, 0.5rem);
	color: var(--wp--preset--color--interactive, #245746);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.jmns-toc__list {
	margin: 0;
	padding-inline-start: 1.35em;
}

.jmns-toc__list li {
	margin-block: 0;
}

.jmns-toc__list a {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	color: var(--wp--preset--color--interactive, #245746);
	text-decoration: none;
}

.jmns-toc__list a:hover,
.jmns-toc__list a:focus-visible {
	color: var(--wp--preset--color--interactive-hover, #173D32);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

@media (min-width: 64rem) {
	/*
	 * Out into the margin. `float` rather than a grid, because the article is a
	 * flat run of children from `the_content` — there is no wrapper to make a
	 * grid of, and adding one would mean owning the whole document structure to
	 * place one box.
	 */
	.jmns-toc {
		float: inline-end;
		inline-size: 16rem;
		margin-inline-start: var(--wp--preset--spacing--60, 2.5rem);
		position: sticky;
		inset-block-start: var(--wp--preset--spacing--50, 2rem);
	}
}

/* A section jumped to should not land under the header. */
.entry-content > h2[id] {
	scroll-margin-block-start: var(--wp--preset--spacing--60, 2.5rem);
}