@charset "UTF-8";

/*
	The access page — what Help Viewer opens.

	A header carrying the app's icon and name, then a run of blocks each saying
	one thing the app is for and leading into the documentation. The first runs
	full width; the rest alternate sides so the eye has somewhere to go.
*/

@import "common.css";

body {
	max-inline-size: 52rem;
}

/* ---------------------------------------------------------------- Header -- */

/*
	The name and the icon, side by side and centred on each other. The header
	holds nothing else — no tagline, no link to a contents page — so there is
	nothing to align the two against but themselves, and a flex row saying so
	beats the absolute positioning this needed when there were four things in it.
*/
header {
	display: flex;
	align-items: center;
	gap: 2rem;
	padding-block-end: 1.5rem;
	border-block-end: 1px solid var(--rule);
}

header figure {
	/* After the headline, so the icon sits at the trailing edge while the DOM
	   keeps the name first — which is the order a screen reader should hear. */
	order: 1;
	flex: none;
	margin: 0;
	line-height: 0;
}
header figure img {
	inline-size: 8rem;
}

header h1 {
	flex: 1;
	font-size: 2.5rem;
	font-weight: 500;
	line-height: 1.2;
	margin-block: 0;
	/* "DEVONthink — User Guide" wraps on a narrow window; keep the two halves
	   from being split across lines mid-dash. */
	text-wrap: balance;
}

/* ---------------------------------------------------------------- Topics -- */

main > section.topic,
section#online {
	padding-block: 2rem;
	border-block-end: 1px solid var(--rule);
}

/* The opening block has no picture and is centred; the rest are two columns
   that alternate, so consecutive screenshots do not stack down one edge. */
main > section.topic:first-child {
	text-align: center;
}
main > section.topic:not(:first-child) {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 2.5rem;
}
main > section.topic:nth-of-type(odd) {
	flex-direction: row-reverse;
}
main > section.topic > div {
	flex: 1 1 0;
}
main > section.topic > figure {
	flex: 1 1 0;
	margin: 0;
}
main > section.topic > figure img {
	inline-size: 100%;
	border: 0.5px solid var(--label-3);
	border-radius: 8px;
}

main > section.topic h2,
section#online h2 {
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.3;
	margin-block: 0 0.75rem;
}
main > section.topic:first-child h2 {
	font-size: 1.9rem;
}

main > section.topic p {
	margin-block: 0 1rem;
}

/* The links out of each block. A chevron rather than a bullet: these lead
   somewhere, they are not a list of things. */
main > section.topic ul,
section#online ul {
	list-style-type: none;
	padding-inline-start: 0;
	margin-block-end: 0;
}
main > section.topic li,
section#online li {
	margin-block: 0.4rem;
}
/* Only when the item is nothing but the link. An item written as a sentence with
   a link inside it would otherwise get the chevron mid-clause, before its own
   full stop. */
main > section.topic li.go > a::after,
section#online li.go > a::after {
	content: " ›";
	color: var(--label-3);
}

/* ---------------------------------------------------------------- Online -- */

section#online ul {
	columns: 2;
}

/* --------------------------------------------------------------- Closing -- */

p.explore {
	color: var(--label-2);
	margin-block-start: 2rem;
}

/* ------------------------------------------------------------- Narrow -- */

/* Help Viewer's window is resizable and often narrow. Below the point where two
   columns stop earning their keep, everything stacks. */
@media (max-width: 40rem) {
	header {
		padding-inline-end: 0;
		text-align: center;
	}
	header figure {
		position: static;
	}
	header figure img {
		inline-size: 6rem;
	}
	main > section.topic:not(:first-child),
	main > section.topic:nth-of-type(odd) {
		flex-direction: column;
		align-items: stretch;
		gap: 1.25rem;
	}
	section#online ul {
		columns: 1;
	}
}
