/*
 * port.css: what the port adds on top of the design's own CSS (site.css: the design system, verbatim;
 * pages.css: the export's inline styles as classes, built by .reblock/tools/build.py).
 *   1. WordPress traps: what WordPress puts around the design's markup, undone.
 *   2. Port rules: logged-in visitors (the admin bar).
 *   3. Generic templates (a page, a post, archives, search, the 404) in the design's type and colours.
 * Every rule says why it is here. Rules the export's script decided (breakpoints, open states) are
 * at the end of pages.css, next to the classes they change.
 */

/* 1. WordPress traps ------------------------------------------------------------------------ */

/* Template parts wrap the design's header and footer in a <div>: it gets no box of its own, so
   the sticky and fixed headers behave as in the export. */
.wp-site-blocks > .wp-block-template-part {
	display: contents;
}

/* Block themes put margin-block-start between header, main and footer. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* A page shorter than the screen (the 404, an empty search) keeps the footer at the bottom instead
   of showing the page background under it. The design's pages are all taller than the screen: no
   change there (measured). */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

/* 2. Port rules ------------------------------------------------------------------------------ */

/* Logged-in visitors: WordPress's admin bar is fixed at the top from 601 px up (32 px, 46 px below
   783 px), so the sticky and fixed headers would slide under it, and the case studies' facts column
   with them. Below 601 px the bar scrolls away. */
.admin-bar .ozp-header {
	top: var(--wp-admin--admin-bar--height, 0px);
}

.admin-bar .ozp-case__aside {
	top: calc(88px + var(--wp-admin--admin-bar--height, 0px));
}

@media (max-width: 600px) {
	.admin-bar .ozp-header {
		top: 0;
	}
}

/* 3. Generic templates ----------------------------------------------------------------------- */

/* Pages without a design of their own (the Sample Page, any page added later), posts, archives,
   search and the 404: the Work page's light header and footer around the export's 1240 px column,
   its intro's spacing and heading, and body copy in the design system's type. padding-block only:
   on .site-wrap a padding shorthand would remove the column's side gutters. */
.site-main--page,
.site-main--single,
.site-main--index,
.site-main--404 {
	padding-block: clamp(56px, 7vw, 88px) clamp(64px, 8vw, 96px);
}

.site-wrap {
	box-sizing: content-box;
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: clamp(20px, 4vw, 48px);
}

/* The size of the narrow hero's heading on phones (40 px at 390), 56 px from 560 px up: a long
   word ("Uncategorized") would not fit a phone at 56 px. */
.entry-title {
	margin: 0;
	max-width: 820px;
	font: 300 clamp(40px, 10vw, 56px)/1.04 var(--font-heading);
	letter-spacing: -.025em;
	text-wrap: balance;
	overflow-wrap: break-word;
}

.entry-title a {
	color: inherit;
}

.entry-terms,
.entry-date,
.post-list__date {
	display: block;
	font: 600 12px/1.2 var(--font-body);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--fg-3);
}

.entry-terms {
	margin-bottom: 16px;
}

.entry-terms a {
	color: inherit;
}

.entry-date {
	margin-top: 16px;
}

.entry-image {
	margin: 40px 0 0;
	max-width: 880px;
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.entry-image img {
	display: block;
	width: 100%;
	height: auto;
}

.entry-content {
	margin-top: 40px;
	max-width: 720px;
	font: 300 16px/1.5 var(--font-body);
	color: var(--fg-2);
}

.entry-content > * {
	margin-block: 0;
}

.entry-content > * + * {
	margin-block-start: 1em;
}

.entry-content :is(h2, h3, h4) {
	margin-block-start: 1.6em;
	color: var(--fg-1);
	text-wrap: balance;
}

.entry-content h2 {
	font: 300 32px/1.1 var(--font-heading);
	letter-spacing: -.02em;
}

.entry-content h3 {
	font: 400 24px/1.15 var(--font-heading);
}

.entry-content h4 {
	font: 600 16px/1.3 var(--font-body);
}

/* Links in running text look like links (the export's pages let theirs inherit). */
.entry-content a,
.site-main--404 p a {
	color: var(--fg-link);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.entry-content a:hover,
.site-main--404 p a:hover {
	color: var(--fg-link-hover);
}

.entry-content :is(ul, ol) {
	padding-left: 1.2em;
}

.entry-content blockquote {
	margin-inline: 0;
	padding-left: 20px;
	border-left: 1px solid var(--border-hairline);
	font: 300 22px/1.3 var(--font-special);
	color: var(--fg-1);
}

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

.site-main--404 p {
	margin: 24px 0 0;
	max-width: 600px;
	font: 300 15px/1.3 var(--font-body);
	color: var(--fg-2);
}

/* Blog index, archives and search: each post as a white card, like the Work page's case study
   links. */
.post-list {
	margin-top: 40px;
}

.post-list .post-list__items {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.post-list .post-list__items > li {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 20px 22px;
	background: #fff;
	border: 1px solid rgba(9, 11, 13, .08);
	border-radius: 20px;
}

.post-list__title {
	margin: 0;
	font: 400 34px/1 var(--font-special);
	letter-spacing: -.03em;
}

.post-list__title a {
	color: var(--fg-1);
}

.post-list__excerpt,
.post-list__excerpt p {
	margin: 0;
	font: 300 15px/1.3 var(--font-body);
	color: var(--fg-2);
}

.post-list__pagination {
	display: flex;
	gap: 16px;
	margin-top: 40px;
	font: 600 14px/1 var(--font-body);
}

.post-list__pagination a {
	color: var(--fg-link);
}