/*
 * Hellcat Press: the paper art and page layout that theme.json can't express.
 * Colors, fonts and the type scale live in theme.json.
 *
 * Written with native CSS nesting. Nested rules always start with "&", which
 * every browser that supports nesting understands.
 */

:root {
	--hellcat-corner-room: 230px; /* Width of the paper corner. */
	/* Indent that clears the corner, shrinking to 0 once the centered column is clear of it. */
	--hellcat-indent: clamp(0px, calc(var(--hellcat-corner-room) - (100vw - var(--wp--style--global--wide-size)) / 2), var(--hellcat-corner-room));
	--hellcat-sidebar-w: 300px;
	--hellcat-light-ink: rgba(240, 240, 240, 0.85);
	--hellcat-emboss: -1px 1px 1px rgba(10, 10, 10, 0.9), 1px 0 1px #fafafa;
	/* Each texture sits on its own average colour, so nothing shows through
	   while the image is still loading. */
	--hellcat-black-paper: #161616 url(../images/black_paper.webp) 0 0 / 400px 400px;
	--hellcat-light-paper: #f1eddc url(../images/ricepaper_v3.webp) 0 0 / 250px 250px;

	@media (min-resolution: 2dppx) {
		--hellcat-black-paper: #161616 url(../images/black_paper_@2X.webp) 0 0 / 400px 400px;
		--hellcat-light-paper: #f1eddc url(../images/ricepaper_v3_@2X.webp) 0 0 / 250px 250px;

		& body {
			background-image: url(../images/ricepaper_@2X.webp);
		}
	}

	@media (max-width: 781px) {
		--hellcat-corner-room: 120px;
	}
}

/* Moving between pages: keep showing the old page until the new one is ready,
   then cross-fade, instead of flashing a blank page (Chrome, Edge, Safari 18.2+). */
@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}
}

/* The header and footer bands are wider than the viewport so their rotated edges never show. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
	overflow-x: clip;

	& > main {
		flex: 1 0 auto;
	}
}

/* ---------- Letterpress type ---------- */

p {
	text-shadow: 1px 1px #ddd;
	overflow-wrap: break-word;
	hyphens: auto;
	font-feature-settings: "liga", "dlig";
}

h1, h2, h3, h4, h5, h6 {
	text-shadow: -0.03em -0.02em 0.05em #aaa, 0.1em 0.05em 0.1em #eee;
}

:where(.hellcat-content) a:not(.wp-element-button) {
	text-underline-offset: 0.15em;
}

@media (prefers-reduced-motion: no-preference) {
	.hellcat-content p a {
		display: inline-block;
		transition: transform 0.2s;

		&:hover {
			transform: translateY(-3px);
		}
	}
}

:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ---------- Header: black paper band, rice paper corner, cat ---------- */

.hellcat-header {
	position: relative;
	isolation: isolate;
	padding-inline: var(--wp--style--root--padding-left, 16px) var(--wp--style--root--padding-right, 16px);
	color: var(--hellcat-light-ink);
	text-shadow: var(--hellcat-emboss);
	text-rendering: optimizeLegibility;

	&::before {
		content: "";
		position: absolute;
		z-index: -1;
		top: -12px;
		left: -50px;
		width: calc(100% + 200px);
		height: calc(100% + 6px);
		background: var(--hellcat-black-paper);
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
		transform: rotate(-0.6deg);
	}

	& p {
		color: inherit;
		text-shadow: inherit;
	}

	& .hellcat-wordmark a {
		color: inherit;
		text-decoration: none;
	}
}

.hellcat-corner {
	position: absolute;
	z-index: 3;
	top: 0;
	left: 0;
	width: 230px;
	height: 250px;
	margin: 0;
	isolation: isolate;
	pointer-events: none;

	/* A sheet of rice paper peeled over the top-left corner of the page. */
	&::before {
		content: "";
		position: absolute;
		top: -350px;
		left: -370px;
		width: 600px;
		height: 600px;
		background: var(--hellcat-light-paper);
		box-shadow: 0 0 12px 12px rgba(30, 30, 30, 0.3);
		transform: rotate(14deg);
	}

	&::after {
		content: "";
		position: absolute;
		top: 17px;
		left: 40px;
		width: 117px;
		height: 225px;
		background: url(../images/hellcat_logo_color_sm.png) no-repeat 0 0 / contain;
		opacity: 0.6;
		mix-blend-mode: multiply;
	}

	@media (max-width: 781px) {
		transform: scale(0.52);
		transform-origin: 0 0;
	}
}

.hellcat-masthead {
	position: relative;
	z-index: 1;
	max-width: var(--wp--style--global--wide-size);
	min-height: 150px;
	margin-inline: auto;
	padding-block: 20px 16px;
	padding-inline-start: var(--hellcat-indent);
	gap: 1rem 2rem;

	@media (max-width: 781px) {
		min-height: 110px;
		padding-block: 14px 12px;
	}
}

.hellcat-wordmark {
	flex-shrink: 0;
	width: min-content; /* "Hellcat / Press" on two lines, like the old logo. */
	margin: 0;
	hyphens: none;
}

/* ---------- Navigation ---------- */

.hellcat-header .wp-block-navigation.hellcat-nav {
	color: inherit;

	& .wp-block-navigation__container {
		gap: 0.25em 30px;

		@media (min-width: 600px) {
			transform: rotate(-0.6deg);
		}
	}

	& .wp-block-navigation-item__content {
		color: inherit;
	}

	& .wp-block-navigation-item__content:hover,
	& .current-menu-item > .wp-block-navigation-item__content {
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.2em;
	}

	/* Submenus drop down as a sheet of rice paper (formerly the jQuery "home sub nav"). */
	& .wp-block-navigation__submenu-container {
		min-width: 260px;
		padding-block: 0.4em;
		border: 0;
		background: var(--hellcat-light-paper);
		color: var(--wp--preset--color--ink);
		font-size: 20px;
		letter-spacing: 1px;
		text-shadow: none;
		box-shadow: 2px 2px 15px -3px #333;
		transform: rotate(0.15deg);

		& .wp-block-navigation-item__content {
			padding: 0.35em 1em;
		}
	}

	/* Mobile overlay menu. */
	& .wp-block-navigation__responsive-container.is-menu-open {
		background: var(--hellcat-light-paper);
		color: var(--wp--preset--color--ink);
		text-shadow: none;
	}

	& .is-menu-open {
		& .wp-block-navigation__container {
			transform: none;
		}

		& .wp-block-navigation__submenu-container {
			background: none;
			box-shadow: none;
			transform: none;
		}
	}
}

/* ---------- Page layout ---------- */

.hellcat-main {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--hellcat-sidebar-w);
	gap: var(--wp--preset--spacing--60);
	align-items: start;
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--wp--style--global--wide-size) + var(--wp--style--root--padding-left, 16px) + var(--wp--style--root--padding-right, 16px));
	margin-inline: auto;
	/* Share the wordmark's left edge so the paper corner never covers the first heading. */
	padding: var(--wp--preset--spacing--50) var(--wp--style--root--padding-right, 16px) var(--wp--preset--spacing--60) calc(var(--wp--style--root--padding-left, 16px) + var(--hellcat-indent));

	&.is-single-column {
		grid-template-columns: minmax(0, 860px);
	}

	& > * {
		margin-block: 0;
	}

	@media (max-width: 1200px) {
		grid-template-columns: minmax(0, 1fr);
	}

	/* The shrunken corner hangs below the band; start content under its tip instead of indenting. */
	@media (max-width: 781px) {
		padding-block-start: 64px;
		padding-inline-start: var(--wp--style--root--padding-left, 16px);
	}
}

.hellcat-page-title {
	margin-block: 0 0.5em;
}

/* ---------- Posts ---------- */

.hellcat-entries > li + li {
	margin-block-start: var(--wp--preset--spacing--40);
}

.hellcat-entry {
	padding-block-end: var(--wp--preset--spacing--40);
	border-block-end: 2px groove var(--wp--preset--color--rule);
}

/* Kept as a flat list: nesting a selector list would raise both to the
   higher specificity. */
.hellcat-entries > li:last-child .hellcat-entry,
.hellcat-entry--page {
	border-block-end: 0;
}

.hellcat-entry {
	& > * {
		margin-block: 0.5em 0;
	}

	& > .wp-block-post-title {
		margin-block-start: 0;
	}

	& .wp-block-post-title a {
		color: inherit;
	}

	& > .wp-block-post-content {
		margin-block-start: 1em;
	}
}

.hellcat-entry--excerpt {
	display: flow-root;
}

.hellcat-entry-thumb {
	float: inline-start;
	margin: 0 1.25em 0.5em 0 !important;
}

.hellcat-byline {
	gap: 0.3em;
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--small);

	& p,
	& > * {
		margin: 0;
	}
}

.hellcat-post-nav {
	margin-block-start: var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--fell);
	font-size: var(--wp--preset--font-size--large);
}

.hellcat-pagination {
	margin-block-start: var(--wp--preset--spacing--50);
	font-family: var(--wp--preset--font-family--fell);
	font-size: var(--wp--preset--font-size--large);
}

.hellcat-search {
	max-width: 32rem;
}

/* ---------- Post content ---------- */

.wp-block-post-content {
	& img {
		max-width: 100%;
		height: auto;
	}

	& .alignleft {
		float: left;
		margin: 0.3em 1.25em 1.25em 0;
	}

	& .alignright {
		float: right;
		margin: 0.3em 0 1.25em 1.25em;
	}

	/* Too narrow to wrap text around a photo: stack it instead. */
	@media (max-width: 600px) {
		& .alignleft,
		& .alignright {
			float: none;
			margin-inline: auto;
			width: fit-content;
		}
	}

	/* Captioned photos sit in a white print border, as they always have. */
	& .wp-block-image:has(figcaption) {
		padding: 5px 5px 0;
		border: 1px solid #f0f0f0;
		background: #fff;
		box-sizing: border-box;

		&.aligncenter {
			width: fit-content;
			max-width: 100%;
		}
	}

	& .wp-block-image figcaption {
		margin: 0.4em 0;
		padding-inline: 4px;
		text-align: center;
	}

	& .wp-block-gallery.has-nested-images figure.wp-block-image {
		flex-direction: column;
		justify-content: flex-start;

		& img {
			width: 100%;
		}

		/* Gallery captions go under the photo, not over it: some are a few lines long. */
		& figcaption {
			position: static;
			max-height: none;
			margin: 0.4em 0;
			padding: 0 4px;
			overflow: visible;
			background: none;
			color: inherit;
			text-shadow: none;
			font-size: var(--wp--preset--font-size--small);
		}

		&:has(figcaption)::before {
			content: none;
		}
	}

	/* Galleries and rules start below any floated photo. */
	& > .wp-block-gallery,
	& > .wp-block-separator {
		clear: both;
	}

	&::after {
		content: "";
		display: table;
		clear: both;
	}
}

/* Anthologies and Reviews pages: one <article> per book or review, ruled off
   like the old separators. Both classes have the same specificity, so the
   selector list is safe to nest under. */
.hellcat-anthology,
.hellcat-review {
	display: flow-root; /* Keeps each floated cover inside its own article. */
	padding-block-end: var(--wp--preset--spacing--40);
	border-block-end: 2px groove var(--wp--preset--color--rule);

	& + & {
		margin-block-start: var(--wp--preset--spacing--40);
	}

	/* Titles: one step down from the theme's large h2. */
	& > .wp-block-heading {
		margin-block: 0 0.4em;
		font-size: var(--wp--preset--font-size--x-large);
	}

	&:last-child {
		padding-block-end: 0;
		border-block-end: 0;
	}
}

/* Review quotes in the old typewriter style. */
.wp-block-quote.is-style-typewriter {
	margin-inline: 0;
	padding-inline-start: 1.25em;
	border-inline-start: 3px solid var(--wp--preset--color--blood);
	color: var(--wp--preset--color--blood);
	font-family: "Courier New", Courier, monospace;

	& a,
	& a:visited {
		color: inherit;
	}

	& cite {
		display: block;
		margin-top: 0.5em;
		font-style: normal;
		font-size: var(--wp--preset--font-size--small);

		&::before {
			content: "— ";
		}
	}
}

/* ---------- Comments ---------- */

.hellcat-comments {
	margin-block-start: var(--wp--preset--spacing--50);
}

.hellcat-comment {
	gap: 1em;
	margin-block-end: var(--wp--preset--spacing--40);
}

.hellcat-comment-meta {
	gap: 0.6em;
	font-size: var(--wp--preset--font-size--small);

	& > * {
		margin: 0;
	}
}

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

.hellcat-sidebar {
	& ul {
		padding-inline-start: 0;
		list-style: none;
	}

	& li + li {
		margin-block-start: 0.35em;
	}
}

.hellcat-sidebar-inner > :first-child {
	margin-block-start: 0;
}

/* ---------- Store catalog ---------- */

.hellcat-catalog {
	gap: 20px;
	margin-block-start: 12px;
}

.hellcat-catalog-item {
	gap: 0.5em;
	padding: 20px;
	border-radius: 4px;
	background: var(--hellcat-light-paper);
	box-shadow: 1px 1px 2px 2px #ddd;
}

.hellcat-catalog-cover {
	margin: 0 0 0.5em;

	& img {
		display: block;
		width: 240px;
		max-width: 100%;
		height: auto;
		aspect-ratio: 1;
		object-fit: cover;
	}
}

.hellcat-catalog-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
}

.hellcat-catalog-price {
	margin: 0;
}

/* Stamped "Sold out" label in place of the Buy now button. */
.hellcat-catalog-sold-out {
	margin: 0;
	padding: 0.35em 1em;
	border: 2px solid var(--wp--preset--color--blood);
	color: var(--wp--preset--color--blood);
	font-family: var(--wp--preset--font-family--fell);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	transform: rotate(-4deg);
}

/* ---------- Footer: black paper band ---------- */

.hellcat-footer {
	position: relative;
	isolation: isolate;
	overflow: clip;
	min-height: 100px;
	padding: 42px var(--wp--style--root--padding-right, 16px) 20px var(--wp--style--root--padding-left, 16px);
	color: var(--hellcat-light-ink);
	text-shadow: var(--hellcat-emboss);

	&::before {
		content: "";
		position: absolute;
		z-index: -1;
		top: 14px;
		left: -100px;
		width: calc(100% + 200px);
		height: calc(100% + 40px);
		background: var(--hellcat-black-paper);
		transform: rotate(0.7deg);
	}

	& p {
		color: inherit;
		text-shadow: inherit;
	}
}

.hellcat-footer-inner {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

.hellcat-copyright {
	margin: 0;
	font-family: var(--wp--preset--font-family--fell);
	font-size: var(--wp--preset--font-size--large);
}