/*
 * 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);
}

/* Mozaic HUM has Light (300) and SemiBold (600) only: "bolder" than 300 stays Light. */
.entry-content :is(strong, b) {
	font-weight: 600;
}

.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);
}

/* 4. Landing pages --------------------------------------------------------------------------- */

/* Links inside the landing pages' data (an FAQ answer, a review quote, a data page's text: its
   elements carry data-rich) come from PHP strings, out of the build's reach: they read as links,
   like the ones in the pages' running text. The home page's FAQ and reviews hold no links. */
.ozp-faq__p a,
.ozp-reviews blockquote a,
[data-rich] a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

/* The figure in a data landing page's hero line (Revive's 19.2%). */
.ozp-lp-hero__lede strong {
	font-weight: 600;
	color: var(--oz-space-off-white);
}

/* 5. Blog ----------------------------------------------------------------------------------- */

/* The featured image fills its 3:2 frame (blog-grid: WordPress prints the <img>). */
.ozp-blog-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The numbered pages under the posts (paginate_links()), as round chips; the current one in ink. */
.ozp-blog-pages :is(a, span) {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--border-hairline);
	border-radius: 999px;
	font: 600 14px/1 var(--font-body);
	color: var(--fg-2);
	text-decoration: none;
}

.ozp-blog-pages .current {
	background: var(--fg-1);
	border-color: var(--fg-1);
	color: var(--surface-card);
}

/* 6. Brand system --------------------------------------------------------------------------- */

/* Two swatches a row on phones (one at the grid's 200 px minimum), so the palette stays a palette. */
@media (max-width: 520px) {
	.ozp-bs-swatches {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
}

/* 7. Ozone Membership ----------------------------------------------------------------------- */

/* The side-by-side table's last row: the card's edge is its rule. */
.ozp-ss-row:last-child {
	border-bottom: 0;
}

/* The side-by-side table on phones: each row stacks, each answer under its column's name. */
@media (max-width: 760px) {
	.ozp-ss-row {
		grid-template-columns: minmax(0, 1fr);
	}

	.ozp-ss-row--head {
		display: none;
	}

	.ozp-ss-row__them::before,
	.ozp-ss-row__us::before {
		display: block;
		margin-bottom: 4px;
		font: 600 11px/1.2 var(--font-body);
		letter-spacing: .14em;
		text-transform: uppercase;
	}

	.ozp-ss-row__them::before {
		content: "A traditional retainer";
		color: var(--fg-3);
	}

	.ozp-ss-row__us::before {
		content: "Ozone Membership";
		color: var(--oz-denim-azure);
	}
}

/* 8. Projects ------------------------------------------------------------------------------- */

/* A portfolio project (single-project.html): its content as wide as the column, so the legacy two
   columns (the text, then the work) sit side by side from 782 px (core columns) and stack below. */
.entry-content--wide {
	max-width: none;
	margin-top: 40px;
}

.entry-content--wide > .wp-block-columns {
	gap: clamp(32px, 5vw, 72px);
	align-items: flex-start;
	margin: 0;
}

.entry-content--wide .wp-block-column > * + * {
	margin-top: 16px;
}

.entry-content--wide .wp-block-column > p {
	max-width: 600px;
	margin-bottom: 0;
	font: 300 clamp(15px, 1.25vw, 18px)/1.45 var(--font-body);
	color: var(--fg-2);
}

.entry-content--wide .wp-block-image img {
	display: block;
	border-radius: 20px;
}

/* The post's footer (post-footer): its categories in the link colour. */
.ozp-post-footer__terms a {
	color: var(--fg-link);
	text-decoration: none;
}

.ozp-post-footer__terms a:hover {
	color: var(--fg-link-hover);
}