/*
 * port.css: what the port adds on top of the design's own CSS (site.css, verbatim from the export).
 *   1. WordPress traps: what WordPress puts around the design's markup, undone.
 *   2. Port rules: the design's selectors re-aimed at block markup, design defects fixed.
 *   3. Generic templates (page, post, blog index, 404) in the design's type and colours.
 * Every rule says why it is here.
 */

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

/* Template parts wrap the design's header and footer in a <div>: it gets no box of its own, so
   absolute, fixed and sticky 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 cream page 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 header would slide under it; below 601 px the bar scrolls away. The
   Book page's sticky pricing card sits under the header (102 px in the design), so it moves too. */
.admin-bar .site-header:not(.site-header--overlay) {
	top: var(--wp-admin--admin-bar--height, 0px);
}

.admin-bar .pricing {
	top: calc(102px + var(--wp-admin--admin-bar--height, 0px));
}

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

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

/* Pages without a design of their own (the Sample Page, any page added later), journal posts and
   the 404: the design's page-head on top, body copy in the design's about-page type. */
/* padding-block only: on an element that is also the design's .wrap, a padding shorthand would
   remove the wrap's side gutters (the category archive's cards touched the screen edges). */
.entry {
	padding-block: 72px 120px;
}

.entry-content {
	max-width: 760px;
}

.entry-content > * + * {
	margin-top: 1.1em;
}

.entry-content p,
.entry-content li {
	font-size: 16.5px;
	line-height: 1.75;
	color: rgba(12, 10, 9, 0.74);
}

.entry-content h2 {
	margin-top: 1.6em;
	font-weight: 300;
	font-size: 32px;
	line-height: 1.15;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.entry-content h3 {
	margin-top: 1.4em;
	font-weight: 300;
	font-size: 22px;
	line-height: 32px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.entry-content a,
.page-head__lede a {
	text-decoration: underline;
	text-decoration-color: rgba(12, 10, 9, 0.3);
	text-underline-offset: 3px;
}

.entry-content ul {
	padding-left: 1.2em;
	list-style: disc;
}

.entry-content ol {
	padding-left: 1.2em;
	list-style: decimal;
}

.entry-content blockquote {
	font-family: var(--serif);
	font-size: 28px;
	line-height: 1.3;
}

.entry-content img {
	height: auto;
}

/* Journal posts (no article page in the export): the lead story's title, dek and image under the
   card's meta line, then the body in the about-page type and a way back. */
.post-head__title {
	max-width: 900px;
}

.post-head__dek {
	max-width: 640px;
}

.post-head__date {
	margin-top: 24px;
	padding-top: 0;
}

.post-head__media {
	margin-top: 48px;
	max-width: 900px;
}

.post-back {
	margin-top: 64px;
}

/* Category, date and search pages: the Journal's grid, below a flush page head. */
.post-archive .entry {
	padding-block-start: 0;
}