/*
 * Mission, vision and shared values.
 *
 * The source is fourteen paragraphs alternating a bold label with its text,
 * with no heading among them, under an `h2` repeating the page title.
 *
 * The first pass at this made four cards in a two-by-two grid. It was tidy and
 * it was wrong: four rounded boxes of equal weight on the page where an
 * institution says what it exists for, with the one genuinely distinctive thing
 * on it — five values whose initials spell MUFTI — parked underneath as a list
 * of tinted rows. This sets the department's own words at the size they are
 * owed and makes the acrostic the thing the page is built around.
 *
 * Every custom property carries a fallback. The plugin owns this page's markup
 * (ADR-001) and has to keep looking like itself under a theme that has never
 * heard of these tokens.
 */

.jmns-vision {
	margin-block-start: var(--wp--preset--spacing--40, 1.5rem);
}

/* --------------------------------------------------------------- intro -- */

/*
 * The sentence the page opens with.
 *
 * Without it the h1 ran straight into the dark green card. That is the reading
 * an institutional page cannot afford — a title, then a box, with nothing
 * saying what the page is for — and one line of prose is the whole remedy. It
 * is set below reading size and in secondary ink so it introduces the
 * statements rather than joining them.
 *
 * Narrower than the card it sits above, deliberately. A single line that runs
 * the full 1200px reads as a stray paragraph; held to about 60 characters it
 * reads as a standfirst.
 */
.jmns-vision__intro {
	max-inline-size: 60ch;
	/* Closer to the title than to the card. It is the heading's sentence, and at
	   equal gaps it floated between the two belonging to neither. */
	margin-block: 0 var(--wp--preset--spacing--70, 2.5rem);
	color: var(--wp--preset--color--text-secondary, #5E6D63);
	font-size: var(--wp--preset--font-size--medium, 1rem);
	line-height: 1.6;
}

/* Two short lines are one paragraph apart, not one statement apart. */
.jmns-vision__intro:not(:last-of-type) {
	margin-block-end: var(--wp--preset--spacing--30, 0.75rem);
}

/* ---------------------------------------------------------------- lead -- */

/*
 * The two statements the page is named for, on the department's own green.
 *
 * `interactive-hover` (#173D32) and not `interactive` (#245746): white text
 * measures 12.00:1 on the darker green against 8.31:1 on the lighter, and this
 * is a large block of reversed type on a government page. Both pass; the darker
 * one passes comfortably at every weight.
 */
/*
 * Two panels where each can carry the sentence, one where it cannot.
 *
 * The floor was 20rem, which put two columns on a tablet: 297px of measure for
 * 24px type, so the mission broke "Memacu Kecemerlangan / Pengurusan /
 * Institusi Mufti." over three ragged lines and the vision over five, leaving
 * one panel with 180px of empty green beneath it. Stacked at that width both
 * statements get the whole measure and break where the sentence breaks.
 */
.jmns-vision__lead {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
	gap: 1px;
	overflow: hidden;
	border-radius: var(--r-card, 16px);
	/* The gap shows through as the hairline between the two panels, so there is
	   no border to keep in step with the panels' own padding. 0.18 and not 0.22:
	   at the wider measure the statements now keep, the divider was the third
	   thing in the card competing for attention. */
	background-color: rgba(255, 255, 255, 0.18);
}

.jmns-lead {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30, 0.75rem);
	padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
	background-color: var(--wp--preset--color--interactive-hover, #173D32);
	color: var(--wp--preset--color--background, #FAF8F2);
}

/*
 * The labels were `<p><b>MISI</b></p>` — bold text doing a heading's job, which
 * gives a screen reader nothing to navigate by. Headings now, and set as
 * labels: the statement is the content, the label is the filing.
 */
/*
 * 13px, not 14. The label is filing and the statement is the content, and at a
 * point apart the two were reading as one block of type in two weights. The
 * letterspacing comes down with it, to the 0.08em the motto and quality-policy
 * labels already use — at 0.1em a 13px capital is spaced further than it is
 * tall, which stops looking deliberate and starts looking tracked out.
 */
.jmns-lead__label {
	margin: 0;
	/* 0.78 of white on this green is 8.1:1 — still past AA for body text, and
	   the label is deliberately quieter than the statement it introduces. */
	color: rgba(255, 255, 255, 0.78);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
}

/*
 * 26px at the top, down from 28.
 *
 * Two points is not a small change at this size: the mission ran to the full
 * width of its half of the card and the vision to three lines, and the pair
 * read as a banner rather than as a statement. Held to 460px of measure they
 * both break where the sentence breaks — "Memacu Kecemerlangan / Pengurusan
 * Institusi Mufti." — and the card gets the margin that makes reversed type on
 * a dark ground comfortable to read.
 */
.jmns-lead__text {
	/* 460px. The card is wide because it is the page's one full-width object;
	   the sentence inside it does not have to be. */
	max-inline-size: 28.75rem;
	margin: 0;
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: clamp(1.25rem, 1rem + 1.1vw, 1.625rem);
	font-weight: 700;
	line-height: 1.3;
	/* Both statements are single sentences in title case; balancing keeps one
	   word from being left alone on a last line. */
	text-wrap: balance;
}

/* ---------------------------------------------------------------- rest -- */

/*
 * Everything after the first two — the motto and the quality policy.
 *
 * These were set as a label in a 10rem margin column with the text beside it,
 * which lined the two statements up neatly and made them a table: a column of
 * field names, a column of values, one rule per row. A motto is not a row of
 * data. The label goes above its text now, small and green, and the sentence
 * starts at the same left edge as everything else on the page.
 */
.jmns-vision__rest {
	margin-block-start: var(--wp--preset--spacing--50, 1.5rem);
}

.jmns-statement {
	display: grid;
	gap: var(--wp--preset--spacing--20, 0.5rem);
	/* Air, which is what stops two stacked statements reading as two rows. */
	padding-block: var(--wp--preset--spacing--70, 2.5rem);
	border-block-start: 1px solid rgb(var(--jmns-primary-rgb, 36 87 70) / 0.1);
}

/*
 * 13px, the same as the labels inside the green card. Four labels on one page
 * doing one job should look like one thing, and the department's green at this
 * size is filing rather than emphasis.
 */
.jmns-statement__label {
	margin: 0;
	color: var(--wp--preset--color--interactive, #245746);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.5;
	text-transform: uppercase;
}

.jmns-statement__text {
	/* 720px. Wider than the 52ch it had, because with the label out of the
	   margin the text is no longer competing with anything for the width. */
	max-inline-size: 45rem;
	margin: 0;
	font-size: var(--wp--preset--font-size--medium, 1rem);
	line-height: 1.6;
}

/* -------------------------------------------------------------- values -- */

/* Same hairline as the two above it — it is the third rule in one run, and two
   of the three at a different weight reads as a mistake. */
.jmns-values {
	margin-block-start: var(--wp--preset--spacing--60, 2rem);
	padding-block-start: var(--wp--preset--spacing--60, 2rem);
	border-block-start: 1px solid rgb(var(--jmns-primary-rgb, 36 87 70) / 0.1);
}

.jmns-values__title {
	margin-block: 0 var(--wp--preset--spacing--10, 0.25rem);
	color: var(--wp--preset--color--interactive, #245746);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/*
 * A point below body size, and given room. This sentence is the only place the
 * acrostic is stated in words, so it introduces the band rather than sitting in
 * it — and the band below is what the page is built around.
 */
.jmns-values__acrostic {
	max-inline-size: 52ch;
	margin-block: 0 var(--wp--preset--spacing--60, 2rem);
	color: var(--wp--preset--color--text-secondary, #5E6D63);
	font-size: 0.9375rem;
	line-height: 1.6;
}

/*
 * Rows on a phone, three across on a tablet, all five on a desktop.
 *
 * Stacked, each value used about 300px of a 1200px page and left the rest
 * empty — and the acrostic ran downwards, which is not how anybody reads a
 * word. Across, the five initials spell MUFTI in reading order and the band
 * fills the measure it was given.
 *
 * The middle step used to be refused. Five columns began at 50rem and anything
 * below that got rows, on the reasoning that a 3+2 wrap is a ragged half-row
 * and reads as a layout that broke. That was true while each column wore a 2px
 * green rule across its top: an incomplete row of five bars is a tab bar with a
 * tab missing. With the rules gone it is five stacks of type, and a second row
 * of two is a wrap rather than a fault — so a tablet gets three columns of
 * 224px instead of five of 131px, or a column of rows with 400px of empty page
 * beside it.
 *
 * The word survives being wrapped. It is stated in the sentence above the band,
 * which is why that sentence exists.
 */
.jmns-values__list {
	display: grid;
	gap: var(--wp--preset--spacing--20, 0.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.jmns-value {
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr);
	gap: var(--wp--preset--spacing--20, 0.75rem);
	align-items: center;
	margin: 0;
	padding-block: var(--wp--preset--spacing--20, 0.75rem);
	border-block-start: 1px solid rgb(var(--jmns-primary-rgb, 36 87 70) / 0.1);
}

.jmns-value__letter {
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4rem);
	font-weight: 700;
	line-height: 1;
	text-align: center;
	color: var(--wp--preset--color--interactive, #245746);
}

.jmns-value__body {
	display: flex;
	flex-direction: column;
	/* 0.15em — under 3px — put the meaning against the underside of the term.
	   They are two ranks, not one two-line block. */
	gap: 0.5rem;
	min-inline-size: 0;
}

/*
 * 18px at the top rather than 20, and 600 rather than 700.
 *
 * The term is the second rank here and it was set almost as heavily as the
 * initial above it, so the eye met two strong things per column and the letter
 * stopped leading. A point down and a weight down is the whole difference.
 */
.jmns-value__term {
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.125rem);
	font-weight: 600;
	line-height: 1.3;
	/* The transliterated Arabic runs long and must break rather than widen the
	   column it sits in. */
	overflow-wrap: anywhere;
}

.jmns-value__meaning {
	color: var(--wp--preset--color--text-secondary, #5E6D63);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	line-height: 1.4;
}

@media (min-width: 48rem) {
	/*
	 * Three across, which for five values is a row of three over a row of two.
	 *
	 * The row gap is larger than the column gap on purpose: down the page the
	 * two rows are separated only by air, and at an equal 24px the second row's
	 * initials sat close enough under the first row's meanings to read as one
	 * six-line column.
	 */
	.jmns-values__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--70, 2.5rem) var(--wp--preset--spacing--50, 1.5rem);
	}

	/*
	 * No rule over each column.
	 *
	 * There was one, 2px in the department's green, put there so the five would
	 * read as one band. It did that and it did something else: five short green
	 * bars in a row above five short labels is the shape of a tab bar, and the
	 * page's one memorable thing looked like navigation nobody could click.
	 *
	 * What actually makes them a band is the grid — one row, equal tracks, every
	 * initial on the same line — and that is still true with the rules gone. The
	 * letters carry it now, which is what they were always for.
	 */
	.jmns-value {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		/* The initial needs to stand clear of its term; at 8px under a 64px
		   letter the two were one object. */
		gap: var(--wp--preset--spacing--30, 0.75rem);
		padding-block: 0;
		border-block-start: 0;
	}

	.jmns-value__letter {
		text-align: start;
	}
}

/*
 * The whole word on one line.
 *
 * `auto-fit` with a `min()` floor rather than `repeat(5, …)`: the count comes
 * from the department's list, not from this stylesheet. Five values collapse
 * the empty tracks and share the width equally; a sixth would simply take a
 * sixth column.
 *
 * 56rem and not 48: five columns need about 150px each before "Bertanggungjawab"
 * starts wrapping under its term, and five of those with their gaps want 846px
 * of content — which a 768px tablet does not have. Below this the band is three
 * and two, above it MUFTI reads across in one pass.
 */
@media (min-width: 56rem) {
	.jmns-values__list {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
		gap: var(--wp--preset--spacing--50, 1.5rem);
	}
}