/*
 * The two legal pages.
 *
 * The privacy policy set `color: white` inline on every section heading, for a
 * dark background that is not there — five of the six were white on white. That
 * is stripped at render time; nothing here needs to fight it.
 *
 * 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.
 */

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

/*
 * The disclaimer is one sentence and nothing else, so it is set as a statement
 * rather than as the opening of something. In practice this is the only thing
 * it styles: the policy's first block is a heading, so that page has no lead.
 *
 * The rule beside it is the theme's own pattern for a statement of position —
 * `blockquote[lang="ar"]` at main.css:2514, and the same in taudhih and the
 * bot — down to the width and the token. `border-strong` rather than
 * `interactive`: this marks a passage, it does not offer an action, and the
 * saturated tone read as a callout demanding something of the reader.
 */
.jmns-legal__lead {
	padding-inline-start: var(--wp--preset--spacing--30, 1rem);
	border-inline-start: 3px solid var(--wp--preset--color--border-strong, #6F8D7A);
	font-size: var(--wp--preset--font-size--large, 1.125rem);
	line-height: 1.6;
}

.jmns-legal__lead > :first-child {
	margin-block-start: 0;
}

.jmns-legal__lead > :last-child {
	margin-block-end: 0;
}

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

/*
 * Nine sections over about three thousand pixels, and the two people open this
 * page for — what their rights are, and how to reach the department — are the
 * last two. Numbered, because the sections are a sequence and the numbers are
 * how somebody says which one they mean.
 */
.jmns-legal__contents {
	margin-block-start: var(--wp--preset--spacing--50, 2rem);
	padding: var(--wp--preset--spacing--40, 1.5rem);
	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-legal__contents-title {
	margin-block: 0 var(--wp--preset--spacing--30, 1rem);
	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-legal__contents-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: 0 var(--wp--preset--spacing--40, 1.5rem);
	margin: 0;
	padding-inline-start: 1.5em;
}

.jmns-legal__contents-list li {
	margin-block: 0;
}

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

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

/* -------------------------------------------------------------- sections -- */

.jmns-legal__section {
	margin-block-start: var(--wp--preset--spacing--50, 2rem);
	padding-block-start: var(--wp--preset--spacing--40, 1.5rem);
	border-block-start: 1px solid var(--wp--preset--color--border, #DCE4DF);
	/* A section jumped to from the contents should not land under the header. */
	scroll-margin-block-start: var(--wp--preset--spacing--60, 2.5rem);
}

/*
 * `title-sm`, not `medium`. The theme's `medium` is 1rem — the body size — so a
 * section heading set in it is distinguishable from its own paragraph only by
 * weight, across nine sections and three thousand pixels. The theme's own `h2`
 * at 34px is the other error: it is sized for one heading on a page, not nine.
 */
.jmns-legal__title {
	margin-block: 0 var(--wp--preset--spacing--20, 0.5rem);
	font-size: var(--wp--preset--font-size--title-sm, 1.375rem);
	line-height: 1.3;
}

.jmns-legal__body > :first-child {
	margin-block-start: 0;
}

.jmns-legal__body > :last-child {
	margin-block-end: 0;
}

/* --------------------------------------------------------------- details -- */

/*
 * The telephone, fax and email at the foot of the policy, which were one
 * paragraph with `<br>` between them and nothing actionable in any of them.
 */
.jmns-legal__details {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--wp--preset--spacing--10, 0.35rem) var(--wp--preset--spacing--30, 1rem);
	margin-block: var(--wp--preset--spacing--20, 0.5rem) 0;
}

.jmns-legal__label {
	color: var(--wp--preset--color--text-secondary, #5E6D63);
	font-weight: 600;
}

.jmns-legal__value {
	margin: 0;
	overflow-wrap: anywhere;
}

/* 44px of target on the two things somebody opens this section to act on. */
.jmns-legal__value a {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	color: var(--wp--preset--color--interactive, #245746);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.jmns-legal__value a:hover,
.jmns-legal__value a:focus-visible {
	color: var(--wp--preset--color--interactive-hover, #173D32);
}

@media (max-width: 26rem) {
	/*
	 * Stacked below 26rem: "E-mail" and the address in two columns leaves about
	 * ten characters for the label and breaks the address over three lines.
	 */
	.jmns-legal__details {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.jmns-legal__label {
		margin-block-start: var(--wp--preset--spacing--20, 0.5rem);
	}
}