/*
 * Documentation furniture: steps, questions, and the on this page list.
 *
 * Loaded from functions.php, after the styles core prints inline. That order
 * matters: our selectors and core's layout selectors have the same specificity,
 * so the later one wins, and every grid on the site depends on ours winning.
 */

/* ----------------------------------------------------------------- step lists */

.ghizo-steps {
	counter-reset: step;
	list-style: none;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
}

.ghizo-steps li {
	color: var(--wp--preset--color--ink-muted);
	counter-increment: step;
	padding-left: 2.4rem;
	position: relative;
}

.ghizo-steps li + li {
	margin-top: var(--wp--preset--spacing--20);
}

.ghizo-steps li::before {
	background: var(--wp--preset--color--wash);
	border-radius: 999px;
	color: var(--wp--preset--color--navy-deep);
	content: counter(step);
	font-feature-settings: 'tnum';
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
	height: 1.6rem;
	left: 0;
	line-height: 1.6rem;
	position: absolute;
	text-align: center;
	top: 0.05rem;
	width: 1.6rem;
}

.ghizo-steps strong {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

.ghizo-steps code {
	background: var(--wp--preset--color--wash);
	border-radius: 4px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.85em;
	padding: 0.15em 0.4em;
}

/* ------------------------------------------------------------ questions, terms */

.ghizo-qa {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--40);
}

/* Two columns from tablet up: these are short answers, and a single column of
   them reads as a very long page for no reason. */
@media (min-width: 48rem) {
	.ghizo-qa {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	}
}

.ghizo-qa h3 {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.35;
	margin: 0;
}

/*
 * The answer sets below the question, the way every other supporting line in
 * here does. Left at the body size it came out larger than the medium question
 * above it, so the question read as a label on the answer rather than the thing
 * being asked.
 */
.ghizo-qa p {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--small);
	margin: 0.6rem 0 0;
	max-width: 52ch;
}

.ghizo-legal {
	counter-reset: clause;
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
}

/*
 * A clause is a heading and the paragraphs under it, not a list item. The
 * numbering used to come from the <ol> the clauses sat in; the heading counts
 * itself now, and carries the rule and the space that the next <li> used to
 * bring with it. Without the increment every clause reads "0.".
 *
 * Sized at the body size rather than under it: standing on its own above its
 * own paragraphs, a medium title under large body copy read as a caption
 * belonging to the paragraph above it. The weight and the blue number are what
 * make it a heading.
 */
.ghizo-legal__title {
	counter-increment: clause;
	font-size: var(--wp--preset--font-size--large);
	/* Clause titles wrap to two lines on a phone, which 1.14 sets too tight. */
	line-height: 1.3;
	margin: 0;
	padding-top: var(--wp--preset--spacing--30);
}

.ghizo-legal__title:not(:first-child) {
	border-top: 1px solid var(--wp--preset--color--line);
	margin-top: var(--wp--preset--spacing--30);
}

.ghizo-legal__title::before {
	color: var(--wp--preset--color--blue);
	content: counter(clause) '. ';
	font-feature-settings: 'tnum';
}

.ghizo-legal p,
.ghizo-legal li {
	color: var(--wp--preset--color--ink-muted);
	max-width: 68ch;
}

.ghizo-legal p {
	margin: 0.7rem 0 0;
}

.ghizo-legal ul {
	margin: 0.7rem 0 0;
	padding-left: 1.2rem;
}

/* A short aside that needs to be read: a caveat, a date, an exception. */
.ghizo-note {
	background: var(--wp--preset--color--wash);
	border-left: 3px solid var(--wp--preset--color--blue);
	border-radius: 0 10px 10px 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--small);
	margin-top: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--30);
}

.ghizo-note strong {
	color: var(--wp--preset--color--ink);
}

/* --------------------------------------------------------------------- q&a */

.ghizo-qa__item {
	min-width: 0;
}

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

/*
 * The reference pages run to five thousand pixels. Without this the only route
 * to the hooks table is scrolling past everything already decided about.
 */
.ghizo-contents {
	background: var(--wp--preset--color--wash);
	border-radius: 12px;
	margin-top: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--30);
}

.ghizo-contents__title {
	color: var(--wp--preset--color--ink-muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: 0.12em;
	margin: 0 0 0.75rem;
	text-transform: uppercase;
}

.ghizo-contents ol {
	columns: 2;
	column-gap: var(--wp--preset--spacing--40);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 40rem) {
	.ghizo-contents ol {
		columns: 1;
	}
}

.ghizo-contents li {
	break-inside: avoid;
}

.ghizo-contents a {
	color: var(--wp--preset--color--navy-deep);
	display: block;
	font-size: var(--wp--preset--font-size--small);
	padding: 0.35rem 0;
	text-decoration: none;
}

.ghizo-contents a:hover,
.ghizo-contents a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}