/* Component rules for the Honest Analytics demo site.
 *
 * Everything here sits on top of tokens.css, which is a byte-for-byte copy of
 * the marketing site's token file. Values are transcribed from that site's
 * site.css and base.css so the two read as one product; where a rule has no
 * counterpart there (post meta, pagination, the sidebar) it is built from the
 * same primitives rather than invented.
 *
 * Desktop is the base. There is one @media (width < 900px) block, at the foot
 * of this file, matching the marketing site's single breakpoint. Do not add a
 * second one.
 *
 * No build step. This file is served as written, which is also why it carries
 * no vendor prefixes for anything the PHP 8.1 era of browsers handles alone.
 */

/* Base ------------------------------------------------------------------- */

/* Self-hosted, latin subset, weight 400 only. The plugin's whole argument is
 * that it makes no third-party request, so a demo that pulled this off a font
 * CDN would undermine the pitch on the page that makes it. */
@font-face {
	font-family: 'Source Serif 4';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/source-serif-4-latin-400-normal.woff2') format('woff2');
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	/* The header is sticky, so in-page anchors would otherwise land underneath
	 * it. 18px padding + ~24px content + 1px rule. */
	scroll-padding-top: 76px;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-ui);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

a {
	color: var(--accent);
}

a:hover {
	color: var(--accent-hover);
}

img {
	max-width: 100%;
	height: auto;
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
		animation: none !important;
	}
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--surface);
	color: var(--ink);
	border: 1px solid var(--rule);
	border-radius: var(--radius-control);
	padding: 10px 16px;
	font-size: 15px;
	text-decoration: none;
}

.skip-link:focus {
	left: 12px;
	top: 12px;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Layout primitives ------------------------------------------------------ */

.wrap {
	max-width: var(--measure-page);
	margin: 0 auto;
}

.section { padding: 72px var(--gutter) 0; }
.hero    { padding: 80px var(--gutter) 0; }
.rail    { padding: 0 var(--gutter); margin-top: 36px; }

/* The marketing site calls this .page. It cannot be called that here:
 * post_class() puts a bare `page` class on every Page, so the wrapper rule
 * would apply a second time to the article inside it and indent the content by
 * an extra gutter. That is exactly what it did until somebody looked at the
 * About page next to the footer and noticed they did not line up.
 *
 * No top padding, unlike .section and .hero. An inner page opens with its
 * heading directly under the header rule; the 72px the marketing site uses is
 * there to separate stacked sections from one another, and the first thing on
 * these pages has nothing above it to be separated from. The gutter stays, or
 * the text runs into the edge of the viewport on a phone. */
.sheet   { padding: 0 var(--gutter); }

.measure-body { max-width: var(--measure-body); }

/* Shared type ------------------------------------------------------------ */

.h1 {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 42px;
	line-height: 1.2;
	letter-spacing: -0.015em;
	margin: 0 0 16px;
	text-wrap: pretty;
}

.hero .h1 { margin-bottom: 20px; }

.h2 {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 28px;
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin: 0 0 20px;
}

.eyebrow {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	color: var(--data);
	margin-bottom: 16px;
	text-transform: uppercase;
}

.lead {
	margin: 0 0 26px;
	font-size: 18px;
	line-height: 1.6;
	color: var(--ink-secondary);
	text-wrap: pretty;
}

/* Controls --------------------------------------------------------------- */

.btn {
	display: inline-block;
	border-radius: var(--radius-control);
	text-decoration: none;
	font-family: inherit;
	font-size: 16px;
	cursor: pointer;
	border: 1px solid transparent;
}

.btn-primary {
	background: var(--accent);
	color: #fff;
	padding: 13px 20px;
}

.btn-primary:hover { background: var(--accent-hover); color: #fff; }

.btn-outline {
	background: none;
	border-color: var(--accent);
	color: var(--accent);
	padding: 11px 18px;
	font-size: 15.5px;
	text-align: center;
}

.btn-outline:hover { background: var(--accent-tint); color: var(--accent); }

.link-quiet {
	color: var(--ink-secondary);
	font-size: 16px;
	text-decoration: none;
	border-bottom: 1px solid var(--rule-underline);
	padding-bottom: 2px;
}

.link-quiet:hover { color: var(--ink); }

.link-rule {
	color: var(--accent);
	font-size: 15px;
	text-decoration: none;
	border-bottom: 1px solid var(--accent-rule);
	align-self: flex-start;
}

.link-rule:hover { color: var(--accent-hover); }

.cta-row {
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
}

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

.site-header {
	border-bottom: 1px solid var(--rule);
	position: sticky;
	top: 0;
	background: rgba(252, 252, 251, 0.96);
	z-index: 20;
}

.site-header__bar {
	max-width: var(--measure-page);
	margin: 0 auto;
	padding: 18px var(--gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
}

.brand {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--ink);
}

.brand svg { display: block; color: var(--accent); }

.brand__name {
	font-family: var(--font-display);
	font-size: 19px;
	letter-spacing: -0.01em;
}

.nav-desktop {
	display: flex;
	align-items: center;
	gap: 26px;
}

.nav-desktop a {
	color: var(--ink-secondary);
	text-decoration: none;
	font-size: 15px;
}

.nav-desktop a:hover { color: var(--ink); }

.nav-desktop .current-menu-item > a,
.nav-desktop .current_page_item > a { color: var(--ink); }

.nav-desktop .nav-cta {
	background: var(--accent);
	color: #fff;
	font-size: 15px;
	padding: 9px 16px;
	border-radius: var(--radius-control);
}

.nav-desktop .nav-cta:hover { background: var(--accent-hover); color: #fff; }

.nav-toggle {
	display: none;
	background: none;
	border: 1px solid var(--rule);
	border-radius: var(--radius-control);
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--ink);
}

.nav-mobile {
	border-top: 1px solid var(--rule);
	padding: 8px var(--gutter) 18px;
	flex-direction: column;
	display: none;
}

.nav-mobile a {
	color: var(--ink-list);
	text-decoration: none;
	font-size: 17px;
	padding: 13px 0;
	border-bottom: 1px solid var(--hairline);
}

.nav-mobile .nav-cta {
	margin-top: 16px;
	background: var(--accent);
	color: #fff;
	font-size: 16px;
	padding: 13px 18px;
	border-radius: var(--radius-control);
	text-align: center;
	border-bottom: none;
}

.nav-mobile .nav-cta:hover { background: var(--accent-hover); color: #fff; }

/* The menu lists are wp_nav_menu output, so they arrive as <ul><li>. */
.nav-desktop ul,
.nav-mobile ul {
	display: contents;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav-desktop li,
.nav-mobile li { display: contents; }

/* Demo banner ------------------------------------------------------------
 *
 * Sits above the header on every page. Somebody who arrives on an inner page
 * from a search result has no other way of knowing the site around them is
 * invented, and letting them believe otherwise would be the one dishonest
 * thing on a site arguing for honesty. */

.demo-banner {
	background: var(--accent-tint);
	border-bottom: 1px solid var(--accent-border);
	color: var(--ink-secondary);
	font-size: 14px;
}

.demo-banner__inner {
	max-width: var(--measure-page);
	margin: 0 auto;
	padding: 10px var(--gutter);
	display: flex;
	align-items: baseline;
	gap: 8px 16px;
	flex-wrap: wrap;
}

.demo-banner__label {
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: 0.06em;
	/* The mono labels elsewhere on the site are --data, which is chosen to pass
	 * AA on --paper and does. On --accent-tint it lands at 4.45:1, just under,
	 * and this is the one line on the site nobody should have trouble reading.
	 * --accent-hover is the same blue family the tint belongs to and gives
	 * 7.5:1. No token was changed to arrive at this. */
	color: var(--accent-hover);
	white-space: nowrap;
}

.demo-banner a {
	color: var(--accent);
	text-decoration: none;
	border-bottom: 1px solid var(--accent-rule);
}

.demo-banner a:hover { color: var(--accent-hover); }

/* Front page ------------------------------------------------------------- */

.hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 56px;
	align-items: start;
}

.rail__inner {
	border-top: 1px solid var(--rule);
	padding-top: 14px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
	font-size: 14px;
	color: var(--ink-muted);
}

/* The panel beside the hero, explaining what to click and what to expect. */
.watch {
	border: 1px solid var(--rule);
	border-radius: var(--radius-surface);
	background: var(--surface);
	padding: 24px 26px;
}

.watch h2 {
	margin: 0 0 12px;
	font-size: 17px;
	font-weight: 600;
}

.watch ol {
	margin: 0 0 16px;
	padding-left: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 15.5px;
	color: var(--ink-list);
}

.watch p {
	margin: 0;
	font-size: 14.5px;
	color: var(--ink-muted);
	text-wrap: pretty;
}

.watch p + p { margin-top: 10px; }

/* Two columns of plain statements, sharing one bordered surface. */
.split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	max-width: 820px;
	border: 1px solid var(--rule);
	border-radius: var(--radius-surface);
	overflow: hidden;
	background: var(--surface);
}

.split__col { padding: 24px 26px; }
.split__col--lead { border-right: 1px solid var(--rule); }
.split__col:not(.split__col--lead) { background: var(--surface-sunk); }

.split__col h3 {
	margin: 0 0 16px;
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: 0.06em;
	font-weight: 500;
	color: var(--ink-faint);
}

.split__col--lead h3 { color: var(--data); }

.split__col ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 15.5px;
	color: var(--ink-list);
}

.split__col:not(.split__col--lead) ul { color: var(--ink-muted); }

.split__note {
	margin: 18px 0 0;
	max-width: 820px;
	font-size: 14.5px;
	color: var(--ink-muted);
	text-wrap: pretty;
}

.links-row {
	border-top: 1px solid var(--rule);
	padding-top: 20px;
	display: flex;
	gap: 26px;
	flex-wrap: wrap;
	font-size: 15.5px;
}

.links-row a { text-decoration: none; }
.links-row a:hover { text-decoration: underline; }

/* Content ---------------------------------------------------------------- */

.content-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: 56px;
	align-items: start;
}

.archive-head {
	border-bottom: 1px solid var(--rule);
	padding-bottom: 22px;
	margin-bottom: 8px;
}

.archive-head .h1 { margin-bottom: 10px; }

.archive-head p {
	margin: 0;
	color: var(--ink-secondary);
	max-width: var(--measure-body);
	text-wrap: pretty;
}

.entry {
	padding: 26px 0;
	border-bottom: 1px solid var(--hairline);
}

.entry:last-child { border-bottom: none; }

.entry__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 24px;
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin: 0 0 8px;
	text-wrap: pretty;
}

.entry__title a {
	color: var(--ink);
	text-decoration: none;
}

.entry__title a:hover { color: var(--accent); }

.entry__meta {
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: 0.05em;
	color: var(--ink-faint);
	margin: 0 0 12px;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
}

.entry__meta a {
	color: var(--ink-faint);
	text-decoration: none;
	border-bottom: 1px solid var(--rule);
}

.entry__meta a:hover { color: var(--ink); }

.entry__excerpt {
	margin: 0 0 14px;
	color: var(--ink-secondary);
	font-size: 16px;
	max-width: var(--measure-body);
	text-wrap: pretty;
}

.entry__terms {
	margin: 22px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--hairline);
	font-size: 14px;
	color: var(--ink-muted);
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
}

.entry__terms a {
	color: var(--ink-secondary);
	text-decoration: none;
	border-bottom: 1px solid var(--rule);
}

.entry__terms a:hover { color: var(--ink); }

/* Long-form prose, shared by single.php and page.php. */
.prose {
	max-width: var(--measure-body);
}

.prose > * { max-width: 100%; }

.prose h2 {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 22px;
	line-height: 1.3;
	letter-spacing: -0.01em;
	margin: 36px 0 12px;
}

.prose h3 {
	font-size: 16px;
	font-weight: 600;
	margin: 24px 0 8px;
}

.prose p {
	margin: 0 0 14px;
	color: var(--ink-secondary);
	font-size: 16px;
}

.prose ul,
.prose ol {
	margin: 0 0 16px;
	padding-left: 22px;
	display: flex;
	flex-direction: column;
	gap: 9px;
	font-size: 15.5px;
	color: var(--ink-secondary);
}

.prose blockquote {
	margin: 0 0 20px;
	border-left: 2px solid var(--data);
	padding-left: 20px;
}

.prose strong {
	font-weight: 600;
	color: var(--ink);
}

.prose code {
	font-family: var(--font-mono);
	font-size: 14px;
	background: var(--surface-code);
	border: 1px solid var(--rule);
	border-radius: var(--radius-control);
	padding: 1px 5px;
}

.prose pre {
	background: var(--surface-code);
	border: 1px solid var(--rule);
	border-radius: var(--radius-surface);
	padding: 16px 18px;
	overflow-x: auto;
	font-size: 14px;
}

.prose pre code {
	background: none;
	border: none;
	padding: 0;
}

/* Sidebar ---------------------------------------------------------------- */

/* No rule along the top on desktop. With .sheet carrying no top padding the
 * sidebar's border would sit one pixel under the header's own border and read
 * as a doubled line. It comes back at the breakpoint, where the sidebar stacks
 * underneath the content and genuinely needs dividing from it. */
.sidebar {
	font-size: 15px;
}

.sidebar__block + .sidebar__block { margin-top: 30px; }

.sidebar__title {
	margin: 0 0 12px;
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: 0.06em;
	font-weight: 500;
	color: var(--ink-faint);
}

.sidebar ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.sidebar li { color: var(--ink-muted); }

.sidebar a {
	color: var(--ink-list);
	text-decoration: none;
}

.sidebar a:hover { color: var(--accent); }

.sidebar__note {
	margin: 0 0 12px;
	color: var(--ink-muted);
	font-size: 14.5px;
	text-wrap: pretty;
}

.sidebar__note--spaced { margin-top: 18px; }

.cta-after { margin: 26px 0 0; }

.tag-cloud {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 8px;
}

.tag-cloud a {
	display: inline-block;
	border: 1px solid var(--rule);
	border-radius: var(--radius-control);
	padding: 4px 10px;
	font-size: 13.5px;
	color: var(--ink-secondary);
	background: var(--surface);
}

.tag-cloud a:hover {
	border-color: var(--accent-border);
	background: var(--accent-tint);
	color: var(--accent);
}

/* Search form ------------------------------------------------------------ */

.search-form {
	display: flex;
	gap: 8px;
	max-width: 420px;
}

.search-form__field {
	flex: 1 1 auto;
	min-width: 0;
	font-family: inherit;
	font-size: 15px;
	color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--radius-control);
	padding: 9px 12px;
}

.search-form__field:focus-visible { border-color: var(--accent); }

.search-form__submit {
	flex: none;
	font-family: inherit;
	font-size: 15px;
	background: var(--accent);
	color: #fff;
	border: 1px solid transparent;
	border-radius: var(--radius-control);
	padding: 9px 16px;
	cursor: pointer;
}

.search-form__submit:hover { background: var(--accent-hover); }

/* Pagination ------------------------------------------------------------- */

.pagination {
	margin-top: 36px;
	padding-top: 22px;
	border-top: 1px solid var(--rule);
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 15px;
}

.pagination .page-numbers {
	display: inline-block;
	border: 1px solid var(--rule);
	border-radius: var(--radius-control);
	padding: 7px 13px;
	text-decoration: none;
	color: var(--ink-secondary);
	background: var(--surface);
}

.pagination a.page-numbers:hover {
	border-color: var(--accent-border);
	background: var(--accent-tint);
	color: var(--accent);
}

.pagination .page-numbers.current {
	border-color: var(--accent);
	background: var(--accent);
	color: #fff;
}

.pagination .page-numbers.dots {
	border-color: transparent;
	background: none;
}

/* Nothing found, and 404 -------------------------------------------------- */

.notfound { max-width: var(--measure-body); }

.notfound .search-form { margin-top: 26px; }

/* Footer ----------------------------------------------------------------- */

.site-footer {
	border-top: 1px solid var(--rule);
	background: var(--surface-footer);
	margin-top: 80px;
}

.site-footer__row {
	max-width: var(--measure-page);
	margin: 0 auto;
	padding: 26px var(--gutter);
	display: flex;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	font-size: 14px;
	color: var(--ink-muted);
}

.site-footer__company {
	color: var(--ink-muted);
	text-decoration: underline;
	text-decoration-color: var(--rule-underline);
	text-underline-offset: 2px;
}

.site-footer__company:hover { color: var(--ink); }

.site-footer__links {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
}

.site-footer__links a {
	color: var(--ink-muted);
	text-decoration: none;
}

.site-footer__links a:hover { color: var(--ink); }

.site-footer__note {
	max-width: var(--measure-page);
	margin: 0 auto;
	padding: 0 var(--gutter) 26px;
	font-size: 13.5px;
	color: var(--ink-faint);
	text-wrap: pretty;
}

/* ========================================================================
 * The single breakpoint. Each declaration carries the desktop value it
 * replaces. --gutter (40px -> 20px) is handled in tokens.css.
 * ===================================================================== */

@media (width < 900px) {
	html { scroll-padding-top: 68px; }              /* was 76px */

	.hero    { padding-top: 40px; }                 /* was 80px */
	.section { padding-top: 56px; }                 /* was 72px */

	.site-header__bar { padding-block: 14px; gap: 16px; }  /* was 18px */
	.site-footer__row { padding-block: 24px; }      /* was 26px */
	.site-footer__note { padding-bottom: 24px; }    /* was 26px */
	.demo-banner__inner { padding-block: 9px; }     /* was 10px */

	.h1 { font-size: 32px; }                        /* was 42px */
	.entry__title { font-size: 21px; }              /* was 24px */

	.hero__grid,
	.content-grid {
		grid-template-columns: minmax(0, 1fr);      /* was two columns */
		gap: 32px;                                  /* was 56px */
	}

	.split { grid-template-columns: minmax(0, 1fr); }   /* was two columns */

	/* The divider between the two columns is a right border, which has nothing
	 * to divide once they stack. It becomes a bottom border. */
	.split__col--lead {
		border-right: none;
		border-bottom: 1px solid var(--rule);
	}

	.brand__name { font-size: 18px; }               /* was 19px */

	.sidebar {
		border-top: 1px solid var(--rule);
		padding-top: 26px;                          /* was 22px */
	}

	.nav-desktop { display: none; }
	.nav-toggle { display: flex; }
	.nav-mobile[data-open='true'] { display: flex; }
}